/* Events page */

/* Hero: jump cards + overlapping photo pair */
.jump { display: grid; gap: 12px; margin-top: 2rem; max-width: 36rem; }
.jump .card { flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: var(--r); }
.jump .date-tile { width: 60px; padding: 8px 0 10px; border-radius: 14px; }
.jump .date-tile__day { font-size: 1.6rem; }
.jump__text { flex: 1; min-width: 0; display: grid; }
.jump__name { font-weight: 700; color: var(--ink); line-height: 1.3; }
.jump__where { font-size: 0.9rem; color: var(--ink-3); line-height: 1.4; }
.jump .badge { flex: none; align-self: flex-start; }
@media (max-width: 420px) { .jump .card { flex-wrap: wrap; } .jump__text { flex-basis: calc(100% - 80px); } .jump .badge { margin-left: 76px; } }

.pair { position: relative; max-width: 500px; width: 100%; justify-self: center; padding-bottom: 6%; }
.pair__a { width: 68%; }
.pair__b { position: absolute; right: 0; bottom: 0; width: 56%; }
.pair__b img { aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; box-shadow: var(--sh-2); }
@media (max-width: 899px) { .pair { max-width: 440px; justify-self: start; } }

/* Event sections: detail card + photo column */
.ev > * { min-width: 0; }
.ev { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) {
  .ev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .ev--flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .ev--flip .ev__side { order: -1; }
  .ev__side { position: sticky; top: calc(var(--header-h) + 24px); }
}
.ev__card { display: grid; gap: clamp(22px, 3vw, 30px); padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); }
.section--tint .ev__card { border-color: transparent; }
.ev__head { display: flex; gap: 18px; align-items: center; }
.ev__head .date-tile { width: 84px; padding: 12px 0 14px; border-radius: 20px; }
.ev__head .date-tile__day { font-size: 2.6rem; }
.ev__head .badge { margin-bottom: 8px; }
.ev__head h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); }
@media (max-width: 479px) {
  .ev__head { gap: 14px; }
  .ev__head .date-tile { width: 66px; padding: 10px 0 11px; border-radius: 16px; }
  .ev__head .date-tile__day { font-size: 2rem; }
}
.ev__card .lede { max-width: 52ch; }
.ev .facts { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px 28px; }
.ev .fact--wide { grid-column: 1 / -1; }
.ev .fact .icon-chip { flex: none; }
.ev__sub { margin-bottom: 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ev__note { margin-top: 18px; font-size: 0.95rem; }
.checklist--cols { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px 24px; }
.ev__card .btn-row { margin-top: 0; }

.callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); background: var(--tint); color: var(--ink-2); font-size: 0.97rem; }
.callout .icon { margin-top: 0.15em; color: var(--p600); }

/* Overlapping photo pair in the side column */
.ev__side { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.side-note p { overflow-wrap: break-word; }
@media (max-width: 959px) { .ev__side { max-width: 540px; } }
.pair2 { position: relative; padding-bottom: 20%; }
.pair2__a img { aspect-ratio: 4 / 3; object-fit: cover; }
.pair2__b { position: absolute; bottom: 0; right: 6%; width: 38%; }
.pair2__b img { aspect-ratio: 3 / 4; object-fit: cover; border: 6px solid #fff; box-shadow: var(--sh-2); }
.pair2--flip .pair2__b { right: auto; left: 6%; }

.side-note { display: block; padding: 22px 24px; border-radius: var(--r-lg); }
.side-note .icon-chip { margin-bottom: 0.9rem; }
.side-note h3 { font-size: 1.1rem; }
.side-note p { margin-top: 0.4rem; color: var(--ink-2); font-size: 0.97rem; }
.section--tint .side-note:not(.card--tint) { box-shadow: none; }

/* Gallery: tidy grid, first photo feature-sized */
.gallery { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.gallery > * { position: relative; margin: 0; aspect-ratio: 1; }
.gallery > :first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (min-width: 720px) { .gallery > :first-child { grid-row: span 2; aspect-ratio: auto; } }
.gallery button { position: absolute; inset: 0; height: 100%; border-radius: var(--r); box-shadow: var(--sh-1); transition: box-shadow var(--t-shadow); }
@media (hover: hover) { .gallery button:hover { box-shadow: var(--sh-2); } }
.gallery button:focus-visible { outline-offset: 2px; }
.gallery img { height: 100%; object-fit: cover; object-position: 50% 30%; }