/**
 * Page — homepage sections
 * ==========================================================================
 * Implements UI-LAYOUTS.md §5. Enqueued from inc/enqueue.php on the front
 * page only — it is NOT imported by main.css, so these ~11 KB never reach
 * the shop, product or content templates.
 *
 * 1. Hero
 * 2. Category grid
 * 3. Product strips
 * 4. Collection banners
 * 5. Process (how we source & grade)
 * 6. Brand wall
 * 7. Reviews
 * 8. Instagram
 * 9. Newsletter
 *
 * @package Preloved
 * @since   1.0.0
 * ========================================================================== */


/* ==========================================================================
   1. Hero — UI-LAYOUTS.md §5.2
   ==========================================================================
   Mobile is 4:5 with text BELOW the image: overlaid text on a portrait crop
   is unreadable at 360px. Overlay begins at md.
   ========================================================================== */

.hero {
	position: relative;
	background-color: var(--pl-surface-deep);
}

.hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--pl-bg-sunken);
}

.hero__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hero__scrim { display: none; }

.hero__body {
	padding-block: var(--pl-space-6) var(--pl-space-8);
	background-color: var(--pl-paper);
}

.hero__eyebrow { margin-block-end: var(--pl-space-3); }

.hero__title {
	margin-block-end: var(--pl-space-4);
	font-size: var(--pl-display-2);
	font-weight: 700;
	line-height: var(--pl-leading-display);
	letter-spacing: var(--pl-tracking-display);
}

.hero__text {
	max-inline-size: 46ch;
	margin-block-end: var(--pl-space-6);
	color: var(--pl-text-muted);
	font-size: var(--pl-body-lg);
}

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--pl-space-3);
}

@media (min-width: 640px) {
	.hero__actions { flex-direction: row; flex-wrap: wrap; }
	.hero__actions .btn { flex: 1 1 auto; }
}

@media (min-width: 768px) {
	/* Text moves onto the image from tablet up. */
	.hero {
		display: grid;
		min-block-size: 520px;
	}

	.hero__media,
	.hero__inner {
		grid-area: 1 / 1;
	}

	/* From tablet up the media is a grid cell stacked under the text, so the
	   row decides its height. `inline-size: 100%` is load-bearing: with only
	   `block-size: 100%` set, `aspect-ratio` resolves the *width from the
	   height* instead of the other way round, which sized the box to 2917px
	   inside a 1559px column and upscaled the LCP image 1.85x. The ratio is
	   dropped here for the same reason — with both axes definite it cannot
	   apply, and leaving it in invites the bug back. `object-fit: cover` on
	   `.hero__image` already does the cropping. */
	.hero__media {
		aspect-ratio: auto;
		inline-size: 100%;
		block-size: 100%;
	}

	.hero__scrim {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to var(--pl-scrim-direction, right),
			rgb(20 18 15 / 72%) 0%,
			rgb(20 18 15 / 45%) 35%,
			transparent 68%
		);
	}

	.hero__inner {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	.hero__body {
		max-inline-size: 560px;
		padding-block: var(--pl-space-9);
		background-color: transparent;
		color: var(--pl-text-inverse);
	}

	.hero__title { color: var(--pl-text-inverse); }

	.hero__text { color: rgb(253 252 250 / 88%); }

	/* The eyebrow inverts with the rest of the body. It was missing from this
	   list: gold accent text is specified for light surfaces and measured 2.89:1
	   on the scrim. Doing it here rather than with a modifier class in the
	   template is what keeps it correct on mobile, where the body keeps its own
	   `paper` background and the scrim is hidden. */
	.hero__eyebrow { color: rgb(253 252 250 / 88%); }

	.hero__actions .btn { flex: 0 0 auto; }

}

[dir="rtl"] .hero__scrim { --pl-scrim-direction: left; }

@media (min-width: 1024px) {
	.hero { min-block-size: 600px; }
	.hero__title { font-size: var(--pl-display-1); }
	.hero__body { padding-block: var(--pl-space-11); }
}


