/* ============================================================
   VINORA EVENTS — hero.css   (loaded LAST, overrides everything)

   Rewritten. The previous version kept patching a gradient scrim
   over bright photography and kept losing. Three rules now:

   1. The hero copy sits on a SOLID panel, never on the photo.
   2. The copy is never hidden by an animation and never sits on
      a 3D composited layer (both washed the text out).
   3. The mobile drawer lives at body level, not inside <header>.
   ============================================================ */

/* ============================================================
   1. HERO — editorial split: solid panel left, photograph right
   ============================================================ */
.hero{
  position:relative;
  height:auto;min-height:0;
  padding:0;
  background:var(--plum-900);
  perspective:none;              /* no 3D scene around the text */
  overflow:hidden;
}

/* the photograph occupies the right side and feathers into the panel */
.hero .slide{
  position:absolute;top:0;right:0;bottom:0;left:43%;
  transform:none !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 100%);
}
.hero .slide img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.86) saturate(1.08);
}

/* the solid panel — a known background for white type */
.hero:after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,
      #14021a 0%,
      #16021f 38%,
      rgba(22,2,31,.92) 50%,
      rgba(22,2,31,.55) 62%,
      rgba(20,3,28,.12) 76%,
      rgba(14,2,20,.45) 100%),
    linear-gradient(180deg,
      rgba(14,2,20,.5) 0%,
      rgba(14,2,20,0) 28%,
      rgba(14,2,20,0) 66%,
      rgba(14,2,20,.7) 100%);
}
/* a soft gold bloom, kept well away from the copy */
.hero:before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.34;
  background:radial-gradient(ellipse at 82% 66%,rgba(212,160,23,.34),transparent 60%);
}
.petals{z-index:4}

.hero-in{
  position:relative;z-index:6;
  min-height:min(86vh,700px);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 0 108px;
  color:#fff;
  transform-style:flat;
  -webkit-font-smoothing:antialiased;
}
.hero-in:before{display:none}       /* the panel above replaces it */

/* a hairline rule, so the panel reads as a designed block */
.hero-in:after{
  content:"";position:absolute;left:0;top:64px;width:56px;height:2px;
  background:var(--grad-gold);opacity:.9;
}

/* ---------- the copy: always visible, always flat ---------- */
.hero .eyebrow,
.hero h1,
.hero h1 .w,
.hero p,
.hero-cta,
.hero-cta .btn,
.hero-cta .play,
.hero-side{opacity:1 !important}

