/**
 * "The 5 Stages" featured mosaic on the blog listing.
 *
 * Geometry follows the Figma frame MBS-DESIGN node 0:332 (Blog > Body > App >
 * BlogPage > Section > Container:margin), measured at a 1512px viewport.
 *
 * The design draws the mosaic in a 1024px container while the control header
 * above it (node 0:311) sits in a 1120px one. That 48px step is an artefact of
 * the file, not an intent, so both are pinned to 1120px here — at 1512px that
 * lands the mosaic on x=196..1316, the same edges as the header, and the
 * "THE SEASONS WITHIN" label lines up with the first card's image.
 *
 * Column geometry is expressed as percentages of the container so it holds at
 * any width. Scaling the design's 976px content box up to 1120px (x1.14754):
 *
 *   left card   246.109 -> 282.42  = 25.22%
 *   gutter       57.000 ->  65.41  =  5.84%
 *   centre card 368.773 -> 423.18  = 37.78%
 *   gutter       57.000 ->  65.41  =  5.84%
 *   right card  247.117 -> 283.58  = 25.32%
 *                                    -------
 *                                    100.00%
 *
 * Colours are theme.json tokens so the mosaic follows the active style
 * variation, with one exception noted at --mbs-mosaic-rule below.
 */

.mbs-mosaic {
	/*
	 * The design's rule/date colour. Unlike every other colour in this file it
	 * has no theme.json token, so it is declared once here rather than repeated
	 * as a literal. Figma draws the left vertical rule in rgba(0,0,0,.12) and
	 * the centre one in #c1ab98; that inconsistency is resolved in favour of
	 * #c1ab98, which is also the horizontal rule and date colour.
	 */
	--mbs-mosaic-rule: #c1ab98;

	/* Half a gutter, used to centre the vertical rules between the columns. */
	--mbs-mosaic-gutter: 5.84%;
}

/*
 * Both the header row and the columns are `alignwide` children of the section,
 * so they would otherwise stretch to the 1440px wideSize. Pinning them to the
 * same max-width is what puts them on a single left edge.
 *
 * `.wp-block-group` is carried only for specificity: core's
 * `.is-layout-constrained > .alignwide` rule is also (0,2,0), and page-optimize
 * concatenates stylesheets in an order this file does not control, so the tie
 * is broken here rather than left to load order.
 */
.wp-block-group.mbs-mosaic > .alignwide {
	max-width: 1120px;
	margin-inline: auto;
}

/* Columns ------------------------------------------------------------------ */

.wp-block-columns.mbs-mosaic__columns {
	/*
	 * Also set as the block's blockGap attribute so the Site Editor renders the
	 * real gutter; repeated here so the layout survives a blockGap reset.
	 */
	column-gap: var(--mbs-mosaic-gutter);

	/* The two vertical rules, centred in each gutter. No extra markup needed. */
	background-image:
		linear-gradient(to right, var(--mbs-mosaic-rule) 0 100%),
		linear-gradient(to right, var(--mbs-mosaic-rule) 0 100%);
	background-size: 1px 100%, 1px 100%;
	background-position: 28.14% 0, 71.76% 0;
	background-repeat: no-repeat;
}

/*
 * The three flex-basis values (25.22 + 37.78 + 25.32) plus the two gutters add
 * up to exactly 100%, so nothing should shrink. Pinned anyway: a shrink here is
 * what produced the current 22/53/22 split instead of the design's ratio.
 */
.mbs-mosaic__columns > .wp-block-column {
	flex-shrink: 0;
}

/* Cards -------------------------------------------------------------------- */

.mbs-mosaic__col .wp-block-post-title {
	margin: 0;
	color: var(--wp--preset--color--theme-5, #3f3027);
	font-weight: 600;
}

.mbs-mosaic__col .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.mbs-mosaic__col .wp-block-post-title a:hover,
.mbs-mosaic__col .wp-block-post-title a:focus {
	text-decoration: underline;
}

.mbs-mosaic__col .wp-block-post-excerpt,
.mbs-mosaic__col .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--theme-4, #856d5c);
	font-weight: 500;
	line-height: 1.625;
}

.mbs-mosaic__col .wp-block-post-date {
	margin: 0;
	color: var(--mbs-mosaic-rule);
	/*
	 * Fixed rather than fluid: this is a metadata line, not prose, and the
	 * design's 10px is already at the floor of what stays legible.
	 */
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.5;
}

