/* ==========================================================================
   Aegis video bands. Vertical reel players with muted autoplay and captions
   burned into the source. Loaded after contrast.css so the tokens below
   resolve; fallbacks are supplied for safety.
   ========================================================================== */

.vband { padding: 76px 60px; }
.vband-dark  { background: var(--charcoal-dark, #26221E); }
.vband-cream { background: var(--cream-light, #F7F2EA); }
.vband-mid   { background: var(--cream-mid, #F0E9DE); }

.vband-inner { max-width: 1180px; margin: 0 auto; }

/* Split layout: copy on the left, one player on the right */
.vband-split { display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: center; }

/* Row layout: heading above, players side by side */
.vband-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.vrow { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: flex-start; }
.vrow .vitem { width: 320px; max-width: 100%; }

/* Typography */
.vband-label { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.vband-title { font-family: var(--font-display, serif); font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 400; line-height: 1.2; margin-bottom: 22px; }
.vband-text  { font-size: 1.02rem; line-height: 1.75; margin-bottom: 26px; }
.vitem-title { font-family: var(--font-display, serif); font-size: 1.15rem; font-weight: 400; margin: 18px 0 8px; line-height: 1.35; }
.vitem-text  { font-size: 0.93rem; line-height: 1.65; }

.vband-dark .vband-label { color: var(--gold-on-dark, #E4CAA0); }
.vband-dark .vband-title,
.vband-dark .vitem-title { color: var(--cream-light, #F7F2EA); }
.vband-dark .vband-text,
.vband-dark .vitem-text  { color: var(--stone-on-dark, #D8D2C9); }

.vband-cream .vband-label, .vband-mid .vband-label { color: var(--gold-on-light, #755220); }
.vband-cream .vband-title, .vband-mid .vband-title,
.vband-cream .vitem-title, .vband-mid .vitem-title { color: var(--charcoal, #3A352F); }
.vband-cream .vband-text, .vband-mid .vband-text,
.vband-cream .vitem-text, .vband-mid .vitem-text { color: var(--stone-on-cream, #665F56); }

/* Call to action link */
.vband-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 4px;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; text-decoration: none; }
.vband-dark .vband-cta { background: var(--horizon-gold, #C49A5C); color: #26221E; }
.vband-cream .vband-cta, .vband-mid .vband-cta { background: var(--charcoal, #3A352F); color: #F7F2EA; }

/* Player */
.vplayer { position: relative; margin: 0; width: 100%; max-width: 360px; aspect-ratio: 9 / 16;
  border-radius: 26px; overflow: hidden; background: #1A1714;
  box-shadow: 0 20px 52px rgba(0,0,0,0.26); }
.vband-split .vplayer { margin-left: auto; }
.vrow .vplayer { max-width: 320px; }
.vplayer video { width: 100%; height: 100%; object-fit: cover; display: block; }

.vplayer-sound { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.58); color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vplayer-sound:hover { background: rgba(0,0,0,0.76); }
.vplayer-sound:focus-visible { outline: 2px solid #E4CAA0; outline-offset: 3px; }
.vplayer-sound .icon-off { display: block; }
.vplayer-sound .icon-on  { display: none; }
.vplayer.is-unmuted .vplayer-sound .icon-off { display: none; }
.vplayer.is-unmuted .vplayer-sound .icon-on  { display: block; }

/* Big play affordance when autoplay is unavailable or motion is reduced */
.vplayer-play { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: rgba(0,0,0,0.12);
  display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.vplayer.is-manual .vplayer-play { display: flex; }
.vplayer.is-manual.is-playing .vplayer-play { display: none; }
.vplayer-play span { width: 68px; height: 68px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vplayer-play:focus-visible { outline: 2px solid #E4CAA0; outline-offset: -4px; }

@media (max-width: 1000px) {
  .vband-split { grid-template-columns: 1fr; gap: 40px; }
  .vband-split .vplayer { margin: 0 auto; }
  .vband-split .vband-copy { text-align: center; }
}
@media (max-width: 760px) {
  .vband { padding: 54px 24px; }
  .vrow { gap: 36px; }
  .vrow .vitem { width: 100%; max-width: 330px; }
  .vplayer { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .vplayer video { scroll-behavior: auto; }
}