/**
 * Gutenberg core block styles.
 *
 * The single canonical treatment for editor output across the site — quote,
 * pullquote, image, gallery, lightbox, lists, buttons, embeds, columns,
 * media-text, cover, separator, code and details. Loaded on every view because
 * block content also renders outside the_content() (Block Areas in the footer,
 * the single-post sidebar rail, the 404 template).
 *
 * Two scoping tiers, and the distinction matters:
 *
 *   1. Appearance (colour, type, borders, radius) keys off the block class
 *      itself, so it applies wherever the block appears.
 *   2. Width and alignment key off `.single-post .post-body-content` — the
 *      44rem reading column. Pages build their own full-bleed sections and
 *      must not inherit a measure.
 *
 * Core ships `.is-layout-flow > .alignleft` float rules, but they only match
 * when the parent carries a layout class. `.post-body-content` is a plain div,
 * so the float rules below are authored here rather than inherited.
 *
 * Tokens come from theme.json — palette presets (--wp--preset--color--*),
 * custom colours/layout/radii (--wp--custom--*), spacing
 * (--wp--preset--spacing--*), font sizes (--wp--preset--font-size--*),
 * line-heights (--wp--custom--line-height--*).
 */

:root {
	--block-ink: var(--wp--preset--color--charcoal, #1c211d);
	--block-line: var(--wp--custom--color--line, #e7e5ee);
	--block-muted: color-mix(in srgb, var(--wp--preset--color--charcoal, #1c211d) 58%, #ffffff);
	--block-accent: var(--wp--preset--color--primary, #00b020);
	--block-editorial: var(--wp--preset--color--tertiary, #9c3ba9);
	--block-radius: var(--wp--custom--border--radius--small, 12px);
	--block-radius-lg: var(--wp--custom--border--radius--medium, 24px);
}

/* -------------------------------------------------------------------------- */
/*  Quote                                                                     */
/* -------------------------------------------------------------------------- */

.wp-block-quote {
	margin: var(--wp--preset--spacing--medium) 0;
	padding: 2px 0 2px var(--wp--preset--spacing--medium);
	border-left: 3px solid var(--block-accent);
	background: none;
	box-shadow: none;
	font-style: normal;
	quotes: none;
}

.wp-block-quote p {
	margin: 0 0 var(--wp--preset--spacing--small);
	font-size: var(--wp--preset--font-size--large, 1.5rem);
	font-weight: 500;
	font-style: normal;
	line-height: var(--wp--custom--line-height--tight, 1.25);
	letter-spacing: -0.01em;
	color: var(--block-ink);
}

.wp-block-quote p:last-child {
	margin-bottom: 0;
}

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: var(--wp--preset--spacing--small);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--min, 0.8rem);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--block-muted);
}

.wp-block-quote cite::before,
.wp-block-quote .wp-block-quote__citation::before {
	content: "\2014\00a0";
}

/* Plain: no rule, just the type step-up. */
.wp-block-quote.is-style-plain {
	padding-left: 0;
	border-left: none;
}

/* Large: a centred editorial moment. */
.wp-block-quote.is-style-large {
	padding: 0;
	border-left: none;
	text-align: center;
	margin-block: var(--wp--preset--spacing--large);
}

.wp-block-quote.is-style-large p {
	font-size: var(--wp--preset--font-size--big, 2rem);
	line-height: var(--wp--custom--line-height--small, 1.2);
	letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------- */
/*  Pullquote                                                                 */
/* -------------------------------------------------------------------------- */

.wp-block-pullquote {
	border-top: 1px solid var(--block-line);
	border-bottom: 1px solid var(--block-line);
	border-left: none;
	border-right: none;
	padding: var(--wp--preset--spacing--large) 0;
	margin: var(--wp--preset--spacing--large) 0;
	text-align: left;
	color: inherit;
	background: none;
}

.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

.wp-block-pullquote p {
	font-size: var(--wp--preset--font-size--jumbo, 2.25rem);
	font-weight: 500;
	font-style: normal;
	line-height: var(--wp--custom--line-height--snug, 1.15);
	letter-spacing: -0.02em;
	color: var(--block-ink);
	margin: 0;
}

.wp-block-pullquote cite,
.wp-block-pullquote .wp-block-pullquote__citation {
	display: block;
	margin-top: var(--wp--preset--spacing--small);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--min, 0.8rem);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--block-muted);
}

/* Solid colour: a tinted card rather than hairlines. */
.wp-block-pullquote.is-style-solid-color {
	border: none;
	padding: var(--wp--preset--spacing--x-large);
	background: var(--wp--preset--color--tertiary-50, #ECD2EF);
}

.wp-block-pullquote.is-style-solid-color blockquote {
	max-width: none;
	text-align: left;
}

.wp-block-pullquote.is-style-solid-color:where(.has-background) p {
	color: inherit;
}

.wp-block-pullquote.is-style-solid-color:where(.has-background) cite {
	color: inherit;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/*  Images + captions                                                         */
/* -------------------------------------------------------------------------- */

.wp-block-image img {
	height: auto;
	max-width: 100%;
}

/* A linked image needs the anchor clipped too, or the corners square off. */
.wp-block-image > a {
	display: block;
	overflow: hidden;
}

.wp-block-image.is-style-rounded img,

/* Edge-to-edge images shouldn't carry corner radii into the viewport edge. */
.wp-block-image.alignfull img,

/* style.css positions figcaption as an absolute pill over the artwork, which is
   right for standalone hero figures and wrong for anything editorial. Reset it
   to a conventional caption wherever a caption belongs to a block. */
:is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-table, .wp-block-audio, .wp-block-video) figcaption.wp-element-caption,
:is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-table, .wp-block-audio, .wp-block-video) figcaption {
	position: static;
	inset: auto;
	transform: none;
	background: none;
	padding: 0;
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--tiny, 0.9rem);
	line-height: var(--wp--custom--line-height--medium, 1.4);
	color: var(--block-muted);
	text-align: left;
}

.wp-block-image.aligncenter figcaption,
.wp-block-gallery figcaption,
.wp-block-table figcaption {
	text-align: center;
}

/* -------------------------------------------------------------------------- */
/*  Gallery                                                                   */
/* -------------------------------------------------------------------------- */

/* The gap is core's (--wp--style--block-gap, from theme.json). Don't override
   it: core derives each figure's width from the same value, and changing one
   without the other breaks the column maths. */
.wp-block-gallery.has-nested-images {
	margin-block: var(--wp--preset--spacing--medium);
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	overflow: hidden;
	background: var(--wp--preset--color--grey, #e2e8f0);
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	transition: transform 0.4s ease;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: scale(1.04);
}

/* Nested captions overlay the image in core's default; keep that, but make it a
   readable scrim rather than a coloured pill. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 24px 12px 10px;
	color: var(--wp--preset--color--white, #fff);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	font-size: var(--wp--preset--font-size--min, 0.8rem);
	text-align: left;
}

/* Core's flex gallery keeps its column count at every width; step it down so
   thumbnails never collapse to slivers. The widths reuse core's own gap
   variable so they stay in step with whatever the gap resolves to, and need
   !important because core's selector carries an #individual-image id. */
@media (max-width: 782px) {
	.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image,
	.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image,
	.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image,
	.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image,
	.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image,
	.wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2) !important;
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.has-nested-images:not(.columns-1) figure.wp-block-image {
		width: 100% !important;
	}
}

/* -------------------------------------------------------------------------- */
/*  Lightbox (core "Expand on click")                                         */
/* -------------------------------------------------------------------------- */

/*  Core's overlay uses a near-white scrim and a charcoal close icon, which
    already suits a white-dominant site — it's left alone deliberately. Only
    the expand affordance on the image is re-skinned. Core positions the
    trigger inline via the Interactivity API, so nothing here touches layout. */

.wp-block-image.wp-lightbox-container button.lightbox-trigger,
.wp-block-image.wp-lightbox-container button.lightbox-trigger:not(:hover):not(:active):not(.has-background) {
	background-color: color-mix(in srgb, var(--block-ink) 55%, transparent);
	backdrop-filter: none;
}

.wp-block-image.wp-lightbox-container button.lightbox-trigger:hover,
.wp-block-image.wp-lightbox-container button.lightbox-trigger:focus {
	background-color: var(--block-accent);
}

.wp-block-image.wp-lightbox-container button.lightbox-trigger:focus-visible {
	outline: 2px solid var(--block-accent);
	outline-offset: 3px;
}

.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible {
	outline: 2px solid var(--block-accent);
	outline-offset: 2px;
}

/* The lightbox measures the image to size the overlay, so the rounded corners
   on the thumbnail shouldn't carry into the expanded view. */

/* -------------------------------------------------------------------------- */
/*  Embeds                                                                    */
/* -------------------------------------------------------------------------- */

.wp-block-embed {
	margin-block: var(--wp--preset--spacing--medium);
}

.wp-block-embed .wp-block-embed__wrapper {
	overflow: hidden;
	background: var(--wp--preset--color--charcoal, #1c211d);
}

.wp-block-embed.is-type-rich .wp-block-embed__wrapper,
.wp-block-embed.is-provider-twitter .wp-block-embed__wrapper {
	background: none;
}

.wp-block-embed iframe {
	display: block;
	max-width: 100%;
	border: 0;
}

/* -------------------------------------------------------------------------- */
/*  Lists                                                                     */
/* -------------------------------------------------------------------------- */

.wp-block-list {
	padding-left: 1.35em;
}

.wp-block-list li + li {
	margin-top: 0.45em;
}

.wp-block-list li::marker {
	color: var(--block-accent);
}

.wp-block-list ul,
.wp-block-list ol {
	margin-top: 0.45em;
	padding-left: 1.2em;
}

/* Checklist / crosslist swap the marker for an icon, so the indent is theirs. */
.wp-block-list.is-style-checklist,
.wp-block-list.is-style-crosslist {
	padding-left: 0;
}

/* -------------------------------------------------------------------------- */
/*  Table                                                                     */
/* -------------------------------------------------------------------------- */

/* main.css owns the core/table design (dark header, rounded container). These
   two rules stop the bare-<table> fallback in style.css leaking into it. */
.wp-block-table thead th,
.wp-block-table tbody td,
.wp-block-table tfoot td {
	border-bottom: none;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background: var(--wp--custom--color--neutral--50, #fafafa);
}

/* -------------------------------------------------------------------------- */
/*  Buttons                                                                   */
/* -------------------------------------------------------------------------- */
/*  Geometry is shared by every variant. Padding, radius and border width come
    from theme.json (settings.custom.button + elements.button) so a solid and an
    outline button are the same box — solid carries a *transparent* border of the
    same width rather than `border: 0`, otherwise the outline's 1px makes it 2px
    taller and wider than the button sitting next to it.

    The outline rules below are deliberately (0,3,0). WP core registers the
    outline block style with its own theme.json-style data and emits it at
    `:root :where(.wp-block-button.is-style-outline--1 …)` — specificity (0,1,0),
    but injected *after* this stylesheet, so a (0,1,0) rule here would lose the
    tie and core's em-based padding would win. theme.json's
    styles.blocks.core/button.variations.outline overrides that data at source;
    these rules pin the result regardless.

    Hover follows DESIGN.md: green → magenta, an energy lift, never a darken.
    Solid flips its fill (theme.json elements.button:hover); outline flips its
    border and label and stays transparent. Border width never changes between
    states, so nothing reflows on hover.                                        */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--tiny, 8px);
	margin-block: var(--wp--preset--spacing--medium);
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--wp--custom--button--padding-block, 16px) var(--wp--custom--button--padding-inline, 24px);
	border: var(--wp--custom--button--border-width, 1px) solid var(--wp--custom--color--line, #000);
	font-size: var(--wp--preset--font-size--tiny, 0.9rem);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--medium, 1.4);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/*  Press — DESIGN.md: subtle scale, slight shadow loss. Overrides the hover
    lift so the button reads as going down, not up.                            */
.wp-block-button__link:active {
	transform: scale(0.98);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: var(--wp--custom--button--padding-block, 16px) var(--wp--custom--button--padding-inline, 24px);
	border-width: var(--wp--custom--button--border-width, 1px);
	border-style: solid;
	border-color: currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--block-accent);
}

