/*
 * CrunchFit homepage design system.
 *
 * Everything is scoped under .cf-home so none of it can leak into the shop,
 * cart or checkout, which still run on Woodmart's styling.
 *
 * The palette is sampled from the client's own Instagram artwork rather than
 * guessed - the deep green, kraft and cream below are the actual averaged
 * values from those files. The discipline (one idea per band, photography
 * doing the work, a single accent colour) comes from the reference site.
 */

.cf-home {
	/* Sampled from the client's creatives */
	--cf-green-900: #1E2D06;
	--cf-green-800: #263907;
	--cf-green-600: #3C4F0C;
	--cf-olive:     #6A6C3A;
	--cf-kraft:     #E2B16C;
	--cf-sand:      #EADFCC;
	--cf-cream:     #F9F4E5;
	--cf-paper:     #FFFDF8;

	/* One accent, used only for actions and sale flashes */
	--cf-rust:      #C0561F;
	--cf-rust-dark: #A2461A;

	--cf-ink:       #2B2118;
	--cf-ink-soft:  #5C5044;

	--cf-band-y:    clamp(3.5rem, 7vw, 7rem);
	--cf-wrap:      1200px;
	--cf-radius:    4px;

	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--cf-ink);
	background: var(--cf-paper);
	overflow-x: hidden;
}

.cf-home *,
.cf-home *::before,
.cf-home *::after { box-sizing: border-box; }

.cf-wrap {
	width: 100%;
	max-width: var(--cf-wrap);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* display:block is load-bearing, not tidiness. Woodmart applies display:grid
   to bare <section> elements, which turned every .cf-wrap into a grid item
   sized to its own content: the wrap collapsed to ~348px inside a 1395px
   section, and the split bands crushed their text to one word per line. */
.cf-band {
	display: block;
	padding-block: var(--cf-band-y);
}
.cf-band--cream { background: var(--cf-cream); }
.cf-band--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.cf-center { text-align: center; }
.cf-mt { margin-top: 2.5rem; }

/* ---------------------------------------------------------------- type */

.cf-home h1,
.cf-home h2,
.cf-home h3 {
	font-family: Montserrat, Inter, sans-serif;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.12;
	margin: 0;
	color: var(--cf-green-900);
}

.cf-home .cf-h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.85rem);
	margin-bottom: 1.25rem;
}

/* Stacked, one clause per line - the claims read as a list, not a sentence. */
.cf-home .cf-h2--stack { line-height: 1.22; }

/* These have to out-specify `.cf-home h1, h2, h3` above, which sets the dark
   green. A bare .cf-h2--light loses to it (0,1,1 beats 0,1,0) and the heading
   renders dark green on a dark photograph - invisible. */
.cf-home .cf-h2--light { color: var(--cf-paper); }

.cf-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
	color: var(--cf-kraft);
}

.cf-home p {
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--cf-ink-soft);
	margin: 0 0 1.15rem;
}

.cf-lead {
	font-size: 1.125rem;
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: 2.75rem;
}

/* -------------------------------------------------------------- buttons */

.cf-btn {
	display: inline-block;
	font-family: Montserrat, Inter, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.05rem 2.1rem;
	border-radius: var(--cf-radius);
	border: 2px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
	cursor: pointer;
}

.cf-btn--solid {
	background: var(--cf-rust);
	color: #fff;
}
.cf-btn--solid:hover,
.cf-btn--solid:focus-visible {
	background: var(--cf-rust-dark);
	color: #fff;
}

.cf-btn--outline {
	border-color: var(--cf-green-800);
	color: var(--cf-green-800);
	background: transparent;
}
.cf-btn--outline:hover,
.cf-btn--outline:focus-visible {
	background: var(--cf-green-800);
	color: var(--cf-paper);
}

.cf-btn--sm { padding: .8rem 1.4rem; font-size: .75rem; }

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

/* Supplied artwork, shown whole. No cropping and no overlay: the headline and
   button are drawn into the image, and cover-cropping would cut them off. */
.cf-banner {
	display: block;
	background: var(--cf-cream);
}

.cf-banner__link {
	display: block;
	line-height: 0;      /* kills the inline-descender gap under the image */
}

.cf-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------- hero (legacy, unused) */

