/* Front page 2 template (templates/front-page-2.php), enqueued only there,
   so it can share class names with front-page.css. */

/* ========================================
   Section scaffolding
======================================== */

.front-page-2 {
	padding-block: 12px clamp(3rem, 5vw, 4.75rem);
}

.front-page-2 a {
	color: inherit;
	text-decoration: none;
}

.front-page-2 a:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 5px;
}

.front-page-2 :is(h1, h2, h3) {
	color: inherit;
}

.front-page-2 img {
	display: block;
	max-width: 100%;
}

.front-section {
	padding-top: clamp(2.7rem, 4.5vw, 4.4rem);
}

.front-section__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	margin-bottom: 1.8rem;
}

/* Display type reads better tightened; .h1 doesn't carry this. */
.front-section__header .h1 {
	letter-spacing: var(--tracking-tight);
}

.front-section__note {
	max-width: 20rem;
	font-size: var(--text-body-xs);
	color: var(--color-text-muted);
}

/* ========================================
   Icons
======================================== */

.front-icon {
	display: inline-block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	pointer-events: none;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
}

.front-icon--check-circle {
	mask-image: url(../../../images/icons/check-circle.svg);
	-webkit-mask-image: url(../../../images/icons/check-circle.svg);
}

.front-icon--leaf {
	mask-image: url(../../../images/icons/leaf.svg);
	-webkit-mask-image: url(../../../images/icons/leaf.svg);
}

.front-icon--heart {
	mask-image: url(../../../images/icons/heart.svg);
	-webkit-mask-image: url(../../../images/icons/heart.svg);
}

/* ========================================
   Hero
======================================== */

.front-hero__inner {
	--inset-floor: clamp(1.25rem, 4vw, 2rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-brand-surface);
	color: var(--color-on-brand-strong);
}

.front-hero__content {
	position: relative;

	/* Own stacking context for ::before's negative z-index. */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-block: clamp(2rem, 4.3vw, 4.75rem);
	padding-right: clamp(1.5rem, 3vw, 3.5rem);

	/* Copy on the content track; percentages resolve against half the panel,
	   so the track is halved. The floor keeps it off the rounded edge. */
	padding-left: max(var(--inset-floor), calc(100% - min(100%, calc(var(--width-track) / 2))));
}

/* Pattern on a pseudo-element, so its opacity doesn't fade the copy. */
.front-hero__content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url(../../../images/front-page-hero-bg-2.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: cover;
	opacity: var(--hero-bg-pattern-opacity, .2);
	pointer-events: none;
}

.front-hero .eyebrow {
	color: var(--color-on-brand-muted);
	margin-bottom: 1.8rem;
}

.front-hero__title {
	font-size: var(--heading-hero);
	font-weight: var(--font-medium);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
}

.front-hero__title span {
	display: block;
	color: var(--color-on-brand-accent);
}

.front-hero__lead {
	max-width: 27rem;
	margin-top: 1.7rem;
	color: var(--color-on-brand);
}

.front-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-top: 2rem;
}

/* Stop .btn growing to fill the row (bc-button.css). */
.front-hero__actions .btn {
	flex: 0 1 auto;
}

/* .link's own hover colour (--color-action) reads poorly on this dark surface. */
.front-hero .link:hover {
	color: var(--color-on-brand-muted);
}

.front-hero__note {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 2.5rem;
	font-size: var(--text-meta);
	color: var(--color-on-brand-muted);
}

.front-hero__note .front-icon {
	flex-basis: 17px;
	width: 17px;
	height: 17px;
}

.front-hero__media {
	position: relative;
	min-height: 550px;
}

.front-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 67% center;
}

/* Keeps the caption legible over the lighter parts of the photo. */
.front-hero__media::after {
	content: "";
	position: absolute;
	inset: 55% 0 0;
	background: linear-gradient(transparent, var(--color-scrim));
	pointer-events: none;
}

/* The one distance around the caption line: line to arrows, toggle to
   line, arrows to the photo's edge. */
.front-hero__caption {
	--front-hero-caption-gap: 0.95rem;

	position: absolute;
	z-index: 1;
	right: 1.6rem;
	bottom: 1.6rem;
	left: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: var(--front-hero-caption-gap);
	border-top: var(--border-width) solid var(--color-border-on-brand);
	font-size: var(--text-body-xs);
	font-weight: var(--font-medium);
}

.front-hero__caption small {
	font-size: var(--text-label);
	font-weight: var(--font-normal);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

/* Slider variant of .front-hero__media (bc-front-hero-slider.js). */
.front-hero__slider-viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.front-hero__slider-container {
	display: flex;
	height: 100%;
}

.front-hero__slider-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	height: 100%;
}

/* A click on the photo toggles the autoplay pause (bc-front-hero-slider.js). */
.front-hero__media--slider:has(.front-hero__slider-pause) .front-hero__slider-viewport {
	cursor: pointer;
}

/* Pause toggle above the caption line; the icon shows what a click does.
   Fades out slower than in, so resuming doesn't read as a flicker. */
.front-hero__slider-status {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--front-hero-caption-gap));
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-on-brand-strong);
	opacity: 0;
	pointer-events: none;
	transition: opacity calc(var(--duration-slower) * 2) var(--ease);
}

.front-hero__slider-status:has([aria-pressed="true"]),
.front-hero__slider-status:has(:focus-visible) {
	opacity: 1;
	transition-duration: var(--duration-slow);
}

@media (hover: hover) {
	.front-hero__media--slider:hover .front-hero__slider-status {
		opacity: 1;
		transition-duration: var(--duration-slow);
	}
}

/* "Paused" only flashes up when the slider pauses (.is-flashing, set by
   bc-front-hero-slider.js); the icon alone carries the state after that. */
.front-hero__slider-status-label {
	font-size: var(--text-label-s);
	font-weight: var(--font-normal);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	opacity: 0;
}

.front-hero__slider-status.is-flashing .front-hero__slider-status-label {
	animation: bc-hero-status-flash 2s var(--ease) forwards;
}

@keyframes bc-hero-status-flash {
	0% {
		opacity: 0;
	}

	15%,
	55% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.front-hero__slider-pause[aria-pressed="true"] .icon-pause,
.front-hero__slider-pause[aria-pressed="false"] .icon-play {
	display: none;
}

/* The arrow buttons already pad the row, so the slider caption drops the
   static hero's bottom inset down to the same gap as above the line. */
.front-hero__media--slider .front-hero__caption {
	bottom: var(--front-hero-caption-gap);
}

/* Same box as .front-hero__slider-arrow. */
.front-hero__slider-pause {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	pointer-events: auto;
	transition: color 0.2s;
}

.front-hero__slider-pause:hover,
.front-hero__slider-pause:focus-visible {
	color: var(--color-on-brand-muted);
}

.front-hero__slider-nav {
	display: flex;
	align-items: center;
}

.front-hero__slider-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	transition: color 0.2s;
}

.front-hero__slider-arrow:hover,
.front-hero__slider-arrow:focus-visible {
	color: var(--color-on-brand-muted);
}

/* Loop off: the boundary arrow goes inert instead of silently doing nothing. */
.front-hero__slider-arrow:disabled {
	color: var(--color-on-brand-muted);
	opacity: 0.4;
	cursor: default;
}

/* One clickable dash per slide. The active one grows as the previous one
   shrinks in lockstep, so the row width and the arrows hold still. */
.front-hero__slider-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.front-hero__slider-dot {
	position: relative;
	inline-size: 4px;
	block-size: 3px;
	border-radius: 999px;
	background: var(--color-on-brand-strong);
	opacity: 0.4;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	cursor: pointer;
	transition: inline-size 0.4s ease, opacity 0.4s ease;
}

/* 20px hit area around the tiny dash; larger would overlap its neighbours. */
.front-hero__slider-dot::before {
	content: "";
	position: absolute;
	inset-block: -9px;
	inset-inline: -8px;
}

.front-hero__slider-dot:hover,
.front-hero__slider-dot:focus-visible {
	opacity: 0.7;
}

.front-hero__slider-dot.is-active {
	inline-size: 10px;
	opacity: 0.8;
}

.front-hero__slider-dot.is-active:hover,
.front-hero__slider-dot.is-active:focus-visible {
	opacity: 1;
}

.slider-caption {
	opacity: .95;
}

/* Autoplay countdown over the caption's border-top, driven by Embla
   Autoplay's timer events (bc-front-hero-slider.js). */
.front-hero__caption-progress {
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0;
	block-size: var(--border-width);
	background: var(--color-on-brand-strong);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
	opacity: .35;
}

.front-hero__caption-progress.is-animating {
	animation: bc-hero-progress-fill linear forwards;
}

@keyframes bc-hero-progress-fill {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ========================================
   Categories
======================================== */

.front-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.1rem;
}

.front-categories__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-height: 330px;
	padding: 1.5rem;
	border-radius: var(--radius-s);
	background: var(--color-surface-tint-1);
	overflow: hidden;
}

/* Four tints, one per card, so the row reads as a set rather than a grid of
   identical boxes. Assumes the four hardcoded cards. */
.front-categories__card:nth-child(2) {
	background: var(--color-surface-tint-2);
}

.front-categories__card:nth-child(3) {
	background: var(--color-surface-tint-3);
}

.front-categories__card:nth-child(4) {
	background: var(--color-surface-tint-4);
}

/* In the flow, so a wrapped eyebrow pushes the image down. No margin:
   .front-categories__media sets the gap. */
.front-categories__card .eyebrow {
	margin-bottom: 0;
}

.front-categories__media {
	display: flex;
	flex: 0 0 auto; /* The card is a flex column; without this the fixed height collapses. */
	align-items: center;
	justify-content: center;
	height: 217px;
	margin-top: 0.75rem;
}

/* Product shots are on a white background, so multiply drops it into the
   card tint. Dedicated category artwork has to keep that white background. */
.front-categories__media img {
	width: 198px;
	height: 198px;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.4s;
}

.front-categories__card:hover .front-categories__media img {
	transform: translateY(-5px) rotate(-3deg) scale(1.04);
}

.front-categories__name {
	max-width: 14rem;
	margin-top: 0.25rem;
	padding-right: 1.5rem;
	font-size: var(--heading-s);
	font-weight: var(--font-mild);
	line-height: var(--leading-short);
	letter-spacing: var(--tracking-tight);
}

.front-categories__description {
	margin-top: 0.4rem;
	font-size: var(--text-body-s);
	line-height: var(--leading);
	color: var(--color-text-muted);
}

.front-categories__arrow {
	position: absolute;
	right: 1.2rem;
	bottom: 2.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	background: var(--color-surface-veil);
	transition: transform 0.2s;
}


.front-categories__card:hover .front-categories__arrow {
	transform: translateX(3px);
}

/* ========================================
   Products
======================================== */

/* Clears the fork's ".woocommerce ul.products"; section padding replaces
   its 80px bottom margin. */
.front-products .woocommerce ul.products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.45rem;
	margin-bottom: 0;
}

/* Grow the meta block so prices line up across the row. */
.front-products .woocommerce ul.products li.product .product-loop-meta {
	flex: 1;
}

.front-products .woocommerce ul.products li.product .price {
	margin-top: auto;
}

.front-products .woocommerce ul.products li.product .woocommerce-loop-product__link img {
	padding: 7%;
	border: var(--border-width) solid var(--color-border-subtle);
	border-radius: var(--radius-s);
	background: var(--color-surface-raised);
}

.front-products .product-loop-tagline {
	margin-bottom: 0.5rem;
	font-size: var(--text-body-s);
	line-height: var(--leading);
	color: var(--color-text-muted);
}

/* ========================================
   About
======================================== */

/* Wide track like the hero and the footer; .container-inset on the panel
   puts the text back on the content track. */
.front-about__panel {
	--inset-floor: clamp(1.25rem, 4vw, 2rem);
	padding-block: clamp(1.9rem, 4.5vw, 4.5rem);
	border-radius: var(--radius);
	background: var(--color-surface-tint-1);
}

.front-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 6.25rem);
}

.front-about__title {
	max-width: 31rem;
	font-size: var(--heading-xxl);
	font-weight: var(--font-medium);
	line-height: var(--heading-line-height);
	letter-spacing: var(--tracking-display);
}

.front-about__text {
	max-width: 29rem;
	margin-top: 1.4rem;
}

@media (min-width: 800px) {
	.front-about__text {
		line-height: var(--leading-large);
	}
}

.front-about__intro .link {
	margin-top: 1.5rem;
}

.front-about__values {
	align-self: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.front-about__value {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 1.2rem;
	padding-block: 1.45rem;
	border-bottom: var(--border-width) solid var(--color-border-tint);
}

.front-about__value:first-child {
	padding-top: 0;
}

.front-about__value:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.front-about__value .front-icon {
	flex-basis: 28px;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	color: var(--color-brand-accent);
}

.front-about__value-title {
	font-size: var(--heading-s);
	font-weight: var(--font-mild);
	line-height: var(--leading-short);
}

.front-about__value-text {
	max-width: 26rem;
	margin-top: 0.35rem;
	font-size: var(--text-body-m);
	line-height: var(--leading);
	color: var(--color-text-muted);
}

/* ========================================
   Responsive
======================================== */

@media (min-width: 1800px) {
	.front-hero__media {
		min-height: 620px;
	}
}

@media (max-width: 1100px) {
	.front-hero__content {
		padding-block: 2.25rem;
	}

	.front-hero__actions {
		gap: 1.1rem;
	}

	.front-hero__note {
		margin-top: 1.75rem;
	}

	.front-hero__media {
		min-height: 520px;
	}

	.front-hero__caption small {
		display: none;
	}

	.front-categories__grid {
		gap: 0.75rem;
	}

	.front-categories__card {
		min-height: 310px;
		padding: 1.1rem;
	}

	.front-categories__media {
		height: 195px;
	}

	.front-categories__media img {
		width: 173px;
		height: 173px;
	}

	.front-categories__arrow {
		right: 0.75rem;
		bottom: 3.3rem;
	}

	.front-products .woocommerce ul.products {
		gap: 1.05rem;
	}
}

/* Stack before the half-width column makes the hero headline wrap. */
@media (max-width: 900px) {
	.front-hero__inner {
		grid-template-columns: 1fr;
	}

	/* Single column: the inset formula falls to the floor on its own. */
	.front-hero__content {
		padding-block: 2.1rem 2rem;
		padding-right: var(--inset-floor);
	}

	.front-hero .eyebrow {
		margin-bottom: 1.45rem;
	}

	.front-hero__lead {
		margin-top: 1.4rem;
	}

	.front-hero__actions {
		margin-top: 1.55rem;
		gap: 1.1rem;
	}

	.front-hero__note {
		margin-top: 1.55rem;
	}

	.front-hero__media {
		min-height: 0;
		aspect-ratio: 1.3;
	}

	.front-hero__media img {
		object-position: 67% 56%;
	}

	.front-hero__caption {
		right: 1.5rem;
		bottom: 1.3rem;
		left: 1.5rem;
	}
}

@media (max-width: 767px) {
	.front-page-2 {
		padding-block: 8px 3rem;
	}

	.front-section {
		padding-top: 2.7rem;
	}

	.front-section__header {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0.75rem;
		margin-bottom: 1.45rem;
	}

	.front-categories__grid,
	.front-products .woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.front-categories__card {
		min-height: 250px;
	}

	.front-categories__media {
		height: 145px;
	}

	.front-categories__media img {
		width: 130px;
		height: 130px;
	}

	.front-categories__arrow {
		display: none;
	}

	.front-about__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}