/* ============================================================
   YogSetu — TEACHER-BENEFITS.CSS
   Page-scoped styles for teacher-benefits.html. Reuses shared
   base.css/site.css components wherever they already fit
   (.section/.diptych, .how/.walk-path, .req-card, .faq chat-thread,
   .final CTA) and adds tb- prefixed classes only where there's no
   existing equivalent (jobs grid layout, teacher-voices cards).
   ============================================================ */

/* Hero: video background, content pinned to the left half (Netflix-style
   reference — tags/title/meta/CTA on the left, a small thumbnail rail
   underneath the buttons). */
.tb-hero-card .hero-body{
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  gap:clamp(24px,4vh,36px);
}
.tb-hero-card .hero-head{
  margin:0;
  max-width:520px;
  text-align:left;
}
.tb-hero-card .closing{align-items:flex-start;}

/* Left-to-right scrim so the text stays legible without hiding the whole
   video — strongest at the left edge, fading out toward the right. */
.tb-hero-card .hero-scrim{
  background:
    linear-gradient(100deg, rgba(23,22,20,.78) 0%, rgba(23,22,20,.45) 42%, rgba(23,22,20,.08) 72%),
    linear-gradient(180deg, rgba(23,22,20,.25) 0%, rgba(23,22,20,.1) 35%, rgba(23,22,20,.4) 100%);
}

/* Give the headline its own solid backdrop so it stays legible over any
   part of the video, and reads as a highlighted caption rather than text
   laid directly over the footage. */
.tb-hero-card .hero-head h1{
  display:inline-block;
  background:rgba(23,22,20,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  padding:clamp(14px,2vw,22px) clamp(18px,2.6vw,30px);
  border-radius:18px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}

.tb-hero-kicker{margin-bottom:clamp(14px,2vh,20px);}

.tb-hero-card .hero-media{object-position:center;}

/* ---- "Popular teachers this week" — small square thumbnail rail ---- */
.tb-hero-rail{margin-top:clamp(22px,3.4vh,30px);}
.tb-hero-rail-label{
  display:block;
  font-size:10px;letter-spacing:.14em;
  color:rgba(241,237,224,.55);
  margin-bottom:10px;
}
.tb-hero-rail-track{display:flex;gap:10px;flex-wrap:wrap;}
.tb-hero-thumb{flex:0 0 auto;width:60px;text-align:center;}
.tb-hero-thumb-photo{
  position:relative;
  display:block;width:60px;height:60px;
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  transition:transform .18s ease,border-color .18s ease;
}
.tb-hero-thumb-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.tb-hero-thumb:hover .tb-hero-thumb-photo{transform:translateY(-3px);border-color:var(--marigold);}
.tb-hero-thumb-photo .fallback{display:none;}
.tb-hero-thumb-photo.missing img{display:none;}
.tb-hero-thumb-photo.missing .fallback{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-family:'Fraunces',serif;font-size:14px;color:#F1EDE0;
}
.tb-hero-thumb-name{
  display:block;margin-top:6px;
  font-size:10.5px;color:rgba(241,237,224,.62);
}

@media (max-width:900px){
  .tb-hero-card .hero-head{max-width:none;}
}
@media (max-width:640px){
  /* Even with the crop bias above, cramming this much stacked text over a
     full-bleed video on a narrow phone means either the subject gets
     sliced or the headline badge lands right on her face — tried both,
     both looked broken. Pin the video to a shorter strip at the top
     instead (tall enough to show her clearly, nothing overlapping) and let
     the text flow on a solid background below it — the same "image up
     top, real content below" shape already used for the sticky
     bookclass/manage-timings sections elsewhere on the site. */
  .tb-hero-card{min-height:auto;}
  .tb-hero-card .hero-media-fallback,
  .tb-hero-card .hero-media,
  .tb-hero-card .hero-scrim{
    position:absolute;top:0;left:0;right:0;bottom:auto;
    height:46vh;
  }
  .tb-hero-card .hero-scrim{
    background:linear-gradient(180deg, rgba(23,22,20,0) 55%, rgba(23,22,20,.95) 100%);
  }
  .tb-hero-card .hero-body{
    position:relative;
    margin-top:46vh;
    background:var(--pine-deep);
    align-items:center;text-align:center;
  }
  .tb-hero-card .hero-head{text-align:center;}
  .tb-hero-card .hero-head h1{
    background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border:none;box-shadow:none;padding:0;
  }
  .tb-hero-card .closing{align-items:center;}
  .tb-hero-rail-track{justify-content:center;}
}

/* ---- live demand — icon-led horizontal scroller ---- */
.tb-jobs-scroll-wrap{position:relative;}
.tb-jobs-grid{
  display:flex;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:4px 2px 8px;
}
.tb-jobs-grid::-webkit-scrollbar{display:none;}
.tb-jobs-grid .req-card{
  flex:0 0 clamp(260px,30vw,320px);scroll-snap-align:start;
  display:flex;flex-direction:column;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tb-jobs-grid .req-card:hover{border-color:rgba(217,119,87,.4);box-shadow:0 22px 40px -28px rgba(26,26,24,.35);transform:translateY(-3px);}
.tb-jobs-grid .req-card .desc{flex:1;}
.tb-jobs-foot{display:flex;justify-content:center;margin-top:clamp(24px,3.4vh,32px);}

.tb-jobs-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.95);border:1px solid rgba(26,26,24,.14);
  box-shadow:0 12px 26px -12px rgba(26,26,24,.45);
  display:flex;align-items:center;justify-content:center;color:var(--pine);
  transition:background .18s ease;
}
.tb-jobs-prev{left:-18px;}
.tb-jobs-next{right:-18px;}
.tb-jobs-arrow:hover{background:#fff;}
.tb-jobs-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:900px){
  .tb-jobs-prev{left:4px;}
  .tb-jobs-next{right:4px;}
}