.cf-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(30rem, 66vh, 44rem);
	padding-block: 5rem;
	text-align: center;
	background-image: var(--cf-hero-img);
	background-size: cover;
	background-position: center 65%;
	isolation: isolate;
}

/* Scrim: the photograph is warm and busy, and light text needs it to stay
   legible. Darker at the edges so the centred type sits in the calm middle. */
.cf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse at center, rgba(18,12,5,.50) 0%, rgba(18,12,5,.78) 100%),
		linear-gradient(to bottom, rgba(18,12,5,.42), rgba(18,12,5,.62));
}

.cf-hero__inner {
	max-width: 44rem;
	padding-inline: 1.5rem;
}

/* Scoped to .cf-home so it beats the `.cf-home h1, h2, h3` colour rule. */
.cf-home .cf-hero__title {
	font-size: clamp(2.25rem, 6vw, 4.25rem);
	color: #fff;
	text-shadow: 0 2px 28px rgba(0,0,0,.5);
	margin-bottom: 1.5rem;
}

/* Scoped, and near-opaque: `.cf-home p` sets the soft brown body colour, and a
   translucent white over a warm photo turned this line muddy. */
.cf-home .cf-hero__sub {
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	line-height: 1.68;
	color: rgba(255,255,255,.97);
	text-shadow: 0 1px 12px rgba(0,0,0,.55);
	max-width: 38rem;
	margin-inline: auto;
	margin-bottom: 2.25rem;
}

.cf-home .cf-hero .cf-eyebrow {
	color: #F0D9AE;
	text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- story */

/* minmax(0, 1fr), never a bare 1fr. An fr track has an automatic minimum of
   min-content, and these columns contain images whose intrinsic width is
   ~1000px; the media track claims all of it and crushes the text column to a
   couple of words per line. width:100% on the img does not help, because
   min-content is computed from the intrinsic size. */
.cf-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.cf-story__text p:last-of-type { margin-bottom: 2rem; }

.cf-story__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cf-radius);
}

/* --------------------------------------------------------------- ranges */

/* auto-fit, not repeat(4): the number of cards depends on how many categories
   actually have published products, and a fixed four columns would leave a
   visible hole whenever one is withheld. */
/* Three across, so the six categories form two full rows. auto-fit packed
   four onto the first row and left a two-card gap on the second. */
.cf-ranges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.cf-range {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--cf-radius);
	text-decoration: none;
	aspect-ratio: 640 / 860;
}

.cf-range img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.cf-range:hover img { transform: scale(1.045); }

/* The gradient is on the label, not the image, so it cannot wash out the
   whole photo on hover. */
.cf-range__label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 4.5rem 1.25rem 1.25rem;
	background: linear-gradient(to top, rgba(20,14,6,.86) 0%, rgba(20,14,6,.55) 45%, transparent 100%);
	color: #fff;
	display: grid;
	gap: .2rem;
}

.cf-range__label strong {
	font-family: Montserrat, Inter, sans-serif;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cf-range__label em {
	font-style: normal;
	font-size: .8125rem;
	color: rgba(255,255,255,.8);
}

/* -------------------------------------------------------- what's inside */

.cf-inside {
	position: relative;
	background-image: var(--cf-inside-img);
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

/* Near-solid on purpose. At .86 the photograph's own dark edges read as two
   vertical bars down the sides, as if the background had failed to cover. At
   .95 the panel reads as a deliberate deep-green surface with a faint grain,
   which is what it is meant to be. */
.cf-inside::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(20,29,6,.95), rgba(16,24,5,.97));
}

/* Scoped: `.cf-home p` would otherwise win and paint this brown on green. */
.cf-home .cf-inside__lead {
	color: rgba(255,255,255,.86);
	font-size: 1.0625rem;
	text-align: center;
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: 3rem;
}

.cf-home .cf-why__item p { color: rgba(255,255,255,.85); }

.cf-inside__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* min(11rem, 100%) so the track can still shrink below 11rem on a narrow
	   screen instead of forcing the grid wider than its container. */
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: .75rem 1.25rem;
	max-width: 60rem;
	margin-inline: auto;
}

.cf-inside__list li {
	font-size: .9375rem;
	color: rgba(255,255,255,.92);
	padding: .85rem 1rem;
	border: 1px solid rgba(226,177,108,.34);
	border-radius: var(--cf-radius);
	background: rgba(226,177,108,.07);
	text-align: center;
}

