/* ============================================================
   Dates & Prices: the dates table (template-parts/components/
   dates-table.php) on a course page (template-parts/offering/
   dates.php) and on the Book page (template-parts/book/dates.php,
   which adds a "Course / Workshop" column: book-page.css).
   Design: CW v2 desktop y 3233-4181, mobile y 5074-6886
   (docs/notes/course-page.md 4.8, 5.8 and 7; components 16-20).
   The "Need a different date?" panel after it is the shared CTA
   panel (cta-panel.css); here only its place.

   White section with the house section padding (the file: 92px to
   the heading's caps, 98 below the panel on desktop; 73 and 88 on
   phones) and the shared section header: H2 at the site's H2 size
   (the mobile file draws this one 30px, every other section 36),
   then Doc 02's intro line (not drawn).

   One table for every width, laid out three ways:
   - Phones (< 768): a card per date, as drawn - #F2F2F2, Border
     Warm, 12px corners, 16px apart; 14 / 20 / 16px padding; rows
     12px apart: the date and the location (SemiBold 14 with 14px
     navy calendar and pin icons, the text 20px after the icon's
     left edge), the price ("£150 per person", SemiBold 16) with the
     places on the right ("4 places left" and the choice, or "Full";
     36px tall either way, so neighbouring cards match), then the
     full-width action. In a card under 310px of content (phones
     under about 380px) the places take their own line.
   - Tablets (768-1023): the same cards, two across (20px apart);
     1024-1199: three across - the table's real values (a five-day
     date, "Ennerdale · Low Gillerthwaite", the places and the
     waiting-list link) need about 1040px on one line.
   - Desktop (>= 1200): the table as drawn - Border Warm outline,
     16px corners (the file: 14-15), a 51px #F2F2F2 header of
     SemiBold 14 uppercase labels tracked 0.05em, rows 76px with 1px
     rules, every other row #F2F2F2 (counted over the rows a filter
     leaves); cells 24px in at 1440 (16 at 1200); dates and locations
     Regular 16, prices SemiBold 16; "Book now" a 44px pill (the
     file: 41; Dark Orange, .btn--solid, everywhere: the course pages'
     design draws it Light Orange, changed 2026-10-25 to match the other
     buttons), the other actions 14px arrow links. The last header
     ("Book") is drawn invisible: there for screen readers only.
   Selects (filters 43px, places 36px; the file 35-37): White pills,
   Border Warm, one caret (a small solid triangle: the file draws a
   bold chevron in the desktop places choice). Hover darkens the
   border to Grey Dark; keyboard focus adds the Dark Orange ring.
   The "Filter by:" row is left-aligned at every width (the mobile
   file centres it; with real values it wraps).
   Windows High Contrast: the fills go; the borders carry the cards,
   the table and the pills.
   ============================================================ */

.offering-dates {
	--dates-gap: 16px;      /* between the cards, from the filters to them */
	--dates-row-h: 76px;    /* desktop rows: 77px pitch with the rule */
	--dates-cell-x: 24px;   /* desktop cells: labels and values 24px in */
}

/* The hero's "View dates" lands here. Scrolling down to it sends the
   header away (navigation.js 3), so the section lands at the top edge,
   with nothing of the section above showing. Only while the header
   floats (arriving from below) does the heading need room under the bar
   - on phones and tablets the section's top padding is less than the
   bar and the clearance. */
html:has(.site-header.is-floating) .offering-dates {
	scroll-margin-top: max(0px, var(--header-bar-h) + var(--header-focus-clearance) - var(--section-pad-y));
}

/* Parts the script shows or hides stay hidden while hidden, whatever
   their display. */
.offering-dates [hidden] {
	display: none !important;
}

/* ---------- Why a booking could not be made ----------
   Sent back from the checkout (inc/booking.php, ldm_booking_back_url():
   the date filled, went back to Register interest or is over, or its
   places are held while others pay). Not designed: the checkout's notice
   box, on the dates' grey. */

