/* =====================================================================
   Full-width layout — content container
   ---------------------------------------------------------------------
   The site runs in the theme's `wide` body style (.page_wrap edge-to-edge).
   Containing the CONTENT of WPBakery full-width rows is done in
   js/wide-container.js: it measures each stretched row after WPBakery's own
   script has sized it and sets symmetric inline padding so the content box is
   exactly the site container (~1170px). That approach works for any column
   count (a pure-CSS cap on .wpb_column broke multi-column rows: floated
   columns stacked vertically = wrong section sequence).

   This file keeps only the pieces that are genuinely CSS concerns:
   the studio 2-column promo sections, whose boxed-era side paddings crushed
   the copy into a ~323px column at the tighter container width.
   ===================================================================== */

/* ---------------------------------------------------------------------
   First-paint pre-stretch (kills the refresh glitch).
   WPBakery stretches full-width rows in JS, so on refresh the page paints
   BOXED first and visibly jumps to full width ~0.5s later. Approximate the
   final geometry in pure CSS so the first paint already looks right:
   100vw-wide row + container padding. When WPBakery's script runs it writes
   its exact pixel values (correcting only the ~15px scrollbar difference),
   and wide-container.js then sets the definitive padding — both invisible.
   Rows built around a slider or a big embed are excluded, same as the JS. */
/* Horizontal overflow from the 100vw pre-stretch is clipped at the BODY only.
   - body overflow-x:clip (not hidden): hidden creates a scroll container and
     kills every position:sticky inside (the gallery filter bar).
   - .page_wrap gets overflow:visible: the theme's overflow:hidden broke
     sticky, and clip turned it into the FIXED-position containing block on
     iOS Safari — the floating header rendered inset/cut at the corners. */
body.body_style_wide{ overflow-x:clip; }
body.body_style_wide .page_wrap{ overflow:visible !important; }
body.body_style_wide .post_content > .vc_row[data-vc-full-width]:not(.home-hero):not(:has(rs-module-wrap)):not(:has(iframe)){
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:max(16px, calc((100vw - 1170px) / 2)) !important;
  padding-right:max(16px, calc((100vw - 1170px) / 2)) !important;
  box-sizing:border-box;
}
/* the hero should paint full-bleed with NO padding from the very start */
body.body_style_wide .post_content > .vc_row.home-hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* The studio promos put text on one half, image on the other. The text half
   carries a large boxed-era padding on the side facing away from the image
   (~262px) and its inner block another ~87px. Zero those and give the text a
   modest symmetric inset so it fills its half but stays off the image —
   works for both mirrored variants (image left / image right). */
/* Applies to the home studio sections AND any promo living in a full-width
   row (e.g. the About page's "Crafting Your Ideal Space" — its text half
   carries an INLINE padding-left:262.5px written by the theme's script; CSS
   !important outranks inline styles, so this holds no matter when it runs). */
/* ALL promos, not just full-width rows: service pages render the same promo
   inside normal rows as a white info card whose text touched the card edges
   (no content-side padding — UX report 2026-07-16). */
