/* Homepage hero: a slider with up to two static banners beside it.
   Layout, breakpoints and text treatment follow the Atex Sport hero: it spans
   the full width under the header and is capped and centred only on very
   wide screens. The gap, used between the banners and again above and beside
   them, the navy showing through it and the rounded corners are this site's
   own. */

.st-hero {
  --st-hero-gap: 12px;
  --st-hero-radius: 12px;
  padding: var(--st-hero-gap) var(--st-hero-gap) 0;
  background: var(--st-navy);
}

.st-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--st-hero-gap);
  max-width: 2200px;
  margin: 0 auto;
}

/* A grid item with an aspect ratio sizes itself from its content unless its
   width is stated, and Swiper sizes its content from the item. */
.st-hero-slider {
  width: 100%;
  aspect-ratio: 100 / 120;
  border-radius: var(--st-hero-radius);
  background: var(--st-navy-2);
}

.st-hero-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--st-hero-gap);
}

.st-hero-tile {
  width: 100%;
  aspect-ratio: 100 / 68;
  border-radius: var(--st-hero-radius);
}

/* ---- One banner: a slide or a tile ---- */

.st-hero .st-hero-item {
  --st-hero-ink: #fff;
  position: relative;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  overflow: hidden;
  padding: 30px 15px 50px;
  background: var(--st-navy-2);
}

.st-hero .st-hero-slide {
  width: 100%;
  height: 100%;
}

.st-hero .st-hero-tile { padding: 45px 15px; }
.st-hero .st-hero-item.is-top { align-items: flex-start; }
.st-hero .st-hero-item.is-black { --st-hero-ink: var(--st-ink); }

/* The theme recolours and underlines links on hover. */
.st-hero .st-hero-item,
.st-hero .st-hero-item:hover,
.st-hero .st-hero-item:focus {
  color: var(--st-hero-ink);
  text-decoration: none;
}

/* Drawn inside: the banner fills a clipping box, which would cut off an
   outline around it. */
.st-hero .st-hero-item:focus-visible {
  outline: 2px solid var(--st-hero-ink);
  outline-offset: -6px;
}

.st-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the side the text sits on: the bottom on phones, the left from
   tablets up. */
.st-hero-item.is-shaded::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, var(--st-hero-shade, .5)) 30%, #0101011b, #01010100);
}

.st-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.st-hero-title {
  margin: 0 0 10px;
  font-size: 30px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.24;
  text-transform: uppercase;
}

.st-hero-title .is-bold,
.st-hero-desc .is-bold { font-weight: 700; }

.st-hero-desc {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
}

.st-hero-tile .st-hero-title {
  margin-bottom: 0;
  font-size: 22px;
}

.st-hero-tile .st-hero-desc {
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.2;
}

.st-hero-link {
  display: none;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: underline;
}

/* ---- Slider pagination: square bullets and a countdown bar ---- */

.st-hero-pager {
  position: absolute;
  right: 10px;
  bottom: 15px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Swiper stretches any bullets container to the full width. */
.st-hero .st-hero-pager .st-hero-bullets {
  display: flex;
  width: auto;
  pointer-events: auto;
}

.st-hero-bullet {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 3px;
  background: rgba(208, 208, 208, .5);
  cursor: pointer;
}

.st-hero-bullet.is-active { background: #fff; }

.st-hero-bar {
  position: relative;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  overflow: hidden;
  background: rgba(208, 208, 208, .5);
}

.st-hero-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(var(--st-hero-fill, 0));
  transform-origin: left center;
}

.st-hero-slider.is-manual .st-hero-bar { display: none; }

@media (min-width: 576px) {
  .st-hero .st-hero-item { padding: 30px 30px 50px; }
  .st-hero .st-hero-tile { padding: 30px; }
  .st-hero-title { font-size: 32px; }

  .st-hero-pager {
    right: 25px;
    left: 25px;
  }
}

@media (min-width: 768px) {
  .st-hero-slider { aspect-ratio: 1320 / 898; }

  .st-hero .st-hero-item,
  .st-hero .st-hero-tile { padding: 50px; }

  .st-hero-item.is-shaded::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, var(--st-hero-shade, .5)) 30%, #0101011b, #01010100);
  }

  .st-hero-title { font-size: 36px; }
  .st-hero-desc { font-size: 22px; }
  .st-hero-tile .st-hero-title { font-size: 26px; }
  .st-hero-tile .st-hero-desc { font-size: 20px; }
  .st-hero-link { display: inline-block; }

  .st-hero-pager {
    right: 30px;
    bottom: 30px;
    left: 45px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .st-hero-bar {
    flex: 1 1 0;
    width: auto;
    margin: 0 0 0 4px;
  }
}

@media (min-width: 800px) {
  .st-hero.has-side-2 .st-hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A lone banner spans the row at the height the pair would have. */
  .st-hero.has-side-1 .st-hero-tile { aspect-ratio: 200 / 68; }
}

@media (min-width: 992px) {
  .st-hero-title { font-size: 42px; }
  .st-hero-link { margin-top: 15px; }
}

/* The link text slides in under the copy when the banner is pointed at. */
@media (min-width: 1200px) and (hover: hover) {
  .st-hero-link {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s, opacity .5s, margin-top .5s;
  }

  .st-hero-item:hover .st-hero-link,
  .st-hero-item:focus-visible .st-hero-link {
    max-height: 60px;
    margin-top: 15px;
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .st-hero.has-slider:not(.has-side-0) .st-hero-in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

  /* The column takes the slider's height and the banners share it. Its own
     content must not size the row, or a long text, or the link text sliding
     in, would push the column past the slider. */
  .st-hero.has-slider .st-hero-side {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    contain: size;
  }

  .st-hero.has-slider .st-hero-tile { aspect-ratio: auto; }

  /* Alone, the slider keeps the height it has beside the banners instead of
     growing to its own ratio across the whole row. */
  .st-hero.has-side-0 .st-hero-slider { aspect-ratio: 1000 / 408; }
}

@media (min-width: 1400px) {
  .st-hero .st-hero-slide { padding: 150px 75px 75px; }

  .st-hero-pager {
    bottom: 40px;
    left: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-hero-link { transition: none; }
}