/**
 * Home page sections — 1:1 with the design mockup.
 *
 * Mobile-first: the base rules are the stacked/small-screen layout; the
 * min-width media queries scale up to the design's tablet (>=561px) and desktop
 * (>=981px) states, matching the header/footer breakpoints.
 *
 * Sections: hero (slider + promos), categories, featured products, blog,
 * services, trust band.
 *
 * @package Bozpo_Custom
 */

/* ============================ Shared section chrome ======================== */
.home-section {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-34) var(--wrap-pad) var(--space-6);
}

.home-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	margin-bottom: var(--space-24);
}

.home-section__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-25);
	font-weight: 700;
}

.home-section__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-5);
	color: var(--color-primary);
	font-size: var(--text-14-5);
	font-weight: 600;
}

.home-section__link:hover {
	text-decoration: underline;
}

.home-section__link svg {
	width: 15px;
	height: 15px;
}

/* ================================== Hero =================================== */
.home-hero {
	padding: var(--space-22) 0 var(--space-6);
}

.home-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-14);
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-14) var(--wrap-pad) var(--space-22);
}

.home-hero__main {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-20);
}

.home-hero__slides {
	position: relative;
	width: 100%;
	min-height: 340px;
}

.home-hero__slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--space-24);
	padding: var(--space-30) var(--space-26);
	visibility: hidden;
	opacity: 0;
	transition: opacity .5s, visibility .5s;
}

.home-hero__slide.is-active {
	visibility: visible;
	opacity: 1;
}

.home-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.home-hero__slide--1::before {
	background: var(--gradient-hero-1);
}

.home-hero__slide--2::before {
	background: var(--gradient-hero-2);
}

.home-hero__slide--3::before {
	background: var(--gradient-hero-3);
}

/* When a background image is set, cover the slide with it. No overlay/scrim is
   drawn over the image — the ::before (per-slide gradient) is removed entirely. */
.home-hero__slide.has-bg {
	background-image: var(--slide-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.home-hero__slide.has-bg::before {
	display: none;
}

/* Custom colour fallback (used only when no image is set): always a soft
   gradient in the same direction as the built-in slides, never a flat fill. */
.home-hero__slide.has-color::before {
	background: var(--slide-color); /* Fallback for browsers without color-mix(). */
	background: linear-gradient( 125deg, color-mix( in srgb, var(--slide-color) 42%, #fff ) 0%, var(--slide-color) 100% );
}

.home-hero__text,
.home-hero__visual {
	position: relative;
	z-index: 1;
}

/* Subtle translucent panel behind the hero copy (mild inner padding). */
.home-hero__text {
	padding: var(--space-12);
	background: #ffffffb5;
	border-radius: var(--radius-12);
}

.home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-7);
	padding: var(--space-6) var(--space-13);
	color: var(--color-primary);
	font-size: var(--text-12-5);
	font-weight: 700;
	background: var(--surface-glass);
	border-radius: var(--radius-pill);
}

.home-hero__eyebrow svg {
	width: 14px;
	height: 14px;
}

.home-hero__title {
	margin: var(--space-14) 0 var(--space-12);
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: var(--text-26);
	font-weight: 800;
	line-height: var(--leading-104);
}

.home-hero__title span {
	color: var(--color-primary);
}

.home-hero__lead {
	max-width: 38ch;
	margin: 0 0 var(--space-22);
	color: var(--c-ink-lead);
	font-size: var(--text-15);
	line-height: var(--leading-normal);
}

.home-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-13) var(--space-20);
	color: var(--on-primary);
	font-size: var(--text-14);
	font-weight: 600;
	background: var(--color-primary);
	border-radius: var(--radius-10);
	box-shadow: var(--shadow-brand);
	transition: background .15s;
}

.home-hero__cta:hover {
	background: var(--color-primary-strong);
}

.home-hero__cta svg {
	width: 15px;
	height: 15px;
}

.home-hero__visual {
	display: none;
	place-items: center;
}

.home-hero__visual svg {
	width: 88%;
	max-width: 300px;
	filter: var(--filter-hero-visual);
}

/* Uploaded custom icon — sized like the library SVG but without the recolour
   filter (it is a real image, not a currentColor line icon). */
.home-hero__visual img {
	width: 88%;
	max-width: 300px;
	height: auto;
	object-fit: contain;
}

/* Both arrows sit together in the top-right corner and stay understated —
   subtle glass, muted glyph, no shadow — so they don't compete with the slide. */
.home-hero__arrow {
	position: absolute;
	top: var(--space-12);
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--space-32);
	height: var(--space-32);
	color: var(--color-muted);
	background: var(--surface-glass-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-circle);
}

.home-hero__arrow svg {
	width: 16px;
	height: 16px;
}

.home-hero__arrow:hover {
	color: var(--color-primary);
	background: var(--surface-glass-strong);
}

.home-hero__arrow--prev {
	right: calc(var(--space-12) + var(--space-32) + var(--space-6));
}

.home-hero__arrow--next {
	right: var(--space-12);
}

