/* ============================================================
   closing-zone.css  —  styling for .position-push sections
   ------------------------------------------------------------
   The pos-push automation injects <section class="position-push">
   with inline styles and NO stylesheet rules anywhere in the
   stack, so these blocks render full-bleed at wide viewports.

   This file is template-agnostic (works on .v3m, .construction-mag
   and .magazine-home) and direction-agnostic (LTR + RTL /ar/).
   !important is required only where it must beat the generator's
   inline style attributes — no HTML is modified.

   Load AFTER visual-upgrade.css.
   ============================================================ */

.position-push{
  --close-col:min(680px,100%);
  counter-reset:ppq;
  display:grid;
  grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr);
  column-gap:clamp(48px,5.5vw,140px);
  align-items:start;
  background:var(--cream,#F4F1E9)!important;
  border-top:1px solid var(--ink-10,rgba(14,13,11,.1))!important;
  border-radius:0!important;
  margin:0!important;
  padding:clamp(56px,6.5vw,110px) var(--gut,clamp(20px,5.5vw,100px)) clamp(48px,5.5vw,88px)!important;
  text-align:start;
  max-width:1680px;
  margin-inline:auto!important;
}

/* ---------- left rail: sticky title ---------- */
html body section.position-push:is(.position-push) > h2{
  grid-column:1;
  grid-row:1/-1;
  position:sticky;
  top:clamp(90px,10vh,140px);
  align-self:start;
  font-family:var(--fd,"Cormorant Garamond",Georgia,serif)!important;
  font-weight:400!important;
  font-size:clamp(26px,2.5vw,44px)!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  color:var(--ink,#0E0D0B)!important;
  margin:0!important;
  padding-bottom:0!important;
  text-align:start!important;
  text-wrap:balance;
}
html body section.position-push:is(.position-push) > h2::after{
  content:'';
  display:block;
  width:48px;
  height:1px;
  background:var(--bronze,#B8924B);
  margin-top:clamp(20px,2vw,30px);
}

/* ---------- right column: everything else ---------- */
.position-push > *:not(h2){grid-column:2}

/* Numbered sub-questions */
html body section.position-push:is(.position-push) h3{
  counter-increment:ppq;
  font-family:var(--fd,"Cormorant Garamond",Georgia,serif)!important;
  font-weight:400!important;
  font-size:clamp(19px,1.7vw,27px)!important;
  line-height:1.2!important;
  letter-spacing:-.014em!important;
  color:var(--ink,#0E0D0B)!important;
  max-width:none;
  text-wrap:balance;
  margin:clamp(38px,3.8vw,58px) 0 clamp(12px,1.2vw,18px)!important;
  padding-top:clamp(30px,3vw,46px);
  border-top:1px solid var(--ink-10,rgba(14,13,11,.1));
  text-align:start!important;
}
html body section.position-push:is(.position-push) h3::before{
  content:counter(ppq,decimal-leading-zero);
  display:block;
  font-family:var(--fb,"Inter Tight",-apple-system,sans-serif);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--bronze,#B8924B);
  margin-bottom:clamp(12px,1.2vw,18px);
}

/* ---------- prose ---------- */
html body .position-push:is(.position-push) p.fui-prose{
  max-width:66ch;
  margin-inline:0;
  margin-block:0 1.4rem;
  font-family:var(--fb,"Inter Tight",-apple-system,sans-serif);
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.85;
}
html body .position-push:is(.position-push) > p.fui-prose:first-of-type{
  font-family:var(--fd,"Cormorant Garamond",Georgia,serif)!important;
  font-size:clamp(18px,1.45vw,23px)!important;
  font-weight:400!important;
  line-height:1.55!important;
  letter-spacing:-.008em!important;
  color:var(--ink,#0E0D0B)!important;
  max-width:60ch!important;
  margin:0 0 clamp(8px,1vw,16px)!important;
}

/* ---------- fact strip: spans both columns ---------- */
.position-push > ul{
  grid-column:1/-1;
  list-style:none!important;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--ink-10,rgba(14,13,11,.1));
  border-block:1px solid var(--ink-10,rgba(14,13,11,.1));
  margin:clamp(52px,5.5vw,88px) 0 0!important;
  padding:0!important;
  line-height:1.5!important;
}
.position-push > ul > li{
  background:var(--cream,#F4F1E9);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:104px;
  padding:24px 20px;
  margin:0;
  font-family:var(--fb,"Inter Tight",-apple-system,sans-serif);
  font-size:.86rem;
  line-height:1.55;
  color:var(--ink-70,rgba(14,13,11,.7));
}
.position-push > ul > li::before,
.position-push > ul > li::marker{content:none}

/* ---------- nested in a narrow article wrapper: single column ---------- */
:is(.article-body,.guide-body,.community-body,.g-body,.cs-main,.case-body,.blog-body) .position-push{
  display:block;
  padding-inline:0!important;
  padding-block:clamp(36px,4vw,64px) clamp(28px,3vw,48px)!important;
  background:transparent!important;
}
html body :is(.article-body,.guide-body,.community-body,.g-body,.cs-main,.case-body,.blog-body) .position-push:is(.position-push) > h2{
  position:static;
  margin-bottom:clamp(24px,2.5vw,36px)!important;
}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .position-push{display:block}
  html body section.position-push:is(.position-push) > h2{position:static;margin-bottom:clamp(26px,3vw,40px)!important}
  .position-push > ul{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .position-push > ul{grid-template-columns:repeat(2,1fr)}
  .position-push > ul > li{min-height:88px;font-size:.82rem;padding:18px 14px}
}
@media(max-width:480px){
  .position-push > ul{grid-template-columns:1fr}
  .position-push > ul > li{min-height:0;padding:16px 14px}
}