.offering-dates__notice {
	margin-bottom: var(--dates-gap);
	padding: 14px 18px;
	border-left: 4px solid var(--dates-notice-rule);
	background-color: var(--dates-surface-alt);
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
}

.offering-dates__notice--error {
	border-left-color: var(--color-error);
}

.offering-dates__notice p {
	margin: 0;
}

@media (min-width: 1024px) {
	.offering-dates__notice {
		margin-bottom: 33px;
	}
}

/* ---------- Filters (offering-dates.js shows them) ---------- */

.dates-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 13px;
	margin-bottom: var(--dates-gap);
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

/* 16px over the cards on phones and tablets, 33px from 1024, as drawn. */
@media (min-width: 1024px) {
	.dates-filter {
		margin-bottom: 33px;
	}
}

/* The clear button after the pills (the Book page's "Clear filters";
   not designed): the listing's text button (.reset-link), Navy as "Show
   all dates", the row's gap from the pills (on phones it wraps to a line
   of its own, on the pills' edge). */
.dates-filter__clear {
	color: var(--color-text);
	font-size: var(--fs-small);
}

@media (hover: hover) {
	.dates-filter__clear:hover {
		text-decoration-thickness: 2px;
	}
}

/* ---------- Select pills: filters and places ---------- */

.dates-select {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	color: var(--color-text);
	vertical-align: middle;
}

.dates-select__input {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	max-width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 32px 0 15px;
	overflow: hidden;
	border: var(--border-hairline) solid var(--dates-rule);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: inherit;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--transition);
	field-sizing: content; /* Chromium: as wide as the chosen option, not the widest */
}

.dates-select__caret {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 10px;
	height: 10px;
	transform: translateY(-50%) rotate(90deg);
	pointer-events: none;
}

@media (hover: hover) {
	.dates-select__input:hover {
		border-color: var(--color-control-border);
	}
}

.dates-select__input:focus-visible {
	border-color: var(--color-control-border);
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

/* Touch screens: 16px, or iOS zooms the page into a select it opens
   (the file draws 14px). */
@media (pointer: coarse) {
	.dates-select__input {
		font-size: var(--fs-body);
	}
}

/* Filters: 43px pills with a Regular label, as drawn. */
.dates-select--filter .dates-select__input {
	height: 43px;
	padding: 0 38px 0 19px;
	font-weight: var(--fw-regular);
}

.dates-select--filter .dates-select__caret {
	right: 18px;
}

/* ---------- The dates: cards (phones, tablets) ---------- */

.dates-table {
	display: block;
	width: 100%;
	border-collapse: collapse;
	color: var(--color-text);
}

/* Read by screen readers, not shown: the cards say what each value is.
   (Its labels may wrap, so its hidden row never grows past the page.) */
.dates-table__head {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.dates-table__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--dates-gap);
}

/* Each card is a size container: in a narrow one the places go under
   the price (below). */
.dates-table__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 14px 20px 16px;
	border: var(--border-hairline) solid var(--dates-rule);
	border-radius: var(--radius-sm);
	background-color: var(--dates-surface-alt);
	container: dates-card / inline-size;
}

.dates-table__cell {
	display: block;
	min-width: 0;
	padding: 0;
	font-weight: inherit;
	line-height: var(--lh-body);
	text-align: left;
}

.dates-table__date,
.dates-table__location {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.dates-table__icon {
	flex: none;
	color: var(--dates-icon);
}

/* A date without a location: no empty line on its card (the table
   keeps the cell). */
.dates-table__location--none {
	display: none;
}

.dates-table__price {
	flex: 1 1 auto;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
}

.dates-table__places {
	flex: 0 1 auto;
	margin-left: auto;
	font-size: var(--fs-small);
}

/* The places are the choice's height on every card (also on a full
   date, which has none), so cards side by side match and their
   buttons line up. */
.dates-table__places-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 10px;
	min-height: 36px;
}