.home-hero__dots {
	position: absolute;
	bottom: var(--space-18);
	left: 50%;
	z-index: 3;
	display: flex;
	gap: var(--space-7);
	transform: translateX(-50%);
}

.home-hero__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	background: var(--c-dot-idle);
	border: 0;
	border-radius: var(--radius-circle);
	transition: all .2s;
}

.home-hero__dots button.is-active {
	width: 22px;
	background: var(--color-primary);
	border-radius: var(--radius-5);
}

.home-hero__promos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-18);
}

.home-hero__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-10);
	min-height: 120px;
	padding: var(--space-24);
	color: var(--on-primary);
	border-radius: var(--radius-18);
	transition: transform .15s, box-shadow .15s;
}

.home-hero__promo:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
}

.home-hero__promo--1 {
	background: var(--gradient-promo-1);
}

.home-hero__promo--2 {
	background: var(--gradient-promo-2);
}

/* Custom promo colour: a gradient in the same direction as the built-in tiles,
   never a flat fill. Falls back to the solid colour without color-mix(). */
.home-hero__promo.has-color {
	background: var(--promo-color);
	background: linear-gradient( 130deg, var(--promo-color) 0%, color-mix( in srgb, var(--promo-color) 68%, #fff ) 100% );
}

/* Background image: cover the tile. No overlay/scrim over the image. */
.home-hero__promo.has-bg {
	background-image: var(--promo-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.home-hero__promo.has-bg::before {
	display: none;
}

.home-hero__promo.has-bg > * {
	position: relative;
	z-index: 1;
}

.home-hero__promo-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	background: var(--surface-glass-soft);
	border-radius: var(--radius-14);
}

.home-hero__promo-icon svg {
	width: 26px;
	height: 26px;
}

.home-hero__promo-icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* Translucent white panel behind the promo copy, matching the hero slider
   (.home-hero__text). Dark text so it stays legible on the light panel. */
.home-hero__promo-text {
	padding: var(--space-12);
	color: var(--color-text);
	background: #ffffffb5;
	border-radius: var(--radius-12);
}

.home-hero__promo-text b {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-21);
	line-height: var(--leading-112);
}

.home-hero__promo-text span {
	font-size: var(--text-13-5);
	opacity: .9;
}

.home-hero__promo-arrow {
	display: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin-left: auto;
	opacity: .85;
}

/* =============================== Categories ================================ */
.home-categories__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-18);
}

.category-tile {
	display: grid;
	grid-template-columns: 1fr 38%;
	min-height: 196px;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-16);
	transition: box-shadow .15s, transform .15s;
}

.category-tile:hover {
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}

.category-tile__body {
	display: flex;
	flex-direction: column;
	padding: var(--space-26) var(--space-24);
}

.category-tile__title {
	margin: 0 0 var(--space-10);
	font-family: var(--font-display);
	font-size: var(--text-21);
	font-weight: 700;
	line-height: var(--leading-116);
}

.category-tile__desc {
	flex: 1;
	margin: 0 0 var(--space-18);
	color: var(--color-muted);
	font-size: var(--text-13-5);
	line-height: var(--leading-155);
}

.category-tile__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-7);
	padding: var(--space-9) var(--space-16);
	color: var(--color-primary);
	font-size: var(--text-13);
	font-weight: 600;
	border: 1.5px solid var(--color-primary);
	border-radius: var(--radius-9);
	transition: color .15s, background .15s, border-color .15s;
}

.category-tile__cta svg {
	width: 14px;
	height: 14px;
}

.category-tile:hover .category-tile__cta {
	color: var(--on-primary);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.category-tile__media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var(--c-on-gradient);
}

.category-tile__media:not(.has-image) svg {
	width: 56px;
	height: 56px;
	filter: var(--filter-tile-icon);
}

.category-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder gradients cycle when a term has no thumbnail. */
.category-tile:nth-child(6n + 1) .category-tile__media:not(.has-image) {
	background: var(--gradient-cat-1);
}

.category-tile:nth-child(6n + 2) .category-tile__media:not(.has-image) {
	background: var(--gradient-cat-2);
}

.category-tile:nth-child(6n + 3) .category-tile__media:not(.has-image) {
	background: var(--gradient-cat-3);
}

.category-tile:nth-child(6n + 4) .category-tile__media:not(.has-image) {
	background: var(--gradient-cat-4);
}

.category-tile:nth-child(6n + 5) .category-tile__media:not(.has-image) {
	background: var(--gradient-cat-5);
}

.category-tile:nth-child(6n) .category-tile__media:not(.has-image) {
	background: var(--gradient-cat-6);
}

/* ============================ Featured products =========================== */
.home-featured__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
}

.home-featured__tabs {
	display: flex;
	gap: var(--space-8);
}

.home-featured__tab {
	padding: var(--space-9) var(--space-18);
	color: var(--color-muted);
	font-size: var(--text-13-5);
	font-weight: 600;
	background: var(--surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-pill);
	transition: color .15s, background .15s, border-color .15s;
}

