/**
 * Homepage section styling, used by the block patterns registered in
 * inc/patterns/block-patterns.php. Only enqueued on the front page — see
 * inc/enqueue/styles.php.
 */
.myshop-hero {
	padding-block: var(--section-spacing-block);
	text-align: center;
	background-color: var(--color-surface);
}

/* Overrides the global h1 rule (typography.css: --font-size-3xl / 700) —
   editorial weight/size specific to the hero, not a change to headings
   generally. */
.myshop-hero__title {
	margin-block-end: var(--myshop-space-xs);
	font-size: clamp(40px, 4vw, 64px);
	font-weight: 500;
	line-height: 1.1;
}

.myshop-hero__tagline {
	color: var(--color-text-muted);
	font-size: var(--font-size-md);
}

.myshop-section {
	padding-block: var(--section-spacing-block);
}

/*
 * Section background alternation — no two adjacent homepage sections share
 * the same background, so sections read as distinct blocks instead of one
 * continuous beige mass. Only two extra tokens, both already established
 * elsewhere in the palette (no new color introduced). The live section
 * order is Hero -> Shop by Category -> Featured Products -> Store Benefits
 * -> New Arrivals -> Testimonials -> Newsletter (Featured Products comes
 * before New Arrivals, not after), so the classes below are assigned by
 * actual adjacency, not by name:
 *   Hero (.myshop-hero, above)  -> --color-surface
 *   Shop by Category            -> --color-surface-alt  (.myshop-section--surface)
 *   Featured Products           -> --color-background    (.myshop-section--page)
 *   New Arrivals                -> --color-surface-alt  (.myshop-section--surface, reused)
 * Applied on the group block's className in inc/patterns/block-patterns.php
 * (and mirrored in the live homepage's stored post_content).
 */
.myshop-section--surface {
	background-color: var(--color-surface-alt);
}

.myshop-section--page {
	background-color: var(--color-background);
}

/* Shop by Category only — deliberately asymmetric (more room below the
   last row of cards than above the heading), stacked on top of the
   shared .myshop-section padding-block above via matching-specificity
   physical properties declared later in source order. */
.myshop-section--category {
	padding-top: clamp(72px, 6vw, 104px);
	padding-bottom: clamp(80px, 6.5vw, 112px);
}

/*
 * Shared homepage section-heading system — used by Shop by Category, New
 * Arrivals and Featured Products alike (one rule, not one per section).
 * Overrides the global h2 rule (typography.css: --font-size-2xl / 700)
 * with the calmer editorial scale this phase asks for.
 */
.myshop-section__heading {
	margin: 0 0 clamp(36px, 3vw, 52px);
	text-align: center;
	font-size: clamp(32px, 2.2vw, 42px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-heading);
}

/*
 * Homepage product-grid breakpoints — New Arrivals / Featured Products
 * only (.myshop-product-grid wrapper, see the same patterns file). Scoped
 * so this never touches the Shop/category archive grid rule in
 * assets/css/pages/woocommerce.css (Phase 2 concern, untouched here).
 * !important for the same reason that file needs it: WooCommerce's own
 * columns-N class carries a competing width rule at equal specificity.
 *
 * The card reset itself (float/width/margin/min-width on li.product) is
 * owned entirely by components/cards.css now — this file only owns column
 * count and gap, so there is exactly one place that decides "how many
 * columns" and exactly one place that decides "what a card looks like."
 *
 * Base rule is 4 columns (>=1500px); each breakpoint below narrows it
 * further, matching the four exact viewport bands the spec calls for:
 * >=1500 -> 4, 1100-1499 -> 3, 700-1099 -> 2, <700 -> 1.
 */
.myshop-product-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	column-gap: clamp(24px, 2vw, 36px);
	row-gap: clamp(48px, 4vw, 64px);
}

@media (max-width: 1499px) {
	.myshop-product-grid ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1099px) {
	.myshop-product-grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 699px) {
	.myshop-product-grid ul.products {
		grid-template-columns: 1fr !important;
	}
}

.myshop-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--myshop-space-md);
	text-align: center;
}

@media (min-width: 48rem) {
	.myshop-features {
		grid-template-columns: repeat(4, 1fr);
	}
}

.myshop-feature__title {
	font-size: var(--font-size-base);
	margin-block: var(--myshop-space-xs) 0;
}

.myshop-feature__text {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.myshop-promo-banner {
	padding-block: var(--section-spacing-block);
	background-color: var(--color-surface-alt);
	text-align: center;
	border-radius: var(--myshop-radius);
}

.myshop-testimonials {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--myshop-space-md);
}

@media (min-width: 48rem) {
	.myshop-testimonials {
		grid-template-columns: repeat(3, 1fr);
	}
}

.myshop-testimonial {
	padding: var(--myshop-space-md);
	background-color: var(--color-surface);
	border-radius: var(--myshop-radius);
}

.myshop-testimonial__quote {
	font-style: italic;
	color: var(--color-text);
}

.myshop-testimonial__author {
	display: block;
	margin-block-start: var(--myshop-space-sm);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.myshop-newsletter {
	padding-block: var(--section-spacing-block);
	background-color: var(--color-primary);
	color: var(--color-background);
	text-align: center;
}

.myshop-newsletter :where(h2, p) {
	color: inherit;
}