/*
 * Pawshtails Theme — homepage.css
 *
 * Styles for the homepage ONLY (front-page.php).
 * All class names are prefixed `.hp-` so they can never bleed
 * into other pages' CSS.
 *
 * Section order matches front-page.php:
 *   1. Hero        2. Trust strip      3. Let's Talk Y
 *   4. Categories  5. Customer Favs   6. Sizing CTA      7. Reviews
 */

/* =============================================================
   SHARED — section header (used by sections 4, 5, 7)
   ============================================================= */
.hp-section { padding: var(--section-y) 0; }
.hp-section--cream { background: var(--brand-cream); }

.hp-section-header { text-align: center; margin-bottom: var(--space-8); }
.hp-section-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-5); /* more breathing room above the eyebrow */
	display: block;
	object-fit: contain;
}
.hp-section-eyebrow {
	font-family: var(--font-accent);
	font-size: var(--text-2xl);
	color: var(--brand-orange);
	margin-bottom: var(--space-1);
	transform: rotate(-2deg);
	display: inline-block;
}
.hp-section-title {
	font-size: clamp(1.75rem, 6.5vw, 2.75rem);
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0 0 var(--space-3);
	color: var(--neutral-900);
}
.hp-section-title .italic { font-style: italic; font-weight: 300; }

/* =============================================================
   1. HERO — full-width video on top, copy below, on every viewport
   ============================================================= */
.hp-hero { background: var(--brand-cream); }
.hp-hero-video-wrap {
	width: 100%;
	/* Mobile: 4:3 landscape-ish wrapper. The old 4:5 portrait
	   frame was much taller than the video's native ~16:9 ratio,
	   so cover-mode cropped the sides hard (dog cut off) and
	   contain-mode showed huge black bars. 4:3 hugs the video
	   ratio closely — a light side-crop only, no dead letterbox
	   space. Tablet+ overrides to 21:9 below. */
	aspect-ratio: 4/3;
	background: var(--neutral-900);
	overflow: hidden;
	position: relative;
}
.hp-hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.hp-hero-copy {
	padding: var(--space-8) var(--section-x);
	text-align: center;
}
.hp-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--neutral-700);
	margin-bottom: var(--space-4);
}
.hp-hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 9vw, 3.5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0 0 var(--space-5);
	color: var(--neutral-900);
	font-weight: 400;
}
.hp-hero-title .italic { font-style: italic; font-weight: 300; }

.hp-hero-cta-row {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	flex-direction: column;
}
.hp-hero-cta-row .btn { width: 100%; max-width: 320px; }

/* =============================================================
   2. TRUST STRIP — rotating
   ============================================================= */
.hp-trust {
	background: var(--neutral-900);
	color: var(--white);
	padding: var(--space-3) 0;
}
.hp-trust-rotator {
	position: relative;
	height: 28px;
	overflow: hidden;
}
.hp-trust-badge {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	opacity: 0;
	animation: pawshtailsRotateTrust 16s infinite;
	text-align: center;
	padding: 0 var(--space-4);
}
.hp-trust-badge:nth-child(1) { animation-delay: 0s; }
.hp-trust-badge:nth-child(2) { animation-delay: 4s; }
.hp-trust-badge:nth-child(3) { animation-delay: 8s; }
.hp-trust-badge:nth-child(4) { animation-delay: 12s; }
@keyframes pawshtailsRotateTrust {
	0%, 25%, 100% { opacity: 0; transform: translateY(6px); }
	3%, 22%       { opacity: 1; transform: translateY(0); }
}
.hp-trust-text {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0.01em;
	line-height: 1.2;
}

/* =============================================================
   3. LET'S TALK Y
   ============================================================= */
.hp-talky { background: var(--brand-cream); }
.hp-talky-image {
	width: 100%;
	aspect-ratio: 4/5;
	background: var(--brand-cream-warm);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-4); /* top/bottom halved */
	overflow: hidden;
}
.hp-talky-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.hp-talky-content {
	/* Extra bottom padding so the Shop CTA has room before the next section. */
	padding: var(--space-6) var(--section-x) var(--space-10);
	text-align: center;
}
.hp-talky-eyebrow {
	font-family: var(--font-accent);
	font-size: var(--text-2xl);
	color: var(--brand-orange);
	margin-bottom: var(--space-2);
	transform: rotate(-2deg);
	display: inline-block;
}
.hp-talky-title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 8vw, 3.5rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0 0 var(--space-4);
	font-weight: 400;
}
.hp-talky-title .italic { font-style: italic; font-weight: 300; }
.hp-talky-desc {
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--neutral-700);
	margin: 0 auto var(--space-6);
	max-width: 460px;
}
.hp-benefits {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0 auto var(--space-8);
	max-width: 380px;
	text-align: left;
}
.hp-benefit {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	justify-content: center;
}
.hp-benefit-text {
	text-align: left;
	max-width: 280px;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--neutral-900);
	padding-top: 4px;
}
.hp-benefit-text strong { font-weight: 700; }
.hp-benefit-check {
	width: 26px; height: 26px;
	background: var(--brand-orange);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	color: var(--white);
	font-size: var(--text-xs);
	font-weight: 700;
}

