/* Start:/local/templates/Spoda/sport/sport.css?17639961898144*/
:root {
  --gap-8: 0.5rem;
  --gap-12: 0.75rem;
  --gap-16: 1rem;
  --gap-20: 1.25rem;
  --gap-24: 1.5rem;
  --gap-32: 2rem;
  --radius-16: 1rem;
  --radius-24: 1.5rem;
}

.sport {
  display: grid;
  row-gap: var(--gap-32);
}

.sport__wrap {
  display: grid;
  row-gap: 4rem;
  padding-top: 2.5rem;
  padding-bottom: 9rem;
}
@media (max-width: 33.75rem) {
  .sport__wrap {
    padding-top: 1rem;
  }
}
/* Фиксированные вкладки */
.sporttabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  overflow: visible;
}

.sporttabs::-webkit-scrollbar {
  display: none;
}

.sporttab {
  display: inline-grid;
  place-items: center;
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  background: var(--belyy);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--chernyy-osnovnoy);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease-out;
}

@media (hover: hover) {
  .sporttab:hover {
    background: var(--servyy-osnovnoy);
  }
}

.sporttab.is-active {
  background: var(--cvet-brenda);
  color: #fff;
}

.sport__head {
  display: grid;
  row-gap: 1.5rem;
}

.sport__title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
}

/* Чипы верхних разделов */
.chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 0.5rem;
  overflow: auto;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-grid;
  place-items: center;
  border-radius: 0.75rem;
  padding: 0.75rem 0.5rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s ease-out;
}
@media (hover: hover) {
  .chip:hover {
    background: var(--belyy);
  }
}

.chip.is-active {
  background: var(--cvet-brenda);
  color: #fff;
}

.sport__group {
  display: grid;
  row-gap: var(--gap-24);
  padding-top: 2rem;
}

.sport__h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
}

.sport__subhead {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 0.5rem;
}

.sport__h3 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
}

.badge {
  display: inline-grid;
  place-items: center;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: var(--cvet-brenda);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--belyy);
  transform: translate(0rem, -0.625rem);
}
.sport__group {
  display: grid;
  row-gap: 1.5rem;
}
.sport__subs {
  display: grid;
  row-gap: 6rem;
}
.sport__sub {
  display: grid;
  row-gap: 1.5rem;
}
.card__box {
  display: grid;
  row-gap: 1.5rem;
  text-decoration: none;
  color: inherit;
  border-radius: 2.75rem;
}
@media (hover: hover) {
  .card__box:hover {
    text-decoration: none;
  }
}

/* Фокус по доступности, без смещения сетки */
.card__box:focus-visible {
  outline: 0.125rem solid var(--cvet-brenda);
  outline-offset: 0.25rem;
  border-radius: 2.75rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.25rem;
  row-gap: 4rem;
}

.card {
  display: grid;
  row-gap: 1.5rem;
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 2.75rem;
  background: var(--servyy-osnovnoy);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.card__ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1.25rem;
}
.card__body {
  display: grid;
  row-gap: 0.375rem;
}

.card__name {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 120%;
  letter-spacing: -0.03em;
  color: var(--chernyy-600);
}
/* ===== Карточка спорта: безопасный отступ и зум ===== */
.card__media {
  --pad: 0.75rem; /* сколько «оттолкнуть» от краёв */
  position: relative;
  overflow: hidden; /* прячем зум за рамкой */
  aspect-ratio: 1 / 1; /* квадрат без высоты */
  padding: var(--pad); /* тот самый внутренний отступ */
  border-radius: 2.75rem;
  background: var(--servyy-osnovnoy);
}

.card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* НЕ режем иллюстрацию */
  border-radius: calc(2.75rem - var(--pad)); /* совпадение скруглений */
  transform: translateZ(0) scale(1);
  transition: transform 0.3s ease-out;
}

.card__sub {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #5e6673;
}
.gal {
  display: grid;
  row-gap: var(--gap-12);
}
.gal__main {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
}
.gal__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1.5rem;
}

.gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  padding: 0.75rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.375rem);
  z-index: 50;
  line-height: 0;
  border: 0;
  appearance: none;
  box-shadow: none;
}
.gal__prev {
  left: 0.5rem;
}
.gal__next {
  right: 0.5rem;
}
.gal__prev svg {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .gal__nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
  }
  .gal:hover .gal__nav {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 64rem) {
  .gal__nav {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: hover) {
  .card:hover .card__img {
    transform: scale(1.1);
  }
}

@media (max-width: 64rem) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }
  .sport__subs {
    display: grid;
    row-gap: 4rem;
  }
  .card__box {
    row-gap: 1rem;
  }
}

