/* Ticket page (bileti.html, written by build.py). Loaded after styles.css by that page only, so the
   homepage does not carry it. It is built from the club pages' own parts: the header block of the
   club pages, the homepage's "next match" band, the same rows and the homepage's two filters. What
   is here is only what those do not have: the month groups, the link that downloads one match, the
   closing message, and the three steps (moved off the homepage, where their CSS used to be). */

.bhead { padding-bottom: 40px; }
@media (min-width: 900px) { .bhead { padding-bottom: 52px; } }

/* the filters wait for bileti.js, so a script that failed leaves no chips that do nothing */
.js .bfilters { display: none; }
.js .bfilters.is-on { display: block; }
.bcount { margin-top: 22px; }
.bcount:empty { display: none; }
#blist { margin-top: 8px; }

/* one block per month: a heading and its rows; bileti.js hides a month that has no row left */
.mgroup + .mgroup { margin-top: 48px; }
.mgroup__h { margin: 0; font-size: clamp(20px, 5.4vw, 26px); }
.mgroup__h + .mlist { margin-top: 14px; }

/* "В календара": one match as a file for the calendar of the phone. A quiet text link under the
   ticket button (when the match has one; else in the button's place); its own row on a phone, the
   cell under the button from 760px */
.mrow__cal {
  grid-area: c; justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  margin-top: -8px; padding-inline: 2px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px;
}
.mrow:has(.mrow__cal) { grid-template-areas: "d t r r" "m m m b" "h h h h" "c c c c"; }
.mrow:has(.mrow__cal):not(:has(.mrow__buy)) { grid-template-areas: "d t r r" "m m m m" "h h h h" "c c c c"; }
@media (min-width: 760px) {
  .mrow:has(.mrow__cal) { grid-template-areas: "r d t m b" ". . . h c"; }
  /* a match that is not on sale has no button: the link takes the button's place, on the first line */
  .mrow:has(.mrow__cal):not(:has(.mrow__buy)) { grid-template-columns: 74px 70px 62px 1fr auto; grid-template-areas: "r d t m c" ". . . h ."; }
  .mrow__cal { justify-self: end; margin-top: 0; min-height: 40px; }
}
@media (hover: hover) { .mrow__cal:hover { color: var(--ink); text-decoration-color: currentColor; } }

.blink { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- How to buy: the three steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { border-radius: var(--r-card); padding: 24px 24px 26px; }   /* glass: styles.css */
.step__no { display: block; font-family: var(--f-display); font-weight: 800; font-size: 44px; line-height: 1.14; color: var(--volt-2); }
.step__t { margin: 6px 0 0; font-family: var(--f-display); font-weight: 750; font-size: 24px; line-height: 1.16; text-transform: uppercase; letter-spacing: var(--ls-display); }
/* the partner's name is lowercase in its own logo; the heading's uppercase must not touch it */
.brand { text-transform: none; }
.step__p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }