/* ============================================================
   BANNER  —  .db-banner  /  :is(.db-banner--split, .db-banner--cta)  /  --tall  /  .db-quote
   Built on core/cover, same approach as the hero.

   Consolidates 12 prototype instances that were named nine
   different things but are only TWO layouts:

     split  .cs-bbq .ce-bbq .dc-wine .lp-bbq .wc-italy
            .er-banner .es-cta .experience                    (8)
     quote  .quote (index) .lp-quote                          (2)

   Two more were miscounted as banners and are NOT handled here:
     .fq-stats   — a number/label grid, its own component
     .dc-thirst  — no image, solid --sand; a section intro, not a banner

   History, because the count kept shrinking and each step was a real bug:
     - first pass: `stacked` (5) + `split` (2). Wrong for 4 of the 5 — those are
       stacked only on mobile and become the split at 861px.
     - 2026-08-08: `--cta` (.es-cta) folded in. It was a variant invented from a
       missing element; Figma 368:1644 is the split minus its copy column (§9.36).
     - 2026-08-08: `.db-experience` (the homepage band) folded in, and --split
       rebuilt on grid because that is the only structure that gets BOTH the
       desktop layout and the mobile order right (§9.37).
   `stacked` no longer exists as a layout. The base .db-banner rules below are
   the shared cover shell, not a variant anything uses on its own.

   Normalised drift:
     overlay      rgba(0,0,0,.5) | .56          -> .56  (.4 for quote)
     min-height   440 | 520 | 560 | 600 | 700   -> 600  (700 --tall, 420/800 quote)
     title clamp  6vw | 8vw, both /4.75rem      -> 8vw/4.75rem
   Deviation stays available through Cover's own controls.
   ============================================================ */

/* ---- shared shell ------------------------------------------------------- */
.db-banner.wp-block-cover,
.db-quote.wp-block-cover {
	padding: 0;
	color: var(--white);

	/* Legible before an editor picks an image — see hero.css. */
	background-color: var(--ink);
}

.db-banner.wp-block-cover > .wp-block-cover__inner-container,
.db-quote.wp-block-cover > .wp-block-cover__inner-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* ---- stacked ------------------------------------------------------------ */
.db-banner.wp-block-cover {
	min-height: 560px;
}

.db-banner.wp-block-cover > .wp-block-cover__inner-container {
	justify-content: center;
	gap: 24px;
	padding-block: 40px;
}

.db-banner__title {
	font-size: clamp(2rem, 8vw, 4.75rem);
	line-height: 1.06;
	overflow-wrap: break-word;
}

.db-banner__text {
	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.9);
}

/* ---- split — ONE layout for all eight instances, homepage included --------
   [Figma: 368:4021 homepage (700 tall), 368:2329 / 368:897 / 368:1644 banners
   (600).] Identical construction in every frame: a 1005-wide panel with the
   title at its top and the actions at its bottom, a 1px rule down its right
   edge, and the body copy bottom-aligned in the remaining 354.

   GRID, NOT CORE/COLUMNS — this is the whole reason `.db-experience` was folded
   in here rather than kept as its own section.

   The authored child order has to be title -> copy -> actions, because that is
   how every mobile frame stacks it [368:5932 and 368:4164: child one is the
   title AND the copy, child two is the button pair]. Desktop then needs the
   actions beside the copy and under the title. core/columns cannot do both: the
   lead column owns the title and the actions, so mobile stacks
   title -> actions -> copy, and once the two sit in separate column wrappers
   `order` cannot reach across to fix it.

   That is not a preference. The columns build shipped the wrong mobile order on
   all seven banners for as long as it existed, and nobody caught it because the
   homepage — the one instance built on grid — was right. See §9.37.

   Grid also lands the rule at exactly 1005 of 1440, where Figma has it; the
   70/30 columns approximation put it 23px left on every banner. */
:is(.db-banner--split, .db-banner--cta).wp-block-cover { min-height: 600px; }

/* Mobile: authored order, top-aligned, 40px in [368:5932 — column, padding
   40/16, gap 24, no justify-content, so content sits at the top]. The base
   .db-banner centres its stack; this variant deliberately does not. */
:is(.db-banner--split, .db-banner--cta).wp-block-cover > .wp-block-cover__inner-container {
	justify-content: flex-start;
	gap: 16px;
	padding-block: 40px;
}

