/* ============================================================
   YogSetu — REQUIREMENTS.CSS
   Page-scoped additions for requirements.html. Reuses teachers.css's
   .category-row/.tcard--editorial grid pattern directly, swapping the
   teacher-photo "shot" slot for a colored icon band (.req-band) since
   requirement postings don't have a person photo to show.
   ============================================================ */

.req-card--editorial{
  width:100%;flex:0 0 100%;scroll-snap-align:start;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  background:var(--paper);border:1px solid rgba(26,26,24,.16);border-radius:22px;
  overflow:hidden;padding:0;margin-bottom:0;
}
.req-card--editorial .req-band{
  order:1;min-height:260px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#FFFDF7;
}
.req-card--editorial .req-band svg{
  width:52px;height:52px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9;
}
.req-card--editorial .req-band span{
  font-family:'Fraunces',serif;font-size:19px;font-weight:500;letter-spacing:-.01em;
}
.req-card--editorial .info{order:2;padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;justify-content:center;}
.category-row.is-right .req-card--editorial .req-band{order:2;}
.category-row.is-right .req-card--editorial .info{order:1;}

.req-band--hatha{background:linear-gradient(150deg,#D97757,#A65032);}
.req-band--ashtanga{background:linear-gradient(150deg,#3A3935,#1A1A18);}
.req-band--prenatal{background:linear-gradient(150deg,#8C887D,#55534C);}
.req-band--corporate{background:linear-gradient(150deg,#55534C,#1A1A18);}
.req-band--therapeutic{background:linear-gradient(150deg,#A65032,#3A3935);}
.req-band--generic{background:linear-gradient(150deg,#55534C,#A65032);}

.req-card--editorial .req-card-top h3 a{font-size:clamp(19px,1.8vw,23px);}

@media (max-width:720px){
  .req-card--editorial{grid-template-columns:1fr;}
  .req-card--editorial .req-band{min-height:0;aspect-ratio:21/9;order:1!important;}
  .req-card--editorial .info{order:2!important;}
}

/* ---- Hero search: moved from the header dropdown panel into the hero
   itself (video hero now carries the form directly, under the H1). ---- */
.hero-search{width:100%;max-width:560px;margin:0 auto;text-align:left;}
@media (max-width:900px){ .hero-search{max-width:100%;} }

/* ---- Split hero: video anchored to the right, headline + search anchored
   left. Scoped to this page only (requirements.css isn't loaded elsewhere),
   so the shared .hero-card/.hero-media/.hero-body rules in base.css used by
   other pages are untouched. Mobile keeps the original full-bleed video
   background — a strict left/right split doesn't work at that width. ---- */
@media (min-width:901px){
  /* Clean side-by-side split, matching the actual homepage hero: a solid
     dark content panel on the left and a distinct image/video panel on the
     right with a crisp edge -- not a full-bleed video with a fading scrim.
     The scrim only needs a short blend right at that seam so the cut
     doesn't look razor-hard; beyond it the video stays clean/unfiltered. */
  .hero-media{
    inset:auto;top:0;bottom:0;right:0;left:auto;
    width:60%;height:100%;
    object-fit:cover;object-position:center;
  }
  .hero-scrim{
    background:linear-gradient(90deg, rgba(23,22,20,1) 0%, rgba(23,22,20,1) 38%, rgba(23,22,20,0) 46%);
  }
  .hero-body{align-items:flex-start;text-align:left;}
  .hero-head{margin:0;text-align:left;max-width:520px;}
  .hero-search{margin:0;text-align:left;}
  .closing{align-items:flex-start;}
  .trust{justify-content:flex-start;}
  /* 3 fields get their own row now that the button isn't fighting them for
     width -- it drops to a full-width row underneath instead of a cramped
     4th grid-auto column (was truncating 'Online or in-studio' etc). */
  .tsearch-bar{grid-template-columns:1fr 1fr 1fr;}
}

/* ---- Search button: one consistent look at every width -- full-width,
   sits below the 3 fields as its own row, radius/padding tuned to match
   the white card's own rounding instead of looking like a mismatched
   pill dropped inside a squarer card. ---- */
.tsearch-bar .btn-search{
  grid-column:1 / -1;
  padding:14px;border-radius:12px;
  margin-top:8px;
  font-size:15px;
}

/* ---- Mobile hero: same "video strip on top, content on a solid panel
   below" shape as the homepage hero, so content and video never overlap
   at all (the previous overlay-with-scrim approach still let the subject
   show through behind the text). ---- */
@media (max-width:900px){
  .hero-media-fallback{position:absolute;top:0;left:0;right:0;bottom:auto;height:calc(64px + 38vh);}
  .hero-media,
  .hero-scrim{
    position:absolute;top:64px;left:0;right:0;bottom:auto;
    height:38vh;
  }
  .hero-scrim{
    background:linear-gradient(180deg, rgba(23,22,20,0) 55%, rgba(23,22,20,.97) 100%);
  }
  .hero-media{ width:100%;object-fit:cover;object-position:center; }
  .hero-body{
    position:relative;margin-top:calc(64px + 38vh);
    background:var(--pine-deep);
    align-items:center;text-align:center;
    padding-top:clamp(24px,4vh,36px);
  }
  .hero-head{text-align:center;margin:0 auto;}
  .hero-search{text-align:center;margin:0 auto;}
  .closing{align-items:center;}
  .trust{justify-content:center;margin:0 auto;}
}

/* ---- Full-bleed hero, matching the homepage: the shared .hero-wrap in
   base.css caps at 1560px and centers, which left visible white gutters on
   wide screens. This page has no .page wrapper padding to cancel out (the
   homepage's -16px trick was for that), so just drop the cap. ---- */
.hero-wrap{max-width:none;margin:0;}
.hero-card{border-radius:0;}