/*  Outline hover. Unconditional: theme.json's elements.button:hover targets
    every .wp-block-button__link, so an outline button has to opt out of the
    magenta *fill* explicitly or it turns solid. Border tracks currentColor, so
    setting the text colour moves both together.                               */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	border-color: currentColor;
	color: var(--wp--preset--color--secondary, #f22477);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--block-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/*  Columns, media & text, cover                                              */
/* -------------------------------------------------------------------------- */

.wp-block-columns {
	margin-block: var(--wp--preset--spacing--medium);
}

.wp-block-media-text {
	overflow: hidden;
	margin-block: var(--wp--preset--spacing--medium);
}

.wp-block-media-text .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--large);
}

.wp-block-media-text .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

.wp-block-media-text .wp-block-media-text__content > :last-child {
	margin-bottom: 0;
}

.wp-block-cover {
	overflow: hidden;
	margin-block: var(--wp--preset--spacing--medium);
}

@media (max-width: 600px) {
	.wp-block-media-text:not(.is-stacked-on-mobile) {
		grid-template-columns: 1fr !important;
	}

	.wp-block-media-text:not(.is-stacked-on-mobile) .wp-block-media-text__media,
	.wp-block-media-text:not(.is-stacked-on-mobile) .wp-block-media-text__content {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}

/* -------------------------------------------------------------------------- */
/*  Separator                                                                 */
/* -------------------------------------------------------------------------- */

/* A section divider is a hairline like every other rule on the site — 1px true
   black, full width of its column (DESIGN.md → Lines). This is the only place
   separator appearance is declared: the sheet loads on the frontend everywhere
   *and* through add_editor_style(), so the canvas and the page agree.

   Agreeing takes effort, because the two contexts don't load the same core CSS.
   `wp_should_load_separate_core_block_assets()` is true on WP 6.5+, so the
   frontend inlines only the separator's own `style.css`. The editor loads the
   whole `wp-block-library-theme` sheet — the one `add_theme_support(
   'wp-block-styles' )` asks for — which caps the rule at 100px and centres it.
   Rules sized to win only on the frontend therefore look right on the page and
   wrong in the editor, which is exactly the drift this section exists to stop.

   So each rule below mirrors a core selector with `hr` prepended, buying one
   element of specificity over it. Watch the `:not()`s when editing: `:not(.x)`
   contributes its argument's weight, so core's
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)` is (0,3,0), not
   (0,1,0), and a plain `hr.wp-block-separator` (0,1,1) loses to it.

   theme.json can't reach any of this — core/separator declares no `border`
   support, and theme.json only emits `:root :where(…)` at (0,1,0). Margins are
   a real support, so those stay in theme.json rather than being repeated here. */
hr.wp-block-separator {
	border: none;
	border-top: var(--wp--custom--border--line);
	height: 0;
}

/* Full width. Beats core's (0,3,0) 100px cap on the default variation.
   `auto` rather than `100%`: an <hr> is display:block and fills its container
   either way, but a fixed 100% would also override the width the layout rules
   hand an .alignwide / .alignfull separator, and max-width is left alone for
   the same reason. With width auto, core's `margin-inline: auto` centring
   resolves to zero, so the editor stops centring it too.

   The second selector catches any legacy `is-style-wide` content: the Wide Line
   variation is unregistered (inc/block-styles.php) because a full-width default
   makes it a duplicate, but content saved before that still carries the class. */
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots),
hr.wp-block-separator.is-style-wide:not(.is-style-dots) {
	width: auto;
}

