/* ══════════════════════════════════════════════════════════════
   BEYOND THE SALON · scroll-driven 3D curved event showcase
   ──────────────────────────────────────────────────────────────
   Markup lives in index.html, the events and the motion live in
   assets/js/events.js. GSAP owns transform / opacity / filter on
   .evx-card — never put a CSS transition on those three here or
   the two will fight over the same properties.
   ══════════════════════════════════════════════════════════════ */

.evx{
  position:relative;
  overflow:hidden;                       /* the arc must never widen the page */
  min-height:100svh;
  display:grid;
  align-items:stretch;                   /* .evx-in owns the full height */
  background:linear-gradient(150deg,var(--espresso) 0%,#3a332e 55%,#221f1c 100%);
}
.evx::before,.evx::after{content:'';position:absolute;inset:0;pointer-events:none}
.evx::before{background:radial-gradient(78% 118% at 100% 6%,rgba(201,168,106,.20),transparent 62%)}
.evx::after{background:radial-gradient(58% 88% at 0% 100%,rgba(140,110,85,.16),transparent 66%)}

/* Two columns, two rows: the copy and the arc share the tall first row,
   the button sits on its own row underneath the arc. align-items:start
   is what pins the heading to the top of the section — the arc is
   re-centred on its own with align-self. */
.evx-in{
  position:relative;z-index:2;width:100%;max-width:1600px;margin:0 auto;
  padding:clamp(84px,9.5vh,112px) clamp(20px,5vw,72px) clamp(48px,8.5vh,100px);
  display:grid;grid-template-columns:minmax(300px,35fr) minmax(0,65fr);
  grid-template-rows:1fr auto;
  gap:0 clamp(24px,3.4vw,56px);align-items:start;
}
.evx-foot{grid-column:2;grid-row:2;display:flex;justify-content:center;
  padding-top:clamp(16px,2.2vh,30px)}

/* ---------- left column · 35% ---------- */
/* The column fills the row so the auto margins below can float the event
   details down into the space under the heading, at any viewport height. */
.evx-copy{grid-column:1;grid-row:1;align-self:stretch;
  display:flex;flex-direction:column;
  position:relative;z-index:3;max-width:470px}
.evx-copy .s-ey{color:var(--gold);margin-bottom:.85rem;font-size:.7rem}
/* The heading carries the section on its own now that the standfirst
   paragraph is gone, so it is sized up to match the photographs. */
.evx-title{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.7rem);font-weight:400;
  line-height:1.1;letter-spacing:-.01em;color:#fff;margin-bottom:1.2rem}
.evx-title em{font-style:italic;background:linear-gradient(135deg,var(--gold),#f0dcae);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* The block that swaps with the active photograph. min-height is
   sized for the longest entry so the button below it never jumps. */
/* margin-top:auto here and margin-bottom:auto on the controls split the
   leftover space, sitting the details block low under the heading */
.evx-live{min-height:216px;margin-top:auto;margin-bottom:1.5rem;padding-left:1.15rem;
  border-left:1px solid rgba(201,168,106,.26)}
.evx-meta{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.evx-meta i{width:3px;height:3px;border-radius:50%;background:rgba(201,168,106,.6);flex:none}
.evx-name{font-family:var(--serif);font-size:clamp(1.12rem,1.6vw,1.5rem);font-weight:400;
  line-height:1.28;color:var(--cream);margin-bottom:.5rem}
.evx-desc{font-size:.82rem;line-height:1.75;color:rgba(197,189,177,.66);font-weight:300;
  margin-bottom:.9rem}
.evx-link{display:inline-flex;align-items:center;gap:.45rem;padding-bottom:.25rem;
  font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--camel);
  text-decoration:none;border-bottom:1px solid rgba(184,153,122,.32);
  transition:color .3s,gap .3s var(--ease),border-color .3s}
.evx-link:hover{color:var(--ivory);gap:.8rem;border-color:var(--gold)}

.evx-controls{display:flex;align-items:center;gap:1rem;margin-bottom:auto}
.evx-arrow{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(250,239,220,.05);border:1px solid rgba(201,168,106,.34);color:var(--cream);
  cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease),opacity .3s}
.evx-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);
  color:var(--espresso);transform:translateY(-2px)}
.evx-arrow:disabled{opacity:.28;cursor:default}
.evx-arrow svg{width:17px;height:17px}
.evx-dots{display:flex;align-items:center;gap:.5rem}
/* Visible bar stays 26x3 (44x3 when active), but content-box padding gives the
   button a ~25px-tall tap area so it's comfortable to hit on touch. */
.evx-dot{width:26px;height:3px;padding:11px 0;box-sizing:content-box;border:0;border-radius:999px;cursor:pointer;
  background-color:rgba(197,189,177,.24);background-clip:content-box;transition:background .35s,width .35s var(--ease)}
