@charset "UTF-8";
/* Карточка мероприятия: белая, скругление 12. Телефон — дата 28 и описание в строку, под ними плитки в ряд (56);
   md — дата 56 | описание | плитки столбиком 120 (по 54); xl — дата 64 + описание на половине карточки,
   на другой половине справа плитки 96 в ряд и фото 136×96.
   Плитки серые; с рамкой — бесплатный взнос и полный набор (у него значение приглушено). Одна плитка на телефоне —
   на всю ширину. Рамка — внутренней тенью, чтобы не менять высоту. Hover — дата зелёная.
   --selected — страница мероприятия: r 16, без hover; телефон — дата и место в строку, под ними плитка «набор» и кнопка
   записи друг под другом на всю ширину (56), название скрыто; md — плитка 88 × 88 и кнопка до конца ряда (88)
   под датой; xl — всё в строку, плитка 96 и кнопка 96 справа. Кнопка — зелёная r 8, T2, hover — чёрная. */
.event-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas: "date about" "tiles tiles";
  gap: 0.5rem;
  padding: 0.5rem;
  color: var(--color-black);
  background-color: var(--color-white);
  border-radius: var(--radius-12);
}
@media (min-width: 768px) {
  .event-card {
    grid-template-columns: 7.5rem minmax(0, 1fr) 7.5rem;
    grid-template-areas: "date about tiles";
    gap: 0.75rem;
  }
}
@media (min-width: 1280px) {
  .event-card {
    grid-template-columns: 8rem minmax(0, 1fr) minmax(0, calc(50% - 0.25rem));
    gap: 0.5rem;
    padding: 0.75rem;
  }
}
@media (hover: hover) {
  .event-card:hover {
    --event-card-date: var(--color-green-dark);
  }
}
.event-card:focus-visible {
  --event-card-date: var(--color-green-dark);
}
.event-card__date {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1;
}
@media (min-width: 1280px) {
  .event-card__date {
    font-size: 2rem;
  }
}
.event-card__date {
  display: flex;
  grid-area: date;
  align-items: center;
  min-height: 3.5rem;
  padding-left: 0.5rem;
  color: var(--event-card-date, var(--color-black));
  transition: color var(--transition-duration) var(--transition-ease);
}
@media (min-width: 768px) {
  .event-card__date {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 0.96;
    min-height: 7rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .event-card__date {
    font-size: 3.5rem;
    line-height: 0.92;
  }
}
@media (min-width: 768px) and (min-width: 1280px) {
  .event-card__date {
    font-size: 4rem;
    line-height: 0.94;
  }
}
@media (min-width: 1280px) {
  .event-card__date {
    min-height: 6rem;
  }
}
.event-card__about {
  display: flex;
  flex-direction: column;
  grid-area: about;
  gap: 0.25rem;
  justify-content: center;
  padding-inline: 0.5rem;
}
@media (min-width: 768px) {
  .event-card__about {
    gap: 0.5rem;
    padding-inline: 1rem;
  }
}
.event-card__title {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.24;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (min-width: 1280px) {
  .event-card__title {
    font-size: 1.125rem;
  }
}
.event-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media (min-width: 768px) {
  .event-card__title {
    display: block;
  }
}
.event-card__meta {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  color: var(--color-black-40);
}
@media (min-width: 768px) {
  .event-card__meta {
    flex-direction: row;
    gap: 1.25rem;
  }
}
.event-card__place {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.event-card__pin {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-black-20);
}
.event-card__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-area: tiles;
  gap: 0.25rem;
  height: 3.5rem;
}
@media (min-width: 768px) {
  .event-card__tiles {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
  }
}
@media (min-width: 1280px) {
  .event-card__tiles {
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
  }
}
.event-card__tile {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  text-align: center;
  white-space: nowrap;
  background-color: var(--color-gray-light);
  border-radius: var(--radius-8);
}
@media (min-width: 768px) {
  .event-card__tile {
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.125rem;
    padding-block: 0.5rem;
  }
}
@media (min-width: 1280px) {
  .event-card__tile {
    flex: none;
    gap: 0.25rem;
    width: 6rem;
    height: 6rem;
  }
}
.event-card__tile--outline {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-black-8);
}
.event-card__tile--muted {
  --event-card-value: var(--color-black-40);
  --event-card-total: var(--color-black-40);
}
.event-card__tile--wide {
  grid-column: 1/-1;
}
.event-card__label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-black-20);
}
.event-card__value {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--event-card-value, var(--color-black));
}
@media (min-width: 768px) {
  .event-card__value {
    font-family: var(--font-text);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.4;
    text-transform: none;
  }
}
@media (min-width: 768px) and (min-width: 1280px) {
  .event-card__value {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.event-card__total {
  color: var(--event-card-total, var(--color-black-20));
}
.event-card__image {
  display: none;
}
@media (min-width: 1280px) {
  .event-card__image {
    display: block;
    width: 8.5rem;
    height: 6rem;
    object-fit: cover;
    border-radius: var(--radius-8);
  }
}
.event-card--selected {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas: "date about" "tiles tiles";
  gap: 0.75rem 0.5rem;
  border-radius: var(--radius-16);
}
@media (hover: hover) {
  .event-card--selected:hover {
    --event-card-date: var(--color-black);
  }
}
.event-card--selected:focus-visible {
  --event-card-date: var(--color-black);
}
@media (min-width: 768px) {
  .event-card--selected {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1rem 0.75rem;
  }
}
@media (min-width: 1280px) {
  .event-card--selected {
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    grid-template-areas: "date about tiles";
    gap: 0.5rem;
  }
}
@media (min-width: 768px) {
  .event-card--selected .event-card__date {
    min-height: 5.5rem;
  }
}
@media (min-width: 1280px) {
  .event-card--selected .event-card__date {
    min-height: 6rem;
  }
}
.event-card--selected .event-card__title {
  display: none;
}
@media (min-width: 768px) {
  .event-card--selected .event-card__title {
    display: block;
  }
}
.event-card--selected .event-card__tiles {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: auto;
}
@media (min-width: 768px) {
  .event-card--selected .event-card__tiles {
    flex-direction: row;
    gap: 0.5rem;
  }
}
@media (min-width: 1280px) {
  .event-card--selected .event-card__tiles {
    align-items: center;
  }
}
.event-card--selected .event-card__tile {
  flex-direction: column;
  gap: 0.125rem;
  height: 3.5rem;
}
@media (min-width: 768px) {
  .event-card--selected .event-card__tile {
    flex: none;
    width: 5.5rem;
    height: 5.5rem;
  }
}
@media (min-width: 1280px) {
  .event-card--selected .event-card__tile {
    gap: 0.25rem;
    width: 6rem;
    height: 6rem;
  }
}
.event-card__button {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 1280px) {
  .event-card__button {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.event-card__button {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding-inline: 2rem;
  color: var(--color-black);
  text-align: center;
  background-color: var(--color-green);
  border-radius: var(--radius-8);
  transition: color var(--transition-duration) var(--transition-ease), background-color var(--transition-duration) var(--transition-ease);
}
@media (hover: hover) {
  .event-card__button:hover {
    color: var(--color-white);
    background-color: var(--color-black);
  }
}
.event-card__button:focus-visible {
  color: var(--color-white);
  background-color: var(--color-black);
}
@media (min-width: 768px) {
  .event-card__button {
    min-height: 5.5rem;
  }
}
@media (min-width: 1280px) {
  .event-card__button {
    flex: none;
    min-height: 6rem;
  }
}
.event-card__button-extra {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 768px) {
  .event-card__button-extra {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: inherit;
  }
}