/* =============================================================================
 * /employee-benefits — the capability cards (page 85, section `ed558ad`)
 *
 * WHAT IS *NOT* IN THIS FILE, ON PURPOSE.
 *
 * Every colour, every type value and the whole card frame — ground, border,
 * radius, padding, gutter — lives in the Elementor data, as a Global Kit
 * reference or an explicit control value. A component whose appearance comes
 * from a stylesheet cannot be handed to another editor: the Style panel says
 * one thing and the canvas paints another, and their edits silently do
 * nothing. So there is no `background-color`, no `border`, no `border-radius`,
 * no `padding`, no `font-*` and no `letter-spacing` for these cards below.
 *
 * What survives here is only what a control cannot say:
 *   - `text-decoration` and `color` on the card <a>, which no panel exposes
 *     and which PROPAGATE (see the note at the rule — it is load-bearing);
 *   - ONE `margin-inline` on the row, because the section's Margin control is
 *     registered `allowed_dimensions => 'vertical'` and its selector emits no
 *     left or right at all — see the note at the rule for the measurement;
 *   - the two `!important`s and `object-fit` that beat the parent theme's
 *     INLINE `style="width:100%;height:100%;max-width:105px"` on every
 *     attachment image;
 *   - `flex: 1 1 auto` on the body, so four ragged descriptions still produce
 *     four card feet at one height;
 *   - `line-height: inherit` on the description <p>, which re-points it at the
 *     control instead of restating the number here;
 *   - the hover transform and the focus ring, neither of which is a control.
 *
 * The one colour that appears is in that last category and it is a kit
 * reference, never a hex: `--e-global-color-secondary` for the focus ring.
 * THE KIT EMITS NO `--e-global-color-navy` AND NO `--e-global-color-brand`:
 * navy is `secondary`, brand is `primary`. An unresolvable var() is invalid at
 * computed-value time and drops the WHOLE declaration, so a ring written
 * against a token the kit does not emit is not a mis-coloured ring — it is no
 * ring at all.
 *
 * Scoping: on the component class, compounded with `.elementor-element` /
 * `.elementor` to hold the specificity tier. Never `.elementor-location-*`
 * (front-end only — `theme-document.php` adds it solely when the Locations
 * Manager rendered the document, and `footer.css` was written that way and was
 * invisible in the editor for its whole life), and never `.elementor-section`
 * (these classes get reused on columns, and `.bnly-cta` already sits on a
 * section on three posts and on a column on three others).
 * ========================================================================== */

/* THE ROW'S OUTER EDGES, AND WHY THIS ONE LINE IS NOT IN THE DATA.
 *
 * The gutter between the four cards is Elementor's own column-gap system:
 * `ed558ad` stores `gap: "extended"`, which pays every populated column 15px
 * of padding on all four sides, so the cards are 30px apart — and the two
 * OUTER cards end up 15px inboard of the site rail, which is the stagger the
 * retired `group_accepted` used to write down as tolerated. The canonical fix
 * is the canonical CSS row: a negative inline margin on the row equal to one
 * gutter half, which pulls the outer padding back out to the rail and leaves
 * every interior gutter untouched, at every breakpoint, with no responsive
 * override at all.
 *
 * IT CANNOT BE A CONTROL. `elementor/includes/elements/section.php:1229`
 * registers the section's Margin as `'allowed_dimensions' => 'vertical'`, and
 * its selector is literally
 *   `{{WRAPPER}}` => `margin-top: {{TOP}}{{UNIT}}; margin-bottom: {{BOTTOM}}…`
 * — no `{{LEFT}}`, no `{{RIGHT}}`. Measured 2026-09-09: writing
 * `margin: 0 -15px` into the data stored cleanly, read back cleanly, and
 * emitted `margin-top:0px;margin-bottom:0px;` and nothing else, leaving all
 * four rail assertions off by exactly +15. The key was cleared again rather
 * than left in the data lying about a value it never paints.
 *
 * The `width` is the other half, and leaving it out is the trap. A negative
 * margin only WIDENS a box whose width is `auto`, and this one's is not:
 * Elementor's `.elementor-widget-wrap > .elementor-element { width: 100% }`
 * pins the row to its parent column. Measured with the margin alone: the left
 * edge landed on the rail at all four viewports and the right edge sat 30px
 * SHORT at all four — the row had shifted, not grown, and four of the eight
 * rail assertions passed, which is exactly the shape of a fix that is half
 * done. The two declarations are one gesture and belong in one rule.
 *
 * The 15 is not a magic number: it is `elementor-column-gap-extended`'s own
 * padding, named once here and used twice, so the pair cannot drift apart. If
 * the row's `gap` control is ever changed the outer edges move and
 * `tools/employeebenefits.py --only cards` goes red naming the rail.
 * (0,0,3,0) — one class more than a bare component class, and it collides with
 * nothing: Elementor's own per-element rule for this section sets the block
 * axis only.
 *
 * IT SERVES THREE ROWS NOW, NOT ONE. `5975ac7` and `89b2c64` — the two service
 * tile rows — took the same class on 2026-09-09, because framing the six tiles
 * gave them edges and edges that touch read as a table. `gap: "extended"` buys
 * the 30px gutter and this rule pays back the outer 15, so the tile frames
 * start and end on the rail exactly as the cards do. Measured after:
 * 120–500 / 530–910 / 940–1320 against a rail of 120–1320.
 *
 * REMOVING `content_width` FROM THOSE TWO ROWS WAS PART OF IT, and on its own
 * the class did nothing. Both stored `content_width: 1200`, so the section's
 * inner `.elementor-container` re-boxed to 1200 and centred inside the widened
 * row — the negative margin moved the row and the container simply put the
 * columns back. Measured in that state: tiles at 135 / 535 / 935, a 15px
 * stagger against a rail of 120, with the row's own box still reporting
 * 120–1320 and every rail assertion green. The parent section already boxes at
 * 1200; a second opinion one level down is what broke it. */
