/*
 * Homepage redesign (loaded only by frontpage/landing_page.html, after style_index_min.css).
 * Every rule is scoped to a homepage section class so no other page is affected.
 */

/* ------------------------------------------------------------------ Hero */

/*
 * The demo video fills the whole hero as a darkened, slightly blurred background and the title is set very
 * large on the left; the extra bottom padding leaves room for the personas panel that overlaps the hero.
 * While the page is scrolled the video clears up and the copy rises and fades: --sd-p goes from 0 (top of
 * the page) to 1 (after half a screen) and is set on the page root by landing.js.
 */
.sd-hero {
  /* style_index_min.css gives every section a 100px bottom margin; the panel below must sit right on the hero */
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  /* Keeps the background video and its shade inside the hero, behind the persona cards that overlap it */
  isolation: isolate;
  min-height: 44rem;
  padding-top: 7rem;
  padding-bottom: 9rem;
  background: #05080F;
  color: #FFFFFF;
}

/* The video column does not hold the video, which fills the whole hero */
.sd-hero .row > [class*="col-"]:last-child {
  position: static;
}

.sd-hero-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(calc(0.6 + 0.4 * var(--sd-p, 0))) brightness(calc(0.38 + 0.3 * var(--sd-p, 0))) blur(calc(3px * (1 - var(--sd-p, 0))));
  transform: scale(calc(1.08 - 0.06 * var(--sd-p, 0)));
}

/* Shade from the left, so the title reads */
.sd-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 15, 0.92) 0%, rgba(5, 8, 15, 0.6) 45%, rgba(5, 8, 15, 0.1) 100%),
    linear-gradient(0deg, #05080F 0%, transparent 35%);
  pointer-events: none;
}

.sd-hero-copy {
  position: relative;
  z-index: 2;
  transform: translateY(calc(-3rem * var(--sd-p, 0)));
  opacity: calc(1 - 0.5 * var(--sd-p, 0));
}

.sd-hero-title {
  margin: 0 0 0.75rem;
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -3px;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.sd-hero-subtitle {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  font-weight: 700;
  color: #50D878;
}

.sd-hero-text {
  margin: 0 0 1.75rem;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: #C9D2E0;
}

/* The hero call to action (.sd-hero-cta) and every other button get their look from buttons_redesign.css */

@media (max-width: 991.98px) {
  .sd-hero {
    min-height: 0;
    padding-top: 4rem;
    padding-bottom: 7rem;
  }

  .sd-hero-text {
    max-width: none;
  }
}

/* ------------------------------------------------------------------ Personas */

/*
 * Dark panel over the bottom of the hero with four big photo cards, one per persona. Each card is the link
 * to that persona's page: the photo fills the card, the persona colour rises from the bottom, the persona
 * word is set large in white. On large screens with a mouse, the card pointed at opens wider and shows
 * its sentence; on tablets and phones the sentences are always shown.
 */
.sd-personas {
  --sd-text: #1B2333;
  --sd-scouts: #136B6B;
  --sd-coaches: #1F55B8;
  --sd-agents: #611F69;
  --sd-clubs: #226F18;
  --sd-personas-bg: #111827;
  --sd-personas-title: #FFFFFF;
  --sd-personas-line: rgba(255, 255, 255, 0.08);
  --sd-persona-height: 23rem;
  --sd-persona-radius: 1rem;
  --sd-persona-open: 2.1;
  position: relative;
  margin-top: -6rem;
  margin-bottom: 0;
  padding-bottom: 3rem;
}

.sd-personas-panel {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid var(--sd-personas-line);
  border-radius: 1.5rem;
  background-color: var(--sd-personas-bg);
  background-image:
    radial-gradient(ellipse 55% 80% at 100% 0%, rgba(80, 216, 120, 0.14) 0%, transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
  box-shadow: 0 32px 64px -28px rgba(17, 24, 39, 0.6);
}

/* Green light along the top edge, as in the top bar and the footer */
.sd-personas-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 216, 120, 0.55) 50%, transparent 100%);
}

