/* CARD GRID — .db-cardgrid
   Section head (title + intro) over image cards: three across on desktop, a
   scroll-snap rail on mobile.

   Rebuilt against Figma 2026-08-08, §9.39. All four equipment-rental sections
   are one component [368:1791 / 1814 / 1845 / 1868, mobile 368:6096]:

     section  column, padding 120/40 desktop · 40/16 mobile, gap 48 · 24,
              bottom stroke #BFB8B1
     head     column, gap 24 · 12, max 882; title 60/68 · 24/32 uppercase;
              copy 16/28, max 793
     row      gap 16 at both sizes — three across on desktop, a 300px rail on
              mobile [368:6101 is a fixed 300 in a 360 frame, so the track
              overflows by design]
     card     column, gap 24; image fill × 450 desktop · 300 × 300 mobile;
              body padding-right 68 · 24, gap 12 · 8; h3 24/32 · 18/28;
              copy 16/28 rgba(0,0,0,.6)

   What was here before had no head element at all, a 48px column gap where the
   design has 16, and square images instead of the 450 band — so the four design
   sections had been flattened into two headless six-card grids. */
.db-cardgrid { background: var(--sand); }

.db-cardgrid .db-cardgrid__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 40px;
}

/* ---- head ---------------------------------------------------------------- */
.db-cardgrid__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 882px;
}

/* 60/68 desktop. The mobile 24px is pinned with the other section headings in
   global.css §9.33 rather than clamped here, so all of them stay in one place. */
.db-cardgrid__head h2 { line-height: 1.1333; }

.db-cardgrid__head p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
	max-width: 793px;
}

/* ---- the rail / grid ----------------------------------------------------- */
/* Mobile is a rail, not a stack: the cards are a fixed 300 in a 360 frame, so
   the track is meant to run off the right edge. Same construction as
   .db-team--rail — and the same trap: `flex-direction: row` has to be stated,
   because the base is a column and a horizontal scroll-snap on a column
   container silently does nothing (§9.32). */
.db-cardgrid .db-cardgrid__grid {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-block: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* bleed to the screen edge, cutting the next card off at the viewport rather
	   than at the page column */
	margin-right: calc(-1 * var(--wp--style--root--padding-right));
	padding-right: var(--wp--style--root--padding-right);
}
.db-cardgrid .db-cardgrid__grid::-webkit-scrollbar { display: none; }

.db-cardgrid__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 0 0 300px;
	scroll-snap-align: start;
}
.db-cardgrid__card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.db-cardgrid__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 24px;
}
.db-cardgrid__card h3 { font-size: 1.125rem; line-height: 1.5556; }
.db-cardgrid__card p {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
}

@media (min-width: 861px) {
	.db-cardgrid .db-cardgrid__inner { gap: 48px; padding-block: 120px; }

	.db-cardgrid__head { gap: 24px; }
	.db-cardgrid__head h2 { font-size: 3.75rem; }

	/* three across, and the rail's breakout and scrolling are undone */
	.db-cardgrid .db-cardgrid__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		/* 48 between ROWS, 16 between columns [368:2100 stacks three row frames
		   48 apart; 368:1795 is the row itself at gap 16]. Only bites where a
		   section has more than three cards, so equipment's four single-row
		   sections are unaffected and drinks' nine cards get the right rhythm. */
		gap: 48px 16px;
		overflow-x: visible;
		margin-right: 0;
		padding-right: 0;
	}

	.db-cardgrid__card { flex: 1 1 auto; }
	/* 450 fixed, not a ratio — the design bands every card to the same height
	   regardless of column width [368:1798 is 442.67 × 450] */
	.db-cardgrid__card img { aspect-ratio: auto; height: 450px; }

	.db-cardgrid__body { gap: 12px; padding-right: 68px; }
	.db-cardgrid__card h3 { font-size: 1.5rem; line-height: 1.3333; }
}

/* --- variant: joined list  (.db-cardgrid--list) ---------------------------
   /getraenke-catering-muenchen/ [Figma 368:2100, mobile 368:4900].

   Justified from the frames, not the port — two real differences from the
   equipment treatment, and they come from the same place:

   1. NO TOP PADDING. The intro band directly above it is the same sand block and
      already supplies the 120 [2096 padding-bottom 120, 2100 padding-top 0]. With
      the base's own 120 the gap measured 240 against the design's 120.
   2. MOBILE STACKS FULL WIDTH instead of railing. The equipment frame has 300px
      cards in a 360 viewport, so its track is meant to overflow [368:6101]; this
      page's mobile card column is 328 wide at gap 40 [368:4904] — the full content
      width, stacked. Opposite behaviour, stated per frame.

   On mobile the design merges the band and the cards into ONE frame [368:4900,
   padding 40/16, gap 32], which is the same rendered result as a flush-top
   section following the band. */
.db-cardgrid--list .db-cardgrid__inner { padding-top: 0; }