.hero h1{
  transform:none;
  max-width:min(600px,48vw);
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
}
.hero h1 .w{transform:translateY(24px)}
.hero p{max-width:min(470px,40vw);color:#f6eefb;transform:translateY(12px);
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-cta{transform:translateY(12px)}
.hero .eyebrow{letter-spacing:.26em;filter:drop-shadow(0 1px 5px rgba(0,0,0,.7))}

/* gold headline words: each carries its own gradient, because a
   parent's background-clip:text cannot paint through the
   transformed spans the word-splitter creates */
.hero h1 em{filter:none}
.hero h1 em,.hero h1 em .w{color:#f2d79a}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em .w{
    background:linear-gradient(100deg,#f7e3b0,#d4a017 42%,#fbeecb 68%,#d4a017);
    background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:wordUp 1s var(--ease) forwards, shine 5s linear infinite;
  }
}

.hero-side{right:40px}
.hero-side .script{filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.dots{bottom:34px}
.dots .wrap{text-shadow:0 1px 6px rgba(0,0,0,.8)}
.play{text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hero-cta .btn{background:var(--grad-gold);color:var(--plum-800)}
.hero-cta .btn:hover{color:var(--gold-300)}

/* ---------- hero: tablet & phone ---------- */
@media(max-width:1024px){
  .hero .slide{left:0;-webkit-mask-image:none;mask-image:none}
  .hero .slide img{filter:brightness(.5) saturate(1.05)}
  .hero:after{
    background:
      linear-gradient(180deg,rgba(14,2,20,.9) 0%,rgba(18,2,25,.86) 46%,rgba(14,2,20,.95) 100%);
  }
  .hero:before{opacity:.2}
  .hero h1{max-width:none}
  .hero p{max-width:520px}
  .hero-in{padding:78px 0 92px;min-height:0}
  .hero-in:after{top:52px}
}
@media(max-width:620px){
  .hero-in{padding:62px 0 84px}
  .hero-in:after{top:42px;width:40px}
  .hero-side,.mouse{display:none}
  .dots{bottom:26px}
}

/* ============================================================
   2. INNER PAGE HEROES + CTA BAND — same contrast guarantee
   ============================================================ */
.phero img.bg{filter:brightness(.5) saturate(1.05)}
.phero:after{background:linear-gradient(180deg,rgba(14,2,20,.88) 0%,rgba(22,3,31,.82) 45%,rgba(14,2,20,.92) 100%)}
.phero h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.phero h1 em{filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}
.phero p{color:#f2e6f8;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.phero .eyebrow{filter:drop-shadow(0 1px 6px rgba(0,0,0,.8))}
.crumb{text-shadow:0 1px 6px rgba(0,0,0,.7)}

.cta img.bg{filter:brightness(.5) saturate(1.04)}
.cta h2{text-shadow:0 2px 14px rgba(0,0,0,.55)}
.cta p{color:#f0e2f7;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ============================================================
   3. MOBILE DRAWER  (#mdrawer, injected at body level by main.js)
   A drawer inside <header> inherits the header as its containing
   block (backdrop-filter does that), so it opened off-screen and
   dragged the page sideways. At body level it cannot happen.
   ============================================================ */
#mdrawer,#mscrim{display:none}

@media(max-width:880px){
  .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(253,250,246,.98)}
  .header.scrolled{background:#fdfaf6}
  .nav{display:none !important}          /* header nav is not used at this width */

  #mscrim{
    display:block;position:fixed;inset:0;z-index:900;
    background:rgba(12,1,18,.62);
    opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  }
  #mscrim.on{opacity:1;visibility:visible}

  #mdrawer{
    display:flex;flex-direction:column;
    position:fixed;top:0;right:0;bottom:0;z-index:901;
    width:min(86vw,340px);
    background:linear-gradient(180deg,#1f0430 0%,#14021c 100%);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
    transform:translateX(105%);
    transition:transform .45s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
    padding:26px 0 34px;
  }
  #mdrawer.on{transform:none}
  body.nav-open{overflow:hidden}

  #mdrawer .md-top{display:flex;align-items:center;justify-content:space-between;
    padding:0 22px 20px;border-bottom:1px solid rgba(248,216,129,.16);margin-bottom:14px}
  #mdrawer .md-brand{font-family:var(--font-display);font-size:22px;font-weight:700;
    letter-spacing:.14em;background:var(--grad-gold);-webkit-background-clip:text;
    background-clip:text;color:transparent}
  #mdrawer .md-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(248,216,129,.3);
    background:none;color:var(--gold-300);font-size:22px;line-height:1;cursor:pointer;
    display:grid;place-items:center;transition:.3s}
  #mdrawer .md-x:active{background:var(--grad-gold);color:var(--plum-800)}

  #mdrawer a{display:block;padding:14px 22px;color:#ecdcf4;font-family:var(--font-display);
    font-size:19px;font-weight:600;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.05)}
  #mdrawer a:active{background:rgba(248,216,129,.1);color:var(--gold-300)}
  #mdrawer a.sub{font-family:var(--font-body);font-size:14.5px;font-weight:400;
    padding:11px 22px 11px 36px;color:#bda6c9;border-bottom:0}
  #mdrawer .md-head{padding:18px 22px 6px;font-family:var(--font-caps);font-size:9.5px;
    font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#c08f2e}
  #mdrawer .md-cta{margin:20px 22px 0}
  #mdrawer .md-cta .btn{width:100%;justify-content:center}
  #mdrawer .md-call{display:block;padding:16px 22px 0;color:var(--gold-300);
    font-family:var(--font-body);font-size:15px;border-bottom:0}
}

/* ------------------------------------------------------------
   Mobile drawer: collapsible groups.
   Rendering all 37 service links flat made the drawer several
   screens tall and pushed Gallery / Blog / Contact out of reach.
   ------------------------------------------------------------ */
@media(max-width:880px){
  #mdrawer .md-group{border-bottom:1px solid rgba(255,255,255,.05)}

  #mdrawer .md-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:14px 22px;border:0;background:none;text-align:left;
    color:#ecdcf4;font-family:var(--font-display);font-size:19px;font-weight:600;
    letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  #mdrawer .md-toggle:active{background:rgba(248,216,129,.1);color:var(--gold-300)}
  #mdrawer .md-group.open > .md-toggle{color:var(--gold-300)}

  #mdrawer .md-chev{
    flex:0 0 auto;width:9px;height:9px;margin-right:2px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .3s var(--ease);opacity:.7;
  }
  #mdrawer .md-group.open .md-chev{transform:rotate(-135deg) translate(-2px,-2px);opacity:1}

  /* Visibility is driven by the hidden attribute from JS, not by a
     height transition. Both the grid 0fr->1fr and the max-height
     versions computed to zero here, and a menu that opens is worth
     more than a menu that slides. The content still fades in. */
  #mdrawer .md-panel{overflow:hidden}
  #mdrawer .md-panel[hidden]{display:none}
  #mdrawer .md-panel-in{animation:mdPanelIn .3s var(--ease) both}
  @keyframes mdPanelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  #mdrawer .md-panel-in .md-head:first-child{padding-top:4px}
  #mdrawer a.sub-all{
    font-family:var(--font-body);font-size:14px;font-weight:600;
    color:var(--gold-300);padding:10px 22px 10px 36px;
  }
  #mdrawer .md-panel-in{padding-bottom:8px}

  /* Every tap target clears the 44px minimum. */
  #mdrawer a,#mdrawer .md-toggle{min-height:48px;display:flex;align-items:center}
  #mdrawer a.sub{min-height:44px}
  #mdrawer .md-head{display:block;min-height:0}
  #mdrawer .md-cta{display:block}
}