.tb-icon-card{overflow:hidden;padding-top:0;}
.tb-icon-band{
  display:flex;align-items:center;gap:10px;
  margin:0 -22px 18px;padding:14px 22px;
  color:#FFFDF7;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
}
.tb-icon-band svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.tb-icon-hatha{background:linear-gradient(135deg,#D97757,#A65032);}
.tb-icon-prenatal{background:linear-gradient(135deg,#8C887D,#55534C);}
.tb-icon-ashtanga{background:linear-gradient(135deg,#3A3935,#1A1A18);}

/* ---- global hiring video section (reuses .global-presence, centers the heading) ---- */
.tb-hiring-video .sec-head{text-align:center;margin-bottom:clamp(28px,4vh,42px);}
.tb-hiring-video .sec-kicker{justify-content:center;}
.tb-hiring-video .sec-head h2{margin:0 auto;max-width:32ch;}
.tb-hiring-video .sec-head h2 em{font-style:italic;color:var(--marigold-deep);}
.tb-hiring-video .sec-head .sub{margin:10px auto 0;max-width:52ch;color:var(--ink-soft);font-size:14.5px;}

/* ---- teacher voices: now reuses base.css's .voices/.tablet/.review-* tablet-mockup
   component directly (same one the homepage uses for student voices) — no
   page-scoped overrides needed. ---- */

/* ---- full-screen sticky image, scoped to just this pair (see
   .tb-reveal-scope below). Pinned for a full viewport height while The
   Standard scrolls up over it; isolation:isolate on the wrapper keeps this
   sticky element's stacking from ever affecting sections outside the pair —
   position:sticky is a "positioned" element, and positioned descendants
   always paint above static siblings in the same stacking context
   regardless of DOM order, which is what let this bleed into every later
   section last time. Isolating the pair fixes that at the root cause. ---- */
.tb-reveal-scope{
  isolation:isolate;
  position:relative;
}
.tb-final-visual{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  z-index:0;
}
.tb-final-visual-img{
  width:100%;height:100%;
  object-fit:cover;object-position:78% center;
  display:block;
}

/* The image is plain white/empty on its left third — real headline text
   (not baked into the graphic this time) sits there. */
.tb-final-visual-copy{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  padding-left:clamp(24px,6vw,88px);
  pointer-events:none;
}
.tb-final-visual-copy h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(32px,5.4vw,68px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:9ch;
}
.tb-final-visual-copy h2 em{
  font-style:italic;
  color:var(--marigold-deep);
}

/* Structural "rises up to cover the sticky image" effect — rounded top
   corners + shadow only. Each section keeps its own background (sand for
   the light Final CTA, pine-deep for the dark Standard section) so the
   white→black transition still reads cleanly as the black section visibly
   rising over the white image, not a color swap. */
.tb-scroll-reveal{
  position:relative;
  z-index:1;
  border-radius:32px 32px 0 0;
  box-shadow:0 -50px 90px -30px rgba(0,0,0,.35);
}
.tb-final-reveal{background:var(--sand);}

/* Below 900px the baked-in empty space on the image's left stops being
   usable as a text slot (object-fit:contain was shrinking the whole image,
   dead space included, down to a tiny corner). Instead, stack real text on
   top of a normal-flow block, then let the image fill the rest of the
   section cropped tight on the subject — no more wasted blank space. */
@media (max-width:900px){
  .tb-final-visual{
    display:flex;
    flex-direction:column;
  }
  .tb-final-visual-copy{
    position:relative;
    inset:auto;
    flex:0 0 auto;
    justify-content:center;
    padding:clamp(28px,6vh,48px) 20px clamp(16px,3vh,24px);
    pointer-events:auto;
  }
  .tb-final-visual-copy h2{
    max-width:none;
    text-align:center;
    margin:0 auto;
  }
  .tb-final-visual-img{
    flex:1;
    min-height:0;
    object-fit:cover;
    object-position:72% center;
  }
}
@media (max-width:640px){
  .tb-final-visual{height:80vh;}
}

/* ============================================================
   01 The reality — 3D "VS" face-off (#tb-reality)
   Two cards angled toward each other in a perspective stage, a
   pulsing VS medallion between them, pointer-driven tilt.
   ============================================================ */
#tb-reality .rv{
  --rx:0deg; --ry:0deg;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;
  gap:0;
  margin-top:clamp(28px,4vh,44px);
  perspective:1600px;
  perspective-origin:50% 40%;
}
#tb-reality .rv-card{
  position:relative;
  transform-style:preserve-3d;
  border-radius:28px;
  transition:transform .6s cubic-bezier(.2,.9,.25,1), box-shadow .4s ease, opacity .7s ease;
  will-change:transform;
  opacity:0;
}
#tb-reality .rv-broker{
  transform:translate3d(-60px,0,-120px) rotateY(24deg);
  background:linear-gradient(155deg,#2a2926 0%,#171614 70%);
  color:#EDE7D8;
  box-shadow:0 40px 70px -30px rgba(23,22,20,.55);
}
#tb-reality .rv-direct{
  transform:translate3d(60px,0,-120px) rotateY(-24deg);
  background:linear-gradient(155deg,#E98A68 0%,#D97757 45%,#B9532F 100%);
  color:#fff;
  box-shadow:0 40px 80px -28px rgba(166,80,50,.65);
}
#tb-reality .rv.is-in .rv-card{opacity:1;}
#tb-reality .rv.is-in .rv-broker{
  transform:translate3d(0,0,0) rotateY(calc(9deg + var(--ry))) rotateX(var(--rx));
}
#tb-reality .rv.is-in .rv-direct{
  transform:translate3d(0,0,0) rotateY(calc(-9deg + var(--ry))) rotateX(var(--rx));
}
#tb-reality .rv-card::before{ /* soft sheen */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 40%);
  transform:translateZ(1px);
}
#tb-reality .rv-inner{
  position:relative;
  height:100%;
  padding:clamp(28px,3.4vw,52px) clamp(24px,3vw,48px);
  display:flex;flex-direction:column;gap:clamp(16px,2.2vw,26px);
  transform-style:preserve-3d;
}
#tb-reality .rv-tag{
  align-self:flex-start;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;
  transform:translateZ(30px);
}
#tb-reality .rv-broker .rv-tag{border:1px solid rgba(237,231,216,.28);color:rgba(237,231,216,.7);}
#tb-reality .rv-direct .rv-tag{background:rgba(255,255,255,.2);color:#fff;}
#tb-reality .rv-big{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(46px,6.4vw,96px);
  line-height:.94;letter-spacing:-.035em;
  margin:0;max-width:none;
  transform:translateZ(60px);
}
#tb-reality .rv-big em{font-style:italic;font-weight:500;}
#tb-reality .rv-broker .rv-big{
  color:rgba(237,231,216,.42);
  text-decoration:line-through;
  text-decoration-thickness:.05em;
  text-decoration-color:rgba(217,119,87,.9);
}
#tb-reality .rv-direct .rv-big{color:#fff;text-shadow:0 6px 30px rgba(120,45,20,.35);}
#tb-reality .rv-list{
  list-style:none;margin:auto 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;
  transform:translateZ(36px);
}
#tb-reality .rv-list li{
  display:flex;align-items:center;gap:14px;
  font-size:clamp(16px,1.35vw,19px);line-height:1.3;
  padding:13px 16px;border-radius:16px;
}
#tb-reality .rv-list b{font-weight:700;}
#tb-reality .rv-broker .rv-list li{background:rgba(255,255,255,.05);border:1px solid rgba(237,231,216,.1);color:rgba(237,231,216,.72);}
#tb-reality .rv-broker .rv-list b{color:#fff;}
#tb-reality .rv-direct .rv-list li{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.92);}
#tb-reality .rv-direct .rv-list b{color:#fff;}
#tb-reality .rv-ic{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
#tb-reality .rv-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}
#tb-reality .rv-broker .rv-ic{background:rgba(217,119,87,.18);color:#E98A68;}
#tb-reality .rv-direct .rv-ic{background:#fff;color:#B9532F;}
#tb-reality .rv-result{
  margin:0;padding-top:16px;
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(16px,1.4vw,20px);line-height:1.3;
  transform:translateZ(24px);
}
#tb-reality .rv-broker .rv-result{color:rgba(237,231,216,.5);border-top:1px dashed rgba(237,231,216,.2);}
#tb-reality .rv-direct .rv-result{color:#fff;border-top:1px solid rgba(255,255,255,.35);}

