/* SERVICE COLUMNS — .db-service-cols  (catering-services, drinks-catering,
   event-service = 3)  "Da Baffo Service": head band + ruled equal columns.

   ONE variant for all three. Read against every frame that contains it —
   catering-service 368:2834, event-service 368:1650, getränke 368:2175 — and
   they are identical, value for value:

     head  row, padding 60/40 (16 on mobile [368:4965]), justifyContent center,
           1px #B5AEA6 bottom stroke, title 80/88 CENTERED
     grid  row, padding 60/40/120, gap 48, height 480, 1px #B5AEA6 dividers

   The only per-instance difference is the surface: sand on two, cream on
   getränke [368:2176 fill #EEE8E2] — which is `db-surface--cream`, not a
   variant of this section. The content is the same four columns on all three,
   in the prototype too.

   Three variants (--spaced, --center, --title-25) used to live here, each read
   off prototype drift that Figma contradicts. Removed 2026-08-08, §9.38. */
.db-service-cols { background: var(--sand); }
/* The head band's rule is FULL-BLEED [368:2835 — a stretched frame with a bottom
   stroke, not an inset one]. The block carries align:full for the reason set out
   in §9.23: core's constrained layout insets unaligned children through a
   selector no single-class theme rule can beat. padding-inline puts the title
   back on the page column. */
.db-service-cols__head {
	padding-block: 16px;
	padding-inline: var(--wp--style--root--padding-left);
	border-bottom: 1px solid var(--line2);
}
.db-service-cols__head h2 {
	font-size: clamp(1.5rem, 7vw, 5rem);
	line-height: 1.1;
	/* Centred in all three frames — it was behind `--center`, applied to one
	   instance of the three. */
	text-align: center;
}
/* An intro paragraph under the title. Figma's head holds the title only, but the
   imported pages carry the old sites' intro there (Mittagessen and Kochschule
   startseite, Über uns, Über mich), and it ran the full head band: 1,800px lines
   at 1920. It takes Figma's centred-intro treatment instead [jobs "Wen suchen
   wir?", .db-intro-band--centered]: centred, capped at 840px, 16px under the
   title, in the intro band's muted 16/1.75. RELAUNCH-NOTES §9.94. */
.db-service-cols__head > p {
	max-width: 840px;
	margin: 16px auto 0;
	text-align: center;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
}
.db-service-cols .db-service-cols__grid { display: flex; flex-direction: column; gap: 24px; padding-block: 40px; }
.db-service-cols__col { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.db-service-cols__col:last-child { border-bottom: none; padding-bottom: 0; }
.db-service-cols__col h3 { font-size: 1.5rem; line-height: 1.3; }
.db-service-cols__col p { font-size: 16px; line-height: 1.75; color: var(--muted); }
@media (min-width: 861px) {
	.db-service-cols__head { padding-block: 60px; }
	/* 480px body [368:2837] with the columns distributing their own content —
	   heading at the top, link pinned to the bottom, description between. */
	.db-service-cols .db-service-cols__grid { flex-direction: row; gap: 0; padding-block: 60px 120px; min-height: 480px; }
	.db-service-cols__col { flex: 1; padding: 0 48px; border-bottom: none; border-left: 1px solid var(--line2); justify-content: space-between; }
	.db-service-cols__col:first-child { padding-left: 0; border-left: none; }
	.db-service-cols__col:last-child { padding-right: 0; }
}

/* --- REMOVED: --spaced, --center, --title-25  (2026-08-08) ----------------
   --spaced  set the columns 48px apart with no rule, read from `.es-service`
             and `.dc-service`, whose `__col` carries no border. But those two
             put the rule in a separate `__divider` ELEMENT inside the gap — the
             markup has it even though the column CSS does not, and the first
             pass read only the CSS. Figma agrees with the base: gap 48 with a
             1px divider between columns is 48+1+48 = 97px of separation, which
             is exactly what the base produces with `padding: 0 48px` and
             `border-left`. Same design, and the base already had it right.
   --center  now the base — every frame centres this title.
   --title-25 claimed 2.5rem from `.dc-service__title`'s clamp. Figma 368:2177
             is 80/88, the same as the other two. Prototype drift, not design.

   If a future instance genuinely needs a different gutter or title size, add it
   back with the frame id in the comment. */