/*
 * Home page sections. Loaded on the front page only.
 * Source design: _design/product-art/swap/r2/home.html (approved 2026-11-11).
 */

.site-main--home {
	padding-block: 0;
}

/* Hero: one still photograph of the eight flavours flying around an open centre.
   The headline and the button sit in that centre; the honey behind them is the photograph's own. */

.hero-wrap {
	width: min(100% - 2 * var(--gutter), var(--layout-wide));
	margin: 0 auto;
}

.hero {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	/* On a short window the hero trims its height, so it and the top of the shop stay on the first screen */
	max-height: min(calc(100svh - var(--bar-height) - var(--header-height) - var(--space-8)), 920px);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--radius-lg);
	background-color: var(--color-hero);
	container-type: inline-size;
}

.hero__scene,
.hero__scene img {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
}

.hero__scene img {
	object-fit: cover;
}

.hero__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.4cqw;
	width: 46%;
	text-align: center;
}

.hero__title {
	margin: 0;
	color: var(--color-text);
	font-size: 4.6cqw;
	line-height: 1.04;
	text-wrap: balance;
}

.hero__cta {
	display: inline-block;
	padding: 0.85em 1.9em;
	border-radius: var(--radius-pill);
	background: var(--color-text);
	color: var(--color-accent-contrast);
	font-size: max(15px, 1.4cqw);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-shadow) 28%, transparent);
}

.hero__cta:hover {
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-shadow) 28%, transparent), inset 0 0 0 99px rgb(255 255 255 / 10%);
}

.hero__cta:focus-visible {
	outline-offset: 3px;
}

/* The eight */

.home-shop {
	width: min(100% - 2 * var(--gutter), var(--layout-wide));
	margin: var(--space-section) auto 0;
}

.home-shop__title {
	margin: 0 0 var(--space-head);
	font-size: clamp(34px, 4.6vw, 60px);
	line-height: 1.04;
	text-wrap: balance;
}

/* Good to know: one photograph, four facts, on the light surface */

.home-gtk {
	width: min(100% - 2 * var(--gutter), var(--layout-wide));
	margin: var(--space-section) auto 0;
	container-type: inline-size;
}

.home-gtk__panel {
	--u: calc(100cqw / 1280);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--surface-ring);
	overflow: hidden;
}

.home-gtk__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	min-height: 100%;
}

.home-gtk__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-gtk__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(var(--u) * 64);
}

.home-gtk__title {
	max-width: 13em;
	margin: 0;
	font-size: calc(var(--u) * 54);
	line-height: 1.08;
	text-wrap: balance;
}

.home-gtk__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(var(--u) * 32);
	margin: calc(var(--u) * 32) 0 0;
	padding: 0;
	list-style: none;
}

.home-gtk__icon {
	display: block;
	width: calc(var(--u) * 124);
	height: auto;
	aspect-ratio: 1;
	margin: 0 0 calc(var(--u) * 16) calc(var(--u) * -6);
	mix-blend-mode: multiply; /* the drawings sit on white; this lets the panel show through */
}

.home-gtk__fact-title {
	margin: 0;
	font: 600 calc(var(--u) * 19) / 1.25 var(--font-body);
	letter-spacing: 0;
}

.home-gtk__fact-text {
	margin: calc(var(--u) * 8) 0 0;
	color: var(--color-muted);
	font-size: calc(var(--u) * 16);
	line-height: 1.48;
}

/* Reviews: one rail of tiles. The opening words of each review are large, the rest small;
   two arrow buttons under the rail move it. Source: reviews-lab (approved 2026-11-12). */

.home-reviews {
	width: min(100% - 2 * var(--gutter), var(--layout-wide));
	margin: var(--space-section) auto 0;
}

.home-reviews__title {
	margin: 0 0 var(--space-head);
	font-size: clamp(28px, 4.6vw, 60px);
	line-height: 1.04;
}

.home-reviews__rail {
	display: flex;
	gap: var(--grid-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	border-radius: var(--radius-md);
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.home-reviews__rail::-webkit-scrollbar {
	display: none;
}

.home-reviews__card {
	display: flex;
	flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 2.6);
	flex-direction: column;
	min-height: clamp(300px, 25vw, 348px);
	padding: var(--pad-panel);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--surface-ring);
	scroll-snap-align: start;
}