.home-featured__tab.is-active {
	color: var(--on-primary);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.home-featured__tab:not(.is-active):hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.home-featured__nav {
	display: flex;
	gap: var(--space-8);
}

.home-featured__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--color-text);
	background: var(--surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-circle);
}

.home-featured__arrow svg {
	width: 18px;
	height: 18px;
}

.home-featured__arrow:not(:disabled):hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.home-featured__arrow:disabled {
	opacity: .35;
	cursor: default;
}

.home-featured__viewport {
	overflow: hidden;
}

.home-featured__panel[hidden] {
	display: none;
}

.home-featured .products {
	display: flex;
	gap: var(--space-18);
	margin: 0;
	padding: 0 0 var(--space-6);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.home-featured .products::-webkit-scrollbar {
	display: none;
}

/* While the user drags with the mouse, disable snap + smooth so the track
   follows the pointer 1:1 instead of stuttering between card boundaries. */
.home-featured .products.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.home-featured .products > li.product-card {
	flex: 0 0 78%;
	scroll-snap-align: start;
}

.home-featured__empty {
	margin: 0;
	padding: var(--space-24) 0;
	color: var(--color-muted);
	font-size: var(--text-14-5);
}

.product-card {
	display: grid;
	/* minmax(0,…) lets the column shrink below content min-width so the gallery /
	   thumbnail strip scrolls instead of blowing the layout past the viewport. */
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--space-22);
	align-items: start;
	padding: var(--space-28) var(--wrap-pad) var(--space-10);
}

.woocommerce-loop-product__link {
	align-self: flex-end;
}

/* ================================== Blog ================================== */
/* Card component itself lives in components/blog-card.css (shared with the
   blog category archive, index.php) — only the homepage grid lives here. */
.home-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-18);
}

/* Centered "view the whole magazine" button below the blog cards. */
.home-blog__more {
	display: flex;
	justify-content: center;
	margin-top: var(--space-28);
}

.home-blog__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-13) var(--space-24);
	color: var(--on-primary);
	font-size: var(--text-14);
	font-weight: 600;
	background: var(--color-primary);
	border-radius: var(--radius-10);
	box-shadow: var(--shadow-brand);
	transition: background .15s;
}

.home-blog__btn:hover {
	background: var(--color-primary-strong);
}

.home-blog__btn svg {
	width: 15px;
	height: 15px;
}

/* ================================ Services ================================ */
.home-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-18);
}

.service-card {
	display: flex;
	gap: var(--space-18);
	padding: var(--space-26);
	background: var(--surface-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-16);
	transition: border-color .15s, box-shadow .15s;
}

.service-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow);
}

.service-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 54px;
	height: 54px;
	color: var(--color-primary);
	background: var(--surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-14);
}

.service-card__icon svg {
	width: 26px;
	height: 26px;
}

.service-card__title {
	display: block;
	margin-bottom: var(--space-8);
	font-family: var(--font-display);
	font-size: var(--text-19);
	font-weight: 700;
}

.service-card__text {
	display: block;
	margin-bottom: var(--space-12);
	color: var(--color-muted);
	font-size: var(--text-14);
	line-height: var(--leading-155);
}

.service-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-5);
	color: var(--color-primary);
	font-size: var(--text-14);
	font-weight: 600;
}

.service-card__cta svg {
	width: 14px;
	height: 14px;
}

/* Trust band moved to components/trust-band.css (shared, global). */

/* ============================ Tablet (>=561px) ============================ */
@media (min-width: 561px) {
	.home-hero__title {
		font-size: var(--text-30);
	}

	.home-hero__promos {
		grid-template-columns: 1fr 1fr;
	}

	.home-featured .products > li.product-card {
		flex-basis: 262px;
	}

	.home-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================ Desktop (>=981px) =========================== */
@media (min-width: 981px) {
	.home-section {
		padding: var(--space-46) var(--space-22) var(--space-6);
	}

	.home-section__title {
		font-size: var(--text-30);
	}

	.home-hero__grid {
		grid-template-columns: 1.7fr 1fr;
		gap: var(--space-18);
		padding: var(--space-16) var(--space-22);
	}

	.home-hero__slides {
		min-height: 430px;
	}

	.home-hero__slide {
		grid-template-columns: 1.1fr .9fr;
		padding: var(--space-46);
	}

	.home-hero__title {
		font-size: var(--text-42);
	}

	.home-hero__visual {
		display: grid;
		min-height: 240px;
	}

	.home-hero__promos {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}

	.home-hero__promo {
		flex-direction: row;
		align-items: center;
		gap: var(--space-14);
		min-height: 206px;
	}

	.home-hero__promo-arrow {
		display: block;
	}

	.home-categories__grid {
		grid-template-columns: 1fr 1fr;
	}

	.category-tile {
		grid-template-columns: 1fr 40%;
	}

	.home-blog__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.home-services__grid {
		grid-template-columns: 1fr 1fr;
	}
}