/* ------------------------------------------------------------- products */

.cf-products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.cf-card {
	display: block;
	text-decoration: none;
	background: var(--cf-paper);
	border-radius: var(--cf-radius);
	overflow: hidden;
	border: 1px solid rgba(43,33,24,.08);
	transition: transform .2s ease, box-shadow .2s ease;
}

.cf-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(43,33,24,.13);
}

.cf-card__media {
	position: relative;
	display: block;
	background: var(--cf-sand);
	aspect-ratio: 1;
	overflow: hidden;
}

.cf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cf-card__flash {
	position: absolute;
	top: .85rem;
	left: .85rem;
	background: var(--cf-rust);
	color: #fff;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35rem .7rem;
	border-radius: 2px;
}

.cf-card__body {
	display: grid;
	gap: .4rem;
	padding: 1.25rem;
	text-align: center;
}

.cf-card__name {
	font-family: Montserrat, Inter, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--cf-green-900);
}

.cf-card__price {
	font-size: 1rem;
	font-weight: 500;
	color: var(--cf-ink-soft);
}

/* Woo wraps sale prices in <del>/<ins>; make them read as one line. */
.cf-card__price del { opacity: .5; margin-right: .4rem; text-decoration: line-through; }
.cf-card__price ins { text-decoration: none; color: var(--cf-rust); font-weight: 600; }

/* ---------------------------------------------------------------- trust */

.cf-trust {
	background: var(--cf-sand);
}

/* See the note on .cf-story__grid: bare fr tracks let the 1100px image win. */
.cf-trust__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.cf-trust__text p { margin-bottom: 2rem; }

.cf-trust__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cf-radius);
}

/* ------------------------------------------------------------------ why */

.cf-why {
	position: relative;
	background-image: var(--cf-why-img);
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

.cf-why::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(38,57,7,.94), rgba(30,45,6,.96));
}

.cf-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 3rem;
}

.cf-why__item h3 {
	font-size: 1.0625rem;
	color: var(--cf-kraft);
	margin-bottom: .6rem;
}

.cf-why__item p {
	font-size: .9375rem;
	line-height: 1.66;
	color: rgba(255,255,255,.8);
	margin: 0;
}

/* ------------------------------------------------------------------ buy */

.cf-buy__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.cf-buy__item {
	display: grid;
	gap: .45rem;
	align-content: start;
	padding: 2rem 1.75rem;
	background: var(--cf-paper);
	border: 1px solid rgba(43,33,24,.09);
	border-radius: var(--cf-radius);
}

.cf-buy__item strong {
	font-family: Montserrat, Inter, sans-serif;
	font-size: 1.0625rem;
	color: var(--cf-green-900);
}

.cf-buy__item span {
	font-size: .9375rem;
	color: var(--cf-ink-soft);
	line-height: 1.6;
}

.cf-buy__item--cta { border-color: rgba(192,86,31,.34); }
.cf-buy__item--cta .cf-btn { margin-top: .85rem; justify-self: start; }

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1024px) {
	.cf-ranges    { grid-template-columns: repeat(2, 1fr); }
	.cf-why__grid { grid-template-columns: repeat(2, 1fr); }
	.cf-products  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.cf-story__grid,
	.cf-trust__grid {
		grid-template-columns: 1fr;
	}

	/* Photo first on the story band, text first on the trust band, so neither
	   page turn opens on two paragraphs in a row. */
	.cf-story__media { order: -1; }

	.cf-buy__grid { grid-template-columns: 1fr; }
	.cf-hero      { min-height: 26rem; background-position: center 60%; }
}

@media (max-width: 560px) {
	.cf-ranges,
	.cf-products,
	.cf-why__grid {
		grid-template-columns: 1fr;
	}

	.cf-range { aspect-ratio: 16 / 11; }

	/* minmax(0, 1fr), not 1fr and not the 11rem minimum from the base rule.
	   Two 176px tracks plus the gap and the wrap padding come to ~412px, which
	   is wider than a 390px phone: the document grew and every band ended up
	   clipped on the right. */
	.cf-inside__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.cf-home * { transition: none !important; }
	.cf-range:hover img { transform: none; }
}