/* Module overview and detail pages. */
.module-catalog { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.module-catalog .module-card h2 { font-size: 25px; }
.module-catalog .module-card > p { margin-bottom: 24px; }
.module-catalog .module-links { margin-top: auto; }
.module-catalog-link { overflow: hidden; cursor: pointer; }
.module-catalog-link:hover { border-color: var(--accent); }
.module-catalog-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.module-catalog-link:hover .module-links,
.module-catalog-link:focus-visible .module-links { text-decoration: underline; }
.module-catalog-image { aspect-ratio: 16 / 9; margin: -30px -30px 24px; background: var(--bg-primary); }
.module-catalog-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.module-status { font-size: 12px; color: var(--accent-light); margin-bottom: 8px; }
.module-note { color: var(--text-secondary); max-width: 780px; margin: 28px 0; }
.module-note a, .module-requirements a { color: var(--accent); text-decoration: underline; }
.module-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.module-detail-copy { max-width: 800px; }
.module-detail-layout .module-card { height: auto; }
.module-detail-copy h2 { font-size: 24px; margin-bottom: 16px; }
.module-detail-copy > p { color: var(--text-secondary); margin-bottom: 20px; }
.module-detail-install h2 { font-size: 24px; }
.module-detail-install .module-install { margin-top: 20px; }
.module-detail-install > p { margin-bottom: 16px; }
.module-detail-install ol { padding-left: 20px; margin: 16px 0; color: var(--text-secondary); }
.module-detail-install li { margin-bottom: 10px; }
.module-videos { margin-top: 40px; }
.module-videos h2 { font-size: 26px; }
.module-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin-top: 20px; }
.module-video { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.module-video-image { position: relative; aspect-ratio: 16 / 9; background: var(--bg-darker); }
.module-video-image img { width: 100%; height: 100%; object-fit: cover; }
.module-video-play { position: absolute; left: 16px; bottom: 14px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--bg-overlay); color: var(--accent); font-size: 13px; }
.module-video-copy { padding: 20px; }
.module-video-copy h3 { font-size: 18px; margin: 8px 0; }
.module-video-copy p, .module-video-copy time { font-size: 13px; color: var(--text-secondary); }
.module-video-kind { color: var(--accent); font-size: 12px; font-weight: 600; }
.module-breadcrumb { margin-bottom: 24px; color: var(--accent); font-size: 14px; }
@media (max-width: 540px) { .module-catalog-image { margin: -22px -22px 20px; } }