/* Buttercup Childcare - the /camps listing.
 *
 * The listing markup is generated in camps.php rather than by Oxygen, so its
 * styling ships with the plugin, the same way the shop grid's does. Design
 * tokens come from the Oxygen variables sheet (variables.css). Everything here
 * is scoped to the .bc-camp* / .bc-camps* classes.
 *
 * WHY THIS IS A LIST AND NOT THE SHOP GRID.
 * A shop cell carries a picture, a name and a price. A camp carries dates,
 * a price, whether there are places left, and the full day care that runs
 * alongside it - four things a 316px square cannot hold without turning into
 * a wall of small text. Rows in date order read the way a parent reads this
 * page: "which week suits us?".
 *
 * CONTRAST. Every ratio below was calculated against the actual pair, and no
 * new type-on-colour is under 4.5:1:
 *
 *   ink #1d2129 on white                 16.13:1
 *   ink #1d2129 on the sage pill #cde0cc 11.62:1   places left
 *   ink #1d2129 on the clay pill #f4e3d8 12.93:1   fully booked
 *   ink #1d2129 on the tint  #f7f2ee     14.51:1   companion box, empty state
 *   --bc-muted on white                   4.61:1   blurb and footnote only
 *
 * --bc-muted is deliberately NOT used on any of the tints: it is a 62 per cent
 * ink wash, so on #f7f2ee it falls to 4.44:1 and fails. On the tints the copy
 * is full ink.
 *
 * The camp title is ink, not the shop's accent orange. The orange measures
 * 2.48:1 on white and fails even the large-text threshold; it is a pre-existing
 * site-wide token and an open decision, and nothing here should add to it.
 * .bc-btn is untouched for the same reason.
 */

/* --- the list ---------------------------------------------------------- */

.bc-camp-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bc-camp {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
	padding: 34px 0;
	border-top: 1px solid var(--bc-line);
}

.bc-camp:first-child {
	border-top: 0;
	padding-top: 0;
}

.bc-camp-img {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 2px;
}

.bc-camp-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.bc-camp:hover .bc-camp-img img {
	transform: scale(1.04);
}

/* --- the body of one camp ---------------------------------------------- */

.bc-camp-body {
	min-width: 0;
}

.bc-camp-date {
	font-family: var(--bc-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bc-ink);
	margin: 0;
}

.bc-camp-title {
	font-family: var(--bc-font);
	font-size: var(--bc-h4);
	font-weight: 500;
	line-height: 1.28;
	color: var(--bc-ink);
	text-wrap: balance;
	margin: 8px 0 0;
}

.bc-camp-link {
	color: inherit;
	text-decoration: none;
}

/* Hover is an underline rather than a colour change, so the title never
   becomes a colour that has to be argued about. */
.bc-camp-link:hover,
.bc-camp-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bc-camp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 12px 0 0;
}

.bc-camp-price {
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	font-weight: 500;
	line-height: 1.2;
	color: var(--bc-ink);
}

.bc-camp-price .woocommerce-Price-amount {
	white-space: nowrap;
}

.bc-camp-stock {
	display: inline-block;
	font-family: var(--bc-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bc-ink);
	padding: 5px 12px;
	border-radius: 999px;
}

.bc-camp-stock-left {
	background-color: #cde0cc;
}

.bc-camp-stock-full {
	background-color: #f4e3d8;
}

.bc-camp-blurb {
	font-family: var(--bc-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--bc-muted);
	text-wrap: pretty;
	max-width: 62ch;
	margin: 12px 0 0;
}

.bc-camp-actions {
	margin: 18px 0 0;
}

/* --- the childcare that runs alongside a camp week ---------------------- */

.bc-camp-add {
	background-color: #f7f2ee;
	border-radius: 4px;
	padding: 16px 20px;
	margin: 20px 0 0;
}

.bc-camp-add-label {
	font-family: var(--bc-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bc-ink);
	margin: 0;
}

