/*
 * Coastal Supply — Feature Products block.
 *
 * Card-less product showcase that pairs with the Money Saving Deals
 * block but ditches the white card chrome, shadow, and CTA. Items sit
 * directly on the section background — solid or gradient — and copy
 * inherits a single editor-chosen text color (white / primary / black)
 * via a CSS custom property so price digits, headings, names, and SKUs
 * all stay tonally consistent.
 *
 * The 1440px inner cap uses the same `.coastal-features
 * .coastal-features__inner` (specificity 0,2,0) + `!important` trick as
 * the other Coastal blocks (see hero-banner.css for the reasoning).
 */

.coastal-features {
	--coastal-features-bg: linear-gradient(135deg, #2c2c75 0%, #5091cd 100%);
	--coastal-features-text: #ffffff;
	--coastal-features-muted: rgba(255, 255, 255, 0.75);
	--coastal-features-grid-gap: 32px;
	--coastal-features-cols: 3;
	--coastal-features-section-py: 64px;

	width: 100%;
	background: var(--coastal-features-bg);
	color: var(--coastal-features-text);
	padding-top: var(--coastal-features-section-py);
	padding-bottom: var(--coastal-features-section-py);
	font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.coastal-features--padding-compact {
	--coastal-features-section-py: 40px;
}

.coastal-features--padding-spacious {
	--coastal-features-section-py: 50px;
}

.coastal-features--cols-2 {
	--coastal-features-cols: 2;
}

.coastal-features--cols-3 {
	--coastal-features-cols: 3;
}

.coastal-features--cols-4 {
	--coastal-features-cols: 4;
}

/*
 * Text color modifiers. The "muted" tone is derived from the chosen text
 * color so price-regular / SKU / disclaimer stay legible against any
 * background the editor picks. Black/Primary use a darker, opaque muted
 * because they sit against light/medium backgrounds; white uses a
 * softened white because the section is usually dark.
 *
 * Heading and product name use their own custom properties, defaulting
 * to the body text color via CSS var() fallback. Editors can override
 * either independently using the `--heading-X` / `--name-X` modifiers
 * below — useful when the heading or product names need a different
 * tone from the rest of the body copy (e.g. white background, black
 * body copy, primary-blue heading).
 */
.coastal-features--text-white {
	--coastal-features-text: #ffffff;
	--coastal-features-muted: rgba(255, 255, 255, 0.75);
}

.coastal-features--text-primary {
	--coastal-features-text: #2c2c75;
	--coastal-features-muted: rgba(44, 44, 117, 0.65);
}

.coastal-features--text-black {
	--coastal-features-text: #1f2937;
	--coastal-features-muted: rgba(31, 41, 55, 0.65);
}

/* Heading-only color override (button group: White / Primary blue / Black). */
.coastal-features--heading-white {
	--coastal-features-heading-color: #ffffff;
}

.coastal-features--heading-primary {
	--coastal-features-heading-color: #2c2c75;
}

.coastal-features--heading-black {
	--coastal-features-heading-color: #1f2937;
}

/* Product-name-only color override. */
.coastal-features--name-white {
	--coastal-features-name-color: #ffffff;
}

.coastal-features--name-primary {
	--coastal-features-name-color: #2c2c75;
}

.coastal-features--name-black {
	--coastal-features-name-color: #1f2937;
}

/*
 * Inner caps the content to 1440px. !important on max-width is required
 * to beat Astra's `.ast-page-builder-template .entry-content[data-ast-blocks-layout]
 * > *:not(.wp-block-group):where(...) > *` rule (specificity 0,4,0)
 * which otherwise constrains every grandchild of `.entry-content`. Same
 * approach used by hero-banner / stats-strip / money-saving-deals.
 */
.coastal-features .coastal-features__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px !important;
	margin-inline: auto;
	padding: 0 45px;
}

@media (max-width: 768px) {
	.coastal-features .coastal-features__inner {
		padding: 0 24px;
	}
}

/* ── Header ─────────────────────────────────────────────────────────── */

.coastal-features__header {
	text-align: center;
	margin-bottom: 40px;
}

.coastal-features__eyebrow {
	margin: 0 0 8px;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--coastal-features-text);
	opacity: 0.85;
}

/*
 * Heading specificity is bumped to (0,2,0) so it outranks Astra's
 * `.entry-content h2` rule at (0,1,1). Color falls back to the body text
 * variable when no explicit heading override is set, so the "Same as
 * body" choice in the editor needs zero CSS plumbing.
 */
.coastal-features .coastal-features__heading {
	margin: 0 0 8px;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
	color: var(--coastal-features-heading-color, var(--coastal-features-text));
}

.coastal-features__subheading {
	margin: 0 auto;
	max-width: 760px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--coastal-features-text);
	opacity: 0.9;
}

/* ── Grid ───────────────────────────────────────────────────────────── */

.coastal-features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--coastal-features-cols), minmax(0, 1fr));
	gap: var(--coastal-features-grid-gap);
}

@media (max-width: 992px) {
	.coastal-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.coastal-features__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Item (no card chrome) ──────────────────────────────────────────── */

/*
 * No `gap` here — explicit per-element margins drive the rhythm so the
 * media→price gap can stay airy while price→name→SKU stay tight,
 * reading as one tight info group rather than three loose rows.
 */
.coastal-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	text-align: center;
	min-width: 0;
}

/* Image slot mirrors money-saving-deals: fixed height keeps every product
   photo on the same vertical baseline regardless of source aspect. */
.coastal-features__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 220px;
	margin-bottom: 16px;
}

.coastal-features__media img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.coastal-features__media--placeholder {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 8px;
}

@media (max-width: 540px) {
	.coastal-features__media {
		height: 240px;
	}
}

/* ── Pricing ────────────────────────────────────────────────────────── */

/*
 * Reserved min-height keeps single-line and stacked-bundle layouts at
 * the same vertical band so cards in the same row remain aligned even
 * when one is in single mode and another is in bundle mode.
 */
.coastal-features__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px 8px;
	min-height: 36px;
}

.coastal-features__price-row--bundle {
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.coastal-features__price-sale,
.coastal-features__price-bundle {
	font-family: "Manrope", system-ui, sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 1.1;
	color: var(--coastal-features-text);
}

.coastal-features__price-regular {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--coastal-features-muted);
}

.coastal-features__price-regular--strike {
	text-decoration: line-through;
}

.coastal-features__price-disclaimer {
	font-size: 13px;
	color: var(--coastal-features-muted);
	font-style: italic;
}

.coastal-features__unit {
	margin-left: 1px;
	font-size: 0.55em;
	font-weight: 600;
	color: inherit;
	opacity: 0.85;
}

/* ── Name + SKU ─────────────────────────────────────────────────────── */

/*
 * Product name specificity bumped to (0,2,0) so it outranks Astra's
 * `.entry-content h3` rule. Same fallback chain as the heading: the
 * `--name-color` variable is only set when the editor picked a non-
 * "inherit" override; otherwise the body text color is used.
 *
 * 4px top margin keeps the name tucked under the price row.
 */
.coastal-features .coastal-features__name {
	margin: 4px 0 0;
	font-family: "Manrope", system-ui, sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.3;
	color: var(--coastal-features-name-color, var(--coastal-features-text));
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.coastal-features__sku {
	margin: 2px 0 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: var(--coastal-features-muted);
	min-height: 1em;
}

/* ── Mobile font sizes ──────────────────────────────────────────────── */

@media (max-width: 768px) {
	.coastal-features__price-sale,
	.coastal-features__price-bundle {
		font-size: 32px;
	}

	.coastal-features .coastal-features__name {
		font-size: 18px;
	}

	.coastal-features__price-regular {
		font-size: 14px;
	}

	.coastal-features__sku {
		font-size: 13px;
	}
}

/* ── Editor placeholder grid ────────────────────────────────────────── */

.coastal-features__grid--placeholder .coastal-features__item--placeholder {
	opacity: 0.7;
}