/* Core's theme sheet fades legacy separators to 0.4 and resets newer ones.
   Both selectors are (0,2,0); pin the result so the two contexts match. */
hr.wp-block-separator.has-css-opacity,
hr.wp-block-separator.has-alpha-channel-opacity {
	opacity: 1;
}

/* An author-chosen background colour paints the rule itself — core drops the
   border and gives the element a height so the background is what shows. Core
   states this twice, at (0,3,0) and (0,4,0) with a 2px height; both are
   mirrored so the hairline stays 1px in the editor as well as on the page. */
hr.wp-block-separator.has-background:not(.is-style-dots),
hr.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
	border-top: none;
	height: var(--wp--custom--border--line-width);
}

/* Core draws the dots as a ::before in currentColor; point that at the line
   colour so the variation matches the hairline rather than the body text.
   `height: auto` restores what the base rule's `height: 0` would otherwise
   take away — core sets it at (0,1,0), which the base rule outranks. */
hr.wp-block-separator.is-style-dots {
	height: auto;
	color: var(--block-line);
}

/* -------------------------------------------------------------------------- */
/*  Details, code, footnotes                                                  */
/* -------------------------------------------------------------------------- */

.wp-block-details {
	border: 1px solid var(--block-line);
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	margin-block: var(--wp--preset--spacing--medium);
	background: var(--wp--preset--color--white, #fff);
}

.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
	color: var(--block-ink);
	list-style-position: outside;
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--block-accent);
	outline-offset: 3px;
}

