/* ============================================================
   page-youtube.css
   Styles for the Video / YouTube embed page only.
   Shared styles live in shared.css
   ============================================================ */


/* ============================================================
   MAIN VIDEO EMBED WRAPPER
   The padding-bottom trick locks the iframe to a 16:9 ratio.
   The iframe is then positioned absolutely to fill the wrapper.
   This makes the video resize correctly on any screen width.
   ============================================================ */
.video-wrapper {
  position:       relative;
  width:          100%;
  padding-bottom: 56.25%;   /* 9 ÷ 16 = 0.5625 — locks 16:9 ratio */
  height:         0;
  overflow:       hidden;
  background:     #000;
  border:         1px solid rgba(201, 168, 76, 0.3);   /* gold border */
}

/* iframe is stretched to fill the wrapper absolutely */
.video-wrapper iframe {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
  border:   none;
}


/* ============================================================
   VIDEO THUMBNAIL CARD GRID
   Clickable cards displayed below the main embed.
   Clicking a card calls loadVideo() in page-youtube.js
   which swaps the main embed's src without a page reload.
   ============================================================ */
.video-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   24px;
  margin-top:            48px;
}

/* individual card */
.video-card {
  cursor:     pointer;
  overflow:   hidden;
  border:     1px solid rgba(201, 168, 76, 0.15);
  transition: border-color 0.2s, transform 0.2s;
}
.video-card:hover  { border-color: var(--gold); transform: translateY(-5px); }
.video-card:active { transform: translateY(0) scale(0.98); }

/* thumbnail image area — replace the placeholder div with a real <img> */
.video-card-thumb {
  width:           100%;
  aspect-ratio:    16 / 9;
  background:      #1a1a1a;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}

/* CSS-only play triangle inside the thumbnail */
.play-icon {
  width:        0;
  height:       0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent var(--gold);
  transition:   transform 0.2s;
}
/* triangle scales up when the card is hovered */
.video-card:hover .play-icon { transform: scale(1.2); }

/* card title below the thumbnail */
.video-card-label {
  padding:        14px 16px;
  font-family:    'Orbitron', sans-serif;
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--white);
  background:     var(--mid);
}

/* card subtitle / short description */
.video-card-sub {
  padding:     0 16px 14px;
  font-family: 'EB Garamond', serif;
  font-size:   14px;
  color:       rgba(240, 237, 232, 0.5);
  background:  var(--mid);
}
/* ============================================================
   MOBILE NAV CLEARANCE
   On tall/narrow screens the section needs extra top padding
   to push the Biography label clear of the fixed nav bar.
   ============================================================ */
@media (max-width: 900px) {
  section {
    padding-top: calc(var(--nav-height) + 24px);
  }
}