/* Figma groups mobile as [title + copy] at gap 16, then the actions 24 below.
   Flattened to three children there is only one gap, so the extra 8 is stated. */
:is(.db-banner--split, .db-banner--cta) .db-banner__actions { margin-top: 8px; }

/* Mobile title is 24/32 [368:5934 and 368:4166, both display-2xl], not the 32
   the base clamp produces. The rule lives with the other section headings in
   global.css §9.33 rather than here — one place for all of them — and this file
   only restores the desktop size below. §9.33 had excluded .db-banner__title as a
   "statement heading" and flagged it for the designer; those two frames answer it.

/* The CTA is not alone: the design pairs it with a plain underlined link 24px to
   its right [368:898 — button 368:899, link 368:901]. Both live in one
   core/buttons block so the pair stays editable together; theme.json sets
   blockGap to 0, so the 24 has to be stated. */
/* `:root` prefix: theme.json's blockGap of 0 is emitted as
   `:root :where(.is-layout-flex){gap:0}` — (0,1,0) — and printed AFTER the theme
   stylesheet, so a bare class ties and loses on source order (Trap 26, §9.27).
   This is core/buttons, so it carries .is-layout-flex and needs the same lift. */
:root .db-banner__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.db-banner__link { margin: 0; }

/* Light variant of .link-underline — the base is gold on cream, this one is
   white on a photo. Size tracks the button beside it so the pair reads as one
   control group (14px, stepping to 16px with §4a at 861px). */
.link-underline--light { color: var(--white); border-bottom-color: var(--white); }
.link-underline--light:hover,
.link-underline--light:focus-visible {
	color: var(--white);
	border-bottom-color: currentColor;
	box-shadow: 0 1px 0 currentColor;
}

/* --- variant: 700 tall  (.db-banner--tall) --------------------------------
   Only the homepage's instance [368:4021, height 700]; every other frame is 600.
   Mobile is 600 in all of them, so this is desktop-only. Equal specificity to
   the --split min-height above, so it has to come after it — it does. */
@media (min-width: 861px) {
	.db-banner--tall.wp-block-cover { min-height: 700px; }
}

@media (min-width: 861px) {
	:is(.db-banner--split, .db-banner--cta).wp-block-cover > .wp-block-cover__inner-container {
		display: grid;
		/* 925 + 40 + 1 + 40 + 354 = 1360, which is the 1440 frame less its 40px
		   insets — these are the design's own numbers, not a ratio fitted to
		   them. fr rather than px so they stay proportional below 1440. */
		grid-template-columns: 925fr 1px 354fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"title divider text"
			"cta   divider text";
		gap: 48px 40px;
		padding-block: 60px;
	}

	/* The rule runs the full height of the band, so it has to escape the
	   container's own padding-block. */
	:is(.db-banner--split, .db-banner--cta).wp-block-cover > .wp-block-cover__inner-container::before {
		content: "";
		grid-area: divider;
		align-self: stretch;
		margin-block: -60px;
		width: 1px;
		background: rgba(255, 255, 255, 0.37);
	}

	/* 76/84 in the design [368:897]; the shared 1.06 renders 80.6. */
	:is(.db-banner--split, .db-banner--cta) .db-banner__title {
		grid-area: title;
		font-size: clamp(2rem, 8vw, 4.75rem);
		line-height: 1.105;
	}

	:is(.db-banner--split, .db-banner--cta) .db-banner__text { grid-area: text; align-self: end; }

	:is(.db-banner--split, .db-banner--cta) .db-banner__actions {
		grid-area: cta;
		align-self: end;
		justify-self: start;
		margin-top: 0;
	}

	:is(.db-banner--split, .db-banner--cta) .link-underline--light { font-size: 16px; }

	/* The 70 subsite --cta banners have a BARE core/buttons block with no
	   `db-banner__actions` class, so the grid auto-placed it into the first free
	   cell — the copy column, top right — instead of the cta area. Assign it by
	   element as a fallback. Any block that does carry __actions still wins, since
	   that rule comes later. */
	:is(.db-banner--split, .db-banner--cta) > .wp-block-cover__inner-container > .wp-block-buttons {
		grid-area: cta;
		align-self: end;
		justify-self: start;
	}
}

