/*
 * patterns/image-with-text.css — "Image with Text"
 * Markup: wp-content/themes/fcs/patterns/image-with-text.php
 * Root:   .fcs-image-with-text
 *
 * Figma 3266:3636 (component set), 9906:10502 (desktop), 10060:7871 (mobile),
 * 7953:3079 (compact). ~67 instances sitewide — second only to Text banner.
 *
 * NO RULE HERE MAY ASSUME WHICH SIDE THE IMAGE IS ON.
 * ---------------------------------------------------
 * The Figma component expresses image-left / image-right as a variant property.
 * We express it as block order: the editor drags the media column before or
 * after the copy column in List View, and there is no --reverse class.
 *
 * So everything below is keyed to the BEM class (__media / __copy), never to
 * :first-child, :nth-child or a direction. The two columns are interchangeable
 * and the section looks correct either way round. Anything that needs to know
 * the order is a bug.
 *
 * MOBILE STACKS IMAGE FIRST
 * -------------------------
 * Derived, and deliberately not "whatever order the blocks are in". Figma's real
 * mobile instances (10060:7871 and siblings) all put the image above the copy,
 * even though the library master puts it below. Below 768px the row is a plain
 * column flow with the media column pulled to the top via `order`, so an
 * image-right desktop section still reads image-first on a phone. This keeps the
 * rhythm consistent down pages that use the section many times over.
 *
 * SECTION PADDING is not declared here at any size — Medium and Large belong to
 * the editor's Dimensions panel, Small is pinned in layout/spacing.css. See
 * CLAUDE.md § "Section padding".
 */

/* Row ----------------------------------------------------------------- */

/*
 * Core gives .wp-block-columns a row-with-wrapping layout. Below 768px we want a
 * true single column so the `order` swap below is predictable, rather than
 * relying on flex-wrap to break the row.
 */
.fcs-image-with-text__row {
	flex-direction: column;
}

/*
 * Image above copy on mobile regardless of block order — see the header note.
 * `order` only has meaning while the row is a flex column; at 768px both values
 * are reset so desktop follows document order again.
 */
.fcs-image-with-text__media {
	order: -1;
}

.fcs-image-with-text__copy {
	order: 0;
}

/* Media ---------------------------------------------------------------- */

.fcs-image-with-text__figure {
	position: relative;
	margin-block: 0;
}

/*
 * 12px radius, matching Figma and the same value multicolumn.css uses on its
 * card media. theme.json has no 12px radius preset — if one is ever added, both
 * files should move to it together.
 *
 * THE IMAGE IS NOT CROPPED.
 * `height: auto` is the load-bearing part. The image fills the column's width,
 * and its height follows from its own proportions, so a 700px-tall photograph
 * renders 700px tall (scaled to the column) rather than being cut to a fixed
 * shape. Without it, an <img> carrying width/height attributes — which is every
 * image inserted from the media library — would take its HTML height against a
 * CSS width and come out distorted.
 *
 * This only applies while the image block has no aspect ratio of its own. An
 * editor who sets one from the sidebar gets `aspect-ratio` and `object-fit` as
 * inline styles, which beat this rule, and the crop is honoured. That is the
 * intended way to get a fixed shape here; the pattern no longer imposes one.
 */
.fcs-image-with-text__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Copy ----------------------------------------------------------------- */

/*
 * Figma stacks the copy column at 20px (Padding-MD), with the eyebrow sitting
 * 8px (Padding-SM) under its headline. Margins go on the children rather than as
 * a gap so that deleting any one block — which is the expected way to use this
 * pattern — does not leave a hole.
 */
.fcs-image-with-text__copy > * {
	margin-block: 0;
}

.fcs-image-with-text__copy > * + * {
	margin-block-start: 20px;
}

/*
 * The eyebrow is 8px from whatever follows it, and 8px from whatever precedes it
 * when an editor moves it below the headline — which is what the compact
 * directory rows do (7953:3079, "Ages 2-5" under "Preschool").
 */
.fcs-image-with-text__eyebrow + * {
	margin-block-start: 8px;
}

.fcs-image-with-text__eyebrow:not( :first-child ) {
	margin-block-start: 8px;
}

/*
 * H2 -> H3 is also 8px in Figma: the two headings are one visual unit inside the
 * "Eyebrow and headline" group, not two stacked blocks.
 */
.fcs-image-with-text__heading + .fcs-image-with-text__subheading {
	margin-block-start: 8px;
}

/*
 * Heading type is NOT set here. theme.json owns the whole scale globally and
 * fluidly — h2 eases 36/40 desktop to 30/36 mobile, h3 30/36 to 24/32, both
 * Outfit 800 at -0.2px, matching Figma at both ends. Restating any of it in a
 * pattern would be a second place to update when the scale moves.
 */