.mbs-mosaic__col .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* Side cards --------------------------------------------------------------- */

.mbs-mosaic__col--side .wp-block-post-title {
	/* Design: 16px/22px. */
	font-size: clamp(0.94rem, 0.9rem + 0.25vw, 1.06rem);
	line-height: 1.375;
}

.mbs-mosaic__col--side .wp-block-post-excerpt__excerpt {
	/* Design: 12px/19.5px. */
	font-size: clamp(0.78rem, 0.76rem + 0.1vw, 0.81rem);
}

/*
 * The design gives every side card the same height by clamping the title to one
 * line and the excerpt to a fixed 39px box. Clamping both to two lines here is
 * what keeps the second card in the left and right columns starting at the same
 * y — without it a two-line title ("My Superpower: I Am The Solution") pushes
 * one column's second card below the other's.
 */
.mbs-mosaic__col--side .wp-block-post-title,
.mbs-mosaic__col--side .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * A rule under the first card only, never under the last one. The design's
 * 21px/20px split either side of it is rounding noise at this scale.
 *
 * The padding lives on the `li.wp-block-post` list item, NOT on the card's
 * inner `.wp-block-group`: that group carries an inline `padding-top:0;
 * padding-bottom:0` from its block attributes, and an inline declaration wins
 * over any stylesheet rule short of `!important`. Targeting the list item —
 * which core renders without a style attribute — is what makes the 24px above
 * and below the divider actually apply.
 */
.mbs-mosaic__col--side .wp-block-post:not(:last-child) {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--mbs-mosaic-rule);
}

.mbs-mosaic__col--side .wp-block-post + .wp-block-post {
	padding-top: 24px;
}

/* Feature card ------------------------------------------------------------- */

.mbs-mosaic__col--feature .wp-block-post-title {
	/* Design: 24px/33px. */
	font-size: clamp(1.31rem, 1.15rem + 0.7vw, 1.63rem);
	line-height: 1.375;
}

.mbs-mosaic__col--feature .wp-block-post-excerpt__excerpt {
	/* Design: 14px/22.75px. */
	font-size: clamp(0.84rem, 0.82rem + 0.1vw, 0.88rem);
}

/* The design puts 12px between the feature excerpt and its date, not 8px. */
.mbs-mosaic__col--feature .wp-block-post-excerpt {
	margin-bottom: 4px;
}

/* Images ------------------------------------------------------------------- */

.mbs-mosaic__col .wp-block-post-featured-image {
	width: 100%;
}

.mbs-mosaic__col .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stacked ------------------------------------------------------------------ */

/*
 * 781px is where core stacks wp:columns. Once stacked there are no gutters to
 * draw rules in, and clamping text no longer buys any alignment.
 */
@media (max-width: 781px) {
	.wp-block-columns.mbs-mosaic__columns {
		background-image: none;
	}

	.mbs-mosaic__columns > .wp-block-column {
		flex-shrink: 1;
	}

	.mbs-mosaic__col--side .wp-block-post-title,
	.mbs-mosaic__col--side .wp-block-post-excerpt__excerpt {
		display: block;
		overflow: visible;
	}

	/*
	 * Stacked, the three columns become one single column of five cards, so
	 * every card boundary should read the same: 24px, rule, 24px. The columns'
	 * own 32px row-gap is dropped and the rhythm is rebuilt from the boundary
	 * outwards, which is what stops the side/feature seams from looking tighter
	 * than the seam between two side cards.
	 *
	 * The spacing is applied to the `li.wp-block-post` items rather than to the
	 * columns: each `.wp-block-column` carries an inline `padding-top:0;
	 * padding-bottom:0`, which no stylesheet rule can override.
	 */
	.wp-block-columns.mbs-mosaic__columns {
		row-gap: 0;
	}

	.mbs-mosaic__columns > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--mbs-mosaic-rule);
	}

	.mbs-mosaic__columns > .wp-block-column:not(:last-child) .wp-block-post:last-child {
		padding-bottom: 24px;
	}

	.mbs-mosaic__columns > .wp-block-column + .wp-block-column .wp-block-post:first-child {
		padding-top: 24px;
	}
}