.sd-personas-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.4px;
  text-wrap: balance;
  color: var(--sd-personas-title);
}

.sd-personas-grid {
  display: flex;
  gap: 1rem;
}

/* Each persona sets its own colour on the card */
.sd-persona--scouts { --sd-accent: var(--sd-scouts); }
.sd-persona--coaches { --sd-accent: var(--sd-coaches); }
.sd-persona--agents { --sd-accent: var(--sd-agents); }
.sd-persona--clubs { --sd-accent: var(--sd-clubs); }

/* Order of each card, used to stagger the entrance and the arrow pulse */
.sd-persona:nth-child(2) { --sd-i: 1; }
.sd-persona:nth-child(3) { --sd-i: 2; }
.sd-persona:nth-child(4) { --sd-i: 3; }

/* ------------------------------------------------------------------ Card */

.sd-persona {
  --sd-i: 0;
  --sd-mx: 50%;
  --sd-my: 0%;
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  height: var(--sd-persona-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--sd-persona-radius);
  overflow: hidden;
  color: #FFFFFF;
  text-decoration: none;
  background: var(--sd-accent);
  box-shadow: inset 0 -4px 0 var(--sd-accent);
  transition: flex-grow .5s cubic-bezier(.2, .8, .2, 1), transform .3s ease, box-shadow .3s ease;
}

.sd-persona:hover,
.sd-persona:focus-visible {
  color: #FFFFFF;
}

.sd-persona:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px #50D878;
}

/* Pressed (also the feedback on touch screens) */
.sd-persona:active {
  transform: scale(0.985);
}

/* Photo filling the card, with the persona colour rising from the bottom */
.sd-persona-media {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
}

.sd-persona-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.sd-persona-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Neutral fallback for browsers without color-mix() */
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.05) 0%, rgba(17, 24, 39, 0.85) 100%);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.05) 0%, color-mix(in srgb, var(--sd-accent) 55%, transparent) 45%, color-mix(in srgb, var(--sd-accent) 96%, #000000) 100%);
  transition: opacity .4s ease;
}

.sd-persona:hover .sd-persona-media img,
.sd-persona:focus-visible .sd-persona-media img {
  transform: scale(1.06);
}

/* Soft light that follows the pointer over the card (position set by landing.js) */
.sd-persona::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(18rem circle at var(--sd-mx) var(--sd-my), rgba(255, 255, 255, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.sd-persona:hover::before {
  opacity: 1;
}

/* Round arrow in the top right corner */
.sd-persona-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--sd-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, color .3s ease;
}

/* Pulse ring around the arrow, passing from card to card, to invite the click */
.sd-persona-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  opacity: 0;
  animation: sd-persona-ping 4s ease-out infinite;
  animation-delay: calc(1.5s + var(--sd-i) * 0.6s);
}

@keyframes sd-persona-ping {
  0% { transform: scale(1); opacity: 0.9; }
  30% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.sd-persona:hover .sd-persona-arrow,
.sd-persona:focus-visible .sd-persona-arrow {
  background: #50D878;
  color: #111827;
  transform: rotate(-45deg) scale(1.1);
}

.sd-personas-grid:hover .sd-persona-arrow::after {
  animation-play-state: paused;
  visibility: hidden;
}

/* Text over the photo: small "I'm a", the persona word large, then the sentence */
.sd-persona-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
}

