/* website-figma CE: CMS-driven bands and widgets of the Events, Event details and Championship pages. Tokens only. */
.samf-cms-band { position: relative; margin: 2.5rem auto; max-width: 1500px; padding: 0 1rem; }
.samf-cms-band__box { position: relative; overflow: hidden; border-radius: var(--samf-radius-xl); border: 1px solid var(--samf-color-border); background: var(--samf-color-surface); min-height: 18rem; display: flex; align-items: flex-end; }
.samf-cms-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.samf-cms-band__box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .15)); }
.samf-cms-band__inner { position: relative; z-index: 1; padding: 2.5rem; max-width: 40rem; display: flex; flex-direction: column; gap: 1rem; text-align: start; }
.samf-cms-band__kicker { margin: 0; color: var(--samf-figma-light-green); font-size: var(--samf-fs-h5); font-weight: 300; }
.samf-cms-band__title { margin: 0; color: var(--samf-color-text); font-size: var(--samf-fs-h3); font-weight: 600; line-height: 1.1; }
.samf-cms-band__text { margin: 0; color: var(--samf-color-text); font-size: var(--samf-fs-body); font-weight: 300; line-height: 1.45; }
.samf-cms-band__cta { align-self: flex-start; }
.samf-cms-hero-pager { position: absolute; inset-inline-end: 2rem; bottom: 2rem; z-index: 2; display: flex; align-items: center; gap: 1rem; }
.samf-cms-hero-pager__thumbs { display: flex; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.samf-cms-hero-pager__thumb { display: block; width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--samf-figma-white-50); padding: 0; background: none; }
.samf-cms-hero-pager__thumb[aria-current="true"] { border-color: var(--samf-figma-light-green); }
.samf-cms-hero-pager__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.samf-cms-hero-pager__dots { display: flex; gap: .5rem; }
.samf-cms-hero-pager__dots span { width: .625rem; height: .625rem; border-radius: 50%; background: var(--samf-figma-white-35); }
.samf-cms-hero-pager__dots span.is-active { background: var(--samf-figma-light-green); }
.samf-cms-rail { position: absolute; inset-inline-end: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.samf-cms-rail a, .samf-cms-follow a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 50%; background: var(--samf-figma-white-15); }
.samf-cms-rail img, .samf-cms-follow img { width: 1.5rem; height: 1.5rem; }
.samf-cms-follow { display: flex; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.samf-cms-accordion { display: flex; flex-direction: column; gap: .75rem; }
.samf-cms-accordion__tab { border: 1px solid var(--samf-color-border); border-radius: var(--samf-radius); }
.samf-cms-accordion__tab > summary { cursor: pointer; padding: 1rem 1.25rem; font-size: var(--samf-fs-h5); font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.samf-cms-accordion__tab > summary::after { content: ""; width: .75rem; height: .75rem; border-inline-end: 2px solid var(--samf-figma-light-green); border-bottom: 2px solid var(--samf-figma-light-green); transform: rotate(45deg); }
.samf-cms-accordion__tab[open] > summary::after { transform: rotate(-135deg); }
.samf-cms-accordion__body { padding: 0 1.25rem 1.25rem; }
.samf-cms-accordion__group { margin: 0 0 .5rem; color: var(--samf-figma-light-green); font-size: var(--samf-fs-body); }
.samf-cms-accordion__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.samf-cms-accordion__list a { display: inline-flex; align-items: center; min-height: 44px; }
.samf-cms-gallery { position: relative; }
.samf-cms-gallery__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0; padding: 0; list-style: none; }
.samf-cms-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.samf-cms-gallery__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--samf-radius-card); display: block; }
.samf-cms-gallery__slide figcaption { margin-top: .5rem; font-size: var(--samf-fs-body); color: var(--samf-color-muted); }
.samf-cms-photos { display: flex; flex-direction: column; gap: 1rem; }
.samf-cms-photos img { width: 100%; border-radius: var(--samf-radius-card); display: block; object-fit: cover; }
.samf-cms-cutout { max-width: 100%; height: auto; display: block; }
@media (max-width: 1024px) { .samf-cms-band__inner { padding: 1.5rem; } .samf-cms-rail { display: none; } }
@media (max-width: 375px) { .samf-cms-hero-pager__thumb { width: 3rem; height: 3rem; } }
.samf-championship-hero > .samf-cms-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.samf-cms-overview { display: grid; grid-template-columns: minmax(0, 698px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.samf-cms-overview__text { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1024px) { .samf-cms-overview { grid-template-columns: 1fr; } }
.samf-championship-hero > .samf-championship-hero__inner { position: relative; z-index: 1; }
/* Figma 295:2531: the volunteers band is full width (no frame), the text sits in a left glass panel over the photo. */
.samf-cms-band--volunteers { max-width: none; margin: 2.5rem 0 0; padding: 0; }
.samf-cms-band--volunteers .samf-cms-band__box { border: 0; border-radius: 0; min-height: 30rem; align-items: center; }
.samf-cms-band--volunteers .samf-cms-band__box::after { background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); }
.samf-cms-band--volunteers .samf-cms-band__inner { max-width: 36rem; margin-inline: max(1rem, calc((100% - 1300px) / 2)); padding: 2.5rem; border-radius: var(--samf-radius-xl); background: rgba(26, 47, 43, .55); backdrop-filter: blur(12px); }
@media (max-width: 1024px) { .samf-cms-band--volunteers .samf-cms-band__box { min-height: 24rem; } .samf-cms-band--volunteers .samf-cms-band__inner { padding: 1.5rem; margin-inline: 1rem; } }

/* Static fallback gallery (no CMS or API gallery): three photos side by side, stacked on phones. */
.samf-cms-gallery__track--static .samf-cms-gallery__slide { flex-basis: calc((100% - 2rem) / 3); }
@media (max-width: 767.98px) { .samf-cms-gallery__track--static .samf-cms-gallery__slide { flex-basis: 80%; } }

/* ===== visual-fix-1108 G1: measured against Figma Events 295:2436 / 777:20318 and Event details 295:2581 (hero pager, social icons, accordion). ===== */
/* Hero pager (Figma 744:7378): prev arrow 60 + one 120 photo + next arrow 60, each overlapping the next by 10, on the right edge of the 1420 container, bottom aligned with the text column. */
.samf-events-hero .samf-cms-hero-pager { inset-inline-end: max(16px, calc((100% - 1420px) / 2)); inset-block-end: 0; gap: 0; }
.samf-events-hero .samf-cms-hero-pager__thumbs { gap: 0; margin-inline-end: -10px; }
.samf-events-hero .samf-cms-hero-pager__thumbs li:has(> .samf-cms-hero-pager__thumb:not(.is-next)) { display: none; }
.samf-events-hero .samf-cms-hero-pager__thumb {
  inline-size: 120px; block-size: 120px; border: 2px solid #fff; border-radius: 106px; box-shadow: 0 4px 20px rgba(0, 0, 0, .5); cursor: pointer; box-sizing: border-box; background: #211f20;
}
.samf-events-hero .samf-cms-hero-pager__thumb[aria-current="true"] { border-color: #fff; }
.samf-cms-hero-pager__arrow {
  position: relative; z-index: 1; flex: none; inline-size: 60px; block-size: 60px; padding: 0; box-sizing: border-box; border: 2px solid #fff; border-radius: 40px; background: #211f20; cursor: pointer;
  display: flex; align-items: center; justify-content: center; margin-inline-end: -10px;
}
.samf-cms-hero-pager__arrow[hidden] { display: none; }
.samf-cms-hero-pager__arrow::before {
  content: ""; inline-size: 32px; block-size: 32px; background: #fff; flex: none;
  -webkit-mask: var(--_chev30) center / contain no-repeat; mask: var(--_chev30) center / contain no-repeat;
}
.samf-cms-hero-pager__arrow--prev::before { transform: scaleX(-1); }
[dir="rtl"] .samf-cms-hero-pager__arrow--prev::before { transform: none; }
[dir="rtl"] .samf-cms-hero-pager__arrow--next::before { transform: scaleX(-1); }
.samf-cms-hero-pager__arrow:hover { background: var(--samf-color-primary, #41f394); }
.samf-cms-hero-pager__arrow:hover::before { background: #1a2f2b; }
.samf-cms-hero-pager__arrow:focus-visible, .samf-events-hero .samf-cms-hero-pager__thumb:focus-visible { outline: 3px solid var(--samf-color-focus, #fff); outline-offset: 2px; }
.samf-events-hero .samf-cms-hero-pager__dots { display: none; gap: 16px; }
.samf-events-hero .samf-cms-hero-pager__dots span { inline-size: 10px; block-size: 10px; cursor: pointer; }
.samf-events-hero .samf-cms-hero-pager__dots span:not(.is-active) { background: rgba(255, 255, 255, .35); }
@media (max-width: 640px) {
  /* phones draw only the five dots, centred under the button (Figma 777:20320) */
  .samf-events-hero .samf-cms-hero-pager { inset-inline: 0; justify-content: center; }
  .samf-events-hero .samf-cms-hero-pager__thumbs, .samf-cms-hero-pager__arrow { display: none; }
  .samf-events-hero .samf-cms-hero-pager__dots { display: flex; }
}

/* Hero social rail (Figma 744:7676): 35px icons 16 apart, 40 from the edge. The icon files already carry their ring (Figma exports them that way), so the old grey 44px disc around a smaller icon is removed; only Instagram has no ring in its file and gets the 1.5px white one. */
.samf-cms-rail { inset-inline-end: 40px; gap: 16px; }
.samf-cms-rail a, .samf-cms-follow a {
  position: relative; display: block; inline-size: 35px; block-size: 35px; min-inline-size: 0; min-block-size: 0; background: none; border-radius: 50%; box-sizing: border-box;
}
.samf-cms-rail a::after, .samf-cms-follow a::after { content: ""; position: absolute; inset: -5px; }
.samf-cms-rail a img, .samf-cms-follow a img { position: absolute; inset: -2.14%; inline-size: 104.28%; block-size: 104.28%; max-inline-size: none; }
.samf-cms-rail a:has(img[src*="instagram"]), .samf-cms-follow a:has(img[src*="instagram"]) {
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; border-radius: 20px; background: rgba(0, 0, 0, .01); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.samf-cms-follow a:has(img[src*="instagram"]) { border-color: rgba(255, 255, 255, .15); }
.samf-cms-rail a img[src*="instagram"], .samf-cms-follow a img[src*="instagram"] { position: static; inline-size: 12.937px; block-size: 12.937px; }
.samf-cms-follow { gap: 10px; margin: 0; }

/* Resources accordion (Figma 782:26808): one 8px-radius frame, tabs divided by 15% rules, 20px chevron before a 16/20 title, green when open. */
.samf-event-details .samf-cms-accordion { gap: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; overflow: hidden; }
.samf-event-details .samf-cms-accordion__tab { border: 0; border-radius: 0; border-block-end: 1px solid rgba(255, 255, 255, .15); padding-inline: 16px; }
.samf-event-details .samf-cms-accordion__tab:last-child { border-block-end: 0; }
.samf-event-details .samf-cms-accordion__tab > summary { justify-content: flex-start; gap: 16px; padding: 16px 0; min-block-size: 0; font-size: var(--samf-fs-h6); line-height: 20px; font-weight: 500; }
.samf-event-details .samf-cms-accordion__tab[open] > summary { color: var(--samf-color-primary, #41f394); }
.samf-event-details .samf-cms-accordion__tab > summary::after { order: -1; flex: none; inline-size: 8px; block-size: 8px; margin-inline: 6px; border-inline-end-color: currentColor; border-bottom-color: currentColor; }
.samf-event-details .samf-cms-accordion__body { padding: 0 0 16px; }
.samf-event-details .samf-cms-accordion__group { padding-block-end: 16px; border-block-end: 1px solid rgba(255, 255, 255, .15); color: #fff; font-size: var(--samf-fs-body); line-height: 20px; font-weight: 600; }