/* --------------------------------------------------------------------------
   Hero — no image set in the Customizer
   --------------------------------------------------------------------------
   A layout in its own right, NOT the overlay layout with the picture removed.
   Every overlay rule above assumes a photograph sits behind the copy: the
   min-height reserves room for it, the 560px body is a text column occupying
   one half of it, and the dark section colour is what the scrim fades into.
   Strip the photo and those rules leave a 560px light panel stranded on a
   600px dark-green band, with the copy flush against the panel's own edge.

   Declared after every breakpoint block above, deliberately. The first version
   of this fallback scattered its overrides through the base and md blocks,
   where `.hero--no-image { min-block-size: 0 }` lost to a later
   `.hero { min-block-size: 600px }` of identical specificity — so the reset
   silently did nothing. Source order is load-bearing here: keep this last.
   -------------------------------------------------------------------------- */

.hero--no-image {
	/*
	 * No photo to size the band, so height follows the copy at every width —
	 * which is also what makes this responsive rather than a fixed 600px box
	 * that a phone has to scroll past.
	 */
	display: block;
	min-block-size: 0;
	background-color: var(--pl-peach-50);
}

.hero--no-image .hero__media { display: none; }

.hero--no-image .hero__body {
	/*
	 * The 560px cap exists only to keep copy clear of the image subject, and
	 * the panel background only to lift it off a photo. With neither present
	 * both become a light box cut off mid-container, so both are dropped: the
	 * tint moves to the section and the copy uses the normal container gutter.
	 */
	max-inline-size: none;
	padding-block: var(--pl-space-9);
	background-color: transparent;
	color: var(--pl-text);
}

.hero--no-image .hero__title { color: var(--pl-text); }

/*
 * The eyebrow has to be reset too, and was missed. From 768px up the overlay
 * hero inverts it to near-white for the dark scrim — but this fallback has no
 * scrim and a light peach panel, so the inverted colour rendered it invisible
 * at ~1.1:1 against its own background.
 */
.hero--no-image .hero__eyebrow { color: var(--pl-accent-text); }

.hero--no-image .hero__text {
	/* Measure still capped — for readability now, not to dodge a photo. */
	max-inline-size: 52ch;
	color: var(--pl-text-muted);
}

@media (min-width: 768px) {
	.hero--no-image .hero__body { padding-block: var(--pl-space-10); }
}

@media (min-width: 1024px) {
	.hero--no-image .hero__body { padding-block: var(--pl-space-11); }
}


/* ==========================================================================
   2. Category grid — UI-LAYOUTS.md §5.4
   ==========================================================================
   Mobile/tablet 2 across. Desktop: 4 tiles on row one, 2 wide tiles on row two.
   ========================================================================== */

.categories__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pl-space-3);
}

@media (min-width: 768px) {
	.categories__grid { gap: var(--pl-space-4); }
}

@media (min-width: 1024px) {
	.categories__grid { grid-template-columns: repeat(4, 1fr); }

	/* The trailing wide tiles each span half the row. */
	.categories__grid .tile--wide { grid-column: span 2; }

	/* Unless there is only one, in which case a half-row tile beside an empty
	   half reads as a missing tile. Full width reads as a deliberate banner. */
	.categories__grid .tile--full { grid-column: 1 / -1; }
}


/* ==========================================================================
   3. Product strips — UI-LAYOUTS.md §5.5
   ========================================================================== */

.strip__empty {
	padding: var(--pl-space-8) var(--pl-space-5);
	background-color: var(--pl-bg-sunken);
	border: 1px dashed var(--pl-border);
	border-radius: var(--pl-radius-lg);
	text-align: center;
	color: var(--pl-text-muted);
}

.strip__empty p { margin-block-end: var(--pl-space-4); }


/* ==========================================================================
   4. Collection banners — §9.9
   ========================================================================== */

.collections__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-4);
}

.banner {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--pl-radius-lg);
	overflow: hidden;
	background-color: var(--pl-surface-deep);
	text-decoration: none;
	isolation: isolate;
}