/* =============================================================
   4. SHOP THE RANGE — solid colour-block tiles
   Mobile: horizontal scroll-snap carousel.
   Tablet: 2 columns. Desktop: 4 columns.
   Each tile is a solid brand colour; product photo floats with shadow.
   ============================================================= */
.hp-category-grid {
	display: flex;
	gap: var(--space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-padding-left: var(--section-x);
	/* Negative margin + matching padding lets the row bleed to viewport
	   edges so the next tile can peek past the container. */
	margin: 0 calc(-1 * var(--section-x));
	padding: var(--space-2) var(--section-x) var(--space-4);
}
.hp-category-grid::-webkit-scrollbar { display: none; }
.hp-category-grid { scrollbar-width: none; -ms-overflow-style: none; }

.hp-category-card {
	display: block;
	flex: 0 0 80%; /* carousel tile — next card peeks at the right edge */
	min-width: 0;
	scroll-snap-align: start;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	text-align: left;
}

/* Solid brand-colour modifiers — now neutralised so the markup still
   parses but no coloured tile renders. Card looks like a plain photo
   card now, matching Customer Favourites. */
.hp-category-card--purple,
.hp-category-card--crimson,
.hp-category-card--khaki,
.hp-category-card--emerald { background: transparent; }

/* Photo wrapper — full-square, no chrome, no drop-shadow. Mirrors
   .hp-product-image. */
.hp-category-card-photo {
	aspect-ratio: 1;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	margin-bottom: var(--space-3);
	overflow: hidden;
}
.hp-category-card-photo img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover; /* same square crop as product cards */
	display: block;
	filter: none;
	background: transparent;
	transition: transform 0.25s ease;
}
.hp-category-card:hover .hp-category-card-photo img { transform: translateY(-2px); }

.hp-category-card-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.hp-category-card-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--neutral-900); /* black on page background */
}
.hp-category-card-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: 'Sen', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--brand-orange);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.hp-category-card-link span { transition: transform 0.25s ease; }
.hp-category-card:hover .hp-category-card-link span { transform: translateX(4px); }

/* =============================================================
   5. CUSTOMER FAVOURITES — bestseller strip
   Mobile: horizontal scroll-snap row (same pattern as Shop the Range).
   Tablet: 2 columns. Desktop: 4 columns.
   No card chrome — image sits straight on the page background.
   ============================================================= */
.hp-product-grid {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-padding-left: var(--section-x);
	/* Bleed to viewport edges so the next card peeks at the right edge. */
	margin: 0 calc(-1 * var(--section-x));
	padding: var(--space-2) var(--section-x) var(--space-4);
}
.hp-product-grid::-webkit-scrollbar { display: none; }
.hp-product-grid { scrollbar-width: none; -ms-overflow-style: none; }

.hp-product-card {
	display: block;
	flex: 0 0 80%; /* carousel tile — matches Shop the Range */
	scroll-snap-align: start;
	color: inherit;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
}
.hp-product-image {
	aspect-ratio: 1;
	background: transparent;
	margin-bottom: var(--space-3);
	overflow: hidden;
}
.hp-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* square crop — single product photos look clean here */
	display: block;
	transition: transform 0.25s ease;
}
.hp-product-card:hover .hp-product-image img { transform: translateY(-2px); }
.hp-product-title {
	font-family: var(--font-body); /* Sen — original mockup branding */
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--neutral-900);
	margin: 0 0 var(--space-1);
	text-align: left;
	letter-spacing: 0;
}
.hp-product-cta {
	font-family: 'Sen', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--brand-orange);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
}
.hp-product-cta span { transition: transform 0.25s ease; display: inline-block; }
.hp-product-card:hover .hp-product-cta span { transform: translateX(4px); }

/* Empty-state fallback shown when the bestseller query returns nothing
   (e.g. fresh store with no completed orders in the look-back window). */
.hp-bestsellers-empty {
	text-align: center;
	color: var(--neutral-700);
}

/* =============================================================
   6. SIZING CTA — big orange band
   ============================================================= */
.hp-sizing {
	background: var(--brand-orange);
	color: var(--white);
	padding: var(--space-10) var(--section-x);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hp-sizing-script {
	font-family: var(--font-accent);
	font-size: var(--text-4xl);
	line-height: 0.9;
	transform: rotate(-3deg);
	display: inline-block;
	margin-bottom: var(--space-2);
	color: var(--white);
}
.hp-sizing-title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 7vw, 2.5rem);
	line-height: 1;
	margin: 0 0 var(--space-4);
	color: var(--white);
	font-weight: 400;
}
.hp-sizing-title .italic { font-style: italic; font-weight: 300; }
.hp-sizing-desc {
	font-size: var(--text-base);
	line-height: 1.55;
	color: rgba(255,255,255,0.9);
	margin: 0 auto var(--space-6);
	max-width: 460px;
}
.hp-sizing-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	margin: 0 auto var(--space-8);
	max-width: 520px;
}
.hp-sizing-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}
.hp-sizing-step-num {
	width: 28px; height: 28px;
	border: 1.5px solid rgba(255,255,255,0.9);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--white);
}
.hp-sizing-step-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.95);
	line-height: 1.3;
}
.hp-sizing-buttons {
	display: flex;
	gap: var(--space-3);
	flex-direction: column;
	align-items: center;
}
.hp-sizing-buttons .btn { width: 100%; max-width: 320px; }

