/* ==========================================================================
   BOB SHARED HERO PATTERN  —  single source of truth for every page hero.
   THE LAW: one left axis. eyebrow -> amber rule -> H1 -> subtitle -> lead,
   all flush left inside one max-width container. No centered heroes anywhere.
   Reference implementation: the /karigar hero. Do not fork per page.

   Selectors are written as `.bob-hero .bob-hero__x` (specificity 0,2,0) so they
   win over page-scoped element rules such as `.kar h1{margin:0}` (0,1,1).
   ========================================================================== */

:root{
  --bob-ink:#141414;
  --bob-bone:#F5F2EB;
  --bob-amber:#D98E2B;

  /* the canonical vertical rhythm (extracted from the karigar hero) */
  --hero-pad-top:clamp(44px,5vw,80px);
  --hero-pad-bottom:clamp(36px,4vw,60px);
  --hero-sp-eyebrow-rule:20px;              /* eyebrow  -> rule   */
  --hero-sp-rule-h1:24px;                    /* rule     -> H1     */
  --hero-sp-h1-sub:clamp(20px,2.2vw,28px);   /* H1       -> sub    */
  --hero-sp-sub-lead:clamp(20px,2.2vw,26px); /* subtitle -> lead   */
}

/* container — identical max-width + gutter on every page */
.bob-hero-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,40px);}

/* the hero row. Default: split text | media. align-items:center keeps the
   text column optically centred against a tall illustration. */
.bob-hero{
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:clamp(32px,4vw,64px);
  align-items:center;
  padding-block:var(--hero-pad-top) var(--hero-pad-bottom);
  text-align:left;
}
/* layout modifiers (rhythm stays identical; only the media layout changes) */
.bob-hero.bob-hero--stack{display:block;}                                  /* image-less or image-below */
.bob-hero.bob-hero--top{align-items:start;}                                /* two tall columns          */
.bob-hero.bob-hero--triptych{grid-template-columns:0.92fr 2.05fr;align-items:start;} /* daftar rail|triptych */

.bob-hero__col{min-width:0;}                 /* prevent grid overflow */
.bob-hero__media{position:relative;min-width:0;}
.bob-hero__media img{width:100%;height:auto;display:block;}

/* the five canonical elements — all flush to the same left edge */
.bob-hero .bob-hero__eyebrow{
  font-family:Inter,sans-serif;font-weight:600;
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--bob-amber);margin:0;
}
.bob-hero .bob-hero__rule{
  width:44px;height:3px;background:var(--bob-amber);border:0;
  margin:var(--hero-sp-eyebrow-rule) 0 var(--hero-sp-rule-h1);
}
.bob-hero .bob-hero__h1{
  font-family:Oswald,sans-serif;font-weight:600;
  font-size:clamp(46px,6vw,84px);line-height:0.98;letter-spacing:-0.01em;
  color:var(--bob-ink);margin:0 0 var(--hero-sp-h1-sub);
}
.bob-hero .bob-hero__sub{
  font-family:Oswald,sans-serif;font-weight:500;
  font-size:clamp(20px,2.2vw,28px);line-height:1.15;
  color:var(--bob-ink);margin:0;
}
.bob-hero .bob-hero__lead{
  font-family:Inter,sans-serif;font-weight:400;
  font-size:clamp(15px,1.25vw,17px);line-height:1.62;
  color:var(--bob-ink);max-width:52ch;
  margin:var(--hero-sp-sub-lead) 0 0;
}
/* when a lead follows the H1 directly (no subtitle), the H1's own bottom
   margin supplies the gap — don't stack a second step on top. */
.bob-hero .bob-hero__h1 + .bob-hero__lead{margin-top:0;}

/* SECTION-DIVIDER ORNAMENT (e.g. the lotus): ruled site-wide as a
   LEFT-ANCHORED ornament on the hero axis — never centered. Glyph sits on
   the left edge; a single hairline rule extends to the right. */
.bob-ornament{
  display:flex;align-items:center;gap:16px;
  color:var(--bob-amber);
  margin:clamp(24px,3vw,34px) 0;
}
.bob-ornament .bob-ornament__rule{
  height:1px;background:rgba(217,142,43,0.5);flex:1;max-width:120px;
}

@media (max-width:900px){
  .bob-hero{grid-template-columns:1fr;gap:36px;}
  .bob-hero.bob-hero--top,
  .bob-hero.bob-hero--triptych{grid-template-columns:1fr;}
}