/* ==========================================================================
   /events: the past-events gallery (f-company-b.css, loaded after pages.css)
   The chips, cards and lightbox keep the markup and class names the page's
   gallery script reads and rebuilds (.ev-fbtn .active .n, .ev-card[data-cat][hidden],
   img.loaded, .ev-shots .ev-meta .ev-tag .ev-title .ev-date, #lb.open #lb-*), so
   everything here hangs off those. .ev-frame (a span around each card photo),
   .ev-rv/.ev-shown/.ev-again (the reveal) and .ev-live come from the small layer
   script after it; a card the gallery script rebuilds without them still reads right.
   ========================================================================== */

/* each occasion keeps one colour: the dot on its chip, tag and caption, and its chosen chip */
.ev-heroimg,[data-cat="creative-teambuilding"]{--c:var(--coral);--ct:var(--t-coral)}
[data-cat="active-golf"]{--c:var(--teal);--ct:var(--t-teal)}
[data-cat="wellbeing-talks"]{--c:var(--blue);--ct:var(--t-blue)}
[data-cat="lunch-talks"]{--c:var(--amber);--ct:var(--t-amber)}
[data-cat="health-screenings"]{--c:var(--pink);--ct:var(--t-pink)}
[data-cat="financial-wellness"]{--c:var(--night);--ct:var(--night)}

/* ---------- Page head: copy and the featured event, half and half ---------- */
.ev-ph .ph-copy{grid-column:1/7}
.ev-ph .ph-media{grid-column:7/13}
.ev-lead figure{overflow:visible;background:none}
.ev-frame{position:relative;display:block;overflow:hidden;background:#d9d2c6}
.ev-frame img{width:100%;height:auto}

/* caption under a photo: occasion and date on one line, the event's name below in serif */
.ev-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:16px;padding-top:16px}
.ev-tag{grid-area:1/1;display:inline-flex;align-items:center;gap:9px;min-width:0;font:500 var(--fs-label)/1.4 var(--sans);letter-spacing:.02em;color:var(--ink-2)}
.ev-tag::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c,var(--coral))}
.ev-date{grid-area:1/2;font:500 var(--fs-label)/1.4 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.ev-title{grid-area:2/1/3/3;margin-top:10px;font:400 clamp(1.5rem,1.9vw,1.9rem)/1.06 var(--serif-t);letter-spacing:-.012em;color:var(--ink);text-wrap:balance;transition:transform .6s var(--ease)}
/* the " · " in a caption stays with the word before it (spans set by the layer script) */
.ev-nb{white-space:nowrap}
.ev-heroimg .ev-meta{padding-top:18px;border-bottom:1px solid var(--rule);padding-bottom:18px}

/* ---------- Occasion chips: sticky under the header once JavaScript can filter ---------- */
.ev-gal{padding-top:clamp(40px,4vw,64px)}
.ev-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(40px,5vw,72px)}
/* 6px of side room so a focus ring at either end is not cut by the scroller; the hairline
   is drawn as a background so it still lines up with the gallery's edges */
.js .ev-filters{position:sticky;top:var(--hd);z-index:40;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-6px;padding:14px 6px;background:linear-gradient(var(--rule),var(--rule)) 50% 100%/calc(100% - 12px) 1px no-repeat,var(--ground,var(--paper))}
.js .ev-filters::-webkit-scrollbar{display:none}
.ev-fbtn{flex:none;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;font:500 var(--fs-small)/1 var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:border-color .3s,background-color .3s,color .3s}
.ev-fbtn::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);transition:background-color .3s}
.ev-fbtn[data-cat="all"]::before{display:none}
.ev-fbtn .n{font-weight:400;font-variant-numeric:tabular-nums}
.ev-fbtn:hover{border-color:var(--ink);color:var(--ink)}
.ev-fbtn.active{background:var(--ct,var(--ink));border-color:var(--ct,var(--ink));color:var(--paper)}
.ev-fbtn.active::before{background:var(--paper)}
.ev-fbtn:focus-visible{outline-color:var(--ink);outline-offset:3px}
/* seven chips: a little tighter below 1440 so they hold one row down to 1280; with a mouse
   (no swipe to reach a hidden chip) they wrap onto a second row rather than scroll */
@media (min-width:600px) and (max-width:1439px){
  .ev-filters{gap:8px 6px}
  .ev-fbtn{padding:0 14px;gap:8px}
}
@media (min-width:600px) and (hover:hover) and (pointer:fine){
  .js .ev-filters{flex-wrap:wrap;overflow-x:visible}
}

/* ---------- Gallery: photos at their own proportions, captions beneath ---------- */
.ev-gallery{columns:3;column-gap:clamp(24px,3vw,48px)}
.ev-card{position:relative;break-inside:avoid;margin-bottom:clamp(48px,5vw,80px);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ev-card[hidden]{display:none}
.ev-card img{width:100%;height:auto;background:#d9d2c6}
.ev-frame img{transition:transform 1.2s var(--ease),opacity .6s var(--ease)}
.ev-live .ev-card img:not(.loaded){opacity:0}
.ev-card:hover .ev-frame img{transform:scale(1.045)}
.ev-card:hover .ev-title{transform:translateX(6px)}
.ev-card:focus-visible{outline:2px solid var(--ink);outline-offset:8px}
/* "◇ 2 photos": the events with more than one photo in the lightbox */
.ev-shots{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px;border-radius:999px;background:var(--paper);color:var(--ink);font:500 var(--fs-label)/1 var(--sans);font-variant-numeric:tabular-nums;pointer-events:none}
.ev-note{margin-top:clamp(24px,3vw,40px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--rule)}

/* reveal (only once the layer script arms a card): the photo rises from its frame's lower
   edge, the caption follows; a chip press slides the cards on show in again */
@media (prefers-reduced-motion:no-preference){
  html.js .ev-card.ev-rv .ev-frame{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease) calc(var(--k,0) * .12s)}
  html.js .ev-card.ev-rv :is(.ev-meta,.ev-shots){opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) calc(.25s + var(--k,0) * .12s),transform 1.1s var(--ease) calc(.25s + var(--k,0) * .12s)}
  html.js .ev-card.ev-rv.ev-shown .ev-frame{clip-path:inset(0)}
  html.js .ev-card.ev-rv.ev-shown :is(.ev-meta,.ev-shots){opacity:1;transform:none}
  .ev-card.ev-again{animation:wk-in .5s var(--ease)}
}

