/* ============================================================
   The Book page (template-book.php, template-parts/book/dates.php).
   Design: Book v2, desktop and mobile (docs/design-renders/
   book-desktop-v2, book-mobile-v2).

   The course page's Dates & Prices (offering-dates.css: the cards
   below 1200px, the table from 1200) with a "Course / Workshop"
   column first: the title (a link to its page; Navy SemiBold, 16px in
   the table, 18 on a card) over "Workshop · Foundation · Rock" (13px,
   the level SemiBold in its colour, darkened to pass AA on the grey
   rows and cards: main.css, --dates-level-*). On a card the course
   comes first, 12px above the date, as drawn.

   The table's six columns from 1366 (the file: 23 / 18 / 14 / 11 / 12
   / 22% of the table): 22 / 19 / 15 / 10 / 17 / 17%, the drawn widths
   with room for the real values on one line - a six-day date ("Mon-Sat
   26-31 Jul 2027"), "4 places left" with its choice and "Join the
   waiting list" (the file's dates are one day, its places a bare
   choice). At 1200-1365 the cells are 12-20px in (24 from 1440) and
   the location gives up a little to the date. "Price per person" takes
   two lines in its header, as drawn, so the header is about 72px tall
   (the file: 73).

   Cards (below 1200): a small grid, the course on top and everything
   else kept together at the card's foot, so the dates and buttons of
   cards side by side line up whatever the length of their titles (the
   course page's cards are a wrapping row: theirs all match).

   This file loads before offering-dates.css (alphabetical order), so
   rules that override it carry one more class.
   ============================================================ */

/* ---------- The course: title and meta ---------- */

.dates-table .dates-table__course {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	color: var(--dates-title);
	font-weight: var(--fw-regular);
}

.dates-table__title {
	color: inherit;
	font-size: var(--fs-dates-title);
	font-weight: var(--fw-semibold);
	line-height: 1.35;
	text-decoration: none;
	text-wrap: pretty;
}

/* A plain text link: underlined on hover, and always on touch screens
   (no hover there to show it is a link). */
@media (hover: hover) {
	a.dates-table__title:hover {
		text-decoration: underline;
	}
}

@media (hover: none) {
	a.dates-table__title {
		text-decoration: underline;
	}
}

a.dates-table__title:focus-visible {
	text-decoration: underline;
	outline-color: var(--color-focus-light);
}

.dates-table__meta {
	color: var(--dates-meta);
	font-size: var(--fs-dates-meta);
	line-height: var(--lh-body);
}

.dates-table__level {
	font-weight: var(--fw-semibold);
}

.dates-table__level--foundation {
	color: var(--dates-level-foundation);
}

.dates-table__level--progression {
	color: var(--dates-level-progression);
}

.dates-table__level--development {
	color: var(--dates-level-development);
}

.dates-table__level--leadership {
	color: var(--dates-level-leadership);
}

@media (forced-colors: active) {
	a.dates-table__title {
		text-decoration: underline;
	}
}

/* ---------- The cards (below 1200) ---------- */

@media (max-width: 1199.98px) {
	.dates-table--offerings .dates-table__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: 1fr;
		align-items: center;
	}

	.dates-table--offerings .dates-table__course {
		align-self: start;
		grid-column: 1 / -1;
	}

	.dates-table--offerings .dates-table__date,
	.dates-table--offerings .dates-table__location,
	.dates-table--offerings .dates-table__action {
		grid-column: 1 / -1;
	}

	/* A narrow card (as offering-dates.css): the places under the price. */
	@container dates-card (max-width: 309px) {
		.dates-table--offerings .dates-table__places {
			grid-column: 1 / -1;
		}
	}
}

/* ---------- The table (from 1200) ---------- */

@media (min-width: 1200px) {
	/* Cells 12px in at 1200 (the course page's: 16), the drawn 24 from
	   1440: six columns of real values need the room. */
	.offering-dates.book-dates {
		--dates-cell-x: clamp(12px, 5vw - 48px, 24px);
	}

	/* A table wider than its frame scrolls sideways rather than lose its
	   last column: larger text spacing (WCAG 1.4.12), or a long date such
	   as one across the new year at 1200. Otherwise it fits (no scroll).
	   The frame is also the containing block of the table's visually
	   hidden labels (absolutely positioned), or those would stick out of
	   the page instead of scrolling with the table. */
	.book-dates .dates-list {
		position: relative;
		overflow-x: auto;
	}

	.dates-table .dates-table__course {
		display: table-cell;
	}

	.dates-table__title {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	/* Title over meta, 2px apart (as drawn); the meta on one line, which
	   keeps the column wide enough on narrow desktops. */
	.dates-table__meta {
		display: block;
		margin-top: 2px;
		white-space: nowrap;
	}

	/* "Join the waiting list" and "Register interest" on one line: the
	   column widens for them rather than wrap the label from its arrow. */
	.dates-table--offerings .dates-table__link {
		white-space: nowrap;
	}

	/* The header row about 72px tall with the two-line price label (the
	   course page's is 51). */
	.dates-table--offerings .dates-table__heading {
		padding-block: 15px;
	}

	/* 1200-1365: 21 / 20.5 / 13 / 11 / 17 / 17.5%. */
	.dates-table--offerings .dates-table__heading:nth-child(1) {
		width: 21%;
	}

	.dates-table--offerings .dates-table__heading:nth-child(2) {
		width: 20.5%;
	}

	.dates-table--offerings .dates-table__heading:nth-child(3) {
		width: 13%;
	}

	/* "Price per / person", as drawn. */
	.dates-table--offerings .dates-table__heading:nth-child(4) {
		width: 11%;
		white-space: normal;
	}

	.dates-table--offerings .dates-table__heading:nth-child(5) {
		width: 17%;
	}

	.dates-table--offerings .dates-table__heading:nth-child(6) {
		width: 17.5%;
	}
}

@media (min-width: 1366px) {
	.dates-table--offerings .dates-table__heading:nth-child(1) {
		width: 22%;
	}

	.dates-table--offerings .dates-table__heading:nth-child(2) {
		width: 19%;
	}

	.dates-table--offerings .dates-table__heading:nth-child(3) {
		width: 15%;
	}

	.dates-table--offerings .dates-table__heading:nth-child(4) {
		width: 10%;
	}

	.dates-table--offerings .dates-table__heading:nth-child(6) {
		width: 17%;
	}
}