/*
 * wakefly/product-comparison — 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.
 *
 * EVERY NUMBER BELOW IS A MEASUREMENT OR ARITHMETIC OVER TWO OF THEM, and where a value is
 * neither it says so in its own comment. Colour and on-ladder type values are theme.json
 * presets rather than declarations, per CLAUDE.md's build preference order: a token before a
 * declaration even inside a custom block. Most of the spacing here is a literal px value
 * rather than a preset — units/product-comparison.yml's own `why` records that 44px, 50px,
 * 30px and 10px all match no rung on this theme's spacing ladder (20/30/40/50/60 =
 * 4/8/16/24/48px), and are permitted as literals since `settings.spacing` carries no
 * off-ladder gate the way `settings.typography` does.
 */

.wp-block-wakefly-product-comparison,
.wp-block-wakefly-product-comparison *,
.wp-block-wakefly-product-comparison *::before,
.wp-block-wakefly-product-comparison *::after {
	box-sizing: border-box;
}

/*
 * THE ROOT. MEASURED: display flex, flexDirection column, gap 44px (2.75rem in the source's
 * own SCSS), padding 24px top/bottom (Bootstrap's own `py-4` utility) + 50px left/right (the
 * block's own rule, `_product-comparison.scss`'s `padding: 3.125rem`). Background is set via
 * the `has-white-background-color has-background` utility classes render.php adds, matching
 * the measured rgb(255,255,255) at every viewport.
 */
/*
 * `position: relative` COMES FROM THE SOURCE'S SITE-WIDE `.page-component { position: relative }`
 * (dist/styles/main.css), which every widget root on that site carries. MEASURED `position:
 * relative` on this unit's root at all four viewports, 2026-09-09, against `static` here.
 *
 * It is invisible -- nothing in this block is absolutely positioned, so no containing block is
 * ever consulted -- and it is reproduced because `position` is a compared computed property on
 * the unit's own root, four rows that would otherwise need adjudicating.
 *
 * IT IS NOT SPECIFIC TO THIS UNIT, and that is in the hand-back: the source rule is on every
 * `.page-component`, so all twelve blocks in this theme carry the same gap. Fixing it once, for
 * all block roots, is a theme decision (wp-theme-scaffold) rather than eleven more copies of
 * this comment.
 */
.wp-block-wakefly-product-comparison {
	display: flex;
	position: relative;
	flex-direction: column;
	gap: 44px;
	padding-block: 24px;
	padding-inline: 50px;
}

/*
 * div.header / div.intro — UNINSTANTIATED IN THE CAPTURED REFERENCE. render.php only emits
 * this when Intro is non-blank, which never happens on the one placement of this widget in
 * the 53-page crawl. No layout is measured for it, so nothing is declared for it here — the
 * root's own 44px flex gap already separates it from the cards row, and the theme's own
 * defaults paint everything else.
 */

/*
 * div.cards. MEASURED flexDirection row at 1440x900 and 1024x768, column at 768x1024 and
 * 390x844 — the source's own `@include media-breakpoint-up(lg)` (Bootstrap lg=992px), which
 * matches this theme's own declared `viewport.tablet: 991.98px` in theme.json exactly. Gap
 * 50px at every viewport (3.125rem).
 */
/*
 * `flex-wrap` IS DELIBERATELY ABSENT, against this unit's own contract. `structure` prescribes
 * `layout: { type: flex, orientation: horizontal, flexWrap: wrap }` on this group, but `wrap` is
 * the WordPress default for a flex layout and the contract's `why` names only flexDirection as
 * measured. The source declares no flex-wrap at all and MEASURES `nowrap` (probe.js --props=all,
 * 2026-09-09, all four viewports). It is inert either way -- three `flex: 1 0 0` items never
 * reach a wrap point -- but `flexWrap` is a compared computed property, so the contract's value
 * would have cost four rows for nothing. The discrepancy is in the hand-back.
 */
