/* ==========================================================================
   Home page — YouTube Videos section (cards + popup/inline player)
   Loaded only on the Home template (see functions.php).
   ========================================================================== */

.yt-section{
  --yt-bg:#f3f6fb; --yt-card:#ffffff; --yt-border:#e1e8f3; --yt-head:var(--teal-950);
  --yt-text:#4a5a56; --yt-shadow:0 14px 34px -18px rgba(18,40,86,.35);
  --yt-gap:20px; --yt-cols:4;
  background:var(--yt-bg); padding:110px 0 120px; border-top:1px solid var(--line); overflow:hidden;
}
.yt-section--dark{
  --yt-bg:var(--teal-950); --yt-card:var(--teal-900); --yt-border:var(--line); --yt-head:#fff;
  --yt-text:rgba(255,255,255,.72); --yt-shadow:0 22px 40px -22px rgba(0,0,0,.6);
}

/* heading row */
.yt-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:46px;}
.yt-head h2{font-size:clamp(1.9rem,3vw,2.5rem); color:var(--yt-head); max-width:560px;}
.yt-head p{color:var(--yt-text); font-size:14.5px; max-width:380px;}

/* slider */
.yt-slider{position:relative;}
.yt-track{
  display:flex; gap:var(--yt-gap); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:6px 4px 26px; margin:-6px -4px -26px; /* room for the card shadow without shifting layout */
}
.yt-track::-webkit-scrollbar{display:none;}
.yt-item{flex:0 0 calc((100% - (var(--yt-cols) - 1) * var(--yt-gap)) / var(--yt-cols)); scroll-snap-align:start; min-width:0;}

.yt-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--yt-border);
  background:#fff; color:var(--teal-950); font-size:17px; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.4); transition:background .25s ease, opacity .25s ease, transform .25s ease;
}
.yt-arrow:hover{background:var(--gold);}
.yt-arrow:disabled{opacity:0; pointer-events:none;}
.yt-prev{left:-14px;}
.yt-next{right:-14px;}
.yt-slider.is-static .yt-arrow{display:none;}

/* card */
.yt-card{
  position:relative; background:var(--yt-card); border:1px solid var(--yt-border); border-radius:18px;
  overflow:hidden; box-shadow:var(--yt-shadow); transition:transform .35s ease, box-shadow .35s ease;
}
.yt-card:hover{transform:translateY(-5px);}
.yt-slider--reels .yt-card{aspect-ratio:9/16;}

.yt-stage{position:relative;}
.yt-cover{
  position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; border:0; cursor:pointer;
  background:#0b1b2b; display:block; overflow:hidden; color:#fff; font:inherit;
}
.yt-thumb{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}

/* Reels layout: vertical media fills the whole tall card; landscape media is a centred 16:9 band on white. */
.yt-slider--reels .yt-card--vertical .yt-stage{position:absolute; inset:0;}
.yt-slider--reels .yt-card--landscape .yt-stage{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); aspect-ratio:16/9;}

/* Classic layout: every card is a 16:9 frame with the title underneath. */
.yt-slider--classic .yt-stage{aspect-ratio:16/9;}
.yt-slider--classic .yt-card--vertical .yt-thumb{object-fit:contain; background:#000;}
.yt-caption{padding:16px 18px 20px;}
.yt-caption h3{font-family:'Manrope',sans-serif; font-size:15.5px; font-weight:700; line-height:1.4; color:var(--yt-head); margin:0;}
.yt-slider--reels .yt-caption{position:absolute; left:0; right:0; bottom:0; padding:44px 16px 16px; background:linear-gradient(180deg, transparent, rgba(4,20,40,.85));}
.yt-slider--reels .yt-caption h3{color:#fff; font-size:14.5px; pointer-events:none;}

/* "Video" pill */
.yt-badge{
  position:absolute; top:12px; left:12px; z-index:2; padding:7px 13px; border-radius:999px;
  background:rgba(8,28,52,.88); color:#fff; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:.01em; line-height:1;
}

/* Play button */
.yt-play{
  position:absolute; left:50%; top:50%; z-index:2; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  background:rgba(14,30,48,.8); border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease, background .25s ease;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.5);
}
.yt-play svg{width:26px; height:26px; fill:#fff; margin-left:3px;}
.yt-cover:hover .yt-play, .yt-cover:focus-visible .yt-play{transform:scale(1.1); background:rgba(14,30,48,.95);}
.yt-cover:focus-visible{outline:3px solid var(--gold); outline-offset:-3px;}

/* Classic: red YouTube-style play button */
.yt-slider--classic .yt-play{width:68px; height:48px; margin:-24px 0 0 -34px; border-radius:13px; background:#f00; border:0;}
.yt-slider--classic .yt-cover:hover .yt-play{background:#d90000;}
.yt-slider--classic .yt-play svg{width:24px; height:24px;}

/* Inline playback */
.yt-stage iframe, .yt-stage .yt-inline-video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; z-index:4; object-fit:contain;}
.yt-card.is-playing .yt-cover{visibility:hidden;}
.yt-card.is-playing:hover{transform:none;}

/* ---------- Popup player ---------- */
.yt-modal{
  position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  background:rgba(1,25,23,.9); padding:24px; backdrop-filter:blur(3px);
}
.yt-modal.is-open{display:flex;}
.yt-modal-box{position:relative; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 40px 80px -20px rgba(0,0,0,.7);}
.yt-modal-box--landscape{width:min(980px, 94vw); aspect-ratio:16/9;}
.yt-modal-box--vertical{height:min(86vh, calc(92vw * 16 / 9)); aspect-ratio:9/16; max-width:94vw;}
.yt-modal-box iframe, .yt-modal-box video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; object-fit:contain;}
.yt-modal-close{
  position:absolute; top:18px; right:18px; z-index:3; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:var(--teal-950); font-size:22px; line-height:1; box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
}
.yt-modal-close:hover{background:var(--gold);}
body.yt-modal-open{overflow:hidden;}

/* ---------- Responsive ---------- */
@media (max-width:1000px){ .yt-section{--yt-cols:3;} }
@media (max-width:820px){
  .yt-section{--yt-cols:2; padding:80px 0 90px;}
  .yt-arrow{display:none;}
}
@media (max-width:560px){
  .yt-section{--yt-cols:1.35; --yt-gap:14px;}
  .yt-play{width:56px; height:56px; margin:-28px 0 0 -28px;}
  .yt-modal{padding:12px;}
  .yt-modal-close{top:10px; right:10px;}
}
@media (prefers-reduced-motion:reduce){ .yt-card, .yt-play{transition:none;} }