.banner__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--pl-slower) var(--pl-ease-out);
}

.banner:hover .banner__image { transform: scale(1.03); }

.banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(20 18 15 / 78%) 0%,
		rgb(20 18 15 / 35%) 50%,
		rgb(20 18 15 / 12%) 100%
	);
}

/*
 * A column, explicitly.
 *
 * The banner's eyebrow, headline and link are `<span>`s — they have to be,
 * because the whole banner is one `<a>` and a heading inside a link is neither
 * valid nor useful to a screen reader. As inline elements they ran together on
 * a single line: "BUDGET PICKS Under Rs. 10,000 Shop the edit →". The headline
 * even carried `margin-block`, which an inline box ignores, so the intent was
 * there and only the display type was missing.
 */
.banner__body {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pl-space-2);
	padding: var(--pl-space-5);
	color: var(--pl-text-inverse);
}

.banner__title {
	display: block;
	font-size: var(--pl-h2);
	line-height: var(--pl-leading-tight, 1.15);
	color: inherit;
	text-wrap: balance;
}

.banner__link { color: inherit; }

@media (min-width: 768px) {
	.collections__grid { grid-template-columns: repeat(2, 1fr); }
	.banner__body { padding: var(--pl-space-6); }
}


/* ==========================================================================
   5. Process — UI-LAYOUTS.md §5.7
   ========================================================================== */

.process { background-color: var(--pl-bg-sunken); }

.process__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pl-space-5);
	margin-block: var(--pl-space-7);
}

.step {
	display: flex;
	gap: var(--pl-space-4);
}

.step__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	background-color: var(--pl-peach-100);
	border-radius: var(--pl-radius-pill);
	font-family: var(--pl-font-display);
	font-size: var(--pl-h4);
	font-weight: 700;
	color: var(--pl-primary);
}

.step__title {
	margin-block-end: var(--pl-space-1);
	font-family: var(--pl-font-body);
	font-size: var(--pl-h4);
	font-weight: 600;
	letter-spacing: 0;
}

.step__text {
	margin: 0;
	color: var(--pl-text-muted);
	font-size: var(--pl-body-sm);
}

.process__grades {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-space-3);
	padding-block-start: var(--pl-space-6);
	border-block-start: 1px solid var(--pl-border);
}

.process__grades-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pl-space-2);
}

@media (min-width: 640px) {
	.process__steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.process__steps { grid-template-columns: repeat(3, 1fr); }
	.process__grades { justify-content: space-between; }
}


/* ==========================================================================
   6. Brand wall — UI-LAYOUTS.md §5.8
   ========================================================================== */

/* `auto-fit`, not a fixed `repeat(3, 1fr)`. Grid items default to
   `min-width: auto`, so a fixed three-column track sizes each column to its
   brand's min-content — 80px + 101px + 105px against a 288px container at
   320px wide, which is where NFR-COMP-03 was failing. It also only *just* fit
   at 360px and 375px, so the first client-added brand longer than "UNIQLO"
   would have reintroduced the overflow.

   The 110px floor is the widest brand min-content plus headroom, so a track is
   never narrower than its content: two columns below ~400px, three above,
   six from 768px. `min()` keeps the floor from exceeding the container itself
   on a very narrow viewport. */
.brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
	gap: var(--pl-space-3);
}

.brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Belt and braces for the above: a brand name longer than its track wraps
	   rather than widening the grid. Brands are client-editable, so the layout
	   must not depend on them staying short. */
	min-inline-size: 0;
	overflow-wrap: anywhere;
	min-block-size: 72px;
	padding: var(--pl-space-3);
	background-color: var(--pl-bg-elevated);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius);
	font-family: var(--pl-font-display);
	font-size: var(--pl-ui);
	font-weight: 600;
	letter-spacing: var(--pl-tracking-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--pl-text-secondary);
	text-decoration: none;
	opacity: 0.55;
	transition:
		opacity var(--pl-fast) var(--pl-ease-standard),
		border-color var(--pl-fast) var(--pl-ease-standard);
}