@media (max-width: 33.75rem) {
  .sport__wrap {
    row-gap: 2.5rem;
  }
  .sporttabs,
  .chips {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .sporttab,
  .chip {
    scroll-snap-align: start;
  }
  .sporttabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0.5rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .sporttab {
    border-radius: 0.75rem;
    padding: 1rem 0.75rem;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 96%;
    letter-spacing: -0.03em;
    text-align: center;
  }
  .sporttab {
    scroll-snap-align: start;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-16);
  }
  .sport__h2 {
    font-size: 2rem;
  }
  .sport__h3 {
    font-size: 1.375rem;
  }
  .sport__title {
    font-size: 2rem;
  }
  .sport__head {
    row-gap: 2rem;
  }
  .card__name {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 136%;
    letter-spacing: -0.02em;
  }
  .sport__wrap {
    padding-bottom: 4rem;
  }
}

/* End */


/* Start:/local/templates/Spoda/sport/partials/stars/sport.css?176348200514000*/
/* Каркас раздела */
.stars {
  display: grid;
  row-gap: 4rem;
  padding-top: 2.5rem;
}

.stars__wrap {
  display: grid;
  row-gap: 5rem;
  padding-bottom: 9rem;
}

/* Заголовок + “кнопки-фильтры” */
.stars__head {
  display: grid;
  row-gap: 2rem; /* между h1 и кнопками */
}

.stars__title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
}

.arrow_down {
  width: 1.125rem;
  height: 1.125rem;
}

.stars__filters {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 0.75rem;
}
.star__sportchip {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
  border-radius: 0.75rem;
  padding: 0.75rem 0.5rem;
  text-decoration: none;
  background: var(--servyy-osnovnoy);
  width: max-content;
  height: max-content;
}
.star__sport {
  display: grid;
}
/* Кнопки: padding разрешён (внутренний), без margin */
.ui-btn {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  column-gap: 1rem;
  border-radius: 1.5rem;
  padding: 1.5rem 1rem;
  background: var(--servyy-osnovnoy);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--chernyy-osnovnoy);
  border: none;
  cursor: pointer;
  transition: background-color 300ms ease-out, color 300ms ease-out;
}
.ui-btn__icon {
  display: grid;
  width: 1.125rem;
  height: 1.125rem;
}
/* активная (когда открыт попап) */
.ui-btn.is-active {
  background: var(--cvet-brenda);
  color: #ffffff;
}
@media (hover: hover) {
  .ui-btn:hover {
    background: #ffffff;
  }
}
@media (hover: hover) {
  .ui-btn.is-active:hover {
    background: #ffffff;
    color: var(--cvet-brenda);
  }
}

/* Сетка карточек и отступ до неё */
.stars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.25rem;
  row-gap: 4rem;
  align-items: stretch;
}

/* Карточка */
.star {
  display: grid;
}

.star__box {
  display: grid;
  grid-template-rows: auto auto 1fr; /* фото | контент | заполнитель */
  row-gap: 1.5rem; /* фото → контент = 1.5rem */
  height: 100%; /* ← тянем коробку на всю высоту строки */
  overflow: hidden;
  text-decoration: none;
}

.star__media {
  display: grid;
}

.star__img {
  display: block;
  width: 100%;
  height: 20.875rem;
  object-fit: cover;
  border-radius: 2.75rem;
  transform: scale(1);
  transition: transform 300ms ease-out;
  will-change: transform;
}

/* Тело карточки: внутренний комфорт через padding, 
   вертикальные расстояния — через gap */
.star__body {
  display: grid;
  text-decoration: none;
  row-gap: 1rem;
}

.star__body-grid {
  display: grid;
  row-gap: 0.75rem; /* между заголовком, чипом, списком титулов */
}
.star__nameblock {
  display: grid;
  row-gap: 0.5rem;
}
.star__name {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 120%;
  letter-spacing: -0.03em;
  color: var(--chernyy-osnovnoy);
  row-gap: 0.25rem;
  margin: 0;
  display: grid;
}
.star__name-line {
  display: block;
  white-space: normal; /* переносы внутри слова по дефолту */
}

