/* Activity pages /activities/<slug>/ — Figma 912:28837 "INDIVIDUAL ACTIVITY PAGE".
   Hero + band = components pageHero (cs-phero). Editorial split = 912:29354 "WINTER / Editorial hero".
   Values calc(N * var(--u)) = design px at 1920. Prefix ac-. */

/* ---------------------------------------------------------------- content (white, 1111 -> 1786) */
.ac-content { background: #fff; padding: calc(95 * var(--u)) 0 calc(160 * var(--u)); display: flex; flex-direction: column; gap: calc(120 * var(--u)); }

/* 912:29354: photo 1000x420 (x 61) | gap 40 | text column 664 (pad-top 40, gap 20, text 624) */
.ac-split { display: grid; grid-template-columns: calc(1000 * var(--u)) calc(664 * var(--u)); column-gap: calc(40 * var(--u)); align-items: start; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-left: calc(61 * var(--u)); }
.ac-split__media { height: calc(420 * var(--u)); border-radius: 7px; overflow: hidden; background: var(--c-bg); }
.ac-split__media img { width: 100%; height: 100%; object-fit: cover; }
.ac-split__txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); padding-top: calc(40 * var(--u)); padding-right: calc(40 * var(--u)); color: var(--c-navy); }
.ac-split__eyebrow { font-weight: 700; font-size: max(13px, calc(18 * var(--u))); line-height: calc(26.1 / 18); letter-spacing: 0; color: #c49c51; text-transform: uppercase; }
.ac-split__h { font-weight: 800; font-size: max(28px, calc(45 * var(--u))); line-height: calc(65.2 / 45); letter-spacing: 0; }
.ac-split__p { font-weight: 400; font-size: max(16px, calc(23 * var(--u))); line-height: calc(33.4 / 23); letter-spacing: 0; }
.ac-split__tags, .ac-split__links { font-weight: 700; font-size: max(12px, calc(14 * var(--u))); line-height: calc(20.3 / 14); letter-spacing: 0; color: #c49c51; text-transform: uppercase; }
.ac-split__links { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.ac-split__links li + li::before { content: "·"; margin-inline: .45em; }
.ac-split__links a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.ac-split__links a:hover { color: var(--c-navy); }

/* Link 914:30825: 152x41, white, r7, 13/700 #0e296e, shadows r3 + r8 (same as header Buy tickets) */
.ac-btn { display: inline-flex; align-items: center; justify-content: center; min-width: max(120px, calc(152 * var(--u))); height: max(38px, calc(41 * var(--u))); margin-top: calc(15 * var(--u)); padding: 0 20px; background: #fff; color: var(--c-navy-4); border: 1px solid #fff; border-radius: 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, .30), 0 4px 8px rgba(0, 0, 0, .15); font-weight: 700; font-size: max(12px, calc(13 * var(--u))); letter-spacing: .3px; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.ac-btn:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }

/* every 2nd photo block mirrored (photo right) */
.ac-split--rev { grid-template-columns: calc(664 * var(--u)) calc(1000 * var(--u)); padding-left: calc(155 * var(--u)); }
.ac-split--rev .ac-split__media { order: 2; }
.ac-split--rev .ac-split__txt { padding-right: 0; padding-left: 0; }

/* text-only block (activity with a single photo -> the photo is in the hero); aligned with hero copy (x 102) */
.ac-split--text { grid-template-columns: minmax(0, calc(1010 * var(--u))); padding-left: calc(102 * var(--u)); }
.ac-split--text .ac-split__txt { padding: 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1279px) { /* --u is frozen at 1280/1920 here -> fluid columns */
  .ac-split { grid-template-columns: minmax(0, 1000fr) minmax(0, 664fr); column-gap: 32px; padding-inline: var(--gut); }
  .ac-split--rev { grid-template-columns: minmax(0, 664fr) minmax(0, 1000fr); }
  .ac-split--text { grid-template-columns: minmax(0, 1fr); }
  .ac-split__media { height: auto; aspect-ratio: 1000 / 420; }
  .ac-split__txt { padding-right: 0; padding-top: 0; }
}
@media (max-width: 1023px) {
  .ac-content { padding: 48px 0 64px; gap: 56px; }
  .ac-split, .ac-split--rev, .ac-split--text { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gut); row-gap: 24px; }
  .ac-split--rev .ac-split__media { order: 0; }
  .ac-split__media { height: auto; aspect-ratio: 1000 / 420; }
  .ac-split__txt { padding: 0; gap: 14px; max-width: 720px; }
  .ac-btn { margin-top: 6px; }
}
@media (max-width: 767px) {
  .ac-split__media { aspect-ratio: 4 / 3; }
}