/**
 * sigma/two-door (C15) -- the comp's "Who we help" pair. Loaded only
 * where the block renders (block.json "style" field).
 *
 * Geometry is the Home comp's S02 lower half (docs/qa/comp-spec/
 * SPEC-home.md; the About comp draws the identical pair), 1 unit = 1 CSS
 * px at 1440. There is no card box: the two doors are open columns on
 * white, separated by one 0.75px navy vertical rule 326px tall, and in
 * each column, top to bottom, the gold S mark, a 26px bold heading, a
 * 20px body, and a bright-gold outline button -- the comp draws this
 * one at 316 wide, but it now takes the theme's 227 secondary/in-card
 * size (assets/css/base.css): a door's button sits in a copy column
 * the same way card-pair/value-prop/office-card's do, and the sitewide
 * button audit put all in-card buttons on the one shared size rather
 * than a per-page comp measurement. Every offset below is the drawing,
 * not a rhythm token -- the nearest --space-* value is 4-5px off for
 * each of them, which is more than the 4px the comp match allows.
 *
 * One column below 768, two from 768 up; the rule turns horizontal when
 * the doors stack. The comp has no mobile view, so below 1024 the two
 * doors are simply mirror images; the by-eye asymmetry the comp has at
 * 1440 (see .two-door__card:first-child below) is applied only from
 * 1024 up, where the columns are wide enough for it to read as intended.
 */

.two-door {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	/* The comp's content column is 1214.8px wide (x 110.7 to 1325.5). A
	   section that offers more than that would push the rule and both
	   doors off their drawn positions, so the block caps itself. */
	max-width: 1215px;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.two-door {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * 23px above the mark, 28px below the button: the rule in the comp runs
 * from y=1079.1 to 1405.3 while the mark starts at 1102.4 and the button
 * ends at 1377.4. The rule is the second door's border, so the door's
 * own padding has to carry those two margins for the rule to reach.
 */
.two-door__card {
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 23px 0 28px;
	text-align: center;
	color: var(--color-navy);
}

/* Stacked: the rule lies between the doors. */
.two-door__card + .two-door__card {
	border-top: 0.75px solid var(--color-navy);
}

@media (min-width: 768px) {
	/* Side by side: the same rule stands between them. At 1440 it lands
	   on x=718.1, 2px left of the comp's 720.2. */
	.two-door__card + .two-door__card {
		border-top: 0;
		border-left: 0.75px solid var(--color-navy);
	}
}

@media (min-width: 1024px) {
	/*
	 * The comp's doors are not mirror images. The designer centred each
	 * door's text frame by eye: the left door's heading, body and button
	 * are centred on x=396.7, the right door's on x=1050.9, which is
	 * 17.7px left and 29.1px right of where the two halves' true centres
	 * fall (414.4 and 1021.8). Reproducing that puts the buttons and the
	 * marks where the comp draws them; centring "properly" misses by up
	 * to 29px. Percentages of the door width so the shift scales with
	 * the column: 5.8% of 607.4 trims 35.4px off the right of the left
	 * door (centre moves 17.7px left), 9.6% trims 58.3px off the left of
	 * the right door (centre moves 29.1px right).
	 */
	.two-door__card:first-child {
		padding-right: 5.8%;
	}

	.two-door__card:last-child {
		padding-left: 9.6%;
	}
}

/*
 * The comp places the client's 500x122 gold lockup at 316x77 in each
 * door, but only its S mark is visible: the wordmark is transparent in
 * the placed image, and the mark, not the lockup's box, is what sits
 * centred on the door. logo-mark-gold.webp is that placed image's own
 * pixels (Home comp PDF, image object 35 with its soft mask), cropped
 * to the first 130 of its 500 columns -- the mark and nothing else -- so
 * the 82x77 box here is the mark at exactly the comp's scale
 * (130 x 77/122 = 82) and can be centred like any other element without
 * a 316px-wide box overflowing a 375px screen. Lossless WebP rather than
 * PNG: same pixels, and the repo's .gitignore drops every *.png, which
 * would have left this asset out of every clone and deploy from git.
 */
.two-door__logo {
	display: block;
	width: 82px;
	height: 77px;
	margin: 0;
}

/* Mark bottom at y=1179.6, heading text at 1209 (line box 1207.6). */
.two-door__card-heading {
	margin: 28px 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-box-heading);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	color: var(--color-navy);
}

/*
 * Body starts 12.7px under the heading's line box and runs at most
 * ~480px wide -- the comp's three-line paragraphs measure 443 and 427,
 * and 480 keeps the new copy to the same three lines. Regular weight:
 * SPEC-home.md's font key has 20px body as Cormorant Garamond Regular
 * everywhere except the bordered card grid, which is Light.
 */
.two-door__card-body {
	max-width: 480px;
	margin: 12.7px 0 29.5px;
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
	color: var(--color-navy);
}

/*
 * Button top at 1344.4, 29.5px under the last body line box -- the body
 * carries that gap as its bottom margin, and the button's own margin is
 * auto so that when one door's body wraps a line longer than the
 * other's (it does at 768: three lines against four) both buttons still
 * sit on the same baseline at the bottom of the equal-height cells. At
 * 1440 both bodies are three lines, there is no spare height, and auto
 * resolves to zero: the comp's gap is exactly the body's margin.
 */
.two-door__card-button {
	margin-top: auto;
}

/*
 * assets/css/base.css's shared .sigma-button rule supplies the box
 * (padding, border, type) every registry button in the theme now uses.
 * What is genuinely this block's own is the size: render.php gives this
 * button the two-door__card-button class alongside sigma-button, so the
 * compound selector below outranks base regardless of stylesheet load
 * order (the same defence every other block's own button rule uses).
 * 316, measured, not inferred from role: SPEC-home S02 draws both door
 * buttons as BOX w=316.2 h=33.0 at x=238.6 and x=892.8. An earlier pass
 * grouped this block with the in-card 227 buttons because that is the
 * role it plays, and the comp disagrees -- the doors carry the primary
 * size. No .sigma-section--bg-navy inverse here: the doors are always
 * on white.
 */
.sigma-button.two-door__card-button {
	min-width: 316px;
}

/*
 * Below 768 the 33px comp height is under the 44px tap minimum, and
 * the comp has no mobile view to defend it, so the button grows to 44
 * and takes the column width.
 */
@media (max-width: 767px) {
	.sigma-button.two-door__card-button {
		width: 100%;
		min-width: 0;
		min-height: 44px;
		white-space: normal;
	}
}

/*
 * Optional heading above the two doors (home and about layouts).
 * Comp spec: 70px Cormorant Garamond Bold, navy, accent word in gold
 * italic. Rendered only when non-empty via opts.heading in the adapter.
 */
/*
 * The heading spans the whole grid. .two-door is a two-column grid from
 * 768 up, so without grid-column the h2 becomes a grid item like the
 * cards do, takes the first cell, and pushes the two doors diagonally --
 * left card under the heading, right card up beside it. That is exactly
 * what happened when the heading was first added.
 *
 * Centred because the comp centres it over the pair (SPEC-home S02: the
 * ink runs x=537..903 on a 1440 band) and because the subline and both
 * doors under it are centred too.
 */
.two-door__heading {
	grid-column: 1 / -1;
	margin: 0 0 var(--space-md) 0;
	font-family: var(--font-serif);
	font-size: var(--text-h2);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--color-navy);
	text-align: center;
}

.two-door__accent {
	font-style: italic;
	font-weight: var(--weight-serif-italic);
	color: var(--color-gold);
}