/* ---------- Closing line: the old button, at display size over the glow ---------- */
/* the band's 620px column would push this one line onto three at wide screens: size it in em */
.ev-cta .cta-in{max-width:none}
.ev-cta .cta-h{max-width:9.5em}
.ev-next{display:inline;transition:color .4s}
/* the photo travels with "for", as the homepage's photo travels with its second word */
.ev-tail{white-space:nowrap}
.ev-next .exp-img{margin-inline:.04em;vertical-align:baseline}
.ev-next .exp-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ev-next .ic{display:inline-block;width:.6em;height:.6em;stroke-width:2.2;vertical-align:baseline;transition:transform .7s var(--ease)}
.ev-next:hover .exp-img img{transform:scale(1.14)}
.ev-next:hover .ic,.ev-next:focus-visible .ic{transform:translate(.08em,-.13em)}
.ev-next:focus-visible{outline-color:var(--paper);outline-offset:8px}

/* ---------- Lightbox (#lb): night ground, the photo at its own proportions ---------- */
.lb{--lb-t:96px;--lb-b:150px;position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:var(--lb-t) calc(var(--gutter) + 76px) var(--lb-b);background:var(--night);color:var(--paper)}
.lb.open{display:flex}
html.lb-open,html.lb-open body{overflow:hidden}
#lb-img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;background:#2a2c31;transition:opacity .4s var(--ease)}
/* while the next photo loads (.is-loading, set by the layer script) the old one is hidden
   and a thin ring sits where the photo will be */
.lb.is-loading #lb-img{opacity:0;transition:none}
.lb.is-loading::before{content:"";position:absolute;left:50%;top:calc(50% + (var(--lb-t) - var(--lb-b)) / 2);width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--line-d);border-top-color:var(--paper);border-radius:50%}
.lb-btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line-d);border-radius:50%;color:var(--paper);font-size:1.25rem;transition:background-color .35s,color .35s,border-color .35s}
.lb-btn .ic{stroke-width:1.8}
.lb-btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.lb-btn:focus-visible{outline-color:var(--paper);outline-offset:4px}
.lb-btn[hidden]{display:none}
.lb-x{top:calc((var(--hd) - 52px) / 2);right:var(--gutter)}
.lb-p,.lb-n{top:50%;transform:translateY(-50%)}
.lb-p{left:var(--gutter)}
.lb-n{right:var(--gutter)}
.lb-p .ic,.lb-n .ic{transition:transform .5s var(--ease)}
.lb-p:hover .ic{transform:translateX(-3px)}
.lb-n:hover .ic{transform:translateX(3px)}
.lb-cap{position:absolute;left:50%;bottom:clamp(28px,5vh,48px);transform:translateX(-50%);width:min(100% - 2 * var(--gutter) - 152px,40em);text-align:center}
.lb-cap .t{font:400 var(--fs-title)/1.1 var(--serif-t);letter-spacing:-.01em;text-wrap:balance}
.lb-cap .d{margin-top:8px;font:500 var(--fs-label)/1.4 var(--sans);font-variant-numeric:tabular-nums;color:var(--paper-2)}
@media (prefers-reduced-motion:no-preference){
  .lb.open{animation:ev-lb .45s var(--ease)}
  .lb.open #lb-img{animation:ev-lb-img .7s var(--ease)}
  .lb.is-loading::before{animation:ev-spin .9s linear infinite,ev-lb .3s .35s both}
}
@keyframes ev-lb{from{opacity:0}}
@keyframes ev-lb-img{from{transform:scale(.96)}}
@keyframes ev-spin{to{transform:rotate(1turn)}}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .ev-gallery{columns:2}
}
@media (max-width:960px){
  .ev-ph .ph-copy,.ev-ph .ph-media{grid-column:1/-1}
}
@media (max-width:599px){
  .ev-gallery{columns:1}
  .ev-card{margin-bottom:56px}
  /* lightbox: the photo spans the screen, previous / next flank the caption at the foot */
  .lb{--lb-t:calc(var(--hd) + 8px);--lb-b:168px;padding-inline:var(--gutter)}
  .lb-p,.lb-n{top:auto;bottom:clamp(28px,5vh,48px);transform:none}
  .lb-cap{bottom:clamp(28px,5vh,48px);width:calc(100% - 2 * var(--gutter) - 128px);min-height:52px;display:flex;flex-direction:column;justify-content:center}
  .lb-cap .t{font-size:1.3rem}
}

/* ---------- Reduced motion and print: everything static and shown ---------- */
@media (prefers-reduced-motion:reduce){
  .ev-frame img,.ev-title,#lb-img{transition:none}
  .ev-card:hover .ev-frame img,.ev-card:hover .ev-title{transform:none}
}
@media print{
  .ev-card .ev-frame{clip-path:none!important}
  .ev-card :is(.ev-meta,.ev-shots),.ev-card img{opacity:1!important;transform:none!important}
  .js .ev-filters{position:static}
  .ev-gallery{columns:2}
  .lb{display:none!important}
}