:root {
  --schedule-control-height: 48px;
  --schedule-info-width: 440px;
  --schedule-social-width: 48px;
  --schedule-ticket-width: 160px;
  --schedule-info-actions-gap: 18px;
  --schedule-action-gap: 8px;
  --schedule-row-gap: 13px;
  --schedule-actions-width: 384px;
  --schedule-width: 842px;
  --schedule-flag-size: clamp(30px, 1.75vw, 36px);
  --schedule-day-font-size: clamp(28px, 2.22vw, 32px);
  --schedule-text-font-size: clamp(20px, 1.65vw, 23px);
  --schedule-ticket-font-size: clamp(19px, 1.55vw, 24px);
  --row-height: var(--schedule-control-height);
  --vk-width: var(--schedule-social-width);
  --ticket-width: var(--schedule-ticket-width);
}

.schedule {
  width: var(--schedule-width);
  max-width: 100%;
}

.concert-list {
  width: 100%;
  max-width: none;
  gap: var(--schedule-row-gap);
  padding-right: 0;
}

.concert-row,
.concert-row:nth-child(n) {
  --row-offset: 0px;
  --row-tilt: 0deg;
  display: grid;
  grid-template-columns: var(--schedule-info-width) var(--schedule-actions-width);
  column-gap: var(--schedule-info-actions-gap);
  align-items: stretch;
  width: var(--schedule-width);
  max-width: 100%;
  height: var(--schedule-control-height);
  transform: none;
}

.concert-info {
  width: var(--schedule-info-width);
  height: var(--schedule-control-height);
}

.concert-info > .paper-layer {
  inset: -1px -2px;
}

.concert-copy {
  display: grid;
  grid-template-columns:
    var(--schedule-flag-size)
    calc(var(--schedule-day-font-size) * 1.35)
    max-content
    max-content
    minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  width: 100%;
  height: 100%;
  padding: 0 10px 0 12px;
}

.country-flag {
  width: var(--schedule-flag-size);
  height: var(--schedule-flag-size);
  margin: 0;
}

.concert-day,
.concert-month,
.concert-separator,
.concert-city {
  margin: 0;
}

.concert-day {
  justify-self: start;
  font-size: var(--schedule-day-font-size);
}

.concert-month,
.concert-separator,
.concert-city {
  font-size: var(--schedule-text-font-size);
}

.concert-separator {
  justify-self: center;
}

.concert-actions {
  display: grid;
  grid-template-columns:
    var(--schedule-social-width)
    var(--schedule-ticket-width)
    var(--schedule-ticket-width);
  align-items: stretch;
  width: var(--schedule-actions-width);
  height: var(--schedule-control-height);
  margin-left: 0;
  gap: var(--schedule-action-gap);
}

.concert-actions.ticket-pair {
  grid-template-columns:
    var(--schedule-ticket-width)
    var(--schedule-ticket-width);
}

.concert-actions .concert-action {
  width: 100%;
  height: var(--schedule-control-height);
  margin-left: 0;
}

.concert-actions .paper-layer {
  inset: -1px;
}

.ticket-action .action-content > span {
  white-space: nowrap;
}

.ticket-action {
  font-size: var(--schedule-ticket-font-size);
}

@media (max-width: 899px) {
  :root {
    --mobile-schedule-gutter: clamp(16px, 4.65vw, 20px);
    --schedule-info-width: 100%;
    --schedule-actions-width: 100%;
    --schedule-width: 100%;
    --schedule-row-gap: 26px;
    --schedule-action-gap: 6px;
    --schedule-flag-size: clamp(27px, 6.6vw, 29px);
    --schedule-day-font-size: clamp(22px, 5.45vw, 23px);
    --schedule-text-font-size: clamp(15.5px, 4vw, 18px);
  }

  .site-shell {
    padding-right: max(var(--mobile-schedule-gutter), env(safe-area-inset-right));
    padding-left: max(var(--mobile-schedule-gutter), env(safe-area-inset-left));
  }

  .schedule {
    width: 100%;
    max-width: 440px;
  }

  .concert-list {
    width: 100%;
    gap: var(--schedule-row-gap);
  }

  .concert-row,
  .concert-row:nth-child(n) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      var(--schedule-control-height)
      var(--schedule-control-height);
    row-gap: 8px;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .concert-info {
    width: 100%;
    height: var(--schedule-control-height);
  }

  .concert-copy {
    grid-template-columns:
      var(--schedule-flag-size)
      calc(var(--schedule-day-font-size) * 1.2)
      max-content
      max-content
      minmax(0, 1fr);
    column-gap: clamp(4px, 1.5vw, 7px);
    width: 100%;
    padding: 0 clamp(8px, 2.4vw, 11px);
  }

  .concert-actions {
    grid-template-columns:
      var(--schedule-social-width)
      minmax(0, 1fr)
      minmax(0, 1fr);
    width: 100%;
    height: var(--schedule-control-height);
    margin: 0;
    gap: var(--schedule-action-gap);
  }

  .concert-actions.ticket-pair {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
  }

  .concert-actions .ticket-action {
    width: 100%;
    font-size: clamp(15px, 4vw, 18px);
  }

  .concert-actions .ticket-action[data-market="UZ"] {
    grid-column: 2 / 4;
  }
}

@media (max-width: 339px) {
  :root {
    --schedule-action-gap: 5px;
    --schedule-flag-size: 25px;
    --schedule-day-font-size: 22px;
    --schedule-text-font-size: 15px;
  }

  .concert-copy {
    column-gap: 3px;
    padding: 0 5px;
  }

  .concert-row,
  .concert-row:nth-child(n) {
    display: grid;
    height: auto;
  }

  .concert-info,
  .vk-action,
  .ticket-action {
    grid-column: auto;
  }

  .concert-actions .ticket-action[data-market="UZ"] {
    grid-column: 2 / 4;
  }

  .concert-actions .ticket-action {
    width: 100%;
    font-size: 15px;
  }
}