.wp-block-details[open] summary {
	margin-bottom: var(--wp--preset--spacing--small);
}

.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
}

.wp-block-footnotes {
	font-size: var(--wp--preset--font-size--tiny, 0.9rem);
	color: var(--block-muted);
}

/* -------------------------------------------------------------------------- */
/*  Alignment — single-post reading column only                               */
/* -------------------------------------------------------------------------- */
/*  `.post-body-content` is a plain div, so core's `.is-layout-flow > .alignleft`
    float rules never match. These supply them, plus a wide/full breakout the
    44rem measure would otherwise trap.                                        */

.single-post .post-body-content {
	--post-wide: 56rem;
}

.single-post .post-body-content::after {
	content: "";
	display: block;
	clear: both;
}

.single-post .post-body-content > .alignleft {
	float: left;
	max-width: 50%;
	margin: 0.4em var(--wp--preset--spacing--medium) var(--wp--preset--spacing--small) 0;
}

.single-post .post-body-content > .alignright {
	float: right;
	max-width: 50%;
	margin: 0.4em 0 var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
}

/* `width: fit-content` rather than the classic `display: table` — core makes
   lightbox-enabled figures flex containers, and overriding their display would
   break the trigger button's placement. */
.single-post .post-body-content > .aligncenter {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.single-post .post-body-content > .aligncenter img {
	margin-inline: auto;
}

/* The `> * + *` rhythm in single-post.css would push a float down past the
   paragraph it should sit beside. */
.single-post .post-body-content > .alignleft + *,
.single-post .post-body-content > .alignright + * {
	margin-top: 0;
}

/* Break out of the measure. The width is capped against the viewport first, so
   a narrow window shrinks the breakout instead of overflowing; the negative
   margin is then derived from whatever width actually won. */
.single-post .post-body-content > .alignwide {
	--alignwide-width: min(var(--post-wide), calc(100vw - 2 * var(--wp--preset--spacing--large, 48px)));
	width: var(--alignwide-width);
	max-width: none;
	margin-inline: calc((100% - var(--alignwide-width)) / 2);
}

.single-post .post-body-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/* Headings and rules start a fresh band rather than wrapping a float. */
.single-post .post-body-content > :is(h2, h3, h4, blockquote, .wp-block-separator, .wp-block-pullquote) {
	clear: both;
}

/* A 50% float inside a 44rem column is unreadable on a phone. */
@media (max-width: 600px) {
	.single-post .post-body-content > .alignleft,
	.single-post .post-body-content > .alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}
}

