/*
 * Image + text sections (bb/split).
 *
 * Named after the About Us page, where every section is one of these, but scoped under
 * .bb-split so the component works anywhere (the home intro is the "illustration"
 * layout).
 *
 * Every size, colour and spacing below is the value read from the Figma nodes named in
 * the comments: 11161:404 (Our story), 11167:111 (A space built), 11168:121 (collage),
 * 11168:168 (founder) and 11131:681 (home intro). Desktop frames are 1440px wide, so
 * fixed px are the 1440 values and clamp() only scales them down on smaller screens.
 */

/*
 * The founder row's own colours (#f9ece8 band, #6b2232 eyebrow, #4a2d31 heading,
 * #c77e8a accent — nodes 11168:170-178) resolve onto the canonical palette; see
 * docs/design-system.md. The 1px photo outline is --bb-border-photo in theme.css.
 */

.bb-split {
	padding-block: var( --bb-space-band );
}

/*
 * Columns ride on the shared 12-column grid in theme.css (.bb-grid / .bb-col with the
 * span utilities), so the collapse to tablet and phone is the shared one. Each layout
 * only sets its Figma content width and gap here, plus the exact tracks from 1280px up.
 */
.bb-split__inner {
	--bb-grid-align: center;
	--bb-content-w: 1146px; /* text 592 + 60 + photo 494 */
	--bb-grid-row-gap: var( --bb-space-md );
	--bb-grid-gap: 60px;
}

.bb-split--collage-right .bb-split__inner,
.bb-split--collage-left .bb-split__inner {
	--bb-content-w: 1183px; /* text 592 + 80 + grid 511 */
	--bb-grid-gap: 80px;
}

/* The home intro (11131:681) sits on a 1355px band, 43px from the left edge and 42 from
   the right (the group runs x 43 -> 1398 in the 1440 frame). */
.wp-block-group.bb-split--illustration {
	padding-inline: 43px 42px;
}

.bb-split--illustration .bb-split__inner {
	--bb-content-w: var( --bb-container-wide );
	--bb-grid-gap: 53px;
}

/* The exact Figma tracks; below 1280 the grid utilities take over. */
@media ( min-width: 1280px ) {
	/* Photo left, text right (11167:111). */
	.bb-split--text-right .bb-split__inner {
		grid-template-columns: minmax( 0, 494fr ) minmax( 0, 60fr ) minmax( 0, 592fr );
		column-gap: 0;
	}

	.bb-split--text-right .bb-split__media {
		grid-column: 1;
	}

	.bb-split--text-right .bb-split__text {
		grid-column: 3;
	}

	/* Text left, photo right (11161:404). */
	.bb-split--text-left .bb-split__inner {
		grid-template-columns: minmax( 0, 592fr ) minmax( 0, 60fr ) minmax( 0, 494fr );
		column-gap: 0;
	}

	.bb-split--text-left .bb-split__text {
		grid-column: 1;
	}

	.bb-split--text-left .bb-split__media {
		grid-column: 3;
	}

	/* Text left, 2 x 2 photo grid right (11168:121). */
	.bb-split--collage-right .bb-split__inner {
		grid-template-columns: minmax( 0, 592fr ) minmax( 0, 80fr ) minmax( 0, 511fr );
		column-gap: 0;
	}

	.bb-split--collage-right .bb-split__text {
		grid-column: 1;
	}

	.bb-split--collage-right .bb-split__media {
		grid-column: 3;
	}

	.bb-split--collage-left .bb-split__inner {
		grid-template-columns: minmax( 0, 511fr ) minmax( 0, 80fr ) minmax( 0, 592fr );
		column-gap: 0;
	}

	.bb-split--collage-left .bb-split__media {
		grid-column: 1;
	}

	.bb-split--collage-left .bb-split__text {
		grid-column: 3;
	}

	/* Photo 494, text, then the 445 x 700 figure (11131:681). */
	.bb-split--illustration .bb-split__inner {
		grid-template-columns: minmax( 0, 494fr ) minmax( 0, 53fr ) minmax( 0, 363fr ) minmax( 0, 445fr );
		column-gap: 0;
	}

	/* The three columns share one explicit row: the text box (445 wide, node 11131:682)
	   runs past its 363px track and under the figure, which starts at x 953 (nodes
	   11131:684 / 11131:682). Without the explicit row the text's span and the figure's
	   column collide and the grid pushes the figure onto a second row. */
	.bb-split--illustration .bb-split__media {
		grid-column: 1;
		grid-row: 1;
	}

	.bb-split--illustration .bb-split__text {
		grid-column: 3;
		grid-row: 1;
		width: calc( 445 / 363 * 100% );
	}

	.bb-split--illustration .bb-split__figure {
		position: relative;
		grid-column: 4;
		grid-row: 1;
	}
}

/* --------------------------------------------------------------- media ---- */

.bb-split__media,
.bb-split__photo {
	margin: 0;
}

/* 494 x 596 is the About / Home crop (11161:411, 11167:117); a section that needs a
   different one sets --bb-split-photo-ar on the section. */
.bb-split__photo img {
	display: block;
	width: 100%;
	aspect-ratio: var( --bb-split-photo-ar, 494 / 596 );
	border: var( --bb-border-w ) solid var( --bb-border-photo );
	object-fit: cover;
}

.bb-split__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 11px;
	row-gap: 13px;
}

.bb-split__tile {
	margin: 0;
}

.bb-split__tile img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border: var( --bb-border-w ) solid var( --bb-border-photo );
	object-fit: cover;
}

/* The figure is 700px against the photo's 596, and sits centred on it (11131:682).
   It is a plain div, so core's flow layout would add its 24px block gap to it. */
.bb-split__figure {
	align-self: center;
	margin-block: 0;
	line-height: 0;
	text-align: center;
}