.brands__item:hover {
	opacity: 1;
	border-color: var(--pl-primary);
	color: var(--pl-primary);
}

@media (min-width: 768px) {
	.brands__grid { grid-template-columns: repeat(6, 1fr); }
}


/* ==========================================================================
   7. Reviews — UI-LAYOUTS.md §5.9
   ========================================================================== */

.reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-space-3);
	margin-block-end: var(--pl-space-6);
}

.rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--pl-accent);
}

.rating__value {
	margin-inline-start: var(--pl-space-2);
	font-family: var(--pl-font-display);
	font-size: var(--pl-h4);
	font-weight: 700;
	color: var(--pl-text);
}

.rating__count {
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

.review {
	display: flex;
	flex-direction: column;
	gap: var(--pl-space-3);
	padding: var(--pl-space-5);
	background-color: var(--pl-bg-elevated);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius-lg);
}

.review__quote {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--pl-body);
	color: var(--pl-text-secondary);
}

.review__quote p:last-child { margin-block-end: 0; }

.review__author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pl-space-2);
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
	font-style: normal;
}

.review__name { font-weight: 600; color: var(--pl-text); }


/* ==========================================================================
   8. Instagram — UI-LAYOUTS.md §5.10
   ========================================================================== */

.instagram__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pl-space-2);
}

.instagram__item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--pl-radius);
	overflow: hidden;
	background-color: var(--pl-bg-sunken);
}

.instagram__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--pl-slow) var(--pl-ease-out);
}

.instagram__item:hover img { transform: scale(1.05); }

.instagram__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100%;
	color: var(--pl-text-disabled);
}

@media (min-width: 768px) {
	.instagram__grid { grid-template-columns: repeat(6, 1fr); }
}


/* ==========================================================================
   9. Newsletter — UI-LAYOUTS.md §5.11
   ========================================================================== */

.newsletter { background-color: var(--pl-peach-50); }

.newsletter__inner {
	max-inline-size: 620px;
	margin-inline: auto;
	text-align: center;
}

.newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--pl-space-3);
	margin-block: var(--pl-space-5) var(--pl-space-3);
}

.newsletter__consent {
	margin: 0;
	font-size: var(--pl-caption);
	color: var(--pl-text-muted);
}

@media (min-width: 640px) {
	.newsletter__form { flex-direction: row; }
	.newsletter__form .field { flex: 1 1 auto; }
}


/* ==========================================================================
   Hero — premium treatment for the no-image layout
   ==========================================================================
   The fallback hero is what the store shows until real photography lands, and
   on a page with no product imagery it was carrying the entire first
   impression as a flat peach rectangle.

   The treatment is deliberately typographic rather than decorative: a warm
   vertical wash, one large soft brand-orange glow set off-centre, and a hairline
   that anchors the eyebrow. No pattern, no stock imagery, nothing that has to be
   removed later — when the client uploads a photograph the image layout takes
   over and none of this renders.
   ========================================================================== */

.hero--no-image {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(60ch 40ch at 82% 18%, rgb(232 112 24 / 13%), transparent 70%),
		radial-gradient(48ch 32ch at 8% 92%, rgb(248 168 48 / 10%), transparent 72%),
		linear-gradient(180deg, var(--pl-peach-50) 0%, var(--pl-bg) 100%);
}

/*
 * A hairline above the eyebrow. Small, but it is what stops the copy floating
 * in the middle of a large empty field — it gives the block a top edge to hang
 * from, which is most of what "composed" means at this size.
 */
.hero--no-image .hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--pl-space-3);
}

.hero--no-image .hero__eyebrow::before {
	content: "";
	inline-size: var(--pl-space-6);
	block-size: 2px;
	background-color: var(--pl-accent);
	border-radius: 2px;
}

