/* page-videos.php — responsive + visual fixes (loaded only on this template, after responsive.css) */

/* cards are rendered server-side and filtered by toggling [hidden] */
body.page-template-page-videos .vd-card[hidden]{display:none}
body.page-template-page-videos .vd-card{display:flex;flex-direction:column;min-width:0}
/* ACF player: direct .mp4 files play in a <video> element */
body.page-template-page-videos .vd-embed video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
body.page-template-page-videos .vd-tt{text-wrap:balance}

/* touch screens have no hover — keep the play button visible so cards read as videos */
@media(hover:none){
  body.page-template-page-videos .vd-play{opacity:1;transform:translate(-50%,-50%) scale(.82)}
}

@media(max-width:1000px){
  /* gutters: .rsw subtracts the gutter from max-width AND gets padding below 1000px, doubling it;
     use the padding alone so content lines up with the header (16px on phones, 28px on tablets) */
  body.page-template-page-videos .rsw{max-width:none}
}

@media(max-width:1000px){
  /* filter tabs: a left-aligned swipe row of chips instead of three wrapped lines */
  body.page-template-page-videos .vd-bar{display:block;padding-bottom:16px}
  body.page-template-page-videos .vd-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(16px,4vw,28px));padding:2px clamp(16px,4vw,28px);scroll-padding-inline:clamp(16px,4vw,28px)}
  body.page-template-page-videos .vd-tabs::-webkit-scrollbar{display:none}
  body.page-template-page-videos .vd-tab{flex:none;scroll-snap-align:start;white-space:nowrap}
  body.page-template-page-videos .vd-count{display:block;margin-top:14px}
}

@media(max-width:760px){
  body.page-template-page-videos .vd-sec{padding-block:48px 56px}
  body.page-template-page-videos .vd-tt{font-size:17px;margin-top:12px}
  body.page-template-page-videos .vd-grid{gap:26px}

  /* player: full-width sheet, close button inside the viewport, 16:9 embed */
  body.page-template-page-videos .vd-modal{padding:16px;align-items:center}
  body.page-template-page-videos .vd-sheet{max-height:calc(100dvh - 32px);padding-top:50px}
  body.page-template-page-videos .vd-x{top:0;width:40px;height:40px}
  body.page-template-page-videos .vd-embed{border-radius:12px}
  body.page-template-page-videos .vd-sheet-t{margin-top:14px}
}

/* player never taller than the viewport (short landscape screens): width follows the available height */
body.page-template-page-videos .vd-sheet{width:min(1080px,100%,calc((100dvh - 150px) * 16 / 9))}
@media(max-width:760px){
  body.page-template-page-videos .vd-sheet{width:min(100%,calc((100dvh - 150px) * 16 / 9))}
}

/* QA: eyebrow — dot + label measured 2.75px left of centre (trailing .14em letter-spacing + 13/16 padding) */
body.page-template-page-videos .vd-eyebrow{padding:7px 10.5px 7px 13px}
/* QA: close "×" — UA button padding (1px 6px) nudged the glyph; padding:0 centres it (0.5px) */
body.page-template-page-videos .vd-x{padding:0;display:grid;place-items:center}
/* QA: hero heading left "work." alone on the second line at 320-414px */
body.page-template-page-videos .rs-hero h1{text-wrap:balance}
body.page-template-page-videos .rs-hero p{text-wrap:pretty}
/* close "×" straddles the player's top-right corner; solid fill so the video edge doesn't show through */
body.page-template-page-videos .vd-x{top:-18px;right:-18px;z-index:2;background:#140F14;border-color:rgba(255,255,255,.35);box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
body.page-template-page-videos .vd-x:hover{background:#fff;color:var(--wine);border-color:#fff}
@media(max-width:760px){
  body.page-template-page-videos .vd-sheet{padding-top:16px}
  body.page-template-page-videos .vd-x{top:-4px;right:-12px}
}