/* Mobile only, and the bound matters: these sit after the 861px block and match
   its specificity, so unscoped they also overrode the desktop grid — the column
   gap came out 40 instead of 16 and `flex-direction` leaked onto a grid
   container. Caught by measuring desktop after a mobile-only change, which is
   the pairing that keeps catching things (§9.32). */
@media (max-width: 860.98px) {
	.db-cardgrid--list .db-cardgrid__grid {
		flex-direction: column;
		gap: 40px;
		overflow-x: visible;
		/* stacked, so no breakout to the screen edge either */
		margin-right: 0;
		padding-right: 0;
	}
	.db-cardgrid--list .db-cardgrid__card { flex: 1 1 auto; }
}

/* --- variant: wine list  (.db-cardgrid--wines) ----------------------------
   /wein-catering-muenchen/'s "Italienische & österreichische Weine"
   [Figma 368:2337, cards 368:2342]. Was built as `db-pricelist`, whose row is
   name/description/price — this is an image card with a price FOOT, which is the
   cardgrid card plus one element. Reusing it rather than minting a section.

   Per-frame differences from the base, all from 368:2341/2342:
     grid   FOUR across at gap 48 (base is three at 16); two rows of four
     card   gap 16 (base 24)
     body   no right padding — the text block is the full 304 card width
     foot   price 24/32 in the display face and NOT uppercase [style_1f5ab582
            carries no textCase], then a muted "|" and "0,75 l" at 16/28

   ⚠️ No mobile frame exists for this page (§6). Mobile is therefore the base
   rail — the site-wide behaviour the client asked for — not the prototype's
   two-column grid. Desktop tightens to 48/24 above 1200, which IS from the
   prototype and has no frame to check against.

   ⚠️ mix-blend-mode: multiply on the image is NOT decoration. wine-1 ships as a
   transparent cut-out; wines 2-8 have a baked-in white backdrop, and multiplying
   against the cream ground drops that white so all eight bottles sit on the same
   surface. Without it seven of them show white boxes. */
.db-cardgrid--wines .db-cardgrid__card { gap: 16px; }
.db-cardgrid--wines .db-cardgrid__body { padding-right: 0; gap: 12px; }

.db-cardgrid--wines .db-cardgrid__card img {
	aspect-ratio: 304 / 450;
	height: auto;
	mix-blend-mode: multiply;
}

/* `: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. This is a
   core/group with flex layout, so it needs the lift or the gap collapses and the
   price reads "19,90 €| 0,75 l" with the separator jammed against the euro sign.
   Reported by the client; same trap as Trap 26 / §9.27. */
:root .db-cardgrid__foot { display: flex; align-items: baseline; gap: 10px; }
.db-cardgrid__foot .db-cardgrid__sep { margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.db-cardgrid__foot .db-cardgrid__price {
	margin: 0;
	font-family: var(--font-display);
	/* not uppercase — the only display-face text on the page that is not */
	text-transform: none;
	font-size: 1.5rem;
	line-height: 1.3333;
	color: var(--ink);
}
.db-cardgrid__foot .db-cardgrid__vol { margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); }

/* No mobile override: the wines inherit the BASE RAIL, like every other card
   section on the site. This was briefly a two-column grid, taken from
   `.wc-wines__grid` — but there is no mobile frame for this page (§6), so the
   prototype was the only source and it disagreed with the rest of the site.
   Client asked for the slider explicitly, and with no frame to contradict them
   consistency wins. Only the aspect-ratio stays wine-specific (304/450 bottles
   rather than the base's square). */

@media (min-width: 861px) {
	.db-cardgrid--wines .db-cardgrid__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 48px;
	}
	.db-cardgrid--wines .db-cardgrid__card img { height: auto; }
}

@media (min-width: 1200px) {
	.db-cardgrid--wines .db-cardgrid__grid { gap: 48px 24px; }
}

/* --- rail arrows on the wine grid ----------------------------------------
   Client: on mobile the horizontal scroll is not discoverable. The arrows are
   the site's existing .db-rail-nav control (carousel.css), wired by rail.js.

   Shown ONLY below 861px: above it the wines are a static three/four-up grid
   with nothing to scroll, and rail.js would render two permanently disabled
   circles — a dead control is worse than none. */
@media (min-width: 861px) {
	/* `.is-ready` in the selector on purpose. carousel.css owns
	   `.db-rail-nav.is-ready { display: flex }` at (0,2,0) and loads AFTER this
	   file in the alphabetical glob, so a bare `.db-cardgrid--wines .db-rail-nav`
	   ties and loses — the arrows showed on desktop as two permanently disabled
	   circles. (0,3,0) settles it. */
	.db-cardgrid--wines .db-rail-nav,
	.db-cardgrid--wines .db-rail-nav.is-ready { display: none; }
}
@media (max-width: 860.98px) {
	.db-cardgrid--wines .db-rail-nav.is-ready { display: flex; justify-content: flex-end; }
}