/* ── OFFER CARD KOMPONENTE ──────────────────────────────────────── */

/*
 * Angebots-Vergleich: zwei gleichwertige Kacheln nebeneinander auf hellem
 * Sektions-Hintergrund (Blöcke acf/offer-compare + acf/offer-card).
 *
 * HTML-Struktur:
 *   <section class="offer-section section-bg-grey section-padding">
 *     <div class="container-wide">
 *       <div class="offer-layout">
 *         <div class="offer-intro">…Heading + Text…</div>
 *         <div class="offer-grid">
 *           <div class="offer-card offer-card--highlight">
 *             <p class="offer-card__label">…</p>
 *             <h3 class="offer-card__title">…</h3>
 *             <p class="offer-card__lead">…</p>
 *             <ul class="offer-card__list">…</ul>
 *             <p class="offer-card__note">…</p>
 *           </div>
 *           <div class="offer-card offer-card--default">…</div>
 *         </div>
 *       </div>
 *     </div>
 *   </section>
 *
 * Kein JS – reine Layout-Komponente.
 */

/* ── Layout ────────────────────────────────────────────────────── */

.offer-layout {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.offer-intro {
	max-width: 800px;
}

.offer-intro > *:last-child {
	margin-bottom: 0;
}

/*
 * auto-fit statt fester 2 Spalten: die Vorlage sieht zwei Kacheln vor,
 * drei bleiben dadurch ohne CSS-Änderung möglich. minmax mit 320px
 * bricht auf schmalen Containern automatisch einspaltig um.
 */
.offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 32px;
	align-items: stretch;
}

/* ── Kachel ────────────────────────────────────────────────────── */

.offer-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px;
	border: 1px solid var(--wp--preset--color--primary, #7d272d);
	background-color: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--font, #5b5c63);
	height: 100%;
}

/* Hervorgehobene Variante: heller Primary-Grund (wie section-bg-grey,
   dadurch braucht die Kachel auf weissem Grund keine Sonderfarbe) */
.offer-card--highlight {
	background-color: var(--wp--preset--color--primary-lightest, #f9f4f5);
}

/* ── Label-Badge ───────────────────────────────────────────────── */

.offer-card__label {
	align-self: flex-start;
	margin: 0;
	max-width: none;
	padding: 10px 32px;
	font-size: var(--wp--preset--font-size--small, 16px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white, #fff);
	background-color: var(--wp--preset--color--grey-75, #b7b8c0);
}

.offer-card--highlight .offer-card__label {
	background-color: var(--wp--preset--color--primary, #7d272d);
}

/* ── Überschrift ───────────────────────────────────────────────── */

.offer-card__title {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--primary, #7d272d);
}

/* ── Kurzbeschreibung ──────────────────────────────────────────── */

.offer-card__lead {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--normal, 19px);
	line-height: 1.5;
}

.offer-card__lead strong {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #7d272d);
}

/* ── Aufzählung ────────────────────────────────────────────────── */

/*
 * Eigene Bullets, damit Farbe und Abstand dem CI folgen; der native
 * list-style wird dafür entfernt.
 */
.offer-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.offer-card__list li {
	position: relative;
	padding-left: 28px;
	font-size: var(--wp--preset--font-size--normal, 19px);
	line-height: 1.45;
}

.offer-card__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary, #7d272d);
}

.offer-card--default .offer-card__list li::before {
	background-color: var(--wp--preset--color--grey-75, #b7b8c0);
}

/* ── Fussnote ──────────────────────────────────────────────────── */

/*
 * margin-top:auto drückt die Fussnote an den Kachelfuss, damit die
 * Kosten-Zeile beider Kacheln trotz unterschiedlich langer Listen auf
 * einer Linie liegt. padding-top + border trennen sie vom Listenblock.
 */
.offer-card__note {
	margin: auto 0 0;
	max-width: none;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--grey-50, #d6d7db);
	font-size: var(--wp--preset--font-size--normal, 19px);
	line-height: 1.45;
}

.offer-card__note strong {
	font-weight: 600;
	color: var(--wp--preset--color--primary, #7d272d);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.offer-layout {
		gap: 32px;
	}

	.offer-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.offer-card {
		padding: 24px;
		gap: 20px;
	}

	.offer-card__label {
		padding: 8px 24px;
	}
}

/* ── core/group-Margins neutralisieren ──────────────────────────
 *
 * .offer-layout, .offer-intro, .offer-grid und die Kachel selbst sind im
 * Block core/group mit .is-layout-flow. Dessen globale Regel
 * ":root :where(.is-layout-flow) > *" gibt jedem Kind ausser dem ersten
 * ein margin-block-start (spacing--40, bis 16px) – die Abstaende kommen
 * hier aus "gap", sonst waeren die Kacheln gegeneinander versetzt.
 *
 * .offer-card__note ist ausgenommen: dessen margin-top:auto drueckt die
 * Fussnote an den Kachelfuss.
 */
.offer-layout > *,
.offer-intro > *,
.offer-grid > *,
.offer-card > *:not(.offer-card__note) {
	margin-block: 0;
}

/* ── ACF-InnerBlocks-Wrapper (Block acf/offer-compare) ──────────
 *
 * ACF rendert um die InnerBlocks ein <div class="acf-innerblocks-
 * container"> – auch im Frontend. Ohne display:contents waeren Intro und
 * Grid keine Flex-Kinder von .offer-layout, die Kacheln keine
 * Grid-Kinder von .offer-grid, und margin-top:auto der Fussnote griffe
 * nicht.
 */
.offer-layout > .acf-innerblocks-container,
.offer-grid > .acf-innerblocks-container,
.offer-intro > .acf-innerblocks-container,
.offer-card > .acf-innerblocks-container {
	display: contents;
}