/* ============================================================
   Guiding list page (/guiding/: archive-ldm_guiding.php,
   template-parts/guiding/). Guiding - list page v2, desktop only
   (docs/design-renders/guiding-list-desktop-v2); Emma: the mobile
   follows the course list page, so phones and tablets take the
   course listing's layout and behaviour. The page shares the course
   listing's markup and styles (listing.css, listing-levels.css,
   listing-filters.css, listing-pagination.css, page-hero.css); this
   file holds only what differs:
   - the season pills ("Choose a season", seasons.php): the level
     pills' markup and behaviour with the season look - Primary Navy
     with White labels, number and "?" (as drawn; the level pills
     colour theirs by level), and from a 560px results column (tablets
     and desktops) one row of two 226 x 55 pills 81px apart with a Light
     Orange "//" centred between them (x 404-629 and 710-935 at 1440, as
     drawn), each pill's content 45px in; phones keep the level pills'
     two per row. Pressed (not designed): Light Orange with Navy text and
     a tick in place of the number; hover: an inner Light Orange ring;
   - the space under the cards: 50px to the paging band (as drawn; the
     course listing's 70 follows its bespoke panel, which this page
     does not have);
   - "How Private Guiding Works" (steps.php): the homepage progression
     section (progression.css) with Light Orange numbers and bottom
     edges, and cards that end 45px under their text (no link at the
     foot): 263px tall at 1440, as drawn;
   - the "Why choose" band: kept to about the heading's width, as on the
     About page (the guiding reasons are longer than the course ones).
   This file loads before the listing*.css files (alphabetical order),
   so its rules carry one more class than the ones they change.
   ============================================================ */

/* ---------- Season pills ---------- */

.listing-levels--seasons {
	--season-pill-w: 226px;   /* drawn 226 x 55 at 1440 (the level pills are 253) */
}

.listing-levels--seasons .level-pill {
	--level-colour: var(--color-season-pill-pressed);
	color: var(--color-season-pill-text);
}

.listing-levels--seasons .level-pill.is-pressed {
	color: var(--color-level-pill-pressed-text);
}

/* "//" between the pills (the course listing's chevrons stand for a
   progression), centred in the gap; one-row layout only, as the
   chevrons. Drawn 12 x 15, about 1.5px strokes. */
.level-pill__separator {
	position: absolute;
	top: 50%;
	right: 100%;
	display: none;
	justify-content: center;
	width: var(--level-gap);
	color: var(--color-season-separator);
	transform: translateY(-50%);
	pointer-events: none;
}

.level-pill__slashes {
	display: block;
	width: 13px;
	height: 16px;
}

/* One row, as drawn at 1440, wherever the two fit with the drawn gap: a
   column of 560px and more (the three level pills need 700). Two equal
   pills 55px tall, each at least the drawn 226px and wide enough for its
   label with the drawn 45px from the edges to the number and to the "?"
   icon (its 40px button reaches 9px past the icon); the label 22px after
   the number and the "?" 22px after the label (as drawn). Below 560px
   (phones) the level pills' two-per-row layout, without the "//". */
@container listing-levels (min-width: 560px) {
	.listing-levels--seasons .listing-levels__row {
		--level-pill-h: 55px;
		--level-gap: 81px;
		display: flex;
		align-items: center;
		gap: 18px;
	}

	.listing-levels--seasons .listing-levels__list {
		display: grid;
		flex: 0 1 auto;
		grid-template-columns: none;
		grid-auto-columns: minmax(var(--season-pill-w), 1fr);
		grid-auto-flow: column;
		gap: var(--level-gap);
		min-width: 0;
	}

	.listing-levels--seasons .level-pill {
		--level-inset: 45px;
		--level-inner-gap: 22px;
		justify-content: flex-start;
		padding-right: calc(var(--level-inset) - (var(--level-help) - 22px) / 2);
	}

	.level-pill__separator {
		display: flex;
	}
}

/* ---------- The space under the cards ---------- */

/* 50px from the last row of cards to the paging band (or the next
   section), at every width: the course listing's bottom space follows
   its bespoke panel. */
.listing.guiding-listing {
	--listing-bottom: 50px;
}

/* ---------- "How Private Guiding Works" ---------- */

/* Light Orange numbers and bottom edges (the homepage colours them by
   level). */
.guiding-steps .progression-card {
	--progression-level: var(--color-accent);
}

/* No link at the foot: the card ends 45px under the text at every width
   (16 + the 29px padding from 768px; the phones' 23 + 22 are already
   45). The homepage cards keep 42px for their link. */
@media (min-width: 768px) {
	.guiding-steps .progression-card__description {
		margin-bottom: 16px;
	}
}

/* ---------- The "Why choose" band on this page ---------- */

/* The guiding reasons are longer than the course ones (two lines each,
   as drawn): the block keeps to about the heading's width (976px at
   1440), so it stays centred instead of filling the container. */
@media (min-width: 1024px) {
	.guiding-listing-page .why-band__content {
		max-width: 62rem;
	}
}