/* Start:/local/templates/Spoda/ekp/ekp.css?176399587616601*/
:root {
  --ekp-gap-xl: 4rem;
  --ekp-gap-lg: 3rem;
  --ekp-gap-md: 2rem;
  --ekp-gap-sm: 1rem;
  --ekp-radius-lg: 1.5rem;
  --ekp-radius-md: 1rem;
}

.ekp {
  background: var(--bg);
  display: grid;
  padding-top: 2.5rem;
  padding-bottom: 9rem;
}

.ekp__in {
  display: grid;
  gap: 2rem;
}

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

@media (max-width: 65.125rem) and (min-width: 33.8125rem) {
  .ekp__title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 2.75rem;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: var(--chernyy-osnovnoy);
  }
}

@media (max-width: 33.75rem) {
  .ekp__title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 2rem;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: var(--chernyy-osnovnoy);
  }
}

.ekp-filters {
  display: grid;
  gap: 2rem;
}
.ekp-filters__stack {
  display: grid;
  row-gap: 4rem; /* ← спец-гэп по ТЗ */
}
.ekp-filters__months {
  gap: 0.5rem;
  width: 35rem;
}
.ekp-filters__years,
.ekp-filters__months,
.ekp-selects {
  display: flex;
  flex-wrap: wrap;
}

.ekp-filters__years {
  gap: 0.5rem;
}
.ekp-selects {
  gap: 0.5rem;
}
.year-btn {
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--chernyy-osnovnoy);
  background: var(--belyy);
  border: none;
  cursor: pointer;
}

.month-btn {
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
  background: var(--servyy-osnovnoy);
  border: none;
  cursor: pointer;
}

@media (max-width: 33.75rem) {
  .year-btn {
    border-radius: 0.75rem;
    padding: 1rem 0.75rem;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 96%;
    letter-spacing: -0.03em;
    text-align: center;
  }

  .month-btn {
    border-radius: 0.75rem;
    padding: 0.5rem;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 136%;
    letter-spacing: -0.02em;
  }
}

@media (hover: hover) {
  .month-btn:hover,
  .year-btn:hover {
    background: var(--belyy);
  }
}
@media (hover: hover) {
  .year-btn:not(.is-active):hover {
    background: var(--servyy-osnovnoy);
    color: var(--chernyy-osnovnoy);
  }

  .ekp-dd:not(.has-value) .ekp-dd__btn:hover {
    background: var(--belyy);
    color: var(--chernyy-osnovnoy);
  }
}

.ekp-select select {
  border-radius: 1.25rem;
  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);
  appearance: none;
  cursor: pointer;
  border: none;
}
/* Контейнер селектов (если его ещё нет) */
.ekp-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ekp-dd {
  flex: 0 0 auto;
}
/* Базовый внешний вид кнопки (по твоему select) */
.ekp-dd {
  position: relative;
  display: grid;
}
.ekp-dd {
  width: auto;
}
.ekp-dd__btn {
  display: grid;
  grid-template-columns: 1fr 0.875rem;
  align-items: center;
  gap: 0.75rem;
  border: none;
  border-radius: 1.25rem;
  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);
  cursor: pointer;
}
.ekp-dd__chev {
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}
.ekp-dd.is-open .ekp-dd__chev {
  transform: rotate(180deg);
}

/* Выпадающее окно */
.ekp-dd__menu {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  border-radius: 2rem;
  box-shadow: 0 0.5rem 4rem 0 rgba(0, 4, 19, 0.1);
  background: var(--belyy);
  padding: 2rem 1.5rem;
  display: grid;
  width: 21.375rem;
  text-align: left;
}

/* Список и пункты */
.ekp-dd__list {
  display: grid;
  gap: 0.5rem;
}
.ekp-dd__item {
  display: grid;
  justify-items: start;
  text-align: left;
  white-space: normal;
  word-break: break-word;

  border: 0;
  border-radius: 1rem;
  padding: 1rem 1rem 1rem 0.75rem;
  background: transparent;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--chernyy-osnovnoy);
  cursor: pointer;
}
@media (hover: hover) {
  .ekp-dd__item:hover {
    background: rgba(230, 230, 236, 0.5);
  }
}

/* Мобилка */
@media (max-width: 33.75rem) {
  .ekp-dd__btn {
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 33.75rem) {
  .ekp-select select {
    border-radius: 1.25rem;
    padding: 1.25rem 1rem;
    background: var(--servyy-osnovnoy);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 96%;
    letter-spacing: -0.03em;
    text-align: center;
    color: var(--chernyy-osnovnoy);
    appearance: none;
    cursor: pointer;
  }
}

.ekp-list {
  display: grid;
  gap: var(--ekp-gap-lg);
  padding-top: 2rem;
}

.ekp-card {
  display: grid;
  grid-template-columns: repeat(
    4,
    1fr
  ); /* 1: фото, 2: инфо, 3: пусто, 4: мета */
  align-items: start;
  border-radius: var(--ekp-radius-lg);
  gap: var(--ekp-gap-col); /* gutter = 1.25rem */
}

/* фото строго в своей колонке, квадрат */
.ekp-card__img {
  aspect-ratio: 1 / 1;
  border-radius: 2.75rem;
  background: var(--servyy-osnovnoy);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 1.875rem;
}
.ekp-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ekp-card__info {
  display: grid;
  row-gap: 0.5rem;
}
.ekp-info-typeblock {
  display: grid;
  row-gap: 2rem; /* <-- по ТЗ */
}
/* пустая третья колонка — просто держит сетку; на планшете скрываем */
.ekp-card__spacer {
  min-height: 0.0625rem;
}

.ekp-card__number {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
  opacity: 0.6;
}

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

.ekp-card__type {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--chernyy-600);
}

.ekp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ekp-meta-stack {
  display: grid;
  row-gap: 2.75rem;
}

.ekp-tag {
  display: inline-grid;
  place-items: center;

  border-radius: 0.75rem;
  padding: 0.75rem 0.5rem;
  background: var(--servyy-osnovnoy);

  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--cvet-brenda);

  white-space: nowrap;
}

.ekp-tag--dark {
  background: var(--cvet-brenda);
  color: var(--belyy);

  border-radius: 0.75rem;
  padding: 0.75rem 0.5rem;

  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: var(--belyy);
}

.ekp-card__meta {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.ekp-meta-item {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.5rem;
}

/* --- Десктоп: 2-я колонка растягивается на 2+3, спейсер скрыт --- */
.ekp-card {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.25rem; /* как просил, 1.25rem между фото и текстом */
}

.ekp-card__img {
  grid-column: 1;
} /* фото только в 1-й колонке */
.ekp-card__info {
  grid-column: 2 / 4;
} /* текст занимает 2-ю И 3-ю; до 4-й не доходит */
.ekp-card__spacer {
  display: none;
} /* спейсер не мешает, колонка виртуальная */
.ekp-card__meta {
  grid-column: 4;
} /* правая инфа строго в 4-й */

.ekp-list {
  display: grid;
  row-gap: 4rem;
}
.ekp-sep {
  height: 0.0625rem;
  background: #000;
  opacity: 0.1;
}

.ekp-card__group-block {
  display: grid;
  gap: 0.5rem; /* расстояние между заголовком и таблетками */
}
/* Заголовок "Возрастная группа" по тз */
.ekp-card__group-title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--chernyy-osnovnoy);
  opacity: 0.6;
}

/* Сетка таблеток (если не было) */
.ekp-card__groups {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0.5rem; /* между таблетками */
}

/* Строки с иконками: фиксируем колонки и ровно .75rem между ними */
.ekp-meta-item--with-ico {
  display: grid;
  grid-template-columns: 1.5rem auto; /* строго: иконка 1.5rem + текст */
  align-items: center;
  gap: 0 0.75rem; /* вертикальный 0, горизонтальный .75rem */
}

/* Никаких «скрытых» отступов у контейнера иконки */
.ekp-ico {
  width: 1.5rem;
  height: 1.5625rem;
  display: block; /* убираем inline-поведение */
  line-height: 0; /* убираем baseline-просветы */
}

/* SVG тоже блочный и на весь контейнер */
.ekp-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Маска под зум */
.ekp-card__img {
  position: relative;
  overflow: hidden;
}

/* База: и растровые, и SVG */
.ekp-card__img img,
.ekp-card__img svg {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transform-origin: center;
  transition: transform 300ms ease-out;
}

/* Hover только на устройствах с курсором */
@media (hover: hover) {
  .ekp-card:hover .ekp-card__img img,
  .ekp-card:hover .ekp-card__img svg {
    transform: scale(1.1);
  }
}

.arrow_down {
  width: 0.875rem;
  height: 0.4375rem;
}

.ekp_geo {
  width: 1.5rem;
  height: 1.5rem;
}

.ekp_calendar {
  width: 1.5rem;
  height: 1.5rem;
}

/* плавные переходы */
.year-btn,
.month-btn,
.ekp-dd__btn,
.ekp-dd__item {
  transition: background-color 300ms ease-out, color 300ms ease-out;
}

/* если фильтр применён (выбрано НЕ "Все") — красим саму кнопку */
.ekp-dd.has-value .ekp-dd__btn {
  background: var(--cvet-brenda);
  color: var(--belyy);
}

