/* ==========================================================================
   EVENTS — an art-directed collage of real photos. Every photo is masked
   by a form from the shape language (drop, arch, circle, leaf, capsule,
   quarter) and carries a small glass label. Hovering one lifts it, pushes
   its neighbours away a little and shifts the geometry behind
   (js/events.js); clicking opens it large.
   Tablets and phones get a swipeable strip instead.
   ========================================================================== */

.events { overflow: hidden; }
.events__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
}
.events__head .title { max-width: 12ch; }
.events__head .lead { margin-top: 0; }

/* ── Collage (desktop) ─────────────────────────────────────── */
.collage {
  --hx: 0;
  --hy: 0;
  position: relative;
  aspect-ratio: 1240 / 1020;
  margin-top: clamp(56px, 6vw, 88px);
}
.collage__world { position: absolute; inset: 0; pointer-events: none; }
.collage__world .shape {
  position: absolute;
  transition: transform 1.4s var(--ease);
}
.collage__s1 {
  --fill: var(--lilac);
  width: 44%;
  left: 24%;
  top: 22%;
  transform: translate(calc(var(--hx) * -28px), calc(var(--hy) * -28px));
}
.collage__s2 {
  --form: 0 100% 0 0;
  --fill: var(--lavender);
  width: 20%;
  right: 3%;
  top: 76%;
  transform: translate(calc(var(--hx) * 36px), calc(var(--hy) * -20px)) rotate(calc(var(--hx) * 12deg));
}
.collage__s3 {
  --fill: var(--electric);
  width: 9%;
  left: 2%;
  top: 40%;
  transform: translate(calc(var(--hx) * -24px), calc(var(--hy) * 30px)) rotate(calc(var(--hy) * -20deg));
}

.ph {
  --px: 0px;
  --py: 0px;
  position: absolute;
  display: block;
  text-align: left;
  translate: var(--px) var(--py);
  transition: translate .9s var(--ease), scale .7s var(--ease);
}
.ph__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--mask);
  background: var(--lilac);
  transform: translateZ(0);                   /* keeps the mask crisp while scaling */
}
.ph img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 3 / 2);
  object-fit: cover;
  transition: scale 1.1s var(--ease), filter .6s var(--ease);
}
.ph:hover,
.ph:focus-visible { z-index: 3; scale: 1.035; }
.ph:hover img,
.ph:focus-visible img { scale: 1.08; }
.ph:focus-visible { outline-offset: 6px; }

/* Where each photo sits, and its mask */
.ph--1 { left: 0;   top: 1%;  width: 47%; --mask: 72px 0 72px 72px; }                    /* drop */
.ph--2 { left: 50%; top: 0;   width: 21%; --mask: 999px 999px 26px 26px; --ar: 3 / 4; }  /* arch */
.ph--3 { left: 75%; top: 7%;  width: 24%; --mask: 50%; --ar: 1; }                        /* circle */
.ph--4 { left: 7%;  top: 44%; width: 36%; --mask: 180px 0 180px 0; --ar: 4 / 3; }        /* leaf */
.ph--5 { left: 46%; top: 39%; width: 17%; --mask: 999px; --ar: 3 / 4.6; }                 /* capsule */
.ph--6 { left: 66%; top: 47%; width: 33%; --mask: 0 0 0 240px; }                          /* quarter */
.ph--7 { left: 30%; top: 78%; width: 15%; --mask: 50%; --ar: 1; }                         /* circle */
.ph--8 { left: 50%; top: 81%; width: 29%; --mask: 0 96px 96px 96px; }                     /* drop */
.ph--2 img { object-position: 50% 60%; }
.ph--3 img { object-position: 40% 50%; }
.ph--5 img { object-position: 50% 40%; }
.ph--6 img { object-position: 66% 50%; }
.ph--7 img { object-position: 50% 45%; }
.ph--8 img { object-position: 28% 50%; }

.ph__label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 28px);
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--text-2);
  transition: transform .6s var(--ease), padding .6s var(--ease);
}
.ph__label b { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ph:hover .ph__label,
.ph:focus-visible .ph__label { transform: translateY(-6px); }
/* labels that would sit on a curve move to where the photo is flat */
.ph--2 .ph__label { left: 12px; bottom: 12px; }
.ph--3 .ph__label,
.ph--7 .ph__label { left: 50%; bottom: -10px; translate: -50% 0; white-space: nowrap; }
.ph--4 .ph__label { left: auto; right: 16px; bottom: 16px; }
.ph--5 .ph__label { left: 50%; bottom: 20px; translate: -50% 0; white-space: nowrap; }
.ph--6 .ph__label { left: auto; right: 16px; }
.ph--8 .ph__label { left: auto; right: 16px; }

.events__hint { display: none; }

/* ── Lightbox ──────────────────────────────────────────────── */
.lightbox {
  width: min(1100px, 92vw);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop {
  background: rgba(19, 7, 46, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.lightbox[open] { animation: lb-in .6s var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.lightbox__fig img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 28px;
  background: var(--ink);
}
.lightbox__cap {
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--on-dark-2);
}
.lightbox__cap b { color: var(--on-dark); font-weight: 600; margin-right: 6px; }
.lightbox__bar {
  position: absolute;
  right: 0;
  bottom: -2px;
  display: flex;
  gap: 8px;
}
.lightbox__btn {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--on-dark);
  font-size: var(--fs-small);
}
.lightbox__btn svg { width: 16px; height: 16px; }
.lightbox__btn:hover { background: rgba(255, 255, 255, .26); }

/* ── Tablets & phones: a swipeable strip ───────────────────── */
@media (max-width: 899px) {
  .events__head { grid-template-columns: 1fr; }
  .collage {
    display: flex;
    gap: 14px;
    aspect-ratio: auto;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .collage::-webkit-scrollbar { display: none; }
  .collage__world { display: none; }
  .ph {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 min(72vw, 360px);
    width: auto;
    scroll-snap-align: start;
    translate: none;
  }
  .ph img { aspect-ratio: 4 / 5; }
  .ph--3 img, .ph--7 img { aspect-ratio: 1; }
  .ph--3, .ph--7 { align-self: center; }
  .ph:hover, .ph:focus-visible { scale: 1; }
  .ph__label,
  .ph--3 .ph__label, .ph--5 .ph__label, .ph--7 .ph__label {
    left: 12px;
    right: auto;
    bottom: 12px;
    translate: none;
    white-space: normal;
  }
  .events__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .events__hint svg { width: 14px; height: 14px; }
}