.bc-camp-add-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.bc-camp-add-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 6px 0;
}

.bc-camp-add-link {
	font-family: var(--bc-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bc-camp-add-price {
	font-family: var(--bc-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--bc-ink);
}

.bc-camps-foot {
	font-family: var(--bc-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--bc-muted);
	text-wrap: pretty;
	max-width: 78ch;
	margin: 36px 0 0;
}

.bc-camps-foot a {
	color: var(--bc-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- between seasons ---------------------------------------------------
 *
 * Most of the year there is no camp on sale: nothing from late July until the
 * Halloween mid-term, and nothing again from November until Easter. This is
 * therefore the state the page is in most often, and it is designed rather
 * than left to happen.
 */

.bc-camps-empty {
	background-color: #f7f2ee;
	border-radius: 6px;
	padding: 54px 32px;
	text-align: center;
}

.bc-camps-empty-title {
	font-family: var(--bc-font);
	font-size: var(--bc-h3);
	font-weight: 500;
	line-height: 1.25;
	color: var(--bc-ink);
	text-wrap: balance;
	max-width: 22ch;
	margin: 0 auto;
}

.bc-camps-empty-p {
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	font-weight: 300;
	line-height: 1.65;
	color: var(--bc-ink);
	text-wrap: pretty;
	max-width: 58ch;
	margin: 18px auto 0;
}

.bc-camps-empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px 26px;
	margin: 30px 0 0;
}

.bc-camps-empty-link {
	font-family: var(--bc-font);
	font-size: var(--bc-body);
	font-weight: 400;
	line-height: 1.5;
	color: var(--bc-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* THE EVERGREEN FRAME IS NOT STYLED HERE, AND THAT IS DELIBERATE.
 *
 * The first push of /camps proved that oxygen-html-to-page DROPS any class it
 * has no Oxygen selector for: a .bc-camp-info card came back as a bare
 * <article class="oxy-container">. Registering new selectors means
 * oxygen-insert-stylesheet, which the navigation agent holds a lock on, so the
 * frame above and below the listing is built out of the /fees card family
 * (.bc-fees-cards / .bc-fees-card / .bc-fees-rows), which already exists in
 * that stylesheet. See build/make-camps-html.py.
 *
 * The listing itself is unaffected: it is injected into the marker by
 * bct_render_camps() at request time and never passes through the converter,
 * which is why every .bc-camp* class above survives.
 */

/* --- breakpoints -------------------------------------------------------- */

@media (max-width: 1023px) {
	.bc-camp {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: 26px;
	}
}

@media (max-width: 767px) {
	.bc-camp {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 28px 0;
	}

	/* One per row, at the same 1:1 crop the shop card uses on a phone. */
	.bc-camp-img {
		max-width: 100%;
	}

	.bc-camps-empty {
		padding: 40px 22px;
	}
}

@media (max-width: 559px) {
	.bc-camp-title {
		font-size: 22px;
	}

	.bc-camps-empty-title {
		font-size: 28px;
	}

	/* Stacked rather than in a row: at 390 the button and the two links share
	   a line badly, and a centred ragged pair reads as a mistake. */
	.bc-camps-empty-actions {
		flex-direction: column;
		gap: 18px;
	}
}

/* Secondary link beside the camp card's primary Book button. Ink with an
   orange underline rather than orange text, which measures 2.48:1 on white. */
.bc-camp-detail {
	display: inline-block;
	margin-left: 14px;
	color: var(--bc-ink, #1d2129);
	font-family: var(--bc-font, inherit);
	font-size: 15px;
	text-decoration: underline;
	text-decoration-color: var(--bc-accent, #f48847);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
.bc-camp-detail:hover,
.bc-camp-detail:focus-visible {
	text-decoration-color: var(--bc-ink, #1d2129);
}
@media (max-width: 479px) {
	.bc-camp-detail { display: block; margin: 10px 0 0; }
}