/*
 * Home page sections — the frame the newsletter band sits in.
 *
 *   .hcr-hero      full-bleed hero over assets/images/hero.jpg with a token
 *                  gradient overlay, so the headline stays legible.
 *   .hcr-featured  the featured roasts band; the grid itself is .card-grid
 *                  from cards.css, so there is no second card implementation.
 *   .hcr-craft     an asymmetric image / text split, stacked on mobile.
 *
 * The newsletter band's own styling lives in assets/css/newsletter.css and is
 * shared with the footer instance — nothing here restyles it.
 *
 * Mobile-first, no fixed layout widths and no viewport-width sizing that could
 * overflow a 320px screen. Every colour, space,
 * radius and duration comes from assets/css/design-tokens.css, so a
 * [data-theme="dark"] remap of the role tokens recolours the page.
 */

.hcr-home {
	background: var(--color-bg);
	color: var(--color-text);
}

/* ------------------------------------------------------------------ hero --- */

.hcr-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: 32rem;
	padding-block: var(--space-16);
	background-color: var(--color-surface-dark);
	background-image: url("../images/hero.jpg");
	background-size: cover;
	background-position: center;
	color: var(--color-neutral-50);
}

.hcr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--overlay-hero, linear-gradient(180deg, rgba(28, 25, 23, 0.25) 0%, rgba(28, 25, 23, 0.6) 100%)),
		rgba(28, 25, 23, 0.35);
}

.hcr-hero__inner {
	max-width: 46rem;
	margin-inline: 0;
}

.hcr-hero__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-200);
}

.hcr-hero__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tighter);
	line-height: var(--leading-tight);
}

.hcr-hero__text {
	margin: 0 0 var(--space-8);
	max-width: 48ch;
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-neutral-200);
}

.hcr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
}

/* The quiet button sits on photography here, so it borrows the hero's own
   light-on-dark colours rather than the light panel it uses elsewhere. */
.hcr-hero .hcr-btn--quiet {
	padding: var(--space-3) var(--space-5);
	background: rgba(250, 250, 249, 0.12);
	border-color: var(--color-neutral-200);
	color: var(--color-neutral-50);
	font-size: var(--text-base);
}

.hcr-hero .hcr-btn--quiet:hover,
.hcr-hero .hcr-btn--quiet:focus-visible {
	background: rgba(250, 250, 249, 0.22);
	border-color: var(--color-neutral-50);
	color: var(--color-neutral-50);
}

.hcr-hero .hcr-btn:focus-visible {
	outline: 3px solid var(--color-accent-400);
	outline-offset: 3px;
}

@media (min-width: 48em) {
	.hcr-hero {
		min-height: 38rem;
		padding-block: var(--space-24);
	}
}

/* -------------------------------------------------------------- sections --- */

.hcr-section__head {
	max-width: var(--container-narrow);
	margin: 0 0 var(--space-10);
}

.hcr-section__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-snug);
	color: var(--color-text);
}

.hcr-section__text {
	margin: 0 0 var(--space-4);
	max-width: var(--measure);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------- featured band --- */

.hcr-featured {
	background: var(--color-surface);
}

.hcr-featured__more {
	margin: var(--space-10) 0 0;
}

/*
 * The band renders four coffees. cards.css already gives .card-grid one column
 * on mobile, two from 40em and three from 64em; on a wide desktop the fourth
 * card joins the row instead of hanging alone on a second line. Scoped to this
 * grid class so no other .card-grid on the site changes.
 */
@media (min-width: 80em) {
	.hcr-featured__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ----------------------------------------------------------- craft strip --- */

.hcr-craft__inner {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

.hcr-craft__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

.hcr-craft__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.hcr-craft__copy > :last-child {
	margin-bottom: 0;
}

.hcr-craft__actions {
	margin: var(--space-6) 0 0;
}

/*
 * The three value points: a stacked list on mobile, a horizontal row of three
 * from 48em. The band itself sits on the page background between the featured
 * grid (surface) above and the dark subscription band below, so the points get
 * a surface card treatment to separate them from the copy they follow.
 */
.hcr-craft__points {
	display: grid;
	gap: var(--space-5);
	margin: var(--space-12) 0 0;
	padding: 0;
	list-style: none;
}

.hcr-craft-point {
	padding: var(--space-6);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
}

.hcr-craft-point:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.hcr-craft-point__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-primary-50);
	color: var(--color-primary-600);
}

.hcr-craft-point__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-tight);
	color: var(--color-text);
}

.hcr-craft-point__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

@media (min-width: 48em) {
	.hcr-craft__inner {
		/* Asymmetric on purpose: the photograph leads, the copy follows. */
		grid-template-columns: 1.15fr 1fr;
		gap: var(--space-12);
	}

	.hcr-craft__points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hcr-craft-point:hover {
		transform: none;
	}
}

/* ------------------------------------------------- subscription call to action --- */

/*
 * The home page's route to the Subscriptions page: a dark split band between
 * the craft strip (page background) and the reviews (surface), so no two
 * neighbouring sections share a background. Every colour is a role token, so a
 * [data-theme="dark"] remap recolours it with no extra rules. The destination
 * is resolved in PHP by harbor_coffee_roasters_get_subscriptions_url().
 */
.hcr-home-subs {
	background: var(--color-surface-dark);
	color: var(--color-neutral-50);
}

.hcr-home-subs__inner {
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

.hcr-home-subs__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
}

.hcr-home-subs__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hcr-home-subs__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-300);
}

/* Light-on-dark: the shared section type styles default to the page's text
   colour, which would be unreadable on this band. */
.hcr-home-subs .hcr-section__title {
	color: var(--color-neutral-50);
}

.hcr-home-subs .hcr-section__text {
	color: var(--color-neutral-200);
}

/* Cadence badges. The text comes from the plan data helper in PHP; these are
   informational chips, not links, so they get no hover or focus affordance.
   Cream (accent-100) over the dark surface, lightened a touch by the chip
   fill, clears WCAG AA for small text comfortably. */
.hcr-home-subs__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.hcr-home-subs__badge {
	padding: var(--space-2) var(--space-4);
	border: var(--border-width) solid rgba(250, 250, 249, 0.28);
	border-radius: var(--radius-full);
	background: rgba(250, 250, 249, 0.10);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	color: var(--color-accent-100);
}

.hcr-home-subs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-6) 0 0;
}

.hcr-home-subs .hcr-btn--quiet {
	background: rgba(250, 250, 249, 0.12);
	border-color: var(--color-neutral-200);
	color: var(--color-neutral-50);
}

.hcr-home-subs .hcr-btn--quiet:hover,
.hcr-home-subs .hcr-btn--quiet:focus-visible {
	background: rgba(250, 250, 249, 0.22);
	border-color: var(--color-neutral-50);
	color: var(--color-neutral-50);
}

.hcr-home-subs .hcr-btn:focus-visible {
	outline: 3px solid var(--color-accent-400);
	outline-offset: 3px;
}

@media (min-width: 48em) {
	.hcr-home-subs__inner {
		/* The copy leads here, mirroring — not repeating — the craft strip. */
		grid-template-columns: 1fr 1.1fr;
		gap: var(--space-12);
	}

	/* Photograph on the right, so the band reads the other way round from the
	   craft strip directly above it. */
	.hcr-home-subs__media {
		order: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hcr-hero .hcr-btn--quiet,
	.hcr-home-subs .hcr-btn--quiet {
		transition: none;
	}
}