/*
 * Belgium Biathlon — visual fixes (review November 2026)
 * Loaded after assets/css/style.css (see templates/partial/html-header.twig).
 * Kept separate from the compiled SCSS bundle on purpose: the original build
 * pipeline (PostCSS) is not part of the theme package. Merge into the SCSS
 * sources at the next full build if desired.
 *
 * Breakpoints used by the theme: mobile <= 480px, tablet 481–1024px, desktop >= 1025px
 */

/* ------------------------------------------------------------------
 * 1. Horizontal scrollbar on desktop
 *    .section and .archive-news get a negative/shifted left margin on desktop
 *    while keeping width:100% from .g, so they overflow the viewport.
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
  .main > .section.g,
  .main > .archive-news {
    width: auto;
    max-width: none;
  }
}

/* ------------------------------------------------------------------
 * 2. Contact page — image too large, form pushed below
 *    .section (display:flex) overrode the .g grid, so the image took the
 *    full width. Restore the 2-column grid on desktop and cap the image.
 * ------------------------------------------------------------------ */
.form__image img {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  object-position: center 30%;
}

@media (min-width: 1025px) {
  .form.section.g {
    display: grid;
    align-items: start;
  }

  .form.section.g .form__left,
  .form.section.g .form__wrapper {
    grid-row: 1;
  }
}

/* ------------------------------------------------------------------
 * 3. News — font size too small, image too small / not centred
 * ------------------------------------------------------------------ */
.s-news__description p,
.s-news .text-block__content,
.s-news .text-block__content p,
.s-news .text-block__content li {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
}

.s-news__description p {
  font-weight: 500;
}

.s-news__image {
  width: 100%;
}

.s-news__image img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 481px) {
  .s-news {
    grid-template-columns: repeat(12, 1fr);
  }

  .s-news > * {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1025px) {
  .s-news__image {
    grid-column: 1 / span 8;
  }

  .s-news__description,
  .s-news .text-block,
  .s-news .download {
    grid-column: 1 / span 9;
  }
}

/* News cards: always fill and centre the picture inside the card */
.news-card__image-wrapper {
  display: block;
  min-height: 0;
}

.news-card__image-wrapper img,
.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------------------------
 * 4. Logo slider — jump at the end of the loop
 *    The wrapper had width:100% (from Swiper) and a flex "gap": the
 *    translateX(-50%) animation then moved by half of the visible width
 *    instead of exactly one set of logos. Make the track as wide as its
 *    content and replace the gap by a per-item margin so -50% = one set.
 * ------------------------------------------------------------------ */
.logo-slider .swiper-wrapper {
  width: max-content;
  gap: 0;
  animation-duration: 30s;
}

.logo-slider__item-image-wrapper {
  margin-right: 20px;
}

@media (min-width: 481px) {
  .logo-slider__item-image-wrapper {
    margin-right: 40px;
  }
}

@media (min-width: 1025px) {
  .logo-slider__item-image-wrapper {
    margin-right: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-slider .swiper-wrapper {
    animation-play-state: paused;
  }
}

/* ------------------------------------------------------------------
 * 5. Races page — dates and separators not aligned, 15px horizontal scroll
 *    (min-width:100vw includes the vertical scrollbar width)
 * ------------------------------------------------------------------ */
.races,
.races__list {
  min-width: 100% !important;
}

.races__race__date {
  flex: 0 0 auto;
  min-width: 2.4em;
  font-variant-numeric: tabular-nums;
}

.races__race__info {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 1025px) {
  .races .races__list.g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    row-gap: 40px;
  }

  .races .races__list .races__race {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------
 * 6. Language switcher — language names shown directly in the menu
 * ------------------------------------------------------------------ */
.language-switch--names .language-switch__toggle {
  display: none;
}

.language-switch--names .language-switch__list,
.language-switch--names .language-switch__list.is-open {
  position: static;
  top: auto;
  left: auto;
  flex-wrap: wrap;
  gap: 4px 8px;
  transform: none;
  opacity: 1;
  pointer-events: all;
}

.language-switch--names .language-switch__link,
.language-switch--names .language-switch__text {
  padding: 6px 10px;
  font-size: 1.25rem;
  text-transform: none;
}

.language-switch--names .language-switch__item--active .language-switch__text {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ------------------------------------------------------------------
 * 7. Athletes — empty group message
 * ------------------------------------------------------------------ */
.members-archive__empty {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------
 * 8. Main menu overlay — 7 entries + language names must stay reachable
 *    on short screens (laptops ~700px high)
 * ------------------------------------------------------------------ */
.header__navigation__wrapper--active {
  overflow-y: auto;
  overscroll-behavior: contain;
}