/* ⚠️ --cta IS STILL LIVE ON THE SUBSITES (2026-08-08, §9.52)
   §9.36 deleted this variant after finding it on ONE page of the main site. That
   was only true for blog 1: `db-banner--cta` is on **70 pages** across
   /mittagessen/ (6), /kochschule/ (36) and /torten/ (28), which share this one
   theme. Deleting the rules silently changed all 70.

   Rather than migrate 70 pages of content I have not audited, every --split rule
   above is written as `:is(.db-banner--split, .db-banner--cta)` so the old class
   renders as the split treatment. That works because §9.37 rebuilt --split on a
   FLAT child list (heading, copy, actions) — which is exactly the structure the
   --cta pages already have, and a banner with no copy simply leaves the grid's
   `text` area empty (§9.36).

   `:is()` takes the specificity of its most specific argument — one class — so
   this is a pure alias and changes no cascade.

   The lesson: the theme is network-wide, the content is per-site. Before deleting
   any selector, grep ALL FOUR sites, not the one in front of you.

/* ---- REMOVED: the --cta variant  (2026-08-08) ----------------------------
   `.es-cta` on /event-service-muenchen/ used to be its own variant, on the
   reasoning that "no second column and no divider" made it simpler than a split
   with an empty aside. Reading Figma 368:1644 says otherwise: its single panel
   is 1005 of 1440 (= 70%), padding 60/40, justify-content space-between,
   height 600 — the split variant's LEAD COLUMN, value for value. The aside is
   absent, not different.

   So it was never a second layout, and building it as one gave the page the
   base banner's centred stack and a 16ch title cap instead — visibly different
   alignment and spacing from every other banner on the site, which is what the
   client noticed.

   It is now a split, and since §9.37 rebuilt --split on grid there is nothing
   left for this case to special-case at all: the rule is drawn by the grid's
   ::before, and a section with no copy simply leaves the `text` area empty.
   The `:only-child { border-right: 0 }` rule this note used to describe went
   away with the columns build. */

/* ---- quote ---------------------------------------------------------------
   ONE variant, deliberately. The prototype has two:

     index  .quote     min-height 480 | blockquote align-self: flex-start (TOP)
                       clamp(1.5rem, 5vw, 3.75rem) | 18ch -> 1005px
     landing .lp-quote min-height 420 | no align-self, so it inherits the
                       container's flex-end (BOTTOM)
                       clamp(1.5rem, 6vw, 3.75rem) | 20ch -> 22ch

   …and this file used to carry both, the landing one behind `.db-quote--bottom`.
   Figma contradicts the prototype here and Figma wins: the landing quote
   [368:829 cover / 368:830 text] is width 1005 with textAlignVertical TOP,
   i.e. identical to the index one. The landing mobile frame [368:6238] has no
   quote section at all, so there is no mobile variant to honour either.

   The modifier is removed rather than left dead. Its symptom is worth recording:
   22ch resolves to 933px against Faculty Glyphic at 60px — just narrow enough to
   break the line at "40-" / "JÄHRIGE". See RELAUNCH-NOTES §9.22.

   Rules below are the index behaviour. line-height is 1.15 in both prototype
   variants — it was 1.1 here, which is neither. */
.db-quote.wp-block-cover {
	min-height: 480px;
	color: rgba(255, 255, 255, 0.72);
}

/* Row flex with a bottom default, exactly like .quote__inner — the blockquote
   then opts out via align-self. Keeping the container's own alignment matters:
   a column flex with justify-content cannot be overridden per-child this way. */
.db-quote.wp-block-cover > .wp-block-cover__inner-container {
	flex-direction: row;
	align-items: flex-end;
	padding-block: 40px;
}

.db-quote blockquote,
.db-quote .wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
	align-self: flex-start;
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 5vw, 3.75rem);
	line-height: 1.15;
	max-width: 18ch;
}
.db-quote .wp-block-quote p { margin: 0; font-size: inherit; line-height: inherit; }
.db-quote .wp-block-quote cite { display: none; }

@media (min-width: 861px) {
	.db-quote.wp-block-cover { min-height: 800px; }
	.db-quote.wp-block-cover > .wp-block-cover__inner-container { padding-block: 48px; }
	.db-quote blockquote,
	.db-quote .wp-block-quote { font-size: 3.75rem; max-width: 1005px; }
}