.sd-persona-name {
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/*
 * The persona word, large; its size follows the card width (container units) so long words such as
 * "Scout/Analyst" stay whole when the card is narrow.
 */
.sd-persona-body {
  container-type: inline-size;
}

.sd-persona-name > span,
.sd-persona-name:not(:has(> span)) {
  display: block;
  margin-top: 0.125rem;
  font-size: clamp(1.25rem, 13cqi, 1.75rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #FFFFFF;
  overflow-wrap: break-word;
}

/* Clubs: its name is one sentence (one translation), so the whole sentence is the large line */
.sd-persona-name:not(:has(> span)) {
  margin-top: 0;
}

.sd-persona-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

/* ------------------------------------------------------------------ Large screens with a mouse: the card opens */

@media (hover: hover) and (min-width: 1200px) {
  .sd-persona:hover,
  .sd-persona:focus-visible {
    flex-grow: var(--sd-persona-open);
  }

  /* Sentence hidden until the card opens (always in the page for screen readers) */
  .sd-persona-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: max-height .5s ease, opacity .35s ease, transform .35s ease;
  }

  .sd-persona:hover .sd-persona-text,
  .sd-persona:focus-visible .sd-persona-text {
    max-height: 7rem;
    opacity: 1;
    transform: none;
    transition-delay: .12s;
  }
}

/* ------------------------------------------------------------------ Entrance (landing.js) */

.sd-personas--ready:not(.sd-personas--in) .sd-persona {
  opacity: 0;
}

.sd-personas--in .sd-persona {
  animation: sd-persona-rise .7s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(var(--sd-i) * 110ms);
}

@keyframes sd-persona-rise {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Tablets and phones */

@media (max-width: 1199.98px) {
  .sd-personas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sd-personas {
    --sd-persona-height: 20rem;
  }
}

@media (max-width: 575.98px) {
  .sd-personas {
    --sd-persona-height: 15rem;
    margin-top: -5rem;
    padding-bottom: 2rem;
  }

  .sd-personas-panel {
    padding: 1.25rem 1rem 1rem;
    border-radius: 1.25rem;
  }

  .sd-personas-title {
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }

  .sd-personas-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .sd-persona-body {
    gap: 0.375rem;
    padding: 1.125rem;
  }

  .sd-persona-name > span {
    font-size: 1.5rem;
  }

  .sd-persona-text {
    font-size: 0.875rem;
  }

  .sd-persona-arrow {
    top: 0.75rem;
    right: 0.75rem;
    width: 2.375rem;
    height: 2.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-persona,
  .sd-persona::before,
  .sd-persona-arrow,
  .sd-persona-media img,
  .sd-persona-text {
    transition: none !important;
  }

  .sd-persona:active,
  .sd-persona:hover .sd-persona-media img,
  .sd-persona:focus-visible .sd-persona-media img {
    transform: none;
  }

  .sd-persona-arrow::after,
  .sd-personas--in .sd-persona {
    animation: none;
  }
}


/* ------------------------------------------------------------------ Events */

.sd-events {
  --sd-text: #1B2333;
  --sd-muted: #435066;
  --sd-navy: #29364D;
  --sd-page: #FFFFFF;
  margin-bottom: 0;
  padding: 3rem 0 5rem;
  background: var(--sd-page);
}

.sd-events-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 2rem;
  max-width: 48rem;
  text-align: center;
}

.sd-events-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #157A43;
}

.sd-events-title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--sd-text);
  text-wrap: balance;
}

/* In person / Online tabs */
.sd-events-tabs {
  display: inline-flex;
  gap: 0.375rem;
  padding: 0.375rem;
  margin-bottom: 1.25rem;
  background: #FFFFFF;
  border: 1px solid #E8ECF1;
  border-radius: 0.875rem;
  box-shadow: 0 8px 20px -12px rgba(27, 35, 51, 0.25);
}

.sd-events-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sd-muted);
  background: transparent;
  border: 0;
  border-radius: 0.625rem;
  padding: 0.75rem 1.375rem;
}

.sd-events-tabs .nav-link.active {
  color: #FFFFFF;
  background: var(--sd-navy);
}

/* No underline on the tab buttons (legacy hover rule) */
.sd-events-tabs .nav-link,
.sd-events-tabs .nav-link:hover {
  text-decoration: none;
}

/* Small pill on the ticket (in person / online) */
.sd-event-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
}

