/* =========================================================================
   Shiv Shakti — banner-backed page hero (content pages + shop header)

   The artwork in images/banner/ is a 3:1 picture with the product lineup on
   the right and an empty maroon panel on the left. The picture is fitted to
   the hero's height and pinned to the right edge, so the products are never
   cropped at any width; the copy sits over the maroon panel, and on phones
   the picture stacks above the copy.

     <section class="pg-hero pg-banner">
       <div class="pg-banner-stage">
         <img class="pg-banner-img" src="images/banner/b4.jpg" alt="" …>
         <div class="container"><div class="pg-hero-in"> … </div></div>
       </div>
       <div class="pg-banner-strip"> … optional .pg-facts … </div>
     </section>

   .pg-banner.is-compact is a shorter variant (shop header).

   Per-page knobs (set inline on .pg-banner):
     --pg-banner-h    stage height on desktop    (default clamp(400px,33vw,600px))
     --pg-banner-pos  picture focus on phones    (default 84%)
   Add .hide-panel to the <img> for b1.jpg / b2.jpg (see below).
   ========================================================================= */

.pg-banner{
  padding:0;
  background:var(--maroon-950);
}
.pg-banner::before{display:none;}      /* the plain hero's radial wash — the picture replaces it */

/* ------------------------------------------------------------------ stage */
.pg-banner-stage{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:var(--pg-banner-h,clamp(400px,33vw,600px));
  padding:clamp(40px,4.4vw,64px) 0 clamp(48px,5vw,76px);
  /* fills the space left of the picture on very wide screens */
  background:linear-gradient(90deg,var(--maroon-950) 0%,var(--maroon-900) 45%,var(--maroon-800) 100%);
}
.pg-banner-stage > .container{width:100%;}
.pg-banner.is-compact{--pg-banner-h:clamp(260px,22vw,380px);}   /* shop: keep products near the fold */

.pg-banner-img{
  position:absolute; z-index:-2; top:0; right:0;
  width:auto; height:100%; max-width:none;
  /* melt the picture's left edge into the stage colour */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  animation:pgBannerIn 1.4s var(--pg-ease,cubic-bezier(.22,1,.36,1)) both;
}
/* b1 / b2: their plain left panel carries a lotus divider that would run through
   the copy — fade the whole panel out and keep only the gold arch */
.pg-banner-img.hide-panel{
  -webkit-mask-image:linear-gradient(90deg,transparent 0 41%,#000 49%);
          mask-image:linear-gradient(90deg,transparent 0 41%,#000 49%);
}
@keyframes pgBannerIn{from{opacity:0; transform:scale(1.04);}to{opacity:1; transform:none;}}

/* legibility wash: dark over the copy, clear over the products */
.pg-banner-stage::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 75% at 14% 22%,rgba(232,200,118,.13),transparent 62%),
    linear-gradient(90deg,rgba(40,5,9,.86) 0%,rgba(40,5,9,.68) 32%,rgba(40,5,9,.22) 50%,rgba(40,5,9,0) 62%),
    linear-gradient(0deg,rgba(40,5,9,.6) 0%,transparent 26%);
}

/* ------------------------------------------------------------------- copy */
.pg-banner .pg-hero-in{max-width:560px;}
.pg-banner h1{
  font-size:clamp(1.75rem,2.9vw,2.7rem);
  text-shadow:0 2px 20px rgba(20,3,6,.55);
  text-wrap:balance;
}
.pg-banner h1 em{text-shadow:none;}   /* a shadow would paint through the clipped gold gradient */
.pg-banner .lead{max-width:52ch; color:#ecdcc2; text-wrap:pretty;}
.pg-banner .pg-hero-cta{margin-top:26px;}

/* ------------------------------------------- fact strip under the picture */
.pg-banner-strip{
  position:relative;
  background:linear-gradient(180deg,var(--maroon-900),var(--maroon-950));
  border-top:1px solid rgba(217,176,74,.34);
}
.pg-banner-strip .pg-facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; margin:0; padding:24px 0 28px; border-top:0;
}
.pg-banner-strip .pg-facts .f{
  min-width:0; padding:2px 22px;
  border-left:1px solid rgba(217,176,74,.2);
}
.pg-banner-strip .pg-facts .f:first-child{padding-left:0; border-left:0;}

/* ------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .pg-banner .pg-hero-in{max-width:470px;}
}

@media (max-width:860px){
  /* picture on top, copy on a maroon panel beneath it */
  .pg-banner-stage{
    display:block; min-height:0; padding:0;
    background:linear-gradient(180deg,var(--maroon-900),var(--maroon-950));
  }
  .pg-banner{--pg-banner-ar:2;}
  .pg-banner-img{
    position:relative; z-index:auto;
    width:100%; height:auto; aspect-ratio:var(--pg-banner-ar);
    object-fit:cover; object-position:var(--pg-banner-pos,84%) center;
  }
  .pg-banner-img,
  .pg-banner-img.hide-panel{-webkit-mask-image:none; mask-image:none;}
  .pg-banner-stage::before{
    inset:0 0 auto 0; height:calc(100vw / var(--pg-banner-ar)); z-index:1;
    background:linear-gradient(0deg,var(--maroon-900) 0%,rgba(58,10,17,0) 34%);
  }
  .pg-banner-stage > .container{position:relative; z-index:2; padding-top:26px; padding-bottom:44px;}
  .pg-banner .pg-hero-in{max-width:none;}
  .pg-banner.is-compact{--pg-banner-ar:2.4;}
  .pg-banner.is-compact .pg-banner-stage > .container{padding-top:18px; padding-bottom:30px;}

  .pg-banner-strip .pg-facts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; padding:22px 0 26px;}
  .pg-banner-strip .pg-facts .f,
  .pg-banner-strip .pg-facts .f:first-child{padding:0; border-left:0;}
}
@media (max-width:600px){
  .pg-banner{--pg-banner-ar:1.7778;}      /* 16:9 */
}
@media (max-width:480px){
  .pg-banner{--pg-banner-ar:1.3333;}      /* 4:3 */
  .pg-banner-strip .pg-facts .f b{font-size:.94rem;}
  .pg-banner-strip .pg-facts .f{gap:10px;}
  .pg-banner-strip .pg-facts .f > i{width:34px; height:34px; border-radius:10px;}
}

@media (prefers-reduced-motion:reduce){
  .pg-banner-img{animation:none;}
}