body.body_style_wide .post_content .sc_promo .sc_promo_text{
  box-sizing:border-box;
  padding-left:44px !important;
  padding-right:44px !important;
}
/* the boxed white variants also need vertical breathing room */
body.body_style_wide .post_content .sc_promo .sc_promo_text .sc_promo_text_inner{
  padding-top:34px !important;
  padding-bottom:34px !important;
}
body.body_style_wide .studio_2columns_section .sc_promo_text_inner,
body.body_style_wide .post_content > .vc_row[data-vc-full-width] .sc_promo_text_inner{
  width:100% !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Tablets: the promo halves are still side-by-side but each half is only
   ~380–500px wide — 88px of combined inset would crush the copy again. */
@media (min-width:768px) and (max-width:1023px){
  body.body_style_wide .post_content .sc_promo .sc_promo_text{
    padding-left:22px !important;
    padding-right:22px !important;
  }
}

/* Phones: the promo halves stack; keep a comfortable gutter. */
@media (max-width:767px){
  body.body_style_wide .post_content .sc_promo .sc_promo_text{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* ---------------------------------------------------------------------
   Uniform section rhythm — one vertical beat for EVERY section, site-wide.
   Pure CSS (parse-time), so nothing shifts after load. Applies to all
   top-level rows including theme-filled bands; only the hero and the
   page-title banner (first row) keep their own vertical spacing. Empty
   spacer rows are still collapsed by wide-container.js (inline !important
   outranks this). */
body.body_style_wide .post_content > .vc_row:not(.home-hero):not(:first-child),
body.body_style_wide .entry-content > .vc_row:not(.home-hero):not(:first-child){
  padding-top:var(--pi-sec-pad, clamp(56px,6vw,92px)) !important;
  padding-bottom:var(--pi-sec-pad, clamp(56px,6vw,92px)) !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* ---------------------------------------------------------------------
   Fold partitions — drafting-sheet bands (no rule lines).
   wide-container.js tags alternating sections with .pi-fold-alt and numbers
   every fold (data-pi-num). The band reads as a sheet of drafting paper:
   a warm translucent wash with REGISTRATION CROP MARKS in its corners and
   a large ghost sheet-number — no plain border lines. Everything fades in
   so the late JS tagging never pops. */
/* The band is a REAL element (.pi-band, injected by wide-container.js), not a
   ::before/::after — WPBakery uses the row's pseudo-elements as float
   clearfixes, so hijacking them both loses the `content` battle and risks
   breaking float containment. */
.pi-fold{ position:relative; }
/* isolation makes the row its own stacking context, so the z-index:-1 band
   paints above the page background but below the row's content */
.pi-fold-alt{ position:relative; isolation:isolate; }
/* =====================================================================
   DRAFTING MOTIF DISABLED 2026-07-17 — client is a luxury COMMERCIAL
   fit-out specialist (jewellery showrooms, cafés, corporate offices), not
   an architect. The drafting-sheet band — corner crop marks + ghost sheet
   number (01/02/03) + paper wash — is blueprint language and reads as the
   wrong trade. Hidden here; the source rules follow, inert, for the rebuild.
   The alternating section rhythm (padding) is unaffected — it lives on the
   rows, not on this band. Re-enable by removing this override. */
.pi-band{ display:none !important; }

/* ---- ORIGINAL (inert) ------------------------------------------------- */
.pi-band{
  position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%);
  /* corner crop marks (8 strokes) + soft paper wash */
  background-image:
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(180deg,
      light-dark(rgba(122,92,66,.10),  rgba(216,207,193,.06)),
      light-dark(rgba(122,92,66,.055), rgba(216,207,193,.025)));
  background-repeat:no-repeat;
  background-size:
    24px 1px, 1px 24px,          /* top-left  */
    24px 1px, 1px 24px,          /* top-right */
    24px 1px, 1px 24px,          /* bottom-left  */
    24px 1px, 1px 24px,          /* bottom-right */
    100% 100%;
  background-position:
    28px 22px, 28px 22px,
    calc(100% - 28px) 22px, calc(100% - 28px) 22px,
    28px calc(100% - 22px), 28px calc(100% - 22px),
    calc(100% - 28px) calc(100% - 22px), calc(100% - 28px) calc(100% - 22px),
    0 0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  animation:pi-band-in .8s ease .1s forwards;
}
/* ghost sheet number, top-right — drafting title-block style */
.pi-band__num{
  position:absolute;
  top:24px;
  right:40px;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-weight:700;
  font-size:clamp(56px,7vw,96px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--pi-line);
  letter-spacing:.02em;
  user-select:none;
}
/* dark theme: the wash alone is too quiet on a dark canvas — pages read as
   one uninterrupted block. Hairline edges make each fold a discrete sheet. */
html.pi-dark .pi-band{
  box-shadow: inset 0 1px 0 var(--pi-edge-faint), inset 0 -1px 0 var(--pi-edge-faint);
}
@keyframes pi-band-in{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .pi-band{ animation:none; opacity:1; }
}
@media (max-width:767px){
  .pi-band__num{ font-size:44px; top:14px; right:18px; }
}

/* The full-bleed Google-map row (home + service areas): give the embed a real
   height — without it the iframe collapses to a ~110px sliver that reads as an
   empty section. Kept full-bleed (the container JS skips iframe rows). */
.google-map-area iframe{
  display:block;
  width:100% !important;
  height:clamp(320px, 42vw, 480px) !important;
}

/* NOTE: the old mobile rule that added 112px of banner padding to clear the
   fixed header was removed 2026-07-16 — the content's top margin now equals
   the measured header height exactly (--pi-header-h, set by wide-container.js),
   so banners clear the header on every viewport without extra padding. */