.sd-event-chip--inperson { color: #1F2A3D; background: #50D878; }
.sd-event-chip--online { color: #1F55B8; background: #E1EBFD; }

/* ---- Ticket: paper ticket with scalloped ends, a date stub, framed details and a button stub.
   The scallops are real cut-outs (CSS mask on .sd-ticket-paper); the shadow sits on .sd-ticket so it follows the cut shape. */
.sd-ticket {
  --sd-tk: #157A43;
  --sd-tk-dark: #0F5A31;
  --sd-tk-soft: #EAF8EF;
  --sd-tk-line: rgba(21, 122, 67, 0.35);
  --sd-scallop: 7px;
  --sd-scallop-step: 20px;
  display: block;
  color: var(--sd-text);
  text-decoration: none;
  filter: drop-shadow(0 16px 22px rgba(27, 35, 51, 0.16));
  transition: transform .2s ease;
}

a.sd-ticket:hover,
a.sd-ticket:focus-visible {
  color: var(--sd-text);
  transform: translateY(-3px);
}

a.sd-ticket:focus-visible {
  outline: 2px solid var(--sd-tk);
  outline-offset: 6px;
}

.sd-ticket--online {
  --sd-tk: #1F55B8;
  --sd-tk-dark: #163F8A;
  --sd-tk-soft: #EDF3FE;
  --sd-tk-line: rgba(31, 85, 184, 0.35);
}

.sd-ticket-paper {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) 13rem;
  min-height: 14.5rem;
  border-radius: 0.375rem;
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 0 50% / 51% var(--sd-scallop-step) repeat-y,
    radial-gradient(circle at 100% 50%, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 100% 50% / 51% var(--sd-scallop-step) repeat-y;
  mask:
    radial-gradient(circle at 0 50%, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 0 50% / 51% var(--sd-scallop-step) repeat-y,
    radial-gradient(circle at 100% 50%, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 100% 50% / 51% var(--sd-scallop-step) repeat-y;
}

/* Date stub on the event colour, with a decorative barcode and a dashed tear line on its inner edge */
.sd-ticket-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem 1.5rem 2.25rem;
  background: linear-gradient(160deg, var(--sd-tk) 0%, var(--sd-tk-dark) 100%);
  border-right: 2px dashed rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.sd-ticket-stub:hover {
  color: #FFFFFF;
}

.sd-ticket-barcode {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 0.75rem;
  height: 62%;
  transform: translateY(-50%);
  opacity: 0.55;
  background: repeating-linear-gradient(to bottom, #FFFFFF 0 2px, transparent 2px 4px, #FFFFFF 4px 5px, transparent 5px 8px, #FFFFFF 8px 11px, transparent 11px 13px);
}

.sd-ticket-day {
  font-size: 4rem;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -2px;
}

.sd-ticket-month {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.92;
}

.sd-ticket-stub-big {
  font-size: 2.75rem;
  margin-bottom: 0.5rem;
}

/* Details on the soft tint, inside a thin frame like a printed ticket */
.sd-ticket-main {
  display: flex;
  padding: 0.875rem;
  background: var(--sd-tk-soft);
  min-width: 0;
}

.sd-ticket-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.25rem 1.5rem;
  border: 1.5px solid var(--sd-tk-line);
  border-radius: 0.375rem;
  min-width: 0;
}

.sd-ticket-name {
  font-size: 1.625rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--sd-text);
  text-decoration: none;
}

a.sd-ticket-name:hover {
  color: var(--sd-tk);
}

.sd-ticket-place {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sd-tk);
}

.sd-ticket-text {
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sd-muted);
}

/* Button stub on the right, behind a second dashed tear line */
.sd-ticket-end {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem 1.25rem 1.25rem;
  background: var(--sd-tk-soft);
  border-left: 2px dashed var(--sd-tk-line);
}

.sd-ticket-cta {
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  color: #1F2A3D;
  background: #50D878;
  padding: 0.8125rem 1.375rem;
  border-radius: 0.625rem;
  text-decoration: none;
  white-space: nowrap;
}

a.sd-ticket-cta:hover {
  color: #1F2A3D;
}

.sd-ticket-cta--online {
  color: #FFFFFF;
  background: var(--sd-tk);
}

a.sd-ticket-cta--online:hover {
  color: #FFFFFF;
  background: var(--sd-tk-dark);
}

@media (max-width: 991.98px) {
  .sd-ticket-paper {
    grid-template-columns: 9rem minmax(0, 1fr) 11rem;
  }

  .sd-ticket-name {
    font-size: 1.375rem;
  }
}

/* Phones: the ticket turns vertical (stub on top, button at the bottom); scallops move to the top and bottom ends */
@media (max-width: 767.98px) {
  .sd-ticket .sd-ticket-paper {
    grid-template-columns: 1fr;
    -webkit-mask:
      radial-gradient(circle at 50% 0, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 50% 0 / var(--sd-scallop-step) 51% repeat-x,
      radial-gradient(circle at 50% 100%, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 50% 100% / var(--sd-scallop-step) 51% repeat-x;
    mask:
      radial-gradient(circle at 50% 0, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 50% 0 / var(--sd-scallop-step) 51% repeat-x,
      radial-gradient(circle at 50% 100%, #0000 var(--sd-scallop), #000 calc(var(--sd-scallop) + 0.5px)) 50% 100% / var(--sd-scallop-step) 51% repeat-x;
  }

  .sd-ticket .sd-ticket-stub {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    /* Right padding keeps the date / "Coming soon" clear of the barcode */
    padding: 1.5rem 5.5rem 1.125rem 1.25rem;
    text-align: left;
    border-right: 0;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.7);
  }

  .sd-ticket .sd-ticket-barcode {
    left: auto;
    right: 1.25rem;
    top: 50%;
    width: 3rem;
    height: 1.75rem;
    background: repeating-linear-gradient(to right, #FFFFFF 0 2px, transparent 2px 4px, #FFFFFF 4px 5px, transparent 5px 8px, #FFFFFF 8px 11px, transparent 11px 13px);
  }

  .sd-ticket .sd-ticket-day {
    font-size: 2.75rem;
  }

  .sd-ticket .sd-ticket-stub-big {
    font-size: 2rem;
    margin: 0;
  }

  .sd-ticket .sd-ticket-end {
    border-left: 0;
    border-top: 2px dashed var(--sd-tk-line);
    padding: 1rem 1.25rem 1.5rem;
  }

  .sd-ticket .sd-ticket-cta {
    width: 100%;
  }

  .sd-ticket-frame {
    padding: 1rem 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-ticket {
    transition: none;
  }

  a.sd-ticket:hover,
  a.sd-ticket:focus-visible {
    transform: none;
  }
}

/* Numbers of past events, under the tickets */
.sd-event-numbers {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 15rem;
  padding: 2.5rem;
  border-radius: 1.25rem;
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(31, 42, 61, 0.88), rgba(31, 42, 61, 0.94)), url("/static/images/shaking_hands_football_pitch.webp") center / cover;
}

.sd-event-numbers-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #50D878;
}

.sd-event-numbers-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3.5rem;
}

.sd-event-numbers-row span {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.8);
}

.sd-event-numbers-row b {
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -1px;
  color: #FFFFFF;
}

/* Phones: full-width tabs, one mini ticket per screen in the past-events track */
@media (max-width: 575.98px) {
  .sd-events-tabs {
    display: flex;
  }

  .sd-events-tabs .nav-item {
    flex: 1 1 0;
  }

  .sd-events-tabs .nav-link {
    width: 100%;
    justify-content: center;
    padding: 0.625rem;
  }

}

/* ------------------------------------------------------------------ Partners: logos on one moving strip */

.sd-partners {
  margin-bottom: 0;
  padding: 4.5rem 0 5rem;
  background: #FFFFFF;
}

.sd-partners-head {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
  text-align: center;
}

.sd-partners-head h2 {
  margin: 0;
  max-width: 40rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
  text-wrap: balance;
  color: #5F6A7D;
}

/* The strip fades out at both edges */
.sd-partners-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Still layout (no JavaScript or reduced motion): logos centred and wrapping */
.sd-partners-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem 3.5rem;
  padding: 0 1rem;
}

.sd-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 9rem;
  height: 3.5rem;
  opacity: 0.85;
  transition: opacity .2s ease, transform .2s ease;
}