/* стрелка на синей кнопке тоже белая */
.ekp-dd.has-value .ekp-dd__btn svg path {
  fill: var(--belyy);
}
.ekp-dd__btn--active {
  background: var(--cvet-brenda);
  color: var(--belyy);
  transition: background-color 300ms ease-out, color 300ms ease-out;
}

.ekp-dd__btn--active svg path {
  fill: var(--belyy);
}

/* Пункты не красим, только hover */
.ekp-dd__item {
  transition: background-color 300ms ease-out, color 300ms ease-out;
}

/* =========================
   адаптивы
   ========================= */
.ekp-card__right {
  display: contents;
}

@media (max-width: 65.125rem) and (min-width: 33.8125rem) {
  .ekp-card {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }
  .ekp-card__img {
    grid-column: 1;
  }

  .ekp-card__right {
    grid-column: 2;
    display: grid;
    row-gap: 2.75rem;
  }

  .ekp-card__info {
    display: grid;
    gap: 0.5rem;
  }

  .ekp-card__meta {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
  }

  .ekp-card__spacer {
    display: none;
  }
  .ekp-card__meta {
    grid-column: 2;
  }
  .ekp-card__title {
    font-weight: 500;
    font-size: 2rem;
    line-height: 120%;
    letter-spacing: -0.02em;
  }

  .ekp-card__type {
    font-weight: 500;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: -0.02em;
  }

  .ekp-info-typeblock {
    row-gap: 1.5rem;
  }

  .ekp-meta-stack {
    row-gap: 1.5rem;
  }
}

@media (max-width: 33.75rem) {
  .ekp-filters__years,
  .ekp-filters__months {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;
  }
  .ekp-filters__years::-webkit-scrollbar,
  .ekp-filters__months::-webkit-scrollbar {
    display: none;
  }

  .year-btn,
  .month-btn {
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .ekp-card {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .ekp-card__img {
    grid-column: 1;
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
    padding: 0;
  }
  .ekp-card__img img {
    width: 9.6875rem;
    height: auto;
    object-fit: contain;
  }

  .ekp-card__info {
    grid-column: 1;
    gap: 0.5rem;
  }
  .ekp-card__spacer {
    display: none;
  }

  .ekp-card__meta {
    grid-column: 1;
    gap: 1rem;
    padding-top: 1.75rem;
  }

  .ekp-card__groups {
    gap: 0.25rem;
  }

  .ekp-dd__btn {
    border-radius: 1.25rem;
    padding: 1.25rem 1rem;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 96%;
    letter-spacing: -0.03em;
    text-align: center;
  }
  .ekp-dd__menu {
    width: 100%;
  }
}

/* Активный месяц */
.month-btn.is-active {
  background: var(--cvet-brenda);
  color: #fff;
}

.year-btn.is-active {
  background: var(--cvet-brenda);
  color: var(--belyy);
}

/* 1) База — оставить перенос */
.ekp-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

@media (max-width: 33.75rem) {
  .ekp-filters__stack {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2.75rem;
  }

  .ekp-filters__months,
  .ekp-filters__years {
    width: 100%;
    max-width: 100%;
  }

  .ekp-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  .ekp-dd {
    flex: 0 0 auto;
    max-width: calc(100% - 0.5rem);
  }

  .ekp-dd__btn {
    grid-auto-flow: column;
    grid-template-columns: auto 0.875rem;
    width: auto;
    white-space: nowrap;
    text-align: left;
  }

  .ekp {
    padding-top: 1rem;
  }

  .ekp-filters {
    gap: 1.5rem;
  }

  .ekp-list {
    padding-top: 0;
  }

  .ekp-list {
    row-gap: 2rem;
  }

  .ekp-info-typeblock {
    row-gap: 1rem;
  }

  .ekp-card__title {
    font-weight: 500;
    font-size: 2rem;
    line-height: 110%;
    letter-spacing: -0.02em;
  }

  .ekp-card__type {
    font-weight: 500;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: -0.02em;
  }

  .ekp-meta-item--with-ico {
    gap: 0 0.5rem;
    grid-template-columns: 1.125rem auto;
  }

  .ekp-meta-item {
    font-weight: 500;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: -0.02em;
    align-items: start;
  }

  .ekp-ico {
    width: 1.125rem;
    height: 1.25rem;
  }

  .ekp-ico svg {
    width: 1.125rem;
    height: 1.25rem;
  }

  .ekp-meta-stack {
    row-gap: 1.5rem;
  }

  .ekp-card__group-title {
    font-weight: 500;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: -0.02em;
  }
}

/* End */
/* /local/templates/Spoda/ekp/ekp.css?176399587616601 */