/* TEAM — .db-team   (about, catering-services, corporate-events, drinks-catering,
   equipment-rental, event-service = 6) */
.db-team { background: var(--sand); }
.db-team .db-team__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
.db-team__title { font-size: clamp(1.75rem, 9vw, 5rem); line-height: 1.1; text-align: center; }
.db-team .db-team__grid { display: flex; flex-direction: column; gap: 40px; }
.db-team__card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.db-team__card img { width: 100%; aspect-ratio: 328 / 455; object-fit: cover; }
.db-team__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.125rem; line-height: 1.4; color: var(--ink); }
.db-team__role { font-size: 16px; color: var(--muted); }
@media (min-width: 861px) {
	.db-team .db-team__inner { padding-block: 120px; gap: 60px; }
	.db-team__title { font-size: 5rem; }
	.db-team .db-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 16px; }
	.db-team__name { font-size: 1.5rem; }
}

/* --- variant: rail → 4-up on cream  (.db-team--rail) ----------------------
   catering-services uses a different team treatment from about: a scroll-snap
   rail on mobile that becomes a FOUR column grid on desktop, on cream rather
   than sand. Found while rebuilding the page from patterns — the single
   grid-on-sand team was not enough. */
.db-team--rail { background: var(--cream); }

/* ⚠️ `flex-direction: row` is the whole point and was MISSING. The base
   `.db-team .db-team__grid` is a column; this rule set display, gap, overflow-x
   and scroll-snap-type but never reset the direction, so the cards inherited
   `column` and stacked — a horizontal scroll-snap on a column container does
   exactly nothing. It looked like a deliberate vertical list, and measured as a
   2581px-tall section that could not scroll. Reported by the client, not by me:
   I had verified this section at 1440 only, where the desktop grid rule hides
   the bug entirely.

   Values are the mobile component's [368:6010 / rail 368:6012]: 300px cards,
   10px apart. */
.db-team--rail .db-team__grid {
	display: flex;
	flex-direction: row;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* bleeds to the screen edge like the other rails — the design cuts the next
	   card off at the viewport, not at the page column */
	margin-right: calc(-1 * var(--wp--style--root--padding-right));
	padding-right: var(--wp--style--root--padding-right);
}
.db-team--rail .db-team__grid::-webkit-scrollbar { display: none; }

/* 300 wide; media and text 20px apart, name and role only 2px [368:6013/6016].
   The card is a flat column of img + name + role, so the two different gaps are
   expressed as a 2px gap plus a margin under the image. */
.db-team--rail .db-team__card { flex: 0 0 300px; scroll-snap-align: start; gap: 2px; }
.db-team--rail .db-team__card img { aspect-ratio: 300 / 416; margin-bottom: 18px; }
/* No `text-align: left` here any more. Every Figma frame carrying this section
   centres the title at 80/88 — event-service 368:1686, catering-service 368:2870,
   getränke 368:2232, event-ausstattung 368:1998 — and the base already says
   5rem/centre. The left-align came from the prototype's .es-team/.er-team, which
   Figma contradicts. See the removal note below. */
@media (min-width: 861px) {
	/* desktop is a plain 4-up grid; the rail's breakout and card spacing are
	   undone here rather than left to leak into it */
	.db-team--rail .db-team__grid {
		display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; overflow: visible;
		margin-right: 0; padding-right: 0;
	}
	.db-team--rail .db-team__card { flex: none; gap: 8px; }
	.db-team--rail .db-team__card img { aspect-ratio: 328 / 468; margin-bottom: 16px; }
}

/* --- per-instance heading scale and alignment -----------------------------
   Six instances, four treatments. The base is .ab-team (5rem, centred) and
   --rail left-aligns, which covers .es/.er/.cs — the other two need re-centring
   and two want a smaller scale:

     ab-team  5rem   centred   base
     ce-team  5rem   centred   --rail --center
     cs-team  5rem   left      --rail
     es-team  4.5rem left      --rail --title-45
     er-team  4.5rem left      --rail --title-45
     dc-team  2.5rem centred   --rail --center --title-25
*/
/* --- REMOVED: --center, --title-45, --title-25  (2026-08-08, §9.40) --------
   The inventory recorded a "per-instance spread" of team titles: 5rem centred,
   5rem left, 4.5rem left, 2.5rem centred. Every one of those readings came from
   the prototype. Figma has ONE treatment — 80/88 uppercase, CENTRED — in all four
   frames checked (368:1686, 368:2870, 368:2232, 368:1998), which is exactly what
   the base rule above already produced.

   So `--center` was re-centring what should never have been un-centred, and
   `--title-45` / `--title-25` were shrinking a title the design does not shrink.
   Third variant set removed for this reason (§9.36 --cta, §9.38 service-cols,
   this). Mobile stays 24px via the shared heading group in global.css §9.33. */