/* Too narrow for "£150 per person" beside "4 places left" and the
   choice (about 300px with the gaps; 3 cards across, phones under
   about 380px): the places take their own line, from the left. */
@container dates-card (max-width: 309px) {
	.dates-table__places {
		flex-basis: 100%;
		margin-left: 0;
	}

	.dates-table__places-inner {
		justify-content: flex-start;
	}
}

.dates-table__full {
	color: var(--dates-status-full);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
}

.dates-table__action {
	flex: 1 1 100%;
}

.dates-table__button {
	width: 100%;
}

/* The table's arrow links; the cards use the outline buttons. */
.dates-table__link {
	display: none;
}

/* Tablets: two cards across; small desktops (1024-1199, too narrow for
   the table's real values) three. */
@media (min-width: 768px) {
	.dates-table__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--dates-gap) 20px;
	}
}

@media (min-width: 1024px) {
	.dates-table__body {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- The dates: the table (from 1200) ---------- */

@media (min-width: 1200px) {
	/* Cells 16px in at 1200, the drawn 24 from 1440. */
	.offering-dates {
		--dates-cell-x: clamp(16px, 3.3333vw - 24px, 24px);
	}

	.dates-list {
		overflow: hidden;
		border: var(--border-hairline) solid var(--dates-rule);
		border-radius: var(--radius-md);
	}

	.dates-table {
		display: table;
	}

	.dates-table__head {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.dates-table__body {
		display: table-row-group;
	}

	.dates-table__row {
		display: table-row;
		padding: 0;
		border: 0;
		border-top: var(--border-hairline) solid var(--dates-rule);
		border-radius: 0;
		background-color: transparent;
		container: none;
	}

	/* Every other row grey, counting only the rows a filter leaves
	   (where the browser can: the :nth-child(... of S) rules; others
	   stripe the full list). */
	.dates-table__row:nth-child(even) {
		background-color: var(--dates-surface-alt);
	}

	.dates-table__row:nth-child(odd of :not([hidden])) {
		background-color: transparent;
	}

	.dates-table__row:nth-child(even of :not([hidden])) {
		background-color: var(--dates-surface-alt);
	}

	.dates-table__heading {
		height: 51px;
		padding: 0 var(--dates-cell-x);
		background-color: var(--dates-surface-alt);
		font-size: var(--fs-small);
		font-weight: var(--fw-semibold);
		letter-spacing: 0.05em; /* fitted to the drawn label widths (LOCATION 76px, PLACES 55px) */
		line-height: var(--lh-body);
		text-align: left;
		text-transform: uppercase;
		white-space: nowrap;
		vertical-align: middle;
	}

	/* Columns (a column whose content needs more takes it from the
	   others). From 1366: 19 / 23 / 17 / 20 / 21% of the table - the
	   file's 19 / 21 / 20 / 19 / 21 with two points moved from the price
	   to the location, so "Ennerdale · Low Gillerthwaite" keeps to one
	   line; the places then start at the drawn x 859 at 1440. Below
	   1366: 21 / 25 / 16 / 18 / 20, which fit the longest real values
	   (a five-day date 192px, that location 226px, "4 places left" and
	   the choice 154px, "Join the waiting list" 163px) on one line
	   down to 1200. */
	.dates-table__heading:nth-child(1) {
		width: var(--dates-col-date, 21%);
	}

	.dates-table__heading:nth-child(2) {
		width: var(--dates-col-location, 25%);
	}

	.dates-table__heading:nth-child(3) {
		width: var(--dates-col-price, 16%);
	}

	.dates-table__heading:nth-child(4) {
		width: var(--dates-col-places, 18%);
	}

	.dates-table__heading:nth-child(5) {
		width: var(--dates-col-book, 20%);
	}

	/* A date never breaks inside ("Mon-Fri 24-28 May 2027"). */
	.dates-table__date .dates-table__value {
		white-space: nowrap;
	}

	.dates-table__cell,
	.dates-table__date,
	.dates-table__location,
	.dates-table__places {
		display: table-cell;
		height: var(--dates-row-h);
		padding: 16px var(--dates-cell-x);
		vertical-align: middle;
	}

	.dates-table__date,
	.dates-table__location {
		font-size: var(--fs-body);
		font-weight: var(--fw-regular);
	}

	.dates-table__icon,
	.dates-table__per {
		display: none;
	}

	/* "4 places left", then the choice, on one line: the choices line up
	   down the column. */
	.dates-table__places-inner {
		display: inline-flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		white-space: nowrap;
	}

	.dates-table__left {
		min-width: 6.6em;
	}

	.dates-table__button {
		width: auto;
	}

	.dates-table__button--card {
		display: none;
	}

	.dates-table__link {
		display: inline-flex;
		color: var(--color-link);
		font-size: var(--fs-small);
	}

	.dates-table__link:focus-visible {
		outline-color: var(--color-focus-light);
	}

	.dates-table__link:focus-visible .icon {
		color: var(--color-arrow-hover-on-light);
	}
}

@media (min-width: 1366px) {
	.offering-dates {
		--dates-col-date: 19%;
		--dates-col-location: 23%;
		--dates-col-price: 17%;
		--dates-col-places: 20%;
		--dates-col-book: 21%;
	}
}

@media (min-width: 1200px) and (hover: hover) {
	.dates-table__link:hover .icon {
		color: var(--color-arrow-hover-on-light);
	}
}

/* ---------- No match for the filters ---------- */

.dates-none {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 20px;
	border: var(--border-hairline) solid var(--dates-rule);
	border-radius: var(--radius-sm);
	background-color: var(--dates-surface-alt);
	color: var(--color-text);
}

/* "Show all dates" (the listing's text button, .reset-link): Navy here -
   its Grey Dark is 4.49:1 on this grey box, under AA (Navy 14.4:1). The
   hover cue is a thicker underline, since the colour no longer changes. */
.dates-none__clear {
	color: var(--color-text);
}

@media (hover: hover) {
	.dates-none__clear:hover {
		text-decoration-thickness: 2px;
	}
}

/* ---------- No dates at all on the Book page (not designed: the date
   cards' grey box; a course page without dates shows Register interest,
   below) ---------- */

.dates-empty {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	border: var(--border-hairline) solid var(--dates-rule);
	border-radius: var(--radius-sm);
	background-color: var(--dates-surface-alt);
	color: var(--color-text);
}

.dates-empty__text {
	text-wrap: pretty;
}

@media (min-width: 768px) {
	.dates-empty {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		padding: 24px;
	}

	.dates-empty__button {
		flex: none;
	}
}

@media (min-width: 1024px) {
	.dates-empty,
	.dates-none {
		padding: 24px var(--dates-cell-x);
		border-radius: var(--radius-md);
	}
}

/* Windows High Contrast: an inline SVG keeps a colour set on it (its
   default is preserve-parent-color), so the cards' navy icons would
   vanish on a dark theme: let them take the system text colour. */
@media (forced-colors: active) {
	.dates-table__icon {
		forced-color-adjust: auto;
	}
}

/* ---------- Enquiry only (C17) and no dates yet (W03): the button under
   the intro (whose second paragraph is the page's "Need a different
   date?" note); without dates, that note's link beside it ---------- */

.dates-enquiry {
	margin: 0;
}

.dates-enquiry--interest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

/* ---------- The "Need a different date?" panel: its place ---------- */

.offering-dates__panel {
	margin-top: 32px;
}

/* Under the cards, one card gap (as drawn); under the table, 32px. */
.offering-dates--dated .offering-dates__panel {
	margin-top: var(--dates-gap);
}

@media (min-width: 1200px) {
	.offering-dates--dated .offering-dates__panel {
		margin-top: 32px;
	}
}