/* =========================================================
   EVENTS SECTION  (paste at the VERY END of css/style.css,
   below the Facilities section CSS)
   Needs: assets/event-01.jpg … event-08.jpg (landscape, about 16:11)
   ========================================================= */
@property --ea{syntax:"<angle>";inherits:false;initial-value:0deg}

.events{
  --teal:#1f5a4c; --teal-deep:#17453a; --gold-ink:#9c752a; --mint:#eef3ef;
  --ep:max(clamp(20px,6vw,125px),calc((100vw - 1400px) / 2));          /* side gutter shared by heading + cards */
  --gap:clamp(20px,2.2vw,32px);
  position:relative;overflow:hidden;isolation:isolate;color:#2c3d35;
  padding:clamp(64px,7vw,110px) 0 clamp(56px,6vw,96px);
  background:
    radial-gradient(900px 520px at 92% 6%,rgba(196,154,69,.2),transparent 70%),
    radial-gradient(900px 600px at 2% 92%,rgba(31,90,76,.15),transparent 70%),
    linear-gradient(180deg,#e7efe9,#f4f1e6 55%,#e8f0eb);
}
.e-sparks{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.e-ghost{position:absolute;left:50%;top:1%;transform:translateX(-50%);z-index:-1;pointer-events:none;white-space:nowrap;
  font-family:var(--serif);font-weight:500;font-size:clamp(110px,17vw,270px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(31,90,76,.09)}

/* ---------- Heading + controls ---------- */
.e-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:0 var(--ep);margin-bottom:clamp(10px,2vw,26px)}
.e-title h2{font-family:var(--serif);font-weight:500;font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.012em;color:var(--teal-deep)}
.e-title h2::after{content:"";display:block;width:clamp(90px,10vw,150px);height:14px;margin-top:16px;
  background:linear-gradient(90deg,#c49a45,transparent) left center/100% 1px no-repeat,linear-gradient(135deg,#f0d994,#b48a3a) left center/10px 10px no-repeat}
.e-tag{margin-top:6px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,27px);line-height:1.2;color:var(--gold-ink)}
.e-sub{margin-top:12px;max-width:560px;font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:#4b5f55}
.e-ctrl{display:flex;gap:12px;flex:none;padding-bottom:6px}
.e-arrow{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--teal-deep);background:#fff;
  border:1px solid rgba(196,154,69,.55);box-shadow:0 14px 30px rgba(23,69,58,.18),0 0 0 4px rgba(255,255,255,.5);
  transition:background .3s,color .3s,transform .3s var(--ease),opacity .3s,box-shadow .3s}
.e-arrow:hover:not(:disabled){background:var(--gold-grad);color:#1c1405;transform:scale(1.08);box-shadow:0 16px 36px rgba(196,154,69,.5)}
.e-arrow:disabled{opacity:.35;cursor:default}

/* ---------- Scroller (cards are all the same size; every second card sits lower) ---------- */
.e-scroller{display:flex;align-items:flex-start;gap:var(--gap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--ep);scrollbar-width:none;cursor:grab;
  padding:34px var(--ep) 100px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.e-scroller::-webkit-scrollbar{display:none}
.e-scroller.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.e-scroller:focus-visible{outline:2px solid #c49a45;outline-offset:-4px}
.ev{position:relative;flex:0 0 clamp(300px,33vw,470px);scroll-snap-align:start;--mx:50%;--my:50%}
.ev:nth-child(even){margin-top:44px}

/* glowing halo */
.ev-halo{position:absolute;inset:8% 5% -5%;z-index:0;border-radius:36px;pointer-events:none;
  background:conic-gradient(from var(--ea),rgba(214,176,92,.8),rgba(31,90,76,.6),rgba(214,176,92,.8));
  filter:blur(28px);opacity:.34;transition:opacity .45s;animation:espin 9s linear infinite,epulse 5s ease-in-out infinite}
.ev:hover .ev-halo{opacity:.85}
@keyframes espin{to{--ea:360deg}}
@keyframes epulse{50%{transform:scale(1.05)}}

/* card */
.ev-card{position:relative;z-index:1;aspect-ratio:16/11;border-radius:30px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--c1,#2f6c5d),var(--c2,#123a30));
  box-shadow:0 30px 56px -22px rgba(23,69,58,.55),0 0 0 1px rgba(255,255,255,.4);
  transition:transform .5s var(--ease),box-shadow .45s}
.ev:hover .ev-card{transform:translateY(-10px);box-shadow:0 44px 76px -20px rgba(23,69,58,.6),0 0 44px rgba(214,176,92,.42),0 0 0 1px rgba(246,224,160,.7)}
.ev-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.3s var(--ease)}
.ev:hover .ev-img{transform:scale(1.09)}
.ev-ph{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);color:#fff;opacity:.16}
.ev-card.has-photo .ev-ph{display:none}
.ev-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,45,37,.12) 0%,rgba(14,45,37,0) 30%,rgba(14,45,37,0) 38%,rgba(10,36,28,.92) 100%)}
/* shine sweep (staggered; quicker on hover) */
.ev-card::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-70%;width:34%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);
  animation:eshine 7.5s ease-in-out calc(var(--i) * .8s) infinite}
.ev:hover .ev-card::after{animation-duration:1.8s;animation-delay:0s}
@keyframes eshine{0%,58%{left:-70%}100%{left:140%}}
/* cursor spotlight lives on the wrapper so it can sit over the photo */
.ev-link::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(255,236,170,.32),transparent 60%)}
.ev:hover .ev-link::before{opacity:1}

/* title + date */
.ev-info{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 84px 24px 24px}
.ev-when{display:block;font-size:13px;font-weight:500;letter-spacing:.1em;color:#f0d994}
.ev-info h3{margin-top:8px;font-family:var(--serif);font-weight:600;font-size:clamp(22px,1.7vw,28px);line-height:1.15;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-go{position:absolute;z-index:3;right:18px;bottom:22px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#1c1405;
  background:var(--gold-grad);box-shadow:0 10px 24px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.25);transition:transform .45s var(--ease)}
.ev:hover .ev-go{transform:rotate(45deg) scale(1.1)}
.ev-link{position:absolute;inset:0;z-index:4;border-radius:inherit}
.ev-link:focus-visible{outline:3px solid #f0d994;outline-offset:-5px}

/* footer row */
.e-foot{display:flex;align-items:center;gap:clamp(20px,4vw,60px);padding:0 var(--ep)}
.e-progress{flex:1;height:3px;border-radius:3px;background:rgba(31,90,76,.16);overflow:hidden}
.e-progress i{display:block;height:100%;width:12%;border-radius:3px;background:var(--gold-grad);transition:width .25s}

/* ---------- Reveal ---------- */
.events.reveal-ready .ev{opacity:0;transform:translateY(46px)}
.events.reveal-ready .ev.in{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(var(--d,0) * .1s),transform .9s var(--ease) calc(var(--d,0) * .1s)}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .e-head{flex-direction:column;align-items:flex-start}
  .e-ctrl{display:none}                           /* swipe on phones */
  .ev{flex-basis:min(84vw,380px)}
  .ev:nth-child(even){margin-top:26px}
  .e-foot{flex-direction:column;align-items:stretch}
  .e-foot .btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ev-halo,.ev-card::after{animation:none!important}
  .events.reveal-ready .ev{opacity:1;transform:none}
}