.sd-partner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sd-partner:hover,
.sd-partner:focus-visible {
  opacity: 1;
  transform: scale(1.06);
}

.sd-partner:focus-visible {
  outline: 2px solid #50D878;
  outline-offset: 6px;
  border-radius: 4px;
}

/* Moving strip: two copies of the logos side by side, shifted by exactly one copy */
.sd-partners--moving .sd-partners-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 3.5rem;
  width: max-content;
  padding: 0 3.5rem 0 0;
  animation: sd-partners-scroll 40s linear infinite;
}

.sd-partners--moving .sd-partners-viewport:hover .sd-partners-track,
.sd-partners--moving .sd-partners-viewport:focus-within .sd-partners-track {
  animation-play-state: paused;
}

@keyframes sd-partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 575.98px) {
  .sd-partners {
    padding: 3rem 0 3.5rem;
  }

  .sd-partners-head {
    margin-bottom: 1.75rem;
  }

  .sd-partners-head h2 {
    font-size: 0.75rem;
  }

  .sd-partner {
    width: 7rem;
    height: 2.75rem;
  }

  .sd-partners--moving .sd-partners-track {
    gap: 2.5rem;
    padding-right: 2.5rem;
    animation-duration: 30s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-partner {
    transition: none;
  }
}

/* ------------------------------------------------------------------ Articles and News */

/*
 * White section with depth: a light board (dots and a green light along its top) holding the cards.
 * Latest article as a large photo card with the title over it, the next two beside it, four more below.
 * Phones: the large card first, then the others in a strip that scrolls sideways.
 */
.sd-news {
  --sd-text: #1B2333;
  --sd-muted: #5F6A7D;
  --sd-board: #F2F4F7;
  --sd-board-line: #E3E8EF;
  --sd-card: #FFFFFF;
  --sd-green: #50D878;
  --sd-green-text: #157A43;
  --sd-navy: #111827;
  --sd-card-radius: 1rem;
  --sd-card-shadow: 0 1px 2px rgba(27, 35, 51, 0.06), 0 12px 28px -16px rgba(27, 35, 51, 0.35);
  --sd-card-shadow-hover: 0 2px 4px rgba(27, 35, 51, 0.06), 0 28px 48px -20px rgba(27, 35, 51, 0.5);
  margin-bottom: 0;
  padding: 4rem 0 4.5rem;
  background: #FFFFFF;
}

.sd-news-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 2.25rem;
  max-width: 48rem;
  text-align: center;
}