/* -------------------------------------------------------------------------- */
/*  Reading column typography                                                 */
/* -------------------------------------------------------------------------- */

.single-post .post-body-content h4 {
	font-size: var(--wp--preset--font-size--medium, 1.25rem);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight, 1.25);
	margin-top: 1.5em;
	margin-bottom: 0.4em;
	color: var(--block-ink);
}

.single-post .post-body-content :is(h5, h6) {
	font-size: var(--wp--preset--font-size--normal, 1rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-top: 1.4em;
	margin-bottom: 0.3em;
	color: var(--block-ink);
}

.single-post .post-body-content h6 {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: var(--wp--preset--font-size--min, 0.8rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--block-muted);
}

/* Opening paragraph reads a step larger — a small editorial lift that only
   applies when the post opens on prose. */
.single-post .post-body-content > p:first-of-type {
	font-size: var(--wp--preset--font-size--medium, 1.25rem);
	color: color-mix(in srgb, var(--block-ink) 88%, #ffffff);
}

/* ============================================================
   core/image — "Fill height"   .is-style-fill-height

   Makes an image take the full height of whatever box it sits
   in and crop to it, rather than setting the box's height from
   its own aspect ratio. The intended use is a two-column row
   where the image column should match the text column.

   How the height resolves: `.wp-block-column` is a flex item of
   `.wp-block-columns`, and the default `align-items: stretch`
   gives it a definite height — the tallest column in the row.
   `height: 100%` on the figure therefore resolves against that,
   and `object-fit: cover` crops the img into it instead of
   letter-boxing.

   Degradation is deliberate: if the container has no definite
   height (image alone in a group, or this column is itself the
   tallest thing in the row) `100%` computes to `auto` and the
   image renders at its natural size — the same as Default.
   Nothing collapses to zero, which is why the flex basis below
   is `auto` and not `0`.

   Cropping is the point of the style, so pick a source image
   with room to lose on the long edge. object-position is
   centre; override per-image if a subject needs a different
   anchor.
   ============================================================ */

.wp-block-image.is-style-fill-height {
	height: 100%;
	/* Column layout so a figcaption keeps its own height and the
	   image flexes into what is left, instead of the two
	   overflowing a box that is now height-constrained. */
	display: flex;
	flex-direction: column;
	/* Core ships `.wp-block-image { margin: 0 0 1em }`. At 100%
	   height that margin lands outside the column and pushes the
	   crop past the row — blockGap handles sibling spacing here. */
	margin-block-end: 0;
}

/* The image's own wrapper varies: a bare <img>, an <a> when the
   image links out, or the editor's resize container in the
   canvas. All three need to be the element that stretches. */
.wp-block-image.is-style-fill-height > img,
.wp-block-image.is-style-fill-height > a,
.wp-block-image.is-style-fill-height > .components-resizable-box__container {
	flex: 1 1 auto;
	/* Flex items floor at min-content by default, which for a
	   replaced box is its intrinsic height — that would stop the
	   image shrinking to the column and force the row taller. */
	min-height: 0;
	width: 100%;
}

.wp-block-image.is-style-fill-height > a {
	display: block;
}

.wp-block-image.is-style-fill-height img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Kills the inline baseline gap under the image when it sits
	   inside the linked <a>. */
	display: block;
}