/* Buttons -------------------------------------------------------------- */

/*
 * Figma puts the buttons 20px below the body with a 16px gap between them, and
 * the block's own blockGap handles the gap. On Small they go full width and
 * stack, which is the same treatment multicolumn.css gives its section button.
 */
.fcs-image-with-text__actions {
	margin-block-start: 20px;
}

/*
 * The full-width mobile button rule that used to live here is now in
 * components/buttons.css, which applies it to every pattern and also centres
 * the label — this copy only stretched the box and left the text at the start.
 */

/* Option: video badge --------------------------------------------------- */

/*
 * Rendered by fcs-core/inc/image-with-text.php when the sidebar's Video URL
 * field is filled: the section gains .fcs-image-with-text--video and the badge
 * is appended inside the figure as a link.
 *
 * 60px white circle with a triangle, centred — Figma I9906:10502;3414:18907;
 * 3475:4808. The glyph is assets/images/icons/FCS_Play.svg, whose triangle is
 * currentColor so the link colour drives it.
 */
.fcs-image-with-text__play {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: flex;
	width: 60px;
	height: 60px;
	align-items: center;
	justify-content: center;
	color: var( --wp--preset--color--link );
	transform: translate( -50%, -50% );
	transition: transform var( --fcs-transition );
}

.fcs-image-with-text__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fcs-image-with-text__play:hover,
.fcs-image-with-text__play:focus-visible {
	transform: translate( -50%, -50% ) scale( 1.08 );
}

@media ( prefers-reduced-motion: reduce ) {
	.fcs-image-with-text__play {
		transition: none;
	}

	.fcs-image-with-text__play:hover,
	.fcs-image-with-text__play:focus-visible {
		transform: translate( -50%, -50% );
	}
}

/* Medium ---------------------------------------------------------------- */

@media ( min-width: 768px ) {
	/*
	 * Side by side from here up. Document order takes over, so a media column
	 * placed after the copy column in List View renders on the right.
	 */
	.fcs-image-with-text__row {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.fcs-image-with-text__media,
	.fcs-image-with-text__copy {
		order: 0;
	}

	/*
	 * Figma: copy 576px, image taking the rest of a 1280px container with an
	 * 80px gap. Expressed as a ratio rather than fixed widths so the section
	 * stays fluid between 768 and 1240 — the design has no tablet frame, so the
	 * behaviour here is derived. Image is the larger share, matching the
	 * 584/576 split at full width.
	 */
	.fcs-image-with-text__media {
		flex: 1 1 50%;
	}

	.fcs-image-with-text__copy {
		flex: 1 1 50%;
		max-width: 576px;
	}
}

/* Large ----------------------------------------------------------------- */

@media ( min-width: 1024px ) {
	/*
	 * At full desktop the copy column is pinned to its Figma 576px and the image
	 * takes what is left, which is how the 1280px container resolves in the
	 * design. wideSize is 1240px in theme.json against Figma's 1280px container
	 * — see CLAUDE.md, the 1240px content column is the intended measure.
	 */
	.fcs-image-with-text__copy {
		flex: 0 0 576px;
	}

	.fcs-image-with-text__media {
		flex: 1 1 auto;
	}
}

/* Option: compact ------------------------------------------------------- */

/*
 * Rendered by fcs-core/inc/image-with-text.php when the sidebar's Compact toggle
 * is on. Figma 7953:3079 — the Our Schools directory rows: a smaller image, a
 * wider copy column, a smaller headline and tighter vertical rhythm, stacked one
 * after another as a listing.
 *
 * Placed after the Medium/Large blocks on purpose: it overrides the column
 * proportions set there, so it has to come later in the cascade.
 */
@media ( min-width: 1024px ) {
	.fcs-image-with-text--compact .fcs-image-with-text__copy {
		flex: 0 0 648px;
		max-width: 648px;
	}

	.fcs-image-with-text--compact .fcs-image-with-text__media {
		flex: 0 1 512px;
	}
}

/*
 * `h-3`, not `h3`: WordPress kebab-cases preset slugs, putting a dash between
 * a letter and a digit, so the slug "h3" becomes --wp--preset--font-size--h-3.
 * The undashed name does not exist and silently falls back to the inherited
 * size.
 */
.fcs-image-with-text--compact .fcs-image-with-text__heading {
	font-size: var( --wp--preset--font-size--h-3 );
}

.fcs-image-with-text--compact .fcs-image-with-text__copy > * + * {
	margin-block-start: 8px;
}

.fcs-image-with-text--compact .fcs-image-with-text__actions {
	margin-block-start: 20px;
}