.sd-news-title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--sd-text);
  text-wrap: balance;
}

.sd-news-lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sd-muted);
}

/* Light board under the cards */
.sd-news-board {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--sd-board-line);
  border-radius: 1.5rem;
  background-color: var(--sd-board);
  background-image: radial-gradient(rgba(27, 35, 51, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: inset 0 2px 6px rgba(27, 35, 51, 0.04);
}

.sd-news-board::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--sd-green) 50%, transparent 100%);
}

/* Large card on the left over two rows, two row cards on the right, four tiles below */
.sd-news-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}

.sd-news-card--feature { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.sd-news-card--row { grid-column: 8 / span 5; }
.sd-news-card--tile { grid-column: span 3; }

/* ------------------------------------------------------------------ Cards */

.sd-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--sd-card-radius);
  background: var(--sd-card);
  color: var(--sd-text);
  text-decoration: none;
  box-shadow: var(--sd-card-shadow);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.sd-news-card:hover,
.sd-news-card:focus-visible {
  color: var(--sd-text);
  transform: translateY(-4px);
  box-shadow: var(--sd-card-shadow-hover);
}

.sd-news-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--sd-green), var(--sd-card-shadow-hover);
}

.sd-news-thumb {
  display: block;
  flex: none;
  aspect-ratio: 16 / 10;
  background-color: #E8ECF1;
  background-position: center;
  background-size: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.sd-news-card:hover .sd-news-thumb,
.sd-news-card:focus-visible .sd-news-thumb {
  transform: scale(1.05);
}

.sd-news-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
  padding: 1rem 1.125rem 1.125rem;
  background: var(--sd-card);
}

