/* ABOUT PAIR — .db-about-pair   (index "ABOUT / TWO BLOCKS" = 1)
   Rebuilt against Figma node 368:3942 and the prototype's .about, which agree.

   Structure, and why it matters — the first pass got all three wrong:
     col 1 : text  -> media
     col 2 : media -> text        (REVERSED — the image leads)
     a discrete 1px rule sits between the columns with 60px either side
     inner spacing is 60 (col) / 32 (text) / 24 (heading, actions),
     not a flat 60 everywhere
     each text block ends in TWO actions: gold button + underlined link

   Figma has the buttons at 16px/24px with 16px 28px padding; the prototype
   leaves them at the .btn default (14px / 12px 20px). Kept the prototype's
   value — it is the audited baseline — but the two sources disagree here. */

.db-about-pair .db-about-pair__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 40px;
}

.db-about-pair__col {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

/* Mobile reads text -> image for BOTH pairs — Figma [368:4095] and [368:4109] are
   identical in that respect. The "image leads" arrangement is desktop-only.
   Because the reversal lives in the MARKUP (col 2 is authored media-then-text so
   the desktop row needs no reordering), mobile has to undo it here. */
.db-about-pair__col--reverse { flex-direction: column-reverse; }

.db-about-pair .db-about-pair__text    { display: flex; flex-direction: column; gap: 24px; }
.db-about-pair .db-about-pair__heading { display: flex; flex-direction: column; gap: 16px; }

.db-about-pair__heading h2 {
	font-size: clamp(1.5rem, 5vw, 3rem);
	/* 24px/32px on mobile [368:4098], 48px/52px on desktop [368:3946] — the ratio
	   differs (1.333 vs 1.083), so it cannot be one value. */
	line-height: 1.3333;
	overflow-wrap: break-word;
}

.db-about-pair__heading p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
}

/* --- logo beside the heading  (.db-about-pair__head) ----------------------
   The wine page puts each producer's logo on the heading's own line, pushed to
   the far edge [Figma 368:2313 / 368:2325 — row, space-between, align-items
   center, logo box 99×52 in both]. Sits as the first child of __heading, so the
   existing 24px column gap separates it from the copy, which is exactly the
   Figma nesting (368:2312 gap 24 = head row + paragraph).

   Presence-based rather than a modifier class: an instance with no __head group
   is untouched, so this costs the other three instances nothing.

   `contain`, not Figma's `cover`. Figma sets FILL/cover on Dal Maso but
   FIT/contain on Bel Colle — the designer dropped the two images differently.
   cover crops a logo, so contain is the only defensible reading and the
   prototype agrees. The assets have very different aspects (200×110, 270×60),
   so Bel Colle lands ~99×22 inside the box while Dal Maso nearly fills it.
   That is what contain does, and what the Figma frame renders. */
.db-about-pair__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* No mobile Figma frame exists for this page (§6), so the row is carried down
   unchanged. min-width:0 is the safety valve: a longer producer name than the
   two real ones would otherwise refuse to wrap and push the logo out. */
.db-about-pair__head h2 { min-width: 0; }

.db-about-pair__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 99px;
	height: 52px;
}

/* The image block wraps the img in a <figure>, so the FIGURE is the img's
   containing block — not the 99×52 box. A figure at auto height makes the img's
   `max-height: 100%` resolve to none, and Dal Maso (200×110, taller in aspect
   than the box) then rendered 99×54, overflowing by 2px. Stretching the figure
   to fill gives the percentage something definite to resolve against. Also
   zeroes core's figure margin, which would otherwise knock the logo off the
   heading's centre line. */
.db-about-pair__logo figure {
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.db-about-pair__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.db-about-pair .db-about-pair__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.db-about-pair__actions .wp-block-buttons { margin: 0; }
.db-about-pair__actions p { margin: 0; }

.db-about-pair__media img { width: 100%; height: 320px; object-fit: cover; }

/* Divider: a real element between the columns, so the 60px gap lands on both
   sides of the rule exactly as in the design. */
.db-about-pair__divider { height: 1px; width: 100%; background: var(--line); }

/* --- variant: ruled top edge  (.db-about-pair--ruled) ---------------------
   The landing page's pair [Figma 368:560] carries a rule along its TOP edge
   (strokeWeight "1px 0px 0px", #B5AEA6 = --line2). The homepage's pair has its
   rule on the bottom instead, so this is per-instance rather than base. */
.db-about-pair--ruled { border-top: 1px solid var(--line2); }

@media (min-width: 861px) {
	.db-about-pair .db-about-pair__inner {
		flex-direction: row;
		align-items: stretch;
		gap: 60px;
		padding-block: 120px;
	}
	.db-about-pair__col { flex: 1; gap: 60px; }
	/* back to authored order: the image leads in column two */
	.db-about-pair__col--reverse { flex-direction: column; }
	.db-about-pair .db-about-pair__text    { gap: 32px; }
	.db-about-pair .db-about-pair__heading { gap: 24px; }
	.db-about-pair__heading h2 { font-size: 3rem; line-height: 1.0833; }

	.db-about-pair .db-about-pair__actions { flex-direction: row; align-items: center; gap: 24px; }
	/* the underlined link sits on the gold button's centre line */
	.db-about-pair__actions p { align-self: center; }

	.db-about-pair__media img { height: 600px; }
	.db-about-pair__divider { width: 1px; height: auto; align-self: stretch; flex: 0 0 1px; }
}

/* The prototype has a THIRD layout breakpoint that the first pass never read:
   `@media (min-width: 1200px) { .about__heading h2 { max-width: 11ch } }`
   in styles.css. global.css carries the ported copy, but under the prototype
   selector `.about__heading h2`, so in WordPress it matches nothing and the
   heading stretched to the full 620px column instead of 11ch (373px at 48px).
   Re-asserted here against the block class. */
@media (min-width: 1200px) {
	.db-about-pair__heading h2 { max-width: 11ch; }
}

/* --- variant: the /ueber-uns/ story pair  (.db-about-pair--story) ---------
   "Unsere Geschichte" [Figma 368:3604]. It had been built as its own section,
   `db-story-pair` — but the frame is this construction exactly: column one text
   then image, column two IMAGE THEN TEXT, a real divider between them, and a
   rule along the top edge. Reported by the client, who spotted it from the
   symptom: on mobile the image stayed above the copy, because only about-pair
   flips its reversed column back so the image lands underneath.

   Two per-instance values from that frame, which is why this is a variant rather
   than a base change: the media band is 588 on the left and 515 on the right
   [368:3611 / 368:3615], not the base's matched 600s. And column two ends in a
   200x97 signature image [368:3618] the base has no slot for. */
.db-about-pair--story .db-about-pair__col--reverse .db-about-pair__text { gap: 40px; }

.db-about-pair__signature img {
	width: 200px;
	height: auto;
	max-width: 100%;
}

@media (min-width: 861px) {
	.db-about-pair--story .db-about-pair__col .db-about-pair__media img { height: 588px; }
	.db-about-pair--story .db-about-pair__col--reverse .db-about-pair__media img { height: 515px; }
}