/* Чип вида спорта */
.star__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-grid;
  place-items: center;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: 62.4375rem;
  background: #f5f7fa;
  font: 500 0.75rem/1 Onest, Inter, system-ui, -apple-system, Segoe UI, Arial;
  color: #0a0a0a;
}

/* Титулы */
.star__meta {
  display: grid;
  row-gap: 0.5rem;
  color: #6b7280;
  font: 400 0.875rem/150% Onest, Inter, system-ui, -apple-system, Segoe UI,
    Arial;
}

.star__titleline {
  display: grid;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
  text-decoration: none;
  row-gap: 0.5rem;
}

/* Пагинация */
.pager {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) minmax(0, auto) 1fr;
}
.pager__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 1rem;
}
.pager__cell {
  display: block;
} /* пустышки по краям */

.pager__nums {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  column-gap: 1.25rem;
}

.pager__num,
.pager__dots {
  display: grid;
  place-items: center;
  height: 4rem;
  padding: 0 0.75rem; /* внутренний комфорт без margin */
  border-radius: 0.75rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
  text-decoration: none;
  user-select: none;
  transition: color 0.2s ease-out;
}
.pager__num.is-active {
  color: var(--chernyy-osnovnoy);
}
.pager__core {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: max-content 1fr max-content; /* ← стрелка | числа | стрелка */
  align-items: center;
  column-gap: 1.25rem;
}
.pager__btn {
  display: inline-grid;
  place-items: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  background: #f5f7fa;
  font: 600 0.875rem/1 Onest, Inter, system-ui, -apple-system, Segoe UI, Arial;
  color: #0a0a0a;
}

.pager__arrow.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.pager__arrow:active {
  background: var(--cvet-brenda);
}
.pager__arrow:active .pager__arrow-ico {
  background: #fff;
}

/* фото внутри карточки */
.star__media {
  overflow: hidden; /* чтобы зум не вылезал за радиус */
  border-radius: 2.75rem;
}

.ui-drop {
  position: relative;
  display: inline-grid; /* чтобы поп-окно позиционировать от каждой кнопки */
}

