/**
 * Frontend styles for the additional price layouts (plans, items, bundles, compact).
 *
 * Everything that sits on the card surface follows the theme design tokens, so
 * it adapts to the active color scheme in light and dark mode. The four accents
 * are mapped onto the shared content text palette (--elmur-text-*).
 *
 * The card title band is the exception: it keeps the light tint and the accent
 * color of the approved layout draft in every scheme (--band-tint / --band), so
 * the package colors read the same everywhere. Because that band is always
 * light, anything placed on it uses --band, never --item.
 */

/* ==========================================================================
   Section
   ========================================================================== */

.elmur-layout {
	--accent: var(--elmur-text-blue, #1565c0);
	--surface: var(--color-bg-alt, #f8fafc);
	--line: var(--color-border, #e2e8f0);

	/* Fixed title band palette from the layout draft. */
	--band: #3b82f6;
	--band-tint: #eff6ff;
	--band-line: #e2e8f0;

	/* Card shape from the layout draft. */
	--card-radius: 12px;
	--card-radius-sm: 8px;
	--card-shadow-flat: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.02);

	color: var(--color-text, #1a1a1a);
	font-family: inherit;
	margin: 3rem auto;
	max-width: var(--container-max, 80rem);
}

.elmur-layout--green { --accent: var(--elmur-text-green, #2e7d32); --band: #10b981; --band-tint: #ecfdf5; }
.elmur-layout--orange { --accent: var(--elmur-text-orange, #e65100); --band: #f59e0b; --band-tint: #fffbeb; }
.elmur-layout--purple { --accent: var(--elmur-text-purple, #6a1b9a); --band: #8b5cf6; --band-tint: #f5f3ff; }

.elmur-layout * { box-sizing: border-box; }

.elmur-layout .elmur-layout__heading {
	color: var(--color-text, #1a1a1a);
	margin: 0 0 var(--space-sm, 0.5rem);
	text-align: center;
}

.elmur-layout .elmur-layout__subheading {
	color: var(--color-text-muted, #6b6b6b);
	margin: 0 auto var(--space-lg, 2rem);
	max-width: 62ch;
	text-align: center;
}

/* Included-features notice above the package cards. */
.elmur-layout .elmur-layout__intro {
	margin: 0 0 var(--space-lg, 2rem);
	text-align: center;
}

.elmur-layout .elmur-layout__intro-inner {
	align-items: center;
	border-radius: 50px;
	color: var(--color-text, #1a1a1a);
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 500;
	gap: 0.625rem;
	max-width: 70ch;
	text-align: left;
}

/* Frame and fill are switched separately, so the notice can be a pill, an
   outline, a tinted strip or a plain line. Padding follows the shape. */
.elmur-layout--intro-border .elmur-layout__intro-inner { border: 1px solid var(--line); }
.elmur-layout--intro-fill .elmur-layout__intro-inner { background: var(--surface); }

.elmur-layout--intro-border .elmur-layout__intro-inner,
.elmur-layout--intro-fill .elmur-layout__intro-inner { padding: 0.625rem 1.25rem; }

.elmur-layout .elmur-layout__intro-inner .elmur-layout-icon {
	color: var(--elmur-text-green, #10b981);
	flex: none;
	font-size: 1.15rem;
}

.elmur-layout .elmur-layout__grid {
	align-items: stretch;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.elmur-layout .elmur-layout__info {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-md, 0.5rem);
	color: var(--color-text, #1a1a1a);
	display: flex;
	font-size: 0.9rem;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
}

.elmur-layout .elmur-layout__info .elmur-layout-icon {
	color: var(--accent);
	flex: none;
	font-size: 1.25rem;
}

.elmur-layout .elmur-layout__footer {
	color: var(--color-text-muted, #6b6b6b);
	font-size: 0.85rem;
	margin-top: 1rem;
	text-align: center;
}

/* ==========================================================================
   Card - shared base
   ========================================================================== */

.elmur-layout .elmur-layout-card {
	--item: var(--accent);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow-flat);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: border-color var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease), transform var(--transition-base, 250ms ease);
}

/* A custom accent arrives as --item and --band on the card; the tint of the
   title band is mixed from it, so only one value has to be chosen. */
.elmur-layout .elmur-layout-card--custom { --band-tint: color-mix(in srgb, var(--band) 12%, #ffffff); }

.elmur-layout .elmur-layout-card--green { --item: var(--elmur-text-green, #2e7d32); --band: #10b981; --band-tint: #ecfdf5; }
.elmur-layout .elmur-layout-card--orange { --item: var(--elmur-text-orange, #e65100); --band: #f59e0b; --band-tint: #fffbeb; }
.elmur-layout .elmur-layout-card--purple { --item: var(--elmur-text-purple, #6a1b9a); --band: #8b5cf6; --band-tint: #f5f3ff; }

.elmur-layout .elmur-layout-card:hover {
	border-color: var(--item);
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
	transform: translateY(-0.25rem);
}

.elmur-layout .elmur-layout-card--featured {
	border-color: var(--item);
	box-shadow: 0 0.625rem 1.875rem -0.3125rem color-mix(in srgb, var(--item) 15%, transparent);
}

/* Card title band: fixed light tint and accent from the layout draft. The band
   is its own element so the badge can sit on it and so no inherited heading
   margin can push it away from the card edge. */
.elmur-layout .elmur-layout-card__head {
	--head-top: 1.5rem;
	--head-bottom: 1.5rem;
	background: var(--band-tint);
	border-bottom: 1px solid var(--band-line);
	margin: 0;
	padding: var(--head-top) 1.125rem var(--head-bottom);
	position: relative;
	text-align: center;
}

.elmur-layout .elmur-layout-card__title {
	color: var(--tone, var(--band));
	font-size: calc(1.4rem * var(--scale, 1));
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	padding: 0;
}

/* A badge anywhere in the list raises every band by the same amount, so the
   cards stay level. Only the badged card shifts that room to the top to clear
   the tab; the others keep their title centred in the band. */
.elmur-layout--has-badge .elmur-layout-card__head {
	--head-top: 2rem;
	--head-bottom: 2rem;
}

.elmur-layout--has-badge .elmur-layout-card--badged .elmur-layout-card__head {
	--head-top: 3rem;
	--head-bottom: 1rem;
}

.elmur-layout .elmur-layout-card__badge {
	background: var(--band);
	border-radius: 0 0 var(--card-radius-sm) var(--card-radius-sm);
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.5px;
	line-height: 1.35;
	padding: 0.125rem 0.7rem;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	transform: translateX(-50%);
}

/* Plain block instead of a flex column: the children are centred by the text
   alignment alone, which no inherited flex property can undo. */
.elmur-layout .elmur-layout-card__price {
	display: block;
	padding: 1.4rem 1rem 0.5rem;
	text-align: center;
}

.elmur-layout .elmur-layout-card__price strong {
	color: var(--tone, var(--color-text, #1a1a1a));
	display: block;
	font-size: calc(2rem * var(--scale, 1));
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 0.2rem;
	text-wrap: balance;
}

/* A text price such as "Individual quote" is set smaller, so that it wraps
   inside the reserved price area instead of pushing the divider down. */
.elmur-layout .elmur-layout-card__price--text strong { font-size: calc(1.4rem * var(--scale, 1)); }

/* Fixed height for the price area of the package cards, so the divider above
   the feature rows sits on one line across all cards of a list. */
.elmur-layout--plans .elmur-layout-card__price { min-height: 6.75rem; }

.elmur-layout .elmur-layout-card__price span {
	color: var(--tone, var(--color-text-muted, #6b6b6b));
	display: block;
	font-size: calc(0.85rem * var(--scale, 1));
}

/* Feature rows: icon left, label above value. */
.elmur-layout .elmur-layout-card ul {
	border-top: 1px solid var(--line);
	display: grid;
	gap: 0.9rem;
	list-style: none;
	margin: 0 1.25rem;
	padding: 1.1rem 0 1.4rem;
}

.elmur-layout .elmur-layout-card li {
	align-items: center;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: auto 1fr;
}

.elmur-layout .elmur-layout-card li > .elmur-layout-icon {
	color: var(--item);
	font-size: 1.3rem;
}

.elmur-layout .elmur-layout-card__row {
	display: grid;
	gap: 0.1rem;
}

.elmur-layout .elmur-layout-card__row-label {
	color: var(--tone, var(--color-text, #1a1a1a));
	font-size: calc(0.95rem * var(--scale, 1));
	font-weight: 600;
}

.elmur-layout .elmur-layout-card__row-value {
	color: var(--tone, var(--color-text-muted, #6b6b6b));
	font-size: calc(0.9rem * var(--scale, 1));
	font-weight: 500;
}

.elmur-layout .elmur-layout-card__note {
	color: var(--tone, var(--color-text-muted, #6b6b6b));
	font-size: calc(0.85rem * var(--scale, 1));
	line-height: 1.55;
	margin: 0;
}

.elmur-layout .elmur-layout-card > a {
	background: var(--surface);
	border: 1px solid var(--item);
	border-radius: var(--radius-md, 0.5rem);
	color: var(--item);
	font-weight: 600;
	margin: auto 1.25rem 1.4rem;
	padding: 0.7rem;
	text-align: center;
	text-decoration: none;
	transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.elmur-layout .elmur-layout-card > a:hover,
.elmur-layout .elmur-layout-card > a:focus-visible {
	background: var(--item);
	color: var(--color-bg, #ffffff);
}

/* ==========================================================================
   Bundle cards - comparison metrics
   ========================================================================== */

.elmur-layout .elmur-layout-card__metrics {
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
}

.elmur-layout .elmur-layout-card__metric {
	padding: 0.85rem 0.4rem;
	text-align: center;
}

.elmur-layout .elmur-layout-card__metric + .elmur-layout-card__metric { border-left: 1px solid var(--line); }

.elmur-layout .elmur-layout-card__metric dt {
	color: var(--color-text-muted, #6b6b6b);
	font-size: 0.72rem;
}

.elmur-layout .elmur-layout-card__metric dd {
	color: var(--color-text, #1a1a1a);
	font-weight: 700;
	margin: 0.3rem 0 0;
}

.elmur-layout .elmur-layout-card__metric--package dd { font-size: 1.1rem; }
.elmur-layout .elmur-layout-card__metric--savings dd { color: var(--elmur-text-green, #2e7d32); }

.elmur-layout--bundles .elmur-layout-card ul { border-top: 0; }

/* The bundle title band is a touch smaller than the package one. */
.elmur-layout--bundles .elmur-layout-card__head { --head-top: 1.125rem; --head-bottom: 1.125rem; }
.elmur-layout--bundles .elmur-layout-card__title { font-size: 1.2rem; }

/* ==========================================================================
   Item and compact cards - icon on top, centered content
   ========================================================================== */

.elmur-layout--items .elmur-layout__grid,
.elmur-layout--compact .elmur-layout__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
}

.elmur-layout--items .elmur-layout-card,
.elmur-layout--compact .elmur-layout-card {
	padding: 1.5rem 1.1rem;
	text-align: center;
}

.elmur-layout--items .elmur-layout-card > .elmur-layout-icon,
.elmur-layout--compact .elmur-layout-card > .elmur-layout-icon {
	color: var(--item);
	display: block;
	font-size: 2.1rem;
	margin: 0 auto;
}

.elmur-layout--items .elmur-layout-card__title,
.elmur-layout--compact .elmur-layout-card__title { padding: 0.9rem 0 0; }

.elmur-layout--items .elmur-layout-card__title {
	color: var(--tone, var(--color-text, #1a1a1a));
	font-size: calc(1.05rem * var(--scale, 1));
}

.elmur-layout--items .elmur-layout-card__price { padding: 0.8rem 0 0; }

.elmur-layout--items .elmur-layout-card__price strong {
	font-size: calc(1.5rem * var(--scale, 1));
	margin-bottom: 0.15rem;
}

/* Details stay left-aligned so multi-line lists stay readable. */
.elmur-layout--items .elmur-layout-card__note {
	border-top: 1px solid var(--line);
	margin-top: 1rem;
	padding-top: 0.9rem;
	text-align: left;
}

.elmur-layout--compact .elmur-layout-card__title {
	color: var(--tone, var(--item));
	font-size: calc(1.5rem * var(--scale, 1));
	font-weight: 800;
}

.elmur-layout--compact .elmur-layout-card__note { margin-top: 0.6rem; }

/* ==========================================================================
   Icons
   ========================================================================== */

.elmur-layout-icon {
	fill: none;
	height: 1em;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 1em;
}

@media (max-width: 35rem) {
	.elmur-layout { margin: 2rem auto; }
	.elmur-layout__grid { gap: 1rem; }
}

/* ==========================================================================
   Per card formatting (alignment, color, size for title, price and text)
   ========================================================================== */

/* Palette of the card surface; the light title band needs its own values. */
.elmur-layout .elmur-layout-card {
	--c-accent: var(--item);
	--c-blue: var(--elmur-text-blue, #1565c0);
	--c-green: var(--elmur-text-green, #2e7d32);
	--c-orange: var(--elmur-text-orange, #e65100);
	--c-purple: var(--elmur-text-purple, #6a1b9a);
	--c-neutral: var(--color-text-muted, #6b6b6b);
}

.elmur-layout .elmur-layout-card__head {
	--c-accent: var(--band);
	--c-blue: #3b82f6;
	--c-green: #10b981;
	--c-orange: #f59e0b;
	--c-purple: #8b5cf6;
	--c-neutral: #64748b;
}

.elmur-layout .is-align-left { text-align: left; }
.elmur-layout .is-align-center { text-align: center; }
.elmur-layout .is-align-right { text-align: right; }

/* The modifier sets a tone that the element and its children pick up, so a
   more specific color rule further down cannot override the choice. */
.elmur-layout .is-color-accent { --tone: var(--c-accent); }
.elmur-layout .is-color-blue { --tone: var(--c-blue); }
.elmur-layout .is-color-green { --tone: var(--c-green); }
.elmur-layout .is-color-orange { --tone: var(--c-orange); }
.elmur-layout .is-color-purple { --tone: var(--c-purple); }
.elmur-layout .is-color-neutral { --tone: var(--c-neutral); }

/* Sizes scale the element, so the proportions inside it stay intact. */
.elmur-layout .is-size-xs { --scale: 0.75; }
.elmur-layout .is-size-s { --scale: 0.875; }
.elmur-layout .is-size-l { --scale: 1.15; }
.elmur-layout .is-size-xl { --scale: 1.35; }