.wp-block-wakefly-product-comparison__cards {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

/*
 * `align-items: flex-start` IS INSIDE THE BREAKPOINT BECAUSE THE SOURCE PUTS IT THERE, and it
 * is the whole reason the cards are allowed to be different heights. `_product-comparison.scss`
 * declares it in the same `@include media-breakpoint-up(lg)` block as `flex-direction: row`, so
 * below 992px -- where the row is a column and stretching is what fills the width -- it does not
 * apply at all.
 *
 * MEASURED on the live source 2026-09-09 (probe.js --props=all over `.product-comparison .cards`
 * and `.card`, 1440x900): the row computes `alignItems: flex-start` and its three cards measure
 * 365x466, 365x513, 365x466 -- ragged, the featured one taller by exactly the badge row it alone
 * carries. Without this the build stretched all three to the tallest, which is invisible only
 * while every card's copy happens to be the same length. This instance's copy is not.
 */
@media (min-width: 992px) {
	.wp-block-wakefly-product-comparison__cards {
		flex-direction: row;
		align-items: flex-start;
	}
}

/*
 * div.cards > div.card. MEASURED (on the non-featured card): border 2px solid
 * rgb(13,110,253) — this theme's `primary` slug exactly, added via render.php's
 * `has-primary-border-color` class, with the width and style declared here since core has no
 * border-width utility class. boxShadow measured
 * "rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px" — not expressible as
 * a shadow preset on this theme, so it is a literal declaration.
 *
 * `flex: 1 0 0` is the source's own rule (`.card { flex: 1 0 0 }`): equal thirds of the row
 * at the two wide viewports, and full width once the parent stacks to column above, where a
 * flex item's cross-axis size stretches to fill by default.
 *
 * THE FEATURED CARD'S BORDER IS ORANGE AND ITS SHADOW IS THE SAME, MEASURED 2026-09-09. The
 * contract still cannot say so -- its `structure` only measures "div.cards > div.card
 * (non-featured)" and it carries no `variants:` key, so the featured card has nowhere in the
 * definition to live, and that gap is in the hand-back. What settled it is a direct measurement
 * of the live source (probe.js --props=all over `.product-comparison .card`, 3 matches,
 * 1440x900): borderColor rgb(13,110,253) / rgb(240,100,0) / rgb(13,110,253) and an identical
 * two-layer boxShadow on all three. The colour is render.php's per-card preset class; the width,
 * the style and the shadow stay here, uniform, because they genuinely are.
 *
 * `position: relative` AND THE CARD'S WHITE FILL ARE BOOTSTRAP `.card` BASE VALUES the source
 * inherits by using that class name -- `position:relative;...;background-color:#fff` in
 * Website/wwwroot/css/bootstrap/bootstrap.min.css, and MEASURED as computed `position: relative`
 * / `rgb(255,255,255)` on all three source cards. Both are invisible here: nothing inside the
 * card is absolutely positioned, and the header and body between them cover every pixel of the
 * fill. They are reproduced because they are real computed differences on 24 rows that would
 * otherwise need adjudicating one by one. The fill itself is render.php's
 * `has-white-background-color has-background`, the same preset classes the root and the card-body
 * already use.
 */
.wp-block-wakefly-product-comparison__card {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	position: relative;
	border-width: 2px;
	border-style: solid;
	box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
}

/*
 * div.card-header. MEASURED backgroundColor rgb(237,234,229) on a DEFAULT card — this theme's
 * `footer-content` slug exactly, added in render.php. Padding 30px on all sides, gap 10px
 * between the name and tagline, borderBottom 1px solid rgb(237,234,229) — same colour as the
 * fill, an invisible border in this theme's palette, reproduced because the source's own rule
 * (`border-bottom: 1px solid var(--pc-header-bg)`) genuinely paints one.
 */
/*
 * `align-items: center` AND `text-align: center` ARE THE SOURCE'S OWN TWO DECLARATIONS ON THIS
 * ELEMENT, and this rule carried neither until 2026-09-09. text-align looked covered, because
 * render.php puts `has-text-align-center` on the name and the tagline individually; align-items
 * was not covered by anything, and it is what makes every child of this header shrink-wrap
 * instead of filling the 301px content width.
 *
 * MEASURED on the live source 2026-09-09 (probe.js, 1440x900): h3.name is 301 / 187 / 289 px
 * wide across the three cards and p.tagline 200 / 135 / 220 -- content-width, not column-width,
 * and only the first name is 301 because its text happens to reach the maximum. The badge above
 * is 116px for the same reason, and it is the child that cannot be faked with text-align.
 */
.wp-block-wakefly-product-comparison__card-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 30px;
	border-bottom: 1px solid var(--wp--preset--color--footer-content);
	text-align: center;
}