.ui-pop {
  position: absolute;
  top: 0;
  left: calc(100% + 1rem); /* «справа от кнопки» */
  width: 21.25rem;
  display: grid;
  row-gap: 0.5rem;
  padding: 1rem;
  border-radius: 2rem;
  background: var(--belyy);
  box-shadow: 0 0.5rem 4rem 0 rgba(0, 4, 19, 0.1);

  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 50;
}
.ui-btn .ui-btn__icon svg path {
  fill: currentColor;
}
.ui-pop.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ui-item {
  display: grid;
  align-items: center;
  justify-items: start;
  padding: 1rem 1rem 1rem 0.75rem;
  border-radius: 1rem;
  background: transparent;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

@media (hover: hover) {
  .ui-item:hover {
    background: var(--servyy-osnovnoy);
  }
}

.ui-item.is-active {
  background: transparent;
  color: inherit;
}

/* зум по наведению/фокусу на карточке */
@media (hover: hover) {
  .star__box:hover .star__img {
    transform: scale(1.1);
  }
}
.star__box:focus-visible .star__img {
  transform: scale(1.1);
}

/* (опционально) на устройствах без hover оставить статично */
@media (hover: none) {
  .star__img {
    transform: none;
  }
}

@media (hover: hover) {
  .pager__num:not(.is-active):hover {
    color: var(--chernyy-osnovnoy);
  }
}
@media (hover: hover) {
  .ui-btn:hover {
    background: #ffffff;
  }

  .ui-btn.is-active {
    background: var(--cvet-brenda);
    color: #ffffff;
  }

  .ui-btn.is-active:hover {
    background: var(--cvet-brenda); /* не меняем цвет */
    color: #ffffff;
  }
}
/* ===== Разделители в Чемпионатах мира/Европы ===== */
.pager__arrow {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.125rem;
  background: var(--servyy-osnovnoy);
  transition: background-color 0.2s ease-out;
  text-decoration: none;
}

.pager__arrow.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.pager__arrow-ico {
  display: block;
  width: 0.75rem;
  height: 1.25rem;
}

.pager__arrow-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pager__arrow-ico path {
  fill: rgba(0, 0, 0, 0.5);
}

@media (max-width: 33.75rem) {
  .pager__arrow {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
  }

  .pager__arrow-ico {
    width: 0.5rem;
    height: 0.9375rem;
  }
}

@media (hover: hover) {
  .pager__arrow:hover {
    background: var(--cvet-brenda);
  }

  .pager__arrow:hover .pager__arrow-ico path {
    fill: #fff;
  }
}

.pager__arrow:active {
  background: var(--cvet-brenda);
}

.pager__arrow:active .pager__arrow-ico path {
  fill: #fff;
}

/* планшеты и мобилки: сепараторы после КАЖДОЙ карточки */
@media (max-width: 64rem) {
  /* убираем вертикальный gap — расстояние теперь через padding карточек */
  .ach--two .ach__grid {
    row-gap: 0;
  }

  .ach--two .achcard {
    display: grid;
    row-gap: 0.75rem;
    padding-block: 1.5rem; /* ≈ 24px сверху и снизу */
    border-bottom: 0.0625rem solid rgba(0, 4, 19, 0.08); /* как тонкая «чёрточка» */
  }
}

/* телефоны: чутка плотнее — по 32px от линии (16+16) */
@media (max-width: 33.75rem) {
  .ach--two .achcard {
    padding-block: 1rem; /* ≈ 16px сверху и снизу */
    border-bottom: 0.0625rem solid rgba(0, 4, 19, 0.08);
  }
}

/* Брейкпоинты */
@media (max-width: 64rem) {
  .stars__title {
    font-size: 2.75rem;
  }
  .stars__wrap {
    row-gap: 4rem;
    padding-bottom: 6rem;
  }
  .stars__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .star__img {
    height: 20.875rem;
  }
}

@media (max-width: 33.75rem) {
  .stars__title {
    font-size: 2rem;
  }
  .stars__wrap {
    row-gap: 2.5rem;
    padding-bottom: 4rem;
  }
  .stars__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.9375rem;
    row-gap: 1.75rem;
  }
  .star__img {
    height: 10.25rem;
  }
  .stars__filters {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: max-content;
    gap: 0.375rem;
  }
  .ui-btn {
    width: max-content;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 96%;
    letter-spacing: -0.03em;
    border-radius: 0.75rem;
    padding: 1rem 0.75rem;
  }
  .star__name {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 120%;
    letter-spacing: -0.03em;
  }
  .star__sportchip {
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 96%;
    letter-spacing: -0.02em;
  }
  .star__body {
    row-gap: 0.5rem;
  }
  .star__titleline {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 136%;
    letter-spacing: -0.02em;
  }
  .star__box {
    row-gap: 0.75rem;
  }
}
@media (max-width: 33.75rem) {
  .pager {
    padding-inline: 0.5rem;
  }
  .pager__core {
    grid-template-columns: 2.75rem 1fr 2.75rem; /* стрелка | числа | стрелка */
    column-gap: 0.75rem;
    max-width: 100%;
  }
  .pager__nums {
    min-width: 0; /* даём право сжиматься */
    column-gap: 1rem;
    justify-content: center;
  }

  .pager__num,
  .pager__dots {
    height: 2.75rem;
    padding: 0 0.5rem;
    font-size: 1.125rem;
    border-radius: 0.75rem;
  }

  .pager__arrow {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
  }
}
@media (max-width: 64rem) {
  .ui-pop {
    left: 0;
    right: auto;
    top: calc(100% + 0.5rem);
    transform: none;
    width: min(21.25rem, 100vw - 2rem);
    overflow: auto;
  }
  .stars {
    padding-top: 4rem;
  }
}
@media (max-width: 33.75rem) {
  .ui-pop {
    position: absolute;
    left: 0;
    right: auto; /* не прилипать к правому краю */
    top: calc(100% + 0.5rem); /* зазор .5rem вниз от кнопки */
    transform: none; /* отключаем любые translate из десктопной логики */
    width: 100%;
    overflow: auto; /* прокрутка, если списков много */
    overscroll-behavior: contain;
    z-index: 50; /* поверх карточек */
  }

  /* Опционально: делаем кликабельную область пунктов комфортной на тачах */
  .ui-pop .ui-item {
    display: block;
    line-height: 1.3;
    padding: 0.75rem 1rem;
  }
  .stars {
    padding-top: 2rem;
  }
}

/* ПЛАНШЕТ: 540–1024px, только тут меняем поведение */
@media (max-width: 64rem) and (min-width: 33.75rem) {
  .stars__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* End */
/* /local/templates/Spoda/sport/sport.css?17639961898144 */
/* /local/templates/Spoda/sport/partials/stars/sport.css?176348200514000 */