/* =====================================================================
   Section feature drawings — café (left) + jewellery showroom (right)
   ---------------------------------------------------------------------
   BOTH client-supplied line-drawings frame the home intro section: the
   café sketch on the LEFT, the jewellery-showroom sketch on the RIGHT,
   both pinned to the viewport edges OUTSIDE the container and fading
   toward the centre, with the copy CENTRED and clean between them. The
   drawings scroll with the section (NOT a floating fixed background).

   Assets: assets/decor/cafe-{light,dark}.webp (café) and
   showroom-{light,dark}.webp (jewellery, "LUXÉRA" wording painted out).
   Both are the ivory paper knocked out to transparent line-art, tinted
   graphite/sepia (light) / warm ivory (dark). WebP + alpha.

   Technique: full-bleed the intro row (bound to the STABLE `.content-area1`
   class, not the volatile WPBakery hash) so its background reaches both
   viewport edges. Three background layers: a page-colour gradient that is
   WEAK at the edges (drawings show) and STRONG in the middle (drawings
   dissolve behind the centred copy), over the two drawings anchored left
   and right. A row min-height gives them room; vh-based sizing keeps them
   stable regardless of copy length.

   Desktop-only (≥1000px); on tablet/phone the section is a normal stacked
   text block (drawings dropped for a clean, fast, readable layout).
   ===================================================================== */

@media (min-width:1000px){
  body.home .content-area1{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    box-sizing:border-box;
    position:relative;
    /* smaller min-height so the intro copy isn't marooned in a big cream
       void (design-review fold-3 fix) while the framing drawings keep room */
    min-height:clamp(340px, 40vh, 480px);
    display:flex;
    align-items:center;
    /* gradient (page colour) weak at both edges → drawings visible; strong
       in the centre → drawings dissolve behind the centred reading column */
    background-image:
      linear-gradient(90deg,
        rgba(250,248,244,.12) 0%,
        rgba(250,248,244,.45) 24%,
        rgba(250,248,244,.90) 42%,
        rgba(250,248,244,.90) 58%,
        rgba(250,248,244,.45) 76%,
        rgba(250,248,244,.12) 100%),
      url(../assets/decor/cafe-light.webp),
      url(../assets/decor/showroom-light.webp);
    background-repeat:no-repeat, no-repeat, no-repeat;
    background-position:center center, left center, right center;
    background-size:cover, auto 86%, auto 86%;
    /* copy stays CENTRED in the container between the two drawings */
    padding-left:max(16px, calc((100vw - 1170px) / 2)) !important;
    padding-right:max(16px, calc((100vw - 1170px) / 2)) !important;
  }
  html.pi-dark body.home .content-area1{
    background-image:
      linear-gradient(90deg,
        rgba(21,18,14,.10) 0%,
        rgba(21,18,14,.42) 24%,
        rgba(21,18,14,.90) 42%,
        rgba(21,18,14,.90) 58%,
        rgba(21,18,14,.42) 76%,
        rgba(21,18,14,.10) 100%),
      url(../assets/decor/cafe-dark.webp),
      url(../assets/decor/showroom-dark.webp);
  }
}

/* =====================================================================
   Floating brand name — a faint vertical "PARAS INTERIORS" wordmark spine
   in both desktop gutters, fixed so the page scrolls alongside it. It sits
   behind the hero (which is lifted to z-index:2) so it only reads FROM THE
   NEXT FOLD down — a quiet, persistent brand mark. pointer-events:none;
   confined to the gutter so it never touches the reading column.
   ===================================================================== */
@media (min-width:1280px){
  body.body_style_wide::before,
  body.body_style_wide::after{
    content:"PARAS INTERIORS";
    position:fixed;
    top:50%;
    z-index:1;
    writing-mode:vertical-rl;
    white-space:nowrap;
    font-family:'Poppins','Poppins-fallback',sans-serif;
    font-weight:600;
    font-size:clamp(20px, 1.9vw, 32px);
    letter-spacing:.46em;
    line-height:1;
    color:light-dark(rgba(122,92,66,.10), rgba(216,207,193,.08));
    pointer-events:none;
    user-select:none;
    opacity:1;
    transition:opacity .35s ease;
  }
  body.body_style_wide::before{
    left:max(12px, calc((100vw - var(--pi-container-w, 1170px)) / 2 - 48px));
    transform:translateY(-50%) rotate(180deg);
  }
  body.body_style_wide::after{
    right:max(12px, calc((100vw - var(--pi-container-w, 1170px)) / 2 - 48px));
    transform:translateY(-50%);
  }
  /* the name yields to the drawing section: js/hero.js adds .pi-hide-spine
     to the body while the café/showroom feature crosses the viewport centre,
     so the wordmark never overlaps the background pictures */
  body.body_style_wide.pi-hide-spine::before,
  body.body_style_wide.pi-hide-spine::after{ opacity:0; }
}
@media (min-width:1280px) and (max-width:1439px){
  body.body_style_wide::before,
  body.body_style_wide::after{ letter-spacing:.34em; font-size:20px; }
}