.sd-news-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--sd-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}

.sd-news-card:hover .sd-news-card-title {
  color: var(--sd-green-text);
}

.sd-news-excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sd-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sd-news-author {
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--sd-muted);
}

/* Row cards (2nd and 3rd article): picture on the left, text on the right */
.sd-news-card--row {
  flex-direction: row;
}

.sd-news-card--row .sd-news-thumb {
  width: 42%;
  aspect-ratio: auto;
}

/* Feature card (latest article): photo filling the card, title in white over a dark fade */
.sd-news-card--feature {
  justify-content: flex-end;
  min-height: 24rem;
  isolation: isolate;
  background: var(--sd-navy);
}

.sd-news-card--feature .sd-news-thumb {
  position: absolute;
  z-index: -2;
  inset: 0;
  aspect-ratio: auto;
}

.sd-news-card--feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0) 30%, rgba(17, 24, 39, 0.6) 60%, rgba(17, 24, 39, 0.95) 100%);
}

.sd-news-card--feature .sd-news-body {
  flex-grow: 0;
  gap: 0.75rem;
  padding: 1.75rem;
  background: transparent;
}

.sd-news-card--feature .sd-news-card-title,
.sd-news-card--feature:hover .sd-news-card-title {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #FFFFFF;
  text-wrap: balance;
  -webkit-line-clamp: 4;
}

.sd-news-card--feature .sd-news-author {
  color: rgba(255, 255, 255, 0.8);
}

/* Round arrow on the feature card, turning green when pointed at */
.sd-news-arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--sd-navy);
  font-size: 1rem;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease;
}

.sd-news-card--feature:hover .sd-news-arrow,
.sd-news-card--feature:focus-visible .sd-news-arrow {
  background: var(--sd-green);
  transform: rotate(-45deg) scale(1.1);
}

.sd-news-more {
  margin-top: 2.5rem;
}

/* Cards rise into place while scrolling, where the browser supports scroll-driven animations */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sd-news-card {
      animation: sd-news-rise linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes sd-news-rise {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Tablets */

@media (max-width: 991.98px) {
  .sd-news-card--feature { grid-column: 1 / -1; grid-row: auto; min-height: 22rem; }
  .sd-news-card--row,
  .sd-news-card--tile { grid-column: span 6; }
}

/* ------------------------------------------------------------------ Phones: large card, then a sideways strip */

@media (max-width: 767.98px) {
  .sd-news {
    padding: 3rem 0 3.5rem;
  }

  .sd-news-board {
    padding: 1rem 0;
    border-radius: 1.25rem;
  }

  .sd-news-grid {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    padding: 0.25rem 1rem 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .sd-news-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .sd-news-card--feature {
    flex-basis: 88%;
    min-height: 20rem;
  }

  /* In the strip every card is a picture-on-top tile */
  .sd-news-card--row {
    flex-direction: column;
  }

  .sd-news-card--row .sd-news-thumb {
    width: auto;
    aspect-ratio: 16 / 10;
  }

  .sd-news-card:hover,
  .sd-news-card:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-news-card,
  .sd-news-thumb,
  .sd-news-arrow {
    transition: none;
  }

  .sd-news-card:hover,
  .sd-news-card:focus-visible,
  .sd-news-card:hover .sd-news-thumb {
    transform: none;
  }
}