/*
 * wakefly/cards -- the one scoped stylesheet this block needs.
 *
 * Loaded through block.json's `style`/`editorStyle`, so it is enqueued only on a page that
 * renders the block and it is unaffected by the SCRIPT_DEBUG style.css/style.min.css split
 * in functions.php.
 *
 * WHAT IS MEASURED AND WHAT IS NOT, said once here rather than repeated per rule. ONE of the
 * nine Layout values was captured with computed styles -- image-top, at count-2, on instance
 * 1 -- because the extractor's per-selector pass resolves only the first match on a page.
 * Every box in the `image-top` section below is that measurement. The other eight layouts and
 * the two other column counts are READ FROM _cards.scss through the unit contract's own
 * variant entries, which quote the source's declarations; they are corroborated against the
 * page HTML and are not computed-style measured. Each such block says so above itself.
 */

/*
 * BORDER-BOX, SCOPED TO THIS BLOCK. Neither WordPress core nor this theme sets a global
 * box-sizing reset, and core's own `* { box-sizing: border-box }` ships inside the block
 * library stylesheet, which is only enqueued for blocks core knows are on the page -- this
 * block's markup is written by hand, so none of it applies.
 */
.wp-block-wakefly-cards,
.wp-block-wakefly-cards *,
.wp-block-wakefly-cards *::before,
.wp-block-wakefly-cards *::after {
	box-sizing: border-box;
}

/*
 * THE ROOT. MEASURED 1296x731 at 1440x900, backgroundColor rgba(0,0,0,0) -- TRANSPARENT, NOT
 * WHITE, and the contract calls that out against its own siblings: image-gallery,
 * pricing-tables and product-comparison all measure white and this one does not.
 * CardsWidget.cshtml paints no background and _cards.scss declares none. padding 24px
 * top/bottom only, from the shared `py-4` VerticalPadding class; no horizontal padding and no
 * border.
 */
.wp-block-wakefly-cards {
	padding-block: 1.5rem;
}

/* --------------------------------------------------------------------------- the intro */

/* MEASURED 1296x24 at 1440x900 -- one line of body copy at the theme's own defaults. */
.wp-block-wakefly-cards__intro {
	margin-block-end: 1rem;
}

.wp-block-wakefly-cards__intro > :first-child {
	margin-block-start: 0;
}

.wp-block-wakefly-cards__intro > :last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------- the grid */

/*
 * MEASURED 1296x643 at 1440x900, display grid, gap 24px. The 24 is `$grid-gutter-width`, and
 * it is this theme's spacing `50` slug (1.5rem) exactly -- so it is written as the preset's
 * own custom property rather than as `24px`, and a change to the scale reaches it.
 *
 * THE COLUMN LADDERS are _cards.scss's, per count: count-2 is `repeat(2, minmax(0,1fr))`
 * above lg; count-3 is 2 at sm and 3 at lg; count-4 is 2 at sm, 3 at md and 4 at lg. The
 * measured instance is count-2 at 1440, where the two 636px columns are exactly
 * (1296 - 24) / 2.
 *
 * WHAT count-2 DOES BELOW lg IS NOW MEASURED, AND THE GUESS THAT STOOD HERE WAS WRONG.
 * Until 2026-09-10 this file gave count-2 the same 576px step its two siblings carry and said
 * in as many words that the step was unmeasured -- "a single column from 576px up would be a
 * wider departure than a shared breakpoint". A fidelity measurement pass then measured the
 * SOURCE collapsing count-2 at 992px, not 576: at a 768px viewport the source renders ONE
 * column and this build rendered two, which is 928px of root height (560 against 1488). So
 * count-2 is a single column all the way to lg and only its siblings step at sm.
 */