/*
 * THE FEATURED CARD'S HEADER IS WHITE. The fill itself is render.php's class (see its own
 * comment there for the measurement and its provenance); this rule is the border that has to
 * follow it, because the source paints `border-bottom: 1px solid var(--pc-header-bg)` — always
 * the header's own fill colour — and leaving it beige under a white fill would draw a visible
 * 1px line the source does not have.
 */
.wp-block-wakefly-product-comparison__card.is-featured .wp-block-wakefly-product-comparison__card-header {
	border-bottom-color: var(--wp--preset--color--white);
}

/*
 * div.badge -- THE "FEATURED" PLATE, which this build did not have at all until 2026-09-09.
 * render.php carries the markup and the provenance of the literal; this is its treatment.
 *
 * MEASURED on the live source 2026-09-09 (probe.js --props=all over `.product-comparison .badge`,
 * 1440x900), and every value below is one of those or the preset that carries it:
 *
 *   box           116x37 @662,174  -- shrink-wrapped, which is what card-header's `align-items:
 *                                     center` buys; 116 is the text's width plus 12px each side
 *   padding       5px 12px         (`0.3125rem 0.75rem`)
 *   fontSize      18px             -- this theme's `large` rung, ON the ladder, so a preset class
 *                                     in render.php rather than a declaration here
 *   fontWeight    400              -- the element's own default; not declared on either side
 *   lineHeight    27px             -- 1.5 x 18px, the theme's inherited unitless 1.5. The source
 *                                     reaches the same number by resetting Bootstrap's
 *                                     `.badge { line-height: 1 }` back to `inherit`; nothing here
 *                                     sets it to 1 in the first place, so nothing resets it
 *   letterSpacing 0.6px
 *   textTransform uppercase        -- the STORED string is "Featured"; the capitals are painted
 *   textAlign     center           -- inherited from card-header, as on the source
 *   colour        rgb(255,255,255) -- `white`     ) both preset classes, in render.php
 *   background    rgb(240,100,0)   -- `secondary` )
 *   borderRadius  4px              (`0.25rem`)
 *
 * That 37px is the whole of why the featured card measures 513px tall against its siblings' 466.
 */
.wp-block-wakefly-product-comparison__badge {
	padding: 5px 12px;
	border-radius: 4px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/*
 * div.icon. GEOMETRY ONLY IS MEASURED — 56x56 circle, 28x28 glyph, read from
 * `_product-comparison.scss`'s `.icon` rule. The fill colour (`--pc-icon-bg` in the source) is
 * not corroborated against any rendered instance, so no background-color is set here; see the
 * hand-back.
 */
.wp-block-wakefly-product-comparison__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
}

.wp-block-wakefly-product-comparison__icon img {
	width: 28px;
	height: 28px;
}