.bb-split__figure--top-right {
	align-self: start;
}

.bb-split__figure img {
	width: 100%;
	max-width: 445px;
	height: auto;
}

/*
 * A figure on a layout other than `illustration` is artwork pinned to the top right of
 * the text column (the Special Events bow, Figma 11207:3655, 323 x 307). The page CSS
 * that uses it overrides the width and offsets.
 */
.bb-split__text {
	position: relative;
}

.bb-split__figure--inline {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: 323px;
	max-width: 40%;
	pointer-events: none;
}

.bb-split__figure--inline img {
	max-width: 100%;
}

/* ---------------------------------------------------------------- text ---- */

/* Node 11131:684 is a 412px box; the canonical 60px heading needs the frame's 445px
   (node 11131:682) to keep "A CELEBRATION" on one line. */
.bb-split--illustration .bb-split__text {
	max-width: 445px;
}

.bb-split__text > *:first-child {
	margin-top: 0;
}

/* Type: the shared eyebrow role in theme.css (node 11166:60). */
.bb-split__eyebrow {
	margin: 0 0 18px;
}

/* Node 11161:412 is 56/60 mixed case in Figma; it converges on the shared H2 role. */
.bb-split__heading.wp-block-heading {
	margin: 0;
}

/* Type: the shared body role in theme.css (node 11161:414 is 18/26). */
.bb-split__body {
	margin: 26px 0 0;
	max-width: 527px; /* 592 - 65 */
}

.bb-split__body + .bb-split__body {
	margin-top: 26px;
}

/* The home intro leads with the lead role, then body copy (node 11131:686). */
.bb-split--illustration .bb-split__body {
	max-width: 327px;
}

.bb-main .bb-split--illustration .bb-split__body:first-of-type {
	font-size: var( --bb-fs-lead );
	font-weight: 500;
	line-height: var( --bb-lh-lead );
}

.bb-split--illustration .bb-split__body + .bb-split__body {
	margin-top: 24px;
}

/* Work Sans SemiBold Italic in pink (node 11161:414). */
.bb-split__body em {
	color: var( --bb-accent );
	font-weight: 600;
}

.bb-split__bullets {
	margin: 26px 0 0;
	padding-left: 1.2em;
	color: var( --bb-ink );
	font-size: var( --bb-fs-body );
	line-height: var( --bb-lh-body );
}

.bb-split__bullets li::marker {
	color: var( --bb-accent );
}

.bb-split__accent {
	margin: 26px 0 0;
	color: var( --bb-accent );
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-h4 );
	font-weight: 600;
	line-height: var( --bb-lh-h4 );
	letter-spacing: var( --bb-ls-h3 );
	text-transform: uppercase;
}

.bb-split__buttons {
	margin-top: 40px;
}

/* ------------------------------------------------------------- founder ---- */

/*
 * The founder row (11168:168) is its own frame in the design: a 451 x 421 photo beside
 * the text on a tinted band. Its off-system colours and type (a #f9ece8 band, a 48px
 * bold heading, 14/18 body) converge on the canonical palette and type roles.
 */
.bb-split--founder.wp-block-group {
	padding-block: var( --bb-space-lg );
	background: var( --bb-bg-alt );
}

/*
 * The founder row is a style hook on a "photo left, text right" section, so the block
 * itself caps the content at 1146px; this band is 1238 wide (photo 451 + 187 + text
 * 600), and the extra class is what outweighs core's constrained-layout rule.
 */
.bb-split--founder .bb-split__inner.bb-grid {
	--bb-grid-align: start;
	--bb-content-w: 1238px;
	--bb-grid-gap: 187px;

	max-width: 1238px;
}

@media ( min-width: 1280px ) {
	.bb-split--founder .bb-split__inner {
		grid-template-columns: minmax( 0, 451fr ) minmax( 0, 187fr ) minmax( 0, 600fr );
		column-gap: 0;
	}

	.bb-split--founder .bb-split__media {
		grid-column: 1;
	}

	.bb-split--founder .bb-split__text {
		grid-column: 3;
	}
}

.bb-split--founder .bb-split__photo img {
	aspect-ratio: 451 / 421;
	border: 0;
}

.bb-split--founder .bb-split__text {
	padding-top: 29px; /* eyebrow at y 99, photo at y 70 */
}

.bb-split--founder .bb-split__eyebrow {
	margin-bottom: 14px;
}

.bb-split--founder .bb-split__body {
	margin-top: 34px;
	max-width: 600px;
}

.bb-split--founder .bb-split__body + .bb-split__body {
	margin-top: var( --bb-space-head );
}

.bb-split--founder .bb-split__accent {
	margin-top: 27px;
}

/* ---------------------------------------------------------- responsive ---- */

/* Column collapse is the shared grid's job; these only reset the type and the photo
   crops once the layout has stacked. */
@media ( max-width: 1024px ) {
	.bb-split--founder .bb-split__inner {
		--bb-grid-gap: 32px;
	}

	.bb-split__figure img {
		max-width: 240px;
	}
}

@media ( max-width: 781px ) {
	/* Back to the page gutter from theme.json once the columns have stacked. */
	.wp-block-group.bb-split--illustration {
		padding-inline: clamp( 1rem, 5.56vw, 5rem );
	}

	.bb-split--illustration .bb-split__text,
	.bb-split--illustration .bb-split__body,
	.bb-split__body,
	.bb-split--founder .bb-split__text {
		max-width: none;
	}

	.bb-split__photo img {
		aspect-ratio: 4 / 3;
	}

	.bb-split__figure img {
		max-width: 240px;
	}

	.bb-split--founder .bb-split__text {
		padding-top: 0;
	}

	.bb-split__buttons {
		margin-top: 32px;
	}
}