/* 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;
}
.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. */