.home-reviews__mark {
	display: block;
	height: 0.42em;
	margin-bottom: clamp(var(--space-4), 1.6vw, var(--space-5));
	color: var(--color-honey-400);
	font: 800 clamp(88px, 9vw, 128px) / 0.8 var(--font-display);
}

.home-reviews__quote {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	border: 0;
}

.home-reviews__quote p {
	margin: 0;
}

.home-reviews__lead {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(30px, 3.3vw, 44px);
	font-weight: 620;
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.home-reviews__rest {
	display: block;
	margin-top: var(--space-3);
	color: var(--color-soft);
	font-size: clamp(17px, 1.45vw, 19px);
	font-weight: 500;
	line-height: 1.42;
	text-wrap: pretty;
}

.home-reviews__by {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.home-reviews__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--color-honey-200);
	color: var(--color-honey-900);
	font: 600 16px / 1 var(--font-body);
}

.home-reviews__who {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.home-reviews__name {
	font-size: var(--text-md);
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
}

.home-reviews__stars {
	display: flex;
	gap: var(--space-0);
}

.home-reviews__stars svg {
	width: 15px;
	height: 15px;
	fill: var(--color-honey-400);
}

/* The arrows need JavaScript; without it the rail still scrolls by hand. The way forward
   is the cocoa button; at the end of the rail the roles swap. */

.home-reviews__nav {
	display: none;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.js .home-reviews__nav {
	display: flex;
}

.home-reviews__btn {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: inset 0 0 0 1px var(--color-border);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--duration), color var(--duration), box-shadow var(--duration), opacity var(--duration), transform 120ms;
}

.home-reviews__btn svg {
	width: 22px;
	height: 22px;
	transition: transform var(--duration);
}

.home-reviews__btn--prev svg {
	transform: scaleX(-1);
}

.home-reviews__btn:not([disabled]):hover {
	background: var(--color-honey-200);
}

.home-reviews__btn--next:not([disabled]):hover svg {
	transform: translateX(3px);
}

.home-reviews__btn--prev:not([disabled]):hover svg {
	transform: scaleX(-1) translateX(3px);
}

.home-reviews__btn:not([disabled]):active {
	transform: scale(0.94);
}

.home-reviews__btn--next:not([disabled]),
.home-reviews__nav:has(.home-reviews__btn--next[disabled]) .home-reviews__btn--prev:not([disabled]) {
	background: var(--color-text);
	color: var(--color-accent-contrast);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-shadow) 28%, transparent);
}

.home-reviews__btn--next:not([disabled]):hover,
.home-reviews__nav:has(.home-reviews__btn--next[disabled]) .home-reviews__btn--prev:not([disabled]):hover {
	background: var(--color-text);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-shadow) 28%, transparent), inset 0 0 0 99px rgb(255 255 255 / 10%);
}

.home-reviews__btn[disabled] {
	opacity: 0.4;
	cursor: default;
}

@media (max-width: 719px) {
	.home-reviews__rail {
		width: 100vw;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		border-radius: 0;
		scroll-padding-inline: var(--gutter);
	}

	.home-reviews__card {
		flex-basis: 84%;
		min-height: 300px;
	}
}

/* Phones */

/* The hero is a 4:3 banner and the shop sits close under it, so the first row of
   products, with name and price, is on the first screen. */

@media (max-width: 719px) {
	.hero {
		aspect-ratio: 4 / 3;
	}

	.hero__copy {
		gap: var(--space-2);
		width: 56%;
	}

	.hero__title {
		font-size: clamp(20px, 5.8cqw, 28px);
	}

	.hero__cta {
		padding: 0.6em 1.3em;
		font-size: 14px;
	}

	.home-shop {
		margin-top: var(--space-6);
	}

	.home-shop__title {
		font-size: 28px;
	}
}

@media (max-width: 719px) {
	.home-gtk__panel {
		--u: 1px;
		display: block;
	}

	.home-gtk__media {
		min-height: 0;
	}

	.home-gtk__body {
		padding: var(--pad-panel);
	}

	.home-gtk__title {
		font-size: 34px;
	}

	.home-gtk__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
		margin-top: var(--space-5);
	}

	.home-gtk__fact {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		column-gap: var(--space-4);
		align-items: center;
	}

	.home-gtk__icon {
		width: 92px;
		margin: 0;
	}

	.home-gtk__fact-title {
		font-size: 18px;
	}

	.home-gtk__fact-text {
		font-size: 16px;
	}
}