/* FEATURE ROWS — .db-rows
   Text beside an image, one row per offering. The most reused section on the
   site: 13 pages across all four networks.

   ⚠️ NOT "alternating". The name and the swapping sides were an invention of the
   WP build — every Figma frame puts the image on the RIGHT in every row
   [368:877 landing, 368:1238, 368:2725 catering-service], and the prototype does
   too. Its `.lp-feature:nth-child(odd)` order rules look like alternation but are
   a no-op: the dividers are siblings in the same list, so a feature is always an
   odd child, and the rule only ever restates DOM order. `--reverse` is kept below
   as a supported option, but no design uses it and no page carries it.

   THE OPTIONS, all independent:
     .db-rows__title       section heading above the list  (landing only)
     a CTA inside __text   gold button under the copy      (catering-service only)
     .db-surface--sand
       + .db-rule--none    sand ground, no closing rule    (event-service)
     .db-row--reverse      image on the left               (available, unused)

   Everything else — 440px row, bottom-aligned text, 477:763 split, 120px gutter,
   1px divider between rows — is constant across every frame. */
/* The flex container must NOT be the group WP marked is-layout-constrained:
   constrained layout puts `margin-inline: auto` on every child, which cancels
   flex stretch and collapses each row to its content width (470px instead of
   full). The outer group keeps the padding + max-width; an inner group does
   the stacking. */
.db-rows { padding-block: 40px; border-bottom: 1px solid var(--line); }

/* Section heading. The rows pattern has no title slot — the prototype's
   `.lp-features__title` sits above the list on the Messe & Seminar section
   [Figma 368:877/878, 80px/88px with 60px below]. Same scale as the other
   section titles. */
/* Centred [368:878]. The margin is written against `.db-rows` as well as the
   element's own class because a bare `.db-rows__title` measured 0 — see the note
   on the desktop rule. */
.db-rows .db-rows__title {
	font-size: clamp(2rem, 9vw, 5rem); line-height: 1.1;
	text-align: center; margin-bottom: 32px;
}
.db-rows .db-rows__list { display: flex; flex-direction: column; gap: 32px; }

/* Figma draws a real 1px divider ELEMENT between rows [368:881, 368:883], with
   the list's own gap on both sides of it. Reproduced as a border on the row
   instead, so 13 pages do not need new markup: gap + 1px + padding reproduces the
   same rhythm, and no divider hangs below the last row. */
.db-rows .db-rows__list > .db-row + .db-row {
	border-top: 1px solid var(--line);
	padding-top: 32px;
}
.db-row.wp-block-columns { display: flex; flex-direction: column; gap: 24px; margin-block: 0; }
.db-row__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.db-row__text h3 { font-size: clamp(1.125rem, 5vw, 2rem); line-height: 1.25; }
.db-row__text p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.db-row__media img { width: 100%; height: 280px; object-fit: cover; transition: transform .6s ease; }
.db-row__media { overflow: hidden; }
.db-row__media:hover img { transform: scale(1.04); }
@media (min-width: 861px) {
	.db-rows { padding-block: 120px; }
	.db-rows .db-rows__title { margin-bottom: 60px; }
	.db-rows .db-rows__list { gap: 40px; }
	.db-rows .db-rows__list > .db-row + .db-row { padding-top: 40px; }
	/* 9vw, not 8: the design's gutter is a flat 120 at 1440 and 8vw tops out at
	   115.2 there, so the max was never reached at the width the design specifies.
	   9vw hits 120 from 1333px up and still shrinks below that. */
	.db-row.wp-block-columns { flex-direction: row; align-items: stretch; gap: clamp(40px, 9vw, 120px); }
	.db-row--reverse.wp-block-columns { flex-direction: row-reverse; }
	/* Core ships, inside its own media query:
	     .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
	       { flex-basis: 0; flex-grow: 1 }                            (0,3,0)
	   which forces an even split. Two theme classes (0,2,0) still lose, so this
	   mirrors core's shape to reach (0,4,0). The prototype is 42/56. */
	/* 477 : 763 is the design's split [text col vs the fixed 763 media, 368:880].
	   Expressed as flex-grow ratios against a 0 basis so the two columns divide
	   whatever is left after the gutter in exactly that proportion at any width —
	   percentages would have to be restated every time the gutter changes. */
	.wp-block-columns.db-row > .wp-block-column.db-row__text {
		flex: 477 1 0; justify-content: flex-end; gap: 16px;
	}
	.wp-block-columns.db-row > .wp-block-column.db-row__media { flex: 763 1 0; }
	.db-row__media img { height: 440px; }
}
@media (prefers-reduced-motion: reduce) { .db-row__media:hover img { transform: none; } }