/* prana-vinyasa.css — the shared "About Prana Vinyasa" hub block (intro line,
   4-link secondary nav, divider-framed heading) used on /about and the three
   sub-pages, plus the sub-page image-slider hero. Sits on top of shared.css;
   the sub-pages also load teacher-training.css for the .tt-grid / .tt-modal
   box + popup system. Brand accent = amber (--gold). */

/* snappy reveal (match about.css; fast per brand rule, no slow fade) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ============ HUB · About Prana Vinyasa (light bone section) ============ */
.pv-about{background:var(--bone);color:var(--ink);padding:clamp(3.4rem,9vh,6rem) 0 clamp(4rem,10vh,7rem);text-align:center}
.pv-intro{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(1.22rem,2.3vw,1.78rem);line-height:1.5;color:rgba(58,42,30,.84);max-width:40ch;margin:0 auto}

/* small diamond ornament between intro and nav */
.pv-diamond{display:block;width:9px;height:9px;margin:clamp(1.5rem,3.6vh,2.3rem) auto;background:var(--gold);transform:rotate(45deg);opacity:.85}

/* 4-link secondary nav */
.pv-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem clamp(1.3rem,3.2vw,2.9rem);margin:0 auto clamp(2.2rem,5.5vh,3.4rem);padding:0}
.pv-nav__link{font-family:"Julius Sans One",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.74rem,1vw,.92rem);color:var(--gold);text-decoration:none;padding:.32em 0;position:relative;transition:color .25s var(--ease)}
.pv-nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:.05em;height:1px;background:currentColor;transition:right .3s var(--ease)}
.pv-nav__link:hover,.pv-nav__link:focus-visible{color:var(--copper)}
.pv-nav__link:hover::after,.pv-nav__link:focus-visible::after{right:0}
.pv-nav__link.is-current{color:var(--ink)}
.pv-nav__link.is-current::after{right:0;background:var(--gold)}

/* divider-framed heading (reuses the teacher-training divider.png flourish) */
.pv-head{margin:0 auto clamp(2rem,5vh,3rem);max-width:820px}
.pv-divider{display:block;width:100%;max-width:700px;height:14px;margin:1.15rem auto;background:url(/assets/img/tt/divider.png) no-repeat center center}
.pv-head__h{font-family:"Cinzel",serif;font-weight:500;font-size:clamp(1.9rem,4.2vw,3rem);letter-spacing:.03em;line-height:1.12;color:var(--ink)}

/* body copy (verbatim hub text — only on /about) */
.pv-copy{max-width:62ch;margin:0 auto;font-weight:300;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.75;color:rgba(58,42,30,.82)}
.pv-copy p{margin:0 0 1.15em}
.pv-copy p:last-child{margin-bottom:0}
.pv-defs{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.6;color:rgba(58,42,30,.9)}

/* orange brand logo above the 4-link nav (replaces the diamond ornament) */
.pv-logo{display:block;width:clamp(150px,17vw,205px);height:auto;margin:0 auto clamp(1.5rem,3.6vh,2.3rem)}

/* ============ VIDEO BAND · dark film rectangle that breaks the bone ======== */
.pv-band{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--black);color:#fff;text-align:center;min-height:clamp(360px,56vh,560px)}
.pv-band__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-band__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,11,.55),rgba(8,7,11,.4) 50%,rgba(8,7,11,.62) 100%)}
.pv-band__in{position:relative;z-index:2;max-width:50rem;padding:clamp(3rem,8vh,5rem) var(--pad)}
.pv-band__kick{color:#fff;font-weight:600;margin-bottom:1rem;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.pv-band__h{font-family:"Cinzel",serif;font-weight:500;font-size:clamp(1.55rem,3.3vw,2.5rem);line-height:1.22;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.pv-band__cta{margin-top:1.7rem}

/* curve divider (bone grid -> dark closing) — for the sub-page closing CTA */
.ab-curve{line-height:0;margin-top:-1px;margin-bottom:-1px;background:#08070b}
.ab-curve svg{display:block;width:100%;height:clamp(66px,7.6vw,120px)}

/* ============ SUB-PAGE HERO · image slider (replaces the /about video) ===== */
.pv-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--black);color:#fff}
.pv-hero__slides{position:absolute;inset:0;z-index:0}
.pv-hero__slide{position:absolute;inset:0;opacity:0;background-size:cover;background-position:50% 50%;transition:opacity 1.1s var(--ease)}
.pv-hero__slide.is-active{opacity:1}
.pv-hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,7,11,.5) 0%,rgba(8,7,11,.26) 40%,rgba(8,7,11,.44) 72%,rgba(8,7,11,.76) 100%)}
.pv-hero__in{position:relative;z-index:2;text-align:center;max-width:62rem;padding:12vh var(--pad)}
.pv-hero__kick{color:#fff;font-weight:600;margin-bottom:1.05rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.pv-hero__h{font-family:"Cinzel Decorative",serif;font-weight:700;font-size:clamp(2.5rem,6.6vw,4.9rem);line-height:1.05;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.5),0 1px 5px rgba(0,0,0,.4)}
.pv-hero__h em{font-style:normal;color:inherit}/* hero title stays all white — no colored accent word */
.pv-hero__tag{margin:1.35rem auto 0;max-width:44rem;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:clamp(1.18rem,2.1vw,1.62rem);line-height:1.5;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.pv-hero__cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:2rem}

/* arrows + dots */
.pv-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:clamp(40px,5vw,56px);height:clamp(40px,5vw,56px);border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(8,7,11,.22);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(2px);transition:background .25s var(--ease),border-color .25s var(--ease)}
.pv-hero__arrow:hover{background:rgba(8,7,11,.5);border-color:#fff}
.pv-hero__arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pv-hero__arrow svg{width:42%;height:auto}
.pv-hero__arrow--prev{left:clamp(10px,2.4vw,26px)}
.pv-hero__arrow--next{right:clamp(10px,2.4vw,26px)}
.pv-hero__dots{position:absolute;left:50%;bottom:3.1%;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.pv-hero__dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:transparent;cursor:pointer;padding:0;transition:background .25s var(--ease)}
.pv-hero__dot.is-active{background:#fff;border-color:#fff}
.pv-hero__cue{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:2;color:#fff;opacity:.85}
.pv-hero__cue svg{width:30px;height:auto;animation:pv-bob 2.3s linear infinite}
@keyframes pv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* sub-page tiles vary in aspect ratio in the source — force a tidy square grid */
.tt-programs--pv{padding-top:clamp(1rem,3vh,2rem)}
.tt-programs--pv .tt-card__img{aspect-ratio:1/1;object-fit:cover}

/* real tiles whose source popup had no detail content — show as static info tiles */
.tt-card--static .tt-card__btn{cursor:default}
.tt-card--static .tt-card__btn:hover .tt-card__img{transform:none}

/* dead/placeholder boxes on the roots grid (real content TBD post-launch) */
.tt-card.is-placeholder .tt-card__btn{cursor:default;pointer-events:none}
.tt-card.is-placeholder .tt-card__img{filter:saturate(.55) brightness(.82)}
.tt-card.is-placeholder .tt-card__btn::before{background:rgba(8,7,11,.5)}

@media (max-width:620px){
  .pv-hero__arrow{width:40px;height:40px}
  .pv-nav{gap:.5rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .pv-hero__slide{transition:none}
  .pv-hero__cue svg{animation:none}
}