.hero--no-image .hero__title {
	/* Tighter than the default display tracking: at this size the default
	   reads loose, and the extra density is what makes a headline feel set
	   rather than typed. */
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.hero--no-image .hero__text {
	font-size: var(--pl-body-lg);
	text-wrap: pretty;
}

@media (min-width: 768px) {
	.hero--no-image .hero__body { padding-block: var(--pl-space-11); }
}

@media (min-width: 1280px) {
	.hero--no-image .hero__title { font-size: clamp(3rem, 4.6vw, 4.25rem); }
	.hero--no-image .hero__text { max-inline-size: 54ch; }
}


/* ==========================================================================
   Button tactility
   ==========================================================================
   The buttons were flat fills. A resting shadow and a small lift on hover is
   the cheapest available signal that something is pressable — and on a store
   whose primary action is "Add to cart", that signal is worth more than any
   decorative change on the page.
   ========================================================================== */

.btn--primary,
.btn--whatsapp {
	box-shadow: var(--pl-shadow-xs);
}

.btn--primary:hover,
.btn--secondary:hover,
.btn--whatsapp:hover {
	transform: translateY(-1px);
	box-shadow: var(--pl-shadow-sm);
}

.btn--primary:active,
.btn--secondary:active,
.btn--whatsapp:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Motion is an enhancement, never a requirement. */
@media (prefers-reduced-motion: reduce) {
	.btn--primary:hover,
	.btn--secondary:hover,
	.btn--whatsapp:hover,
	.btn--primary:active,
	.btn--secondary:active,
	.btn--whatsapp:active {
		transform: none;
	}
}


/* ==========================================================================
   9. Hero showcase — the no-image hero's right column
   ==========================================================================
   With no hero photograph the hero was a band of text with the right half of a
   1440px viewport empty, and the first real product sat below the fold on every
   desktop visit. This fills that half with the newest stock instead of
   decoration — see template-parts/home/hero-showcase.php.

   Below 1024px it is not rendered at all: the copy already fills the width, and
   the New In strip is one short scroll away, so a second product row there
   would only lengthen the page.
   ========================================================================== */

.hero__showcase { display: none; }

@media (min-width: 1024px) {
	.hero--no-image .hero__inner > .container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
		align-items: center;
		gap: var(--pl-space-8);
	}

	.hero__showcase {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pl-space-4);
		align-items: start;
		position: relative;
	}

	/*
	 * The second card drops. A pair sitting on one baseline reads as a stalled
	 * two-column grid; offsetting one makes the group read as composed, and it
	 * is the cheapest way to get depth without a shadow heavy enough to muddy
	 * the warm background.
	 */
	.hero__showcase .hero-pick:nth-child(2) { margin-block-start: var(--pl-space-8); }

	.hero__showcase-label {
		position: absolute;
		inset-block-start: calc(var(--pl-space-4) * -1);
		inset-inline-start: 0;
		margin: 0;
		font-size: var(--pl-micro);
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--pl-accent-text);
	}
}

.hero-pick {
	display: block;
	background-color: var(--pl-bg-elevated);
	border: 1px solid var(--pl-line-soft);
	border-radius: var(--pl-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--pl-shadow-sm);
	transition:
		transform var(--pl-base) var(--pl-ease-out),
		box-shadow var(--pl-base) var(--pl-ease-out);
}

.hero-pick:hover,
.hero-pick:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--pl-shadow-md);
	color: inherit;
}

.hero-pick__media {
	display: block;
	background-color: var(--pl-bg-sunken);
}

/*
 * `aspect-ratio` with `inline-size`, never with `block-size: 100%` — the pair
 * makes the ratio resolve width from height, which is what upscaled the hero
 * image 1.85x in Phase 15.
 */
.hero-pick__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.hero-pick__body {
	display: block;
	padding: var(--pl-space-4);
}

.hero-pick__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--pl-small);
	font-weight: 600;
	line-height: 1.35;
	color: var(--pl-text);
}

.hero-pick__price {
	display: block;
	margin-block-start: var(--pl-space-2);
	font-weight: 700;
	color: var(--pl-text);
}

@media (prefers-reduced-motion: reduce) {
	.hero-pick:hover,
	.hero-pick:focus-visible { transform: none; }
}