/*
 * h3.name. Colour MEASURED rgb(28,58,169) — this theme's `bright-blue` slug exactly, added in
 * render.php. fontWeight 800 and 35px AT ALL FOUR VIEWPORTS (1440/1024/768/390) are both
 * declared literally: 35px matches no preset on this theme's fontSize ladder (small 14,
 * medium 16, large 18, x-large 20, xx-large 40) and check-cross-artifact's `type-off-the-ladder`
 * refuses it as a `style.typography.fontSize` block attribute, so it lives here instead —
 * the same shape as units.stats-kpi's stat-value fontSize, and `metric-value` below shares
 * the identical 35px measurement.
 */
.wp-block-wakefly-product-comparison__name {
	margin: 0;
	font-size: 35px;
	font-weight: 800;
}

/*
 * p.tagline. MEASURED colour rgb(51,51,51) (body-text, added in render.php), fontSize 16px
 * (medium — ON ladder, added via render.php's `has-medium-font-size`), fontWeight 400 (the
 * element's own default), textAlign center (render.php's `has-text-align-center`).
 */
.wp-block-wakefly-product-comparison__tagline {
	margin: 0;
}

/*
 * div.card-body. MEASURED 361x325 at 1440x900, backgroundColor white (render.php's
 * `has-white-background-color`), gap 30px, padding 30px.
 */
.wp-block-wakefly-product-comparison__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 30px;
	padding: 30px;
}

/*
 * ul.features.list-unstyled. MEASURED 4 li.feature items, each 301px wide (an outcome of the
 * card-body's own 30px padding, not restated here), fontSize 16px (medium), colour body-text,
 * an inline SVG glyph at 16x16 (see render.php).
 *
 * THE 10px GAP IS NOW MEASURED. It was 8px, "a minimal, unmeasured default", because the
 * contract records no gap for this list at all. Measured on the live source 2026-09-09 (probe.js
 * over `.product-comparison .features`, 1440x900): `gap: 10px`, and the list box checks against
 * its own items -- 16 + 32 + 16 + 16 of item height plus three 10px gaps is the 110px the list
 * measures. It is `0.625rem` in _product-comparison.scss, the same 10px this file already carries
 * on card-header and metric.
 */
.wp-block-wakefly-product-comparison__features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * li.feature. LINE-HEIGHT 1, NOT THE THEME'S INHERITED 1.5. Reference measurement:
 * `lineHeight` 16px at a 16px font-size, i.e. a ratio of exactly 1 — measured by the
 * verification package on 2026-09-09 against the build's own computed styles, and NOT carried
 * by this unit's contract, whose `structure` records the item's width, font size, colour and
 * glyph but no line-height at all. That gap is in the hand-back. Built here as the ratio
 * rather than as `16px`, which is the same number only while the font size is the 16px
 * `medium` rung the contract measures at every viewport.
 *
 * ALIGN-ITEMS AND THE ICON'S MARGIN MOVE WITH IT, and that is one change rather than three.
 * `align-items: flex-start` plus a compensating `margin-block-start: 2px` on the glyph existed
 * only to sit a 16x16 icon against a 24px line box; with a 16px line box the text and the icon
 * are the same height, the compensator would push the row to 18px, and `center` — which is the
 * reference's own measured value for this property — costs nothing. Measured identical on the
 * demo instance either way, since every feature there is one line.
 *
 * WHAT THIS REPRODUCES IS A SOURCE CHARACTERISTIC, not a comfortable one: a feature long
 * enough to wrap gets no leading between its lines. No captured feature wraps, on either side,
 * so nothing measures what the source does there.
 */
/*
 * THE ICON-TO-TEXT GAP IS 10px, NOT 8px, and this is a second unmeasured 8px that sat beside the
 * list's own (above): the source's `.feature { gap: 0.625rem }`, MEASURED `gap: 10px` on all 12
 * feature items at all four viewports, 2026-09-09.
 */
.wp-block-wakefly-product-comparison__feature {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
}