.evx-dot:hover{background-color:rgba(197,189,177,.5)}
.evx-dot[aria-selected="true"]{width:44px;background-image:linear-gradient(90deg,var(--gold),#e3c98f)}

.evx-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.82rem 1.75rem;
  border-radius:999px;border:1px solid rgba(201,168,106,.55);background:rgba(201,168,106,.1);
  color:var(--cream);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;
  transition:gap .3s var(--ease),background .3s,color .3s,transform .3s var(--ease)}
.evx-cta:hover{gap:1rem;background:var(--gold);color:var(--espresso);
  border-color:var(--gold);transform:translateY(-2px)}

/* ---------- right column · 65% · the arc ---------- */
/* The height is capped by both the viewport height and its width, so a
   wide-but-short window can never push the cards outside the stage. */
.evx-stage{grid-column:2;grid-row:1;align-self:center;
  position:relative;width:100%;height:clamp(420px,min(68vh,36vw),700px);
  perspective:1500px;perspective-origin:52% 50%;
  touch-action:pan-y;                    /* vertical scroll stays native, JS reads the swipe */
  -webkit-tap-highlight-color:transparent}
.evx-track{position:absolute;inset:0;transform-style:preserve-3d}

.evx-card{position:absolute;left:50%;top:50%;
  width:clamp(250px,min(26vw,45vh),400px);aspect-ratio:3/4;
  display:block;margin:0;border-radius:22px;overflow:hidden;text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid rgba(184,153,122,.24);
  box-shadow:0 26px 60px rgba(0,0,0,.45),0 3px 12px rgba(0,0,0,.25);
  transform-style:preserve-3d;backface-visibility:hidden;
  will-change:transform,opacity,filter;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.evx-card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}

/* The hover lift is applied to the image, not the card — the card's
   own transform belongs to the scroll timeline. */
.evx-card.is-active{border-color:rgba(201,168,106,.5)}
.evx-card.is-active:hover{border-color:rgba(201,168,106,.85);
  box-shadow:0 34px 78px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.3)}
.evx-card.is-active:hover img{transform:scale(1.045)}
.evx-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.evx-cap{position:absolute;left:0;right:0;bottom:0;padding:2.8rem 1.15rem 1.05rem;
  display:flex;flex-direction:column;gap:.3rem;
  background:linear-gradient(to top,rgba(24,21,19,.94),rgba(24,21,19,.5) 46%,transparent)}
.evx-cap b{font-family:var(--serif);font-weight:400;font-size:1.05rem;line-height:1.25;color:var(--ivory)}
.evx-cap em{font-style:normal;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(201,168,106,.92)}

/* Docked bottom-right, clear of the caption text. .has-video reserves the
   room on the caption so a long event title can never run under it. */
.evx-play{position:absolute;right:.95rem;bottom:.95rem;z-index:2;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(28,25,22,.55);border:1px solid rgba(250,239,220,.55);backdrop-filter:blur(3px);
  transition:background .35s var(--ease),border-color .35s,color .35s,transform .35s var(--ease)}
.evx-play svg{margin-left:2px}
.evx-card.has-video .evx-cap{padding-right:4.6rem}
.evx-card.is-active:hover .evx-play{background:var(--gold);border-color:var(--gold);
  color:var(--espresso);transform:scale(1.06)}

/* ---------- tablet ---------- */
@media(max-width:1180px){
  .evx-in{grid-template-columns:minmax(250px,38fr) minmax(0,62fr);gap:0 clamp(18px,2.6vw,34px)}
  .evx-stage{height:clamp(380px,min(60vh,50vw),580px)}
  .evx-card{width:clamp(215px,min(27vw,42vh),320px);border-radius:18px}
  .evx-live{min-height:224px}
  .evx-cap{padding:2.2rem .9rem .85rem}
  .evx-cap b{font-size:.94rem}
}

/* ---------- mobile · text above, one photo with two peeks ---------- */
@media(max-width:900px){
  .evx{min-height:0}
  .evx-in{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    gap:1.9rem;padding:3.6rem 7% 3.4rem}
  /* stack in source order: copy, arc, button */
  .evx-copy,.evx-stage,.evx-foot{grid-column:1;grid-row:auto;align-self:auto}
  .evx-foot{justify-content:center;padding-top:0}
  .evx-copy{max-width:none}
  .evx-title{margin-bottom:1.3rem}
  .evx-live{min-height:196px;margin-bottom:1.3rem}
  /* width:auto lets the negative margin actually widen the stage so the
     neighbouring cards get room to peek past the text column */
  .evx-stage{height:clamp(345px,min(78vw,52vh),480px);width:auto;margin:0 -7%;
    perspective:900px;perspective-origin:50% 50%}
  .evx-card{width:clamp(192px,min(55vw,38vh),272px);border-radius:16px;
    box-shadow:0 16px 38px rgba(0,0,0,.42)}
  .evx-cap{padding:2rem .85rem .8rem}
  .evx-cap b{font-size:.88rem}
  .evx-cap em{font-size:.53rem}
  .evx-play{width:44px;height:44px;right:.7rem;bottom:.7rem}
  .evx-card.has-video .evx-cap{padding-right:3.6rem}
}

@media(max-width:520px){
  .evx-live{min-height:212px}
  .evx-arrow{width:38px;height:38px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .evx-card{will-change:auto}
}

/* ---------- fallback · GSAP unavailable ----------
   Never leave the section blank if the CDN is blocked: the arc
   collapses into a plain horizontal strip that still scrolls. */
.evx.is-fallback .evx-stage{perspective:none;overflow:visible}
.evx.is-fallback .evx-track{position:relative;inset:auto;height:100%;
  display:flex;gap:.9rem;overflow-x:auto;padding:4px 2px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.evx.is-fallback .evx-card{position:relative;left:auto;top:auto;
  flex:0 0 auto;height:100%;width:auto;aspect-ratio:3/4;scroll-snap-align:center}