/* =============================================================
   7. REVIEWS — "The word on the walk"
   ============================================================= */
.hp-reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}
.hp-review-card {
	background: var(--white);
	padding: var(--space-5);
	border: 1px solid var(--neutral-200);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.hp-review-stars {
	color: var(--brand-orange);
	letter-spacing: 2px;
	font-size: var(--text-sm);
}
.hp-review-quote {
	font-family: var(--font-accent); /* Caveat — handwritten warmth */
	font-size: var(--text-xl);
	line-height: 1.35;
	color: var(--neutral-900);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	flex: 1;
	margin: 0;
}
.hp-review-author {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--neutral-200);
}
.hp-review-name { font-size: var(--text-sm); font-weight: 700; }
.hp-review-verified {
	font-size: 10px;
	color: var(--success);
	font-weight: 700;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}

.hp-reviews-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	/* Extra breathing room before the site footer on mobile + tablet.
	   Desktop is fine without this — the 1024+ block below resets it. */
	padding-bottom: var(--space-8);
}
.hp-reviews-trustpilot {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
}
.hp-reviews-trustpilot-stars { display: flex; gap: 2px; }
.hp-tp-star {
	width: 18px; height: 18px;
	background: var(--success);
	display: flex; align-items: center; justify-content: center;
	color: var(--white);
	font-size: 10px;
}
.hp-reviews-trustpilot-text {
	font-size: var(--text-xs);
	color: var(--neutral-700);
}
.hp-reviews-trustpilot-text strong { color: var(--neutral-900); }

/* =============================================================
   TABLET (720px+)
   ============================================================= */
@media (min-width: 720px) {
	/* Shop the Range + Customer Favourites stay in carousel mode through
	   tablet — they switch to a static 4-col grid at 1024px. The other
	   tablet adjustments (reviews 3-col, hero/sizing button rows, sizing
	   padding/icon) stay here as they were. */
	.hp-reviews-grid  { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-10); }

	.hp-hero-cta-row { flex-direction: row; justify-content: center; }
	.hp-hero-cta-row .btn { width: auto; }

	.hp-sizing-buttons { flex-direction: row; justify-content: center; }
	.hp-sizing-buttons .btn { width: auto; }

	.hp-sizing { padding: var(--space-12) var(--section-x); }
}

/* =============================================================
   DESKTOP (1024px+)
   ============================================================= */
@media (min-width: 1024px) {
	.hp-hero-video-wrap { aspect-ratio: 21/9; max-height: 720px; }
	.hp-hero-copy { padding: var(--space-10) var(--section-x); }

	/* (D) Section icon at ~80px desktop. */
	.hp-section-icon { width: 80px; height: 80px; }

	/* Shop the Range — desktop: convert from carousel to 4-col grid.
	   Below 1024px both grids stay in their default scroll-snap mode. */
	.hp-category-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-4);
		overflow: visible;
		scroll-snap-type: none;
		margin: 0;
		padding: 0;
	}
	.hp-category-card { flex: none; }
	.hp-category-card-name { font-size: 22px; }

	/* Customer Favourites — desktop: convert from carousel to 4-col grid. */
	.hp-product-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
		overflow: visible;
		scroll-snap-type: none;
		margin: 0;
		padding: 0;
	}
	.hp-product-card { flex: none; }

	.hp-talky {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
	.hp-talky-image {
		aspect-ratio: auto;
		height: 100%;
		min-height: 460px;
	}
	.hp-talky-content {
		/* Extra bottom padding so the Shop CTA has room (matches mobile). */
		padding: var(--space-10) var(--space-12) var(--space-12);
		text-align: left;
	}
	.hp-talky-desc { margin: 0 0 var(--space-6); }
	.hp-benefits { margin: 0 0 var(--space-8); max-width: none; gap: var(--space-5); }
	.hp-talky-content .hp-benefit { justify-content: flex-start; }
	.hp-talky-content .hp-benefit-text { max-width: none; }

	.hp-review-card { padding: var(--space-6); }
	.hp-reviews-footer { padding-bottom: 0; }

	.hp-sizing-steps { gap: var(--space-5); }
	.hp-sizing-step-num { width: 36px; height: 36px; font-size: var(--text-base); }
	.hp-sizing-step-label { font-size: var(--text-xs); }
}