/* ============================================================
   VINORA EVENTS — layout.css
   Editorial rhythm for the home page.

   The problem this fixes: every section was a centred heading on
   top of a centred grid, repeated nine times. That is the single
   thing that makes a site read as a template no matter how good
   the type and colour are. Magazines avoid it by varying the
   rhythm — a sticky column here, a full-bleed band there, an
   asymmetric split, an indent.

   Loaded after gloss.css, before dark.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. SPLIT SECTIONS
   The heading moves to a narrow left column and stays with the
   content as it scrolls. Content takes the wide right column.
   Applied to the sections with enough content to scroll past.
   ------------------------------------------------------------ */
@media(min-width:1000px){
  #services > .wrap,
  #prices   > .wrap,
  #process  > .wrap,
  #faq      > .wrap{
    display:grid;
    grid-template-columns:minmax(250px,27%) 1fr;
    column-gap:clamp(48px,5vw,92px);
    align-items:start
  }
  /* heading pinned in column one, spanning every content row */
  #services > .wrap > .sec-head,
  #prices   > .wrap > .sec-head,
  #process  > .wrap > .sec-head,
  #faq      > .wrap > .sec-head{
    grid-column:1;grid-row:1 / span 50;
    position:sticky;top:132px;
    text-align:left;margin-bottom:0;
    max-width:none
  }
  #services > .wrap > *:not(.sec-head),
  #prices   > .wrap > *:not(.sec-head),
  #process  > .wrap > *:not(.sec-head),
  #faq      > .wrap > *:not(.sec-head){
    grid-column:2
  }
  /* a left-aligned head needs its own measure and no auto-centring */
  .sec-head[class] p{margin-inline:0}
}

/* left-aligned heads lose the centred ornament and gain a rule */
@media(min-width:1000px){
  #services .sec-head,#prices .sec-head,
  #process .sec-head,#faq .sec-head{padding-top:26px;border-top:1px solid var(--rule,rgba(107,7,92,.16))}
  #services .sec-head:after,#prices .sec-head:after,
  #process .sec-head:after,#faq .sec-head:after{display:none}
  #services .sec-head .eyebrow:before,#prices .sec-head .eyebrow:before,
  #process .sec-head .eyebrow:before,#faq .sec-head .eyebrow:before{display:none}
}

/* ------------------------------------------------------------
   2. SECTION INDEX
   A quiet editorial marker. Numbers the page the way a contents
   list does, and gives the sticky column something to anchor to.
   ------------------------------------------------------------ */
@media(min-width:1000px){
  #services .sec-head,#prices .sec-head,#process .sec-head,#faq .sec-head{position:sticky}
  #services .sec-head:before,#prices .sec-head:before,
  #process .sec-head:before,#faq .sec-head:before{
    display:block;font-family:var(--font-caps);font-size:11px;letter-spacing:.26em;
    color:var(--gold-700,#aa7f0e);margin-bottom:18px;opacity:.85
  }
  #services .sec-head:before{content:"01 — Services"}
  #prices   .sec-head:before{content:"02 — What You Get"}
  #process  .sec-head:before{content:"03 — How We Work"}
  #faq      .sec-head:before{content:"04 — Questions"}
}

/* ------------------------------------------------------------
   3. FULL-BLEED GALLERY
   The works rail runs edge to edge instead of sitting inside the
   same container as everything else — the single biggest change
   to the page's rhythm.
   ------------------------------------------------------------ */
@media(min-width:900px){
  #gallery > .wrap{max-width:none;padding-inline:clamp(28px,5vw,80px)}
  #gallery .g-head{
    max-width:1180px;margin-inline:auto;width:100%;
    align-items:flex-end
  }
  #gallery .rail{padding-inline:0}
  #gallery .rail > figure{flex:0 0 clamp(300px,27vw,430px)}
}

/* ------------------------------------------------------------
   4. ZIG-ZAG PROCESS
   Four equal columns is a grid. Offsetting alternate steps makes
   it read as a sequence.
   ------------------------------------------------------------ */
@media(min-width:1000px){
  #process .steps{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,46px) clamp(40px,4vw,70px)
  }
  #process .steps-line{display:none}
  #process .step2:nth-child(odd){transform:translateY(0)}
  #process .step2:nth-child(even){transform:translateY(54px)}
  #process .step2{text-align:left}
  #process .step2 .ring{margin-inline:0}
  #process .step2 .ic{margin-inline:0}
  #process .proc-foot{margin-top:86px}
}

/* ------------------------------------------------------------
   5. HERO — editorial meta rail
   A thin vertical line and a rotated label down the left edge.
   Costs nothing and reads immediately as "designed".
   ------------------------------------------------------------ */
@media(min-width:1100px){
  .hero .hero-in{padding-left:82px;position:relative}
  .hero .hero-in:before{
    content:"";position:absolute;left:34px;top:8px;bottom:8px;width:1px;
    background:linear-gradient(180deg,transparent,rgba(248,216,129,.55) 22%,rgba(248,216,129,.55) 78%,transparent)
  }
  .hero .hero-in:after{
    content:"LB NAGAR · HYDERABAD";
    position:absolute;left:34px;bottom:0;transform:rotate(180deg);writing-mode:vertical-rl;
    font-family:var(--font-caps);font-size:10px;letter-spacing:.34em;
    color:rgba(252,241,213,.72);padding-bottom:14px
  }
}

/* ------------------------------------------------------------
   6. MEASURE
   Long body copy in a 1180px container is unreadable. Editorial
   text sits at 62–72 characters whatever the container does.
   ------------------------------------------------------------ */
.seo-body p,.seo-body li{max-width:72ch}
.sm-step p,.sf-q p{max-width:60ch}

/* ------------------------------------------------------------
   7. MOBILE
   Everything above collapses. On a phone a single clean column
   beats any amount of cleverness.
   ------------------------------------------------------------ */
@media(max-width:999px){
  #services .sec-head,#prices .sec-head,
  #process .sec-head,#faq .sec-head{position:static;text-align:center}
  #process .step2:nth-child(even){transform:none}
}

/* ============================================================
   FIXES FROM LOOKING AT IT
   ============================================================ */

/* 1. The reading-highlight read as broken text, not as an effect.
      In a sticky column the paragraph never travels past the trigger
      point, so half of it stayed permanently greyed out — which
      looks like a font that failed to load. Removed. */
.m-read .m-rw,.m-read .m-rw.lit{color:inherit!important;opacity:1!important}

/* 2. Two eyebrows were stacking: the editorial index ("01 — Services")
      and the original kicker ("OUR SERVICES"). Keep the index, drop
      the kicker — saying it twice is what made it look cluttered. */
@media(min-width:1000px){
  #services .sec-head > .eyebrow,
  #prices   .sec-head > .eyebrow,
  #process  .sec-head > .eyebrow,
  #faq      .sec-head > .eyebrow{display:none}
}

/* 3. The comparison columns stretched to equal height, leaving a
      large empty box under the shorter one. Each card now takes
      only the height its content needs. */
.tw-grid{align-items:start}
.tw-vs{align-self:center}

/* 4. The sticky heading was colliding with the sticky site header on
      shorter laptop screens. */
@media(min-width:1000px) and (max-height:820px){
  #services .sec-head,#prices .sec-head,
  #process .sec-head,#faq .sec-head{top:112px}
}