/* wwh/home-whats-on — slider + markets strip (core 2.80.0).
   Card, head and section styling are shared with the theme (home-shop.css,
   home-whats-on.css); this file owns only the rail, the arrows and the strip.

   The home page scrolls one section per step, so this section has to fit one
   viewport. The card image therefore takes its height from the viewport
   (--wwh-wo-img), not from the 3:4 aspect ratio the other home rows use. */

.home2-section.home2-section--whats-on {
	--wwh-wo-gap: clamp(1rem, 2vw, 1.5rem);
	--wwh-wo-img: clamp(120px, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 580px), 420px);
	/* The site header (~104px) floats over every home section. The taller head
	   here (link + arrows) reached under it with the theme's symmetric padding,
	   so the top padding clears the header and the bottom gives the space back. */
	padding-top: 7rem;
	padding-bottom: clamp(2rem, 6vh, 4rem);
}

@media (max-width: 900px) {
	/* Narrower cards wrap their titles, and the strip gets a scroll row. */
	.home2-section.home2-section--whats-on {
		--wwh-wo-img: clamp(150px, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 660px), 420px);
	}
}

@media (max-width: 700px) {
	/* The head stacks on phones: heading, then link and arrows on one line. */
	.home2-section.home2-section--whats-on {
		--wwh-wo-img: clamp(120px, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 590px), 360px);
		padding-top: 5.75rem;
	}
}

/* ---------- Head: link, then the arrows beneath it ---------- */
.wwh-wo__head {
	align-items: flex-end;
}

.wwh-wo__aside {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.25rem;
	flex-shrink: 0;
}

.wwh-wo__arrows {
	display: flex;
	gap: 0.5rem;
}

.wwh-wo__arrows[hidden] {
	display: none;
}

.wwh-wo__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(242, 237, 230, 0.45);
	background: transparent;
	color: #f2ede6;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0 0 2px;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.wwh-wo__arrow:hover:not(:disabled),
.wwh-wo__arrow:focus-visible {
	background: #f2ede6;
	color: #18140f;
}

.wwh-wo__arrow:focus-visible {
	outline: 2px solid #d9b25c;
	outline-offset: 3px;
}

.wwh-wo__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

@media (max-width: 700px) {
	/* The theme stacks the split head on phones; keep link and arrows on one line. */
	.wwh-wo__aside {
		justify-content: space-between;
		gap: 0.75rem;
		width: 100%;
	}
	.wwh-wo__aside .home2-section__head-link {
		letter-spacing: 0.08em;
		white-space: normal;
		min-width: 0;
	}
	.wwh-wo__arrows {
		flex-shrink: 0;
	}
}

/* ---------- Rail ---------- */
.wwh-wo__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--wwh-wo-gap)) / 3);
	gap: var(--wwh-wo-gap);
	list-style: none;
	/* Room for focus rings, which overflow-x would otherwise clip. */
	padding: 4px;
	margin: -4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Snap to the padded edge, or the first card sits 4px left of the head rule. */
	scroll-padding-inline: 4px;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.wwh-wo__track::-webkit-scrollbar {
	display: none;
}

.wwh-wo__card {
	scroll-snap-align: start;
	min-width: 0;
	margin: 0 !important;
}

.wwh-wo__card .home2-card__image {
	aspect-ratio: auto;
	height: var(--wwh-wo-img);
}

/* GitLab #58: whole poster, contained, over a blurred copy of itself. */
.wwh-wo__card .home2-card__image > a {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
}

.wwh-wo__card .home2-card__image img.wwh-wo__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(18px) brightness(0.55);
	/* Scaled past the edges so the blur has no soft border; held there on
	   hover too, where the shared card rule would shrink it to 1.03. */
	transform: scale(1.15);
}

.wwh-wo__card:hover .home2-card__image img.wwh-wo__backdrop {
	transform: scale(1.15);
}

.wwh-wo__card .home2-card__image img.wwh-wo__poster {
	position: relative;
	object-fit: contain;
}

/* No image: the waterwheel emblem, as on maker cards without a portrait. */
.wwh-wo__card .wwh-wo__image--empty > a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--brand, #b07a3a);
}

.wwh-wo__emblem {
	width: 34%;
	height: auto;
	opacity: 0.55;
}

@media (max-width: 700px) {
	/* One card, with the next one peeking in to say "swipe". */
	.wwh-wo__track {
		grid-auto-columns: 82%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wwh-wo__track {
		scroll-behavior: auto;
	}
}

/* ---------- Markets & regulars strip ---------- */
.wwh-wo__regs {
	width: 100%;
	max-width: 1080px;
	margin: clamp(1.25rem, 3.5vh, 2.25rem) auto 0;
	padding-top: clamp(0.9rem, 2vh, 1.25rem);
	border-top: 1px solid rgba(242, 237, 230, 0.22);
}

.wwh-wo__regs--solo {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

.wwh-wo__regs-h {
	margin: 0 0 0.75rem;
	color: rgba(242, 237, 230, 0.7);
	font-style: normal;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}

.wwh-wo__regs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wwh-wo-gap);
}

.wwh-wo__reg {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 0.9rem;
	align-items: center;
	margin: 0;
	min-width: 0;
}

.wwh-wo__reg-img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #2a241d;
}

.wwh-wo__reg-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wwh-wo__reg-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wwh-wo__reg-title {
	color: #f2ede6;
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.2;
	text-decoration: none;
}

/* The whole row is the link's hit area. */
.wwh-wo__reg-title::after {
	content: '';
	position: absolute;
	inset: 0;
}

.wwh-wo__reg-title:hover,
.wwh-wo__reg-title:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wwh-wo__reg-when {
	margin-top: 0.2rem;
	color: #d9b25c;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--wp--preset--font-size--cap);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
}

.wwh-wo__reg-next {
	margin-top: 0.15rem;
	color: rgba(242, 237, 230, 0.7);
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 900px) {
	/* Three columns get too narrow for the labels; swipe them instead. */
	.wwh-wo__regs-list {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(250px, 78%);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 4px;
		scrollbar-width: none;
		padding: 4px;
		margin: -4px;
	}
	.wwh-wo__regs-list::-webkit-scrollbar {
		display: none;
	}
	.wwh-wo__reg {
		scroll-snap-align: start;
	}
}