/*
 * NO `flex-shrink: 0` ON THE GLYPH, AND THAT IS THE SOURCE'S BEHAVIOUR RATHER THAN AN OVERSIGHT.
 * The source sets nothing on this svg at all, so when a feature's text hits its min-content width
 * the only item left that can shrink is the icon, and it does: MEASURED on the live source
 * 2026-09-09, the glyphs run 9-12px wide at 1024x768 and 10-11px at 390x844, against 16px at
 * 1440x900 and 768x1024 where the column is wide enough. Holding them at 16 was more comfortable
 * and less faithful -- it moved the wrap point of every feature line on a phone.
 */

/*
 * div.metric, present only when a secondary title/value is set. MEASURED box 301x125 at
 * 1440x900; display flex column, gap 10px.
 *
 * `align-items: center`, NOT `justify-content: center` -- on a column flex container those are
 * different axes, and this rule carried the one that does nothing here: the two children already
 * fill the box on the main axis. What the source declares is `align-items: center`
 * (_product-comparison.scss), and it is load-bearing. MEASURED on the live source 2026-09-09,
 * p.metric-label shrink-wraps to 109 / 107 / 102 px across the three cards rather than stretching
 * to the 301px content width. p.metric-value stays 301 wide on the source too, because its own
 * text wraps to two lines and reaches it.
 *
 * `text-align: center` is the source's own third declaration on this element, MEASURED
 * `textAlign: center` on all three metrics at all four viewports. render.php already puts
 * `has-text-align-center` on both children, so this changes nothing visible -- it is the
 * container's own computed value, which the comparison reads on the container.
 */
.wp-block-wakefly-product-comparison__metric {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

/*
 * p.metric-label. MEASURED colour rgba(51,51,51,0.7) — a 70%-alpha tint of this theme's
 * `body-text`, not itself a WP palette slug, so a literal colour rather than a preset.
 * fontSize 16px (medium, via render.php), textTransform uppercase, letterSpacing 0.6px.
 */
.wp-block-wakefly-product-comparison__metric-label {
	margin: 0;
	color: rgba(51, 51, 51, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

/*
 * p.metric-value. MEASURED colour rgb(13,110,253) (`primary`) on the default card,
 * rgb(240,100,0) (`secondary`) on the featured card — render.php picks the class per card.
 * SAME 35px-AT-ALL-FOUR-VIEWPORTS, OFF-LADDER FONT SIZE AS h3.name ABOVE, and fontWeight 800.
 *
 * LINE-HEIGHT 1.3, NOT THE THEME'S INHERITED 1.5. Reference measurement: `lineHeight` 45.5px
 * at the same 35px font-size, i.e. 1.3 exactly — measured by the verification package on
 * 2026-09-09, and NOT carried by this unit's contract, which states this element's colour,
 * weight and font size and no line-height. That gap is in the hand-back. Unstated, it
 * inherited theme.json's root 1.5 and computed 52.5px.
 *
 * h3.name ABOVE IS DELIBERATELY LEFT ALONE even though it carries the identical 35px font
 * size: it is an h3, so theme.json's `h1, h2, h3, h4, h5, h6 { line-height: 1.2 }` already
 * gives it 42px — and 42px is exactly the `box 301x42 at 1440x900` the contract measures for
 * it on the reference. Two elements, one font size, two different line-heights, both correct.
 */
.wp-block-wakefly-product-comparison__metric-value {
	margin: 0;
	font-size: 35px;
	font-weight: 800;
	line-height: 1.3;
}

/*
 * a.cta — see render.php's own comment: the source's `btn-brown`/`btn-teal` classes are dead
 * CSS, so this is deliberately bare. `wp-element-button` gives it the theme's global button
 * treatment (theme.json `styles.elements.button`) with no colour override, which is the
 * closest reproduction of "whatever the browser/Bootstrap base .btn supplies" available on
 * this theme.
 */
.wp-block-wakefly-product-comparison__cta {
	text-align: center;
}