.elementor .elementor-element.bnly-ebrow {
  --ebrow-gutter-half: 15px;
  width: calc(100% + var(--ebrow-gutter-half) * 2);
  max-width: calc(100% + var(--ebrow-gutter-half) * 2);
  margin-inline: calc(var(--ebrow-gutter-half) * -1);
}

/* THE HERO HEADLINE'S WRAP POINT. No control expresses `text-wrap`, which is
 * what puts it here rather than in the data — the same category as the hover
 * transform and the focus ring below, not a colour or a size smuggled out of
 * the panel.
 *
 * "Where Benefits Are Done Simply" measures 1260px at the kit's `primary` 88px
 * and the rail is 1200, so it CANNOT be one line and no size that keeps the
 * `primary` binding will make it one. It is going to wrap; the only question
 * is where. Measured at 1440 with a Range over the h1's own text:
 *
 *   default            974 / 270   "Where Benefits Are Done" / "Simply"
 *   text-wrap: balance 598 / 648   "Where Benefits" / "Are Done Simply"
 *
 * The default is the defect the recompose left behind — a near-full-rail line
 * with a single orphaned word under it, which reads as a layout that ran out
 * of room. `balance` is not a width guess: it survives a copy change, where a
 * `max-width` picked for these five words would strand the next five.
 *
 * UPDATED 2026-09-11. The premise above expired when `primary` moved from a
 * stepped 88px to clamp(36px, 5.2vw, 62px). At 62px the headline measures
 * 886px, which FITS the 1200 rail — so it no longer wraps at all, `balance`
 * has nothing to balance, and the line ran 74% of the rail. It was the only
 * one of the six heroes doing that, and it is what made this hero read thin
 * beside /case-studies/.
 *
 * The measure is a `ch`, not a pixel width, which answers the objection above:
 * 16ch is a function of the TYPE, not of these five words, so a copy change
 * re-wraps inside it instead of stranding. /case-studies/ and /resources/ both
 * use exactly 16ch; /blog/ uses 20ch.
 *
 * Both properties, not one. Measured at 1440, line widths:
 *   max-width alone        528 / 346   "Where Benefits Are" / "Done Simply"
 *   max-width + balance    419 / 457   "Where Benefits" / "Are Done Simply"
 * The original `balance` reasoning was right; it needed a measure to work
 * inside, and with one it produces the more even pair. */
/* Declarations moved to hero.css on 2026-09-12; applied via the shared
 * `bnly-hero__h1` class on the widget. */

/* THE CAPABILITY CARDS moved to service-cards.css on 2026-10-05: one
 * component across the five service pages (design-system.md 5.1). */

/* THE SIX SERVICE TILES on the mist band, and why this selector is shaped
 * differently from the card icon rule immediately above it.
 *
 * The tiles stay `image-box` WIDGETS -- they carry no link and no description,
 * so there is nothing for a container to wrap. That means their image has no
 * class of its own: the class goes on the widget and the image sits inside
 * Elementor's own `.elementor-image-box-img` wrapper. Hence the descendant
 * selector rather than a matching `__icon` class.
 *
 * The parent theme filters `wp_get_attachment_image_attributes` and stamps
 * style="width:100%;height:N%;max-width:Npx" INLINE on every attachment image.
 * An inline style beats any stylesheet rule lacking !important, so a plain
 * rule loses silently. Verify with getComputedStyle(img).width, never by
 * reading the generated CSS -- the rule exists either way.
 *
 * IT IS NOT ONLY A SIZE. Measured before this rule: the icons render 105x105
 * once loaded and 0x0 before that. `width: 100%` inside a shrink-to-fit
 * `inline-block` <figure> is circular, so it falls back to the image's
 * INTRINSIC size -- and a `loading="lazy"` image that has not arrived has
 * none, so the figure, the image and the space the tile reserves for it are
 * all zero until the byte lands and then jump to 105. An explicit px width
 * ends that: the box is identical before and after load. 56 is what the four
 * capability cards on this same page already render, and a 105px raster at 56
 * CSS px is still 112 device px on a 2x display. */
.bnly-ebtile.elementor-widget .elementor-image-box-img img {
  width: 56px !important;
  height: 56px !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
}