.wp-block-wakefly-cards__items {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 576px) {
	.wp-block-wakefly-cards__items.is-count-3,
	.wp-block-wakefly-cards__items.is-count-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.wp-block-wakefly-cards__items.is-count-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.wp-block-wakefly-cards__items.is-count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-wakefly-cards__items.is-count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wp-block-wakefly-cards__items.is-count-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * THE LIST LAYOUTS SPAN EVERY COLUMN. _cards.scss carries its own comment on why: a list item
 * is a full-width row, so it has to span whatever column count the wrapper is in rather than
 * sit in one cell of it. That is the ONE Layout value that changes the wrapper's grid rather
 * than the card, which is why the rule is here and not in the layout section below.
 */
.wp-block-wakefly-cards__item.is-layout-list,
.wp-block-wakefly-cards__item.is-layout-list-no-image {
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------- the card */

.wp-block-wakefly-cards__item {
	display: flex;
}

/*
 * MEASURED 636x643 at 1440x900: display flex, flexDirection column, backgroundColor
 * rgb(255,255,255), borderRadius 6px.
 *
 * THE 6px IS BOOTSTRAP'S OWN `.card` RADIUS AND NOT THIS THEME'S -- the contract says so
 * explicitly, because no rule in _cards.scss sets it. It is therefore a literal here: there
 * is no theme.json token that means it, and writing one would be inventing a design decision
 * on wp-theme-scaffold's behalf.
 *
 * `overflow` IS `visible` HERE, AND IT IS MEASURED ON THE SOURCE RATHER THAN REASONED.
 * MEASURED 2026-09-10T15:02:30Z, probe.js `--props=overflow,borderRadius` at 1440x900 against
 * https://xperience-starter.wfdev.net/sandbox/page-builder-components/cards: the source chain
 * computes `.card` overflow `visible` / radius 6px, `.card-image` `visible` / 0px,
 * `.card-image-inner` `hidden` / 0px, `img` 6px 6px 0px 0px, `video` 0px. `overflow: hidden`
 * stood on this rule until 2026-09-10 and it was the LAST SURVIVING PIECE OF A MECHANISM
 * SENTENCE THAT HAS SINCE BEEN WITHDRAWN: the contract used to explain the image's radius as
 * "the card's own radius, clipped by `.card { overflow: hidden }`", that claim was measured
 * false on the source and removed from the contract, and this declaration outlived the
 * sentence that was its only justification. The clip is on `.card-image-inner`, one level
 * down, where the source puts it -- see that rule.
 *
 * WHY IT MATTERS AND NOT ONLY THAT IT DIFFERS: a clip and a radius produce the same picture
 * at image-top and are not the same thing anywhere else. With the clip here, a corner is
 * round because the card cuts it; with the radius on the `<img>` where the source declares
 * it, the corner is round because the image is round, which is what the source does and what
 * survives a layout that moves the image out of the corner.
 */
.wp-block-wakefly-cards__card {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	border-radius: 6px;
	background-color: var(--wp--preset--color--white);
}

/*
 * BORDERS AND SHADOWS ARE BOTH UNINSTANTIATED. Grepped across all 53 stored page payloads,
 * 2026-09-08: zero hits for `card-items-borders` and zero for `card-items-shadows`. So
 * _cards.scss's own two declarations are the only source for either, and neither has a box, a
 * colour or a screenshot behind it.
 *
 * The shadow is Bootstrap's `.shadow` utility, which _cards.scss `@extend`s; its value is
 * Bootstrap's default box-shadow and is written out here because there is nothing to
 * `@extend` in a no-build theme.
 */
.wp-block-wakefly-cards__items.is-borders .wp-block-wakefly-cards__card {
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 10px;
}

.wp-block-wakefly-cards__items.is-shadows .wp-block-wakefly-cards__card {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.wp-block-wakefly-cards__card.has-text-start {
	text-align: start;
}

.wp-block-wakefly-cards__card.has-text-center {
	text-align: center;
}

.wp-block-wakefly-cards__card.has-text-end {
	text-align: end;
}

/* --------------------------------------------------------------------------- the image */

/*
 * MEASURED 636x477 at 1440x900 on the image-top layout: aspect-ratio 4/3 declared on
 * .card-image-inner, objectFit cover, and backgroundColor rgb(33,37,41) visible in the
 * letterboxed margin -- which is the card's own background keyword painting THROUGH the
 * image's contain-shaped gap, not a colour of the image element's.
 *
 * THE SOURCE FILE IS 3:2 AND THE CSS ASKS FOR 4:3, which the contract records as a crop the
 * source's own image-size registration does not name. Reproducing it means reproducing the
 * mismatch: the ratio is declared here and the file is served at `full`.
 */
.wp-block-wakefly-cards__image {
	position: relative;
	overflow: hidden;
}

/*
 * THE CLIP LIVES HERE, WHERE THE SOURCE PUTS IT. MEASURED 2026-09-10T15:02:30Z on the source
 * at 1440x900: `.card-image-inner` computes `overflow: hidden` with `borderRadius: 0px` -- it
 * clips to a SQUARE, so it rounds nothing; it is the box that contains the replaced element to
 * the 4/3 ratio this rule declares. This build had it inverted until 2026-09-10 (`hidden` on
 * `__card`, `visible` here) and no instrument could see it: `overflow` is absent from
 * lib/measure.js's STYLE_PROPS, so no capture records it and no comparison can carry a row.
 * The two values were read with probe.js by hand, on both origins, and that is the only
 * evidence either way.
 */
.wp-block-wakefly-cards__image-inner {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.wp-block-wakefly-cards__media,
.wp-block-wakefly-cards__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * THE IMAGE'S TWO TOP CORNERS. Added 2026-09-10 against a measured difference: the reference
 * computes `6px 6px 0px 0px` on the card image at all four viewports and this build computed
 * `0px` at all four.
 *
 * THE CONTRACT ALREADY RECORDED IT AND THIS FILE MISREAD HOW. `structure`'s core/image node
 * says "Radius 6px on the top two corners only (6px 6px 0px 0px) -- the card's own radius,
 * clipped by `.card { overflow: hidden }`", and the comment on
 * .wp-block-wakefly-cards__card above repeats that reading to justify its `overflow: hidden`.
 * THE READING IS WRONG, and it is why the build shipped square: `overflow: hidden` on an
 * ancestor CLIPS a child's painted corners, but it does not give the child a computed
 * `border-radius` -- the child stays `0px` and a computed-style comparison reads `0px`.
 * MEASURED on this install before the fix, 2026-09-10, tooling/extract/probe.js over page 233
 * at 1440x900 / 1024x768 / 768x1024 / 390x844: __card 6px at all four, __image 0px,
 * __image-inner 0px, __media 0px, __video 0px. So the source's own image element carries a
 * radius declaration of its own, and reproducing the measurement means declaring one here.
 *
 * IT GOES ON THE <img> AND ON THE <img> ONLY. NOT ON EITHER WRAPPER DIV, because those are
 * not the elements the measurement pairs: __image and __image-inner are non-replaced divs and
 * both compute `object-fit: fill` against the source's `cover`, while __media computes `cover`
 * on both sides in an identical box. A declaration on a wrapper would leave the paired element
 * at 0px and change nothing that is measured.
 *
 * AND NOT ON THE <video>, WHICH IS A REGRESSION THIS RULE INTRODUCED AND THIS SPLIT CLOSES.
 * `0051155` hung one selector on `__media, __video` together, having measured only the BUILD's
 * pre-fix video (0px, along with everything else) and never the SOURCE's -- so its own
 * after-state agreed with it and there was nothing left to disagree. MEASURED on the source
 * 2026-09-10T15:02:30Z, probe.js at 1440x900: `.card-item-layout-image-top .card-image-inner
 * video` computes `borderRadius: 0px`. The source rounds its image and does not round its
 * video, and the two therefore need two selectors. The `<img>` half was correct and is
 * untouched.
 *
 * A PIXEL PERCENTAGE CANNOT ADJUDICATE THIS AND MUST NOT BE USED TO. render.php emits the
 * video `autoplay muted loop`, so the element-clipped PNG catches a different frame on every
 * run: this unit's whole 9.94 / 6.79 / 4.61 / 3.69 per-cent difference is that one box, and
 * the `<img>` card beside it is pixel-clean at every viewport. Read the computed value.
 *
 * NOT A BLOCK ATTRIBUTE, and the rung is not being skipped. This unit is `rung:
 * custom-block` / `unit_type: acf-block`: the image is a hand-written <img> in render.php,
 * not a core block, so there is no block attribute for it to carry and no core serialiser to
 * write one. (The sibling unit closed the same difference as a core/post-featured-image
 * attribute, where core's own `__experimentalBorder.__experimentalSkipSerialization` re-emits
 * the radius onto the image tag. NEITHER HALF OF THAT MECHANISM EXISTS HERE.) This is the
 * rule the skill's own §"A CSS rule scoped to your unit is yours to write" describes: hung
 * off this unit's own hook class, in this unit's own stylesheet, reaching nothing else.
 *
 * `6px` IS THE SAME LITERAL THE CARD ABOVE CARRIES and for the same reason -- it is
 * Bootstrap's default `.card` radius, no rule in _cards.scss sets it, and `border-radius` is
 * in no preset family, so there is no token spelling to prefer (INLINE_FAMILY in
 * tooling/extract/lib/presets-check.js covers colour, font-size and spacing only). The two
 * literals must agree: if the card's 6px moves, this moves with it.
 *
 * ONLY THE TWO TOP CORNERS ARE WRITTEN. An unset corner computes 0px, which is the source's
 * own value for the bottom pair, and nothing in this theme declares a radius for the image to
 * inherit instead -- so `border-bottom-left-radius: 0` would be a second spelling of a value
 * nothing sets.
 *
 * SCOPED TO `image-top`, WHICH IS THE ONLY LAYOUT THAT IS MEASURED OR REASONED. The image is
 * the card's flush first child only in this layout, so the top pair is the pair it occupies.
 * The other eight put it somewhere else -- `image-bottom` reorders it, `list` sits it at the
 * left of a row, the three full-bleed layouts inset it over the whole card, and
 * `image-top-title-above` puts the title above it so it is not in the corner at all -- and
 * NONE of those is computed-style measured (the contract records each as read from
 * _cards.scss, not measured, and `image-top-title-above` as uninstantiated site-wide). They
 * are left square deliberately rather than guessed at. That sentence used to end "the card's
 * own `overflow: hidden` still clips them, so nothing paints outside the corner in any of
 * them"; the card's `overflow` is now `visible`, because the source's is, so what those eight
 * paint is one more thing about them nobody has measured -- unchanged in being unmeasured,
 * and said plainly rather than left implied. Closing them needs a measurement that does not
 * exist yet -- handed back, not invented.
 */
.wp-block-wakefly-cards__item.is-layout-image-top .wp-block-wakefly-cards__media {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

/* ------------------------------------------------------------------------- the content */

/*
 * MEASURED 636x166 at 1440x900: display flex, flexDirection column, backgroundColor
 * rgb(33,37,41) -- inherited from the card's Background Color keyword, not a colour of its
 * own -- and the padding SPLIT BETWEEN BODY AND FOOTER rather than set on this element: 16px
 * on all four sides of the body, and 16px on three sides of the footer with nothing on top.
 * The footer measures 636x62 and the body the remaining 104.
 */
.wp-block-wakefly-cards__content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.wp-block-wakefly-cards__body {
	flex-grow: 1;
	padding: 1rem;
}

/*
 * NOT INSTANTIATED ANYWHERE IN THE CRAWL. _cards.scss's two declarations for it --
 * `font-size: $font-size-sm` and `margin-bottom: .5 * $spacer` -- are the only source, and
 * the small font size is this theme's `small` preset (0.875rem), which is Bootstrap's
 * $font-size-sm as well.
 */
.wp-block-wakefly-cards__pretitle {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * MEASURED fontSize 20px, which is this theme's own `h5` element style (1.25rem) exactly, so
 * the promoted <h5> already carries it and nothing sets a size here.
 *
 * THE WEIGHT IS 400, AND IT IS THE ONE DECLARATION HERE THAT NO COMPARISON CAN DEFEND.
 * This rule set no weight until 2026-09-10, so the promoted <h5> took theme.json's
 * styles.elements.heading value of 800 -- named in that build's hand-back as inherited
 * knowingly, since the contract measures this element's size and colour and not its weight.
 * A fidelity measurement pass on 2026-09-10 measured the source's title at 400 against this
 * build's 800, same size, same box. IT IS INVISIBLE TO THE COMPARISON: the source renders
 * div.card-title.h5 and this build promotes it to a real <h5> (the contract's own `decided`
 * node, on CLAUDE.md's accessibility standard), so the two elements never pair and an
 * unpaired element carries no computed-style rows. The fix is here rather than by unpicking
 * the <h5>, because the promotion is a recorded decision and the weight is not part of it.
 */
.wp-block-wakefly-cards__title {
	margin-block: 0 0.5rem;
	font-weight: 400;
}

/*
 * THE TWO MARGINS ABOVE AND BELOW ARE THE MISSING 16px, AND THE ARITHMETIC IS WHAT FOUND
 * THEM. The contract measures card-content at 636x166 and card-footer at 636x62, which leaves
 * the body exactly 104. With no margins at all this build measured 88: 16 + 16 of padding,
 * a 24px title line box and a 24px paragraph line box. The remaining 16 is Bootstrap
 * reboot's own pair -- `.card-title { margin-bottom: .5rem }` and `p { margin-bottom: 1rem }`
 * -- which the source inherits and a hand-written block does not, since WordPress's own
 * paragraph spacing is block-gap rather than a margin. 32 + 24 + 8 + 24 + 16 = 104, measured
 * back at 104 after this change.
 */
.wp-block-wakefly-cards__text > :first-child {
	margin-block-start: 0;
}

.wp-block-wakefly-cards__text > p {
	margin-block: 0 1rem;
}

/*
 * MEASURED 636x62 with padding 0/16/16/16 -- the top padding is the body's, which is why
 * there is none here.
 *
 * NOT A FLEX ROW, AND THE ROW GAP IS WHY. This rule was `display: flex; flex-wrap: wrap;
 * gap: 8px` until 2026-09-10, and a fidelity measurement pass measured the source's footer
 * as `display: block` with inline-block anchors and NO ROW GAP AT ALL. Where the footer does
 * not wrap (1440, 768) the two sides were already identical at h=62, so the 8px was
 * invisible there; where it wraps it added 8px per wrap -- source 46 + 46 + 16 = 108 against
 * a build 46 + 8 + 46 + 16 = 116 -- and that reached the root as +8 at 1024 (one card wraps)
 * and +16 at 390 (both cards wrap, stacked).
 *
 * THE HORIZONTAL SEPARATION IS THE SOURCE'S MECHANISM, NOT A NUMBER. The source separates
 * adjacent anchors with the collapsed whitespace between two inline-blocks, which is one
 * space of the inherited 16px Roboto -- MEASURED 3.97px here, and the same measurement pass
 * measured the flex `gap: 8px` displacing the CTAs by 4px horizontally, which is 8 - 3.97.
 * So the mechanism is reproduced rather than the figure rounded to 4px: both sides then
 * derive the separation from the same font at the same size, and a later type change moves
 * them together instead of apart.
 *
 * `line-height: 0` KILLS THE STRUT SO A WRAPPED LINE BOX IS EXACTLY THE 46px BUTTON. Without
 * it the block container's own 24px strut sits on each line's baseline and an inline-block
 * aligned to that baseline pushes the line box past 46. It does not reach the anchors:
 * theme.json's styles.elements.button sets lineHeight 1.5 explicitly, so the button's own
 * text is unaffected. `vertical-align: top` on the anchor is the other half -- see its rule.
 */
.wp-block-wakefly-cards__footer {
	display: block;
	padding: 0 1rem 1rem;
	line-height: 0;
}

/*
 * MEASURED 150x46 with padding 10px/20px and a 24px line box: 10 + 24 + 10 = 44, and the
 * remaining 2 is one pixel of border on each edge. theme.json's styles.elements.button
 * carries the padding, the colour, the 700 weight and the 1.5px letter-spacing, so
 * `wp-element-button` in the markup is the whole of that; only the border lives here, because
 * core writes a core/button's border inline and there is no core/button in this markup.
 *
 * `transparent` so that a button with no per-link colour is the same 46px tall as one with
 * a preset border colour, without painting an edge the measurement does not show; a
 * `has-<colour>-border-color` preset class overrides it where render.php emits one.
 *
 * THE SELECTOR CARRIES TWO CLASSES DELIBERATELY. Global styles emit
 * `:root :where(.wp-element-button, .wp-block-button__link) { ... border-width: 0 ... }`,
 * measured in this page's own head -- specificity (0,1,0), because `:where()` contributes
 * nothing and `:root` contributes the one class-equivalent. A single-class rule here ties
 * with it and loses on order, which is exactly what happened: the button measured 148x44
 * against the contract's 150x46 until this selector gained its second class.
 */
.wp-block-wakefly-cards__cta.wp-element-button {
	display: inline-block;
	vertical-align: top;
	border: 1px solid transparent;
	text-decoration: none;
}

/* ----------------------------------------------------------- the background keywords */

/*
 * SEVEN OF THE FOURTEEN REGISTERED VALUES, and render.php's own comment says why the other
 * seven paint nothing. Two are measured -- `dark` is card 1's rgb(33,37,41) and `primary` is
 * card 2's -- and the rest follow Bootstrap's `.text-bg-*` shape, which sets a background AND
 * a readable foreground, mapped onto this theme's presets rather than Bootstrap's palette.
 *
 * TWO ELEMENTS, NOT THREE. Each pair below targets the image and the content and NOT the
 * card root. The unit contract says the utility is "applied to both card-image and
 * card-content", and it measures the `.card` element itself at rgb(255,255,255) on the same
 * instance whose image and content are both rgb(33,37,41) -- so the card keeps the white
 * from its own base rule above. A third selector on `__card` stood here until 2026-09-10 and
 * painted the root dark; render.php's own comment at the class-building site carries why
 * that was invisible on the captured instance and where it stops being invisible.
 */
.wp-block-wakefly-cards__image.is-bg-primary,
.wp-block-wakefly-cards__content.is-bg-primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.wp-block-wakefly-cards__image.is-bg-secondary,
.wp-block-wakefly-cards__content.is-bg-secondary {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.wp-block-wakefly-cards__image.is-bg-dark,
.wp-block-wakefly-cards__content.is-bg-dark {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
}

.wp-block-wakefly-cards__image.is-bg-black,
.wp-block-wakefly-cards__content.is-bg-black {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.wp-block-wakefly-cards__image.is-bg-white,
.wp-block-wakefly-cards__content.is-bg-white {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body-text);
}

.wp-block-wakefly-cards__image.is-bg-light-gray,
.wp-block-wakefly-cards__content.is-bg-light-gray {
	background-color: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--body-text);
}

.wp-block-wakefly-cards__image.is-bg-warning,
.wp-block-wakefly-cards__content.is-bg-warning {
	background-color: var(--wp--preset--color--warning);
	color: var(--wp--preset--color--body-text);
}

/* ------------------------------------------------------------------------- the layouts */

/*
 * EIGHT OF THE NINE ARE READ FROM _cards.scss AND ARE NOT COMPUTED-STYLE MEASURED. The
 * extractor resolves only the first match per selector, so instance 1 (image-top) carries all
 * the box data on that page and instances 2-8 carry none. Each rule below is the declaration
 * the unit's own `variants` entry quotes for that layout.
 */

/*
 * image-bottom: `.card-image { order: 1 }` -- the image after the content in flex order,
 * which is why the markup order is unchanged and only the order property moves.
 */
.wp-block-wakefly-cards__item.is-layout-image-bottom .wp-block-wakefly-cards__image {
	order: 1;
}

/*
 * THE THREE FULL-BLEED LAYOUTS. The image is taken out of flow and covers the whole card, and
 * the content sits over it on its own tint plate -- which is what the unit's `rung` field
 * names as the reason a single core-block tree cannot express this widget: it is a DIFFERENT
 * COMPOSITION per layout, not a restyle of one.
 *
 * The tint is `dark`: render.php forces the card's Background Color keyword to it for exactly
 * these three layouts, because Card.cshtml's own `alwaysHasBackground` switch does, and the
 * `layout-image-full` variant records both of its cards as forced `text-bg-dark`. The
 * `margin-top: 60%` and the `padding: 2*$spacer 0` below are _cards.scss's own numbers, and
 * $spacer is Bootstrap's default 1rem -- an inference, and the one in this file, stated here
 * rather than buried.
 */
.wp-block-wakefly-cards__item.is-layout-image-full .wp-block-wakefly-cards__image,
.wp-block-wakefly-cards__item.is-layout-image-content-full .wp-block-wakefly-cards__image,
.wp-block-wakefly-cards__item.is-layout-image-full-content-left .wp-block-wakefly-cards__image {
	position: absolute;
	inset: 0;
	background-color: transparent;
}

.wp-block-wakefly-cards__item.is-layout-image-full .wp-block-wakefly-cards__image-inner,
.wp-block-wakefly-cards__item.is-layout-image-content-full .wp-block-wakefly-cards__image-inner,
.wp-block-wakefly-cards__item.is-layout-image-full-content-left .wp-block-wakefly-cards__image-inner {
	aspect-ratio: auto;
	height: 100%;
}

.wp-block-wakefly-cards__item.is-layout-image-full .wp-block-wakefly-cards__content,
.wp-block-wakefly-cards__item.is-layout-image-content-full .wp-block-wakefly-cards__content,
.wp-block-wakefly-cards__item.is-layout-image-full-content-left .wp-block-wakefly-cards__content {
	position: relative;
}

.wp-block-wakefly-cards__item.is-layout-image-full .wp-block-wakefly-cards__content {
	margin-block-start: 60%;
}

.wp-block-wakefly-cards__item.is-layout-image-content-full .wp-block-wakefly-cards__content {
	padding-block: 2rem;
	padding-inline: 0;
}

/*
 * image-full-content-left is the one layout that also turns the card into a row, so the
 * content occupies the left half and the full-bleed image shows through on the right. The
 * 50% margin is `@include media-breakpoint-up(sm)` in _cards.scss, hence the 576px query.
 */
.wp-block-wakefly-cards__item.is-layout-image-full-content-left .wp-block-wakefly-cards__card {
	flex-direction: row;
}

@media (min-width: 576px) {
	.wp-block-wakefly-cards__item.is-layout-image-full-content-left .wp-block-wakefly-cards__content {
		margin-inline-end: 50%;
	}
}

/*
 * THE TWO LIST LAYOUTS put the card on a row -- image beside content rather than above it --
 * and the second hides the image entirely. `.card-image { display: none }` is _cards.scss's
 * own rule for both no-image and list-no-image, and render.php also skips the element for
 * those two so a hidden box is not shipped to a screen reader.
 */
.wp-block-wakefly-cards__item.is-layout-list .wp-block-wakefly-cards__card,
.wp-block-wakefly-cards__item.is-layout-list-no-image .wp-block-wakefly-cards__card {
	flex-direction: row;
}

.wp-block-wakefly-cards__item.is-layout-list .wp-block-wakefly-cards__image {
	flex: 0 0 33%;
}

.wp-block-wakefly-cards__item.is-layout-list .wp-block-wakefly-cards__image-inner {
	height: 100%;
}