/* VS medallion, overlapping both cards */
#tb-reality .rv-vs{
  position:relative;z-index:5;
  width:clamp(84px,9vw,124px);
  margin:0 clamp(-62px,-4.5vw,-42px);
  align-self:center;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  transform:translateZ(90px) scale(.4);opacity:0;
  transition:transform .7s cubic-bezier(.3,1.5,.5,1) .35s, opacity .4s ease .35s;
}
#tb-reality .rv.is-in .rv-vs{transform:translateZ(90px) scale(1);opacity:1;}
#tb-reality .rv-vs-core{
  position:relative;z-index:2;
  width:100%;height:100%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#FFFDF7;color:var(--ink,#1C1B18);
  font-family:'Fraunces',serif;font-weight:600;font-style:italic;
  font-size:clamp(28px,3.2vw,44px);letter-spacing:-.03em;
  box-shadow:0 0 0 7px rgba(255,253,247,.9), 0 18px 40px -8px rgba(23,22,20,.5);
}
#tb-reality .rv-vs-ring{
  position:absolute;inset:-14px;border-radius:50%;
  border:2px solid var(--marigold,#D97757);
  animation:rvPulse 2.4s ease-out infinite;
}
@keyframes rvPulse{0%{transform:scale(.86);opacity:.9;}100%{transform:scale(1.35);opacity:0;}}

@media (max-width:860px){
  #tb-reality .rv{grid-template-columns:minmax(0,1fr);perspective:1200px;gap:0;}
  #tb-reality .rv-broker{transform:translate3d(0,-30px,-80px) rotateX(-14deg);}
  #tb-reality .rv-direct{transform:translate3d(0,30px,-80px) rotateX(14deg);}
  #tb-reality .rv.is-in .rv-broker,
  #tb-reality .rv.is-in .rv-direct{transform:none;}
  #tb-reality .rv-vs{margin:-34px auto;width:84px;}
  #tb-reality .rv-big{font-size:clamp(44px,15vw,72px);}
  #tb-reality .rv-direct .rv-inner{padding-top:clamp(52px,12vw,64px);}
  #tb-reality .rv-list{margin-top:6px;}
}
@media (prefers-reduced-motion:reduce){
  #tb-reality .rv-card,#tb-reality .rv-vs{transition:none;opacity:1;}
  #tb-reality .rv-vs{transform:none;}
  #tb-reality .rv-vs-ring{animation:none;}
  #tb-reality .rv .rv-broker,#tb-reality .rv .rv-direct{transform:none;}
}

@media (min-width:861px){
  #tb-reality .rv-broker .rv-inner{padding-right:calc(clamp(24px,3vw,48px) + 46px);}
  #tb-reality .rv-direct .rv-inner{padding-left:calc(clamp(24px,3vw,48px) + 46px);}
}

@media (max-width:860px){
  #tb-reality .rv-broker .rv-inner{padding-bottom:clamp(52px,12vw,64px);}
}