/**
 * core/group styles — ported from prototype blocks/card.css, stat.css and the
 * section-header part of heading.css.
 *
 * Styles: card | card-product | card-soft | card-dark | card-glass | stat | section-header
 * Extra classes (Additional CSS class): has-padding-xl, is-hoverable, is-card-footer,
 * is-split, has-divider, has-cat-*-accent (global.css)
 */

/* Children of these groups are spaced with flex gap, not flow margins.
   .wp-block-group prefix: must beat core's `:root :where(.is-layout-flow) > *` (0,1,0), printed later. */
.wp-block-group:is(.is-style-card, .is-style-card-product, .is-style-card-soft, .is-style-card-dark,
	.is-style-card-glass, .is-style-stat, .is-style-section-header, .is-card-footer) > * {
	margin-block: 0;
}



/* ---------- Base card ---------- */
.is-style-card,
.is-style-card-product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--lg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--level-1);
	transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.is-style-card.has-padding-xl,
.is-style-card-product {
	padding: var(--wp--preset--spacing--xl);
}

@media (max-width: 767px) {
	.is-style-card.has-padding-xl,
	.is-style-card-product {
		padding: var(--wp--preset--spacing--lg);
	}
}

.is-style-card.is-hoverable:hover,
.is-style-card-product:hover {
	box-shadow: var(--wp--preset--shadow--level-3);
	transform: translateY(-2px);
}

.is-style-card :where(h3, h4),
.is-style-card-product :where(h3, h4) {
	color: var(--wp--preset--color--primary);
}

/* Plain paragraphs only — styled paragraphs (kicker, colour presets, block parts) keep their own colour */
.is-style-card :where(p:not([class*="is-style-"], [class*="-color"], [class*="__"])),
.is-style-card-product :where(p:not([class*="is-style-"], [class*="-color"], [class*="__"])) {
	color: var(--wp--preset--color--contrast-2);
}

/* ---------- Product card ---------- */
.is-style-card-product {
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	border-top: 4px solid var(--accent, var(--wp--preset--color--primary));
}

.is-style-card-product .wp-block-sefina-icon {
	margin-bottom: var(--wp--preset--spacing--xs);
}

.is-style-card-product:hover .wp-block-sefina-icon {
	transform: scale(1.05);
}

/* ---------- Card footer row ---------- */
.wp-block-group.is-card-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- Soft feature tile ---------- */
.is-style-card-soft {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base-3);
}

.is-style-card-soft > :first-child {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--title-md);
	line-height: var(--wp--custom--line-height--title-md);
	font-weight: 700;
}

.is-style-card-soft > :first-child .material-symbols-outlined {
	color: var(--wp--preset--color--secondary-text);
	font-size: 1.375rem;
}

.is-style-card-soft > p {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

/* ---------- Dark card ---------- */
.is-style-card-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-dark);
	box-shadow: var(--wp--preset--shadow--level-2);
}

.is-style-card-dark::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -4rem;
	right: -4rem;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 20%, transparent);
	filter: blur(40px);
	pointer-events: none;
}

.is-style-card-dark :where(h2, h3, h4) {
	color: var(--wp--preset--color--on-dark);
}

.is-style-card-dark :where(p:not([class*="is-style-"], [class*="-color"], [class*="__"])) {
	color: var(--wp--preset--color--on-dark-muted);
}

@media (max-width: 767px) {
	.is-style-card-dark {
		padding: var(--wp--preset--spacing--lg);
	}
}

/* ---------- Glass card (on imagery) ---------- */
.is-style-card-glass {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--lg);
	border: 1px solid rgb(255 255 255 / 0.1);
	border-radius: var(--wp--custom--radius--xl);
	background: rgb(255 255 255 / 0.1);
	color: var(--wp--preset--color--on-dark);
	backdrop-filter: blur(12px);
}

/* ================= Stat ================= */
.is-style-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	padding: var(--wp--preset--spacing--lg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--level-1);
}

.is-style-stat > .wp-block-sefina-icon {
	margin-bottom: var(--wp--preset--spacing--sm);
}

.is-style-stat-value {
	color: var(--wp--preset--color--primary);
	font-size: 2.375rem;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.is-style-stat-label {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--title-md);
	line-height: var(--wp--custom--line-height--title-md);
	font-weight: 700;
}

.is-style-stat-caption {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

@media (max-width: 767px) {
	.is-style-stat {
		padding: var(--wp--preset--spacing--md);
	}

	.is-style-stat-value {
		font-size: 1.875rem;
	}
}

/* ================= Section header ================= */
/* ---------- Section header group ---------- */
.is-style-section-header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}

.is-style-section-header .is-style-lede {
	margin-top: var(--wp--preset--spacing--xs);
}

.is-style-section-header.has-text-align-center,
.is-style-section-header.is-centered {
	text-align: center;
	align-items: center;
}

.is-style-section-header.has-text-align-center .is-style-lede,
.is-style-section-header.is-centered .is-style-lede {
	margin-inline: auto;
}

/* Split: title block left, lede right (products section) */
.is-style-section-header.is-split {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
}

.is-style-section-header.is-split > .is-style-lede {
	max-width: 28rem;
	margin: 0;
}

@media (max-width: 767px) {
	.is-style-section-header.is-split {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Section header with trailing element and bottom rule (testimonials) */
.is-style-section-header.has-divider {
	padding-bottom: var(--wp--preset--spacing--lg);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Card headings may link to their page */
:is(.is-style-card, .is-style-card-product) :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

:is(.is-style-card, .is-style-card-product) :is(h2, h3, h4) a:hover {
	color: var(--accent, var(--wp--preset--color--tertiary));
}

/* core/read-more inside a card footer = text + arrow link */
.is-card-footer .wp-block-read-more {
	color: var(--accent, var(--wp--preset--color--primary));
	font-size: var(--wp--preset--font-size--title-md);
	font-weight: 700;
	text-decoration: none;
}

.is-card-footer .wp-block-read-more:hover {
	color: var(--wp--preset--color--tertiary);
}