.homepage-media { max-width: 1160px; margin: 60px auto; padding: 24px; color: #f5f7fb; background: var(--panel, #0d1c31); border: 1px solid var(--line, #24364b); border-radius: 12px; }
.homepage-media h2 { font-size: clamp(28px,4vw,44px); line-height: 1.15; margin: 10px 0 18px; }
.homepage-media-album-heading { margin: 0 0 18px; color: #d8e9f8; font-size: clamp(18px,2.4vw,24px); font-weight: 800; }
.homepage-media-viewport { touch-action: pan-y; }
.homepage-media-slide[hidden] { display: none; }
.homepage-media-picture,
.homepage-media-video { position: relative; aspect-ratio: 16/9; background: #051221; display: grid; place-items: center; overflow: hidden; border-radius: 8px; }
.homepage-media-picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.homepage-media-video.is-portrait { aspect-ratio: 9/16; width: min(430px,100%); margin-inline: auto; }
.homepage-media-video-thumbnail,
.homepage-media-video-placeholder,
.homepage-media-player,
.homepage-media-youtube { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.homepage-media-video-thumbnail { z-index: 1; display: block; object-fit: cover; }
.homepage-media-video-placeholder { z-index: 1; background: radial-gradient(circle at center,#184061,#051221 68%); }
.homepage-media-player { z-index: 2; }
.homepage-media-youtube { display: block; }
.homepage-media-play { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; min-width: 150px; min-height: 96px; padding: 15px 20px; border: 1px solid #a6e8f4; border-radius: 10px; color: #fff; background: #041525df; font: inherit; cursor: pointer; }
.homepage-media-play[hidden] { display: none; }
.homepage-media-play span { font-size: 36px; color: #55e5ee; line-height: 1; }
.homepage-media-play strong { font-size: 14px; }
.homepage-media-video-status { position: absolute; z-index: 3; bottom: 8px; left: 12px; right: 12px; margin: 0; padding: 6px 9px; color: #e9f5ff; background: #03111dcc; border-radius: 5px; font-size: 12px; line-height: 1.4; text-align: center; pointer-events: none; }
.homepage-media-video.is-playing .homepage-media-video-thumbnail { visibility: hidden; }
.homepage-media-video-link { align-content: center; gap: 12px; padding: 24px; box-sizing: border-box; text-align: center; }
.homepage-media a { color: #77f0fc; }
.homepage-media-copy h3 { margin: 20px 0 8px; font-size: clamp(20px,3vw,28px); }
.homepage-media-copy p { color: #c7d7e7; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.homepage-media-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.homepage-media-controls button { min-height: 44px; min-width: 44px; border: 1px solid #77f0fc; border-radius: 6px; background: #062638; color: #fff; font: inherit; cursor: pointer; }
.homepage-media-indicators { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.homepage-media-controls [aria-current=true] { background: #55e5ee; color: #052034; font-weight: 900; }
.homepage-media-position { text-align: center; color: #c7d7e7; font-size: 14px; }
.homepage-media-gallery-link { margin: 16px 0 0; text-align: center; }
.homepage-media-gallery-link a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 16px; border: 1px solid #77f0fc; border-radius: 6px; text-decoration: none; font-weight: 800; }
.homepage-media :focus-visible { outline: 3px solid #ff438e; outline-offset: 4px; }
@media(max-width:600px){
  .homepage-media{margin:32px 16px;padding:16px}
  .homepage-media-controls{gap:8px}
  .homepage-media-video-status{font-size:11px}
  .homepage-media-indicators{gap:4px}
}
@media(prefers-reduced-motion:reduce){.homepage-media *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}