/* =============================================================================
 * /case-studies — the proof wall (page 2457, loop item 13295)
 *
 * WHAT IS *NOT* IN THIS FILE, ON PURPOSE.
 *
 * Every colour and every type value on this page 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 `color`, no `background-color`, no
 * `font-*` and no `letter-spacing` for these elements below.
 *
 * What survives here is only what a control cannot say:
 *   - a pseudo-element (the kicker's hairline), which no panel can express;
 *   - `ch` measure caps, which must sit on the element that PAINTS the text;
 *   - the site-wide auto-margin override that centres every text-editor <p>;
 *   - `object-fit` and the two `!important`s that beat the parent theme's
 *     inline `style="width:100%;height:40%;max-width:360px"` on every
 *     attachment image;
 *   - `-webkit-line-clamp`;
 *   - `margin-top:auto`, which pushes the CTA to the card foot;
 *   - the hover transform and the focus ring, neither of which is a control.
 *
 * The two colours that do appear are both in that last category and both are
 * kit references, never hexes: `currentColor` for the kicker rule (so it
 * tracks whatever colour the panel sets on the widget) and
 * `--e-global-color-secondary` for the focus ring. Note 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 — footer.css was invisible in the editor for its whole
 * life), and never `.elementor-section` (the same classes are reused on
 * columns elsewhere).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * HERO
 * -------------------------------------------------------------------------- */

/* redesign.css carries a site-wide
 *   .elementor-widget-text-editor .elementor-widget-container > p
 *     { max-width:65ch; margin-left:auto; margin-right:auto }
 * at (0,0,2,1). A capped box with auto margins CENTRES itself in the rail
 * while its text stays left-aligned, which reads as a deliberate indent —
 * measured here at 393 against an h1 at 120. Left-align the box and KEEP a
 * cap: zeroing the margin on something with no cap lets the prose run the
 * full rail, a different defect that looks like a fix.
 * (0,0,3,1) — one class more than the site rule.                            */
:is(.bnly-cshero__kicker, .bnly-cshero__lede,
    .bnly-csspine__n, .bnly-csspine__l).elementor-widget-text-editor
  .elementor-widget-container > p {
  margin-left: 0;
  margin-right: auto;
}
.bnly-cshero__lede.elementor-widget-text-editor
  .elementor-widget-container > p {
  max-width: 54ch;
}

/* Elementor writes a text-editor's line-height onto the widget WRAPPER, but
 * style.css carries a bare `p { line-height: 1.7 }` that MATCHES the paragraph
 * directly — and a rule that matches beats an inherited value whatever the
 * specificity. Measured: the panel held 1.06/1.62/1 and every paragraph
 * rendered 1.7. `inherit` re-points the <p> at the control instead of
 * restating the number here, so the panel keeps telling the truth. */
:is(.bnly-cshero__kicker, .bnly-cshero__lede,
    .bnly-csspine__n, .bnly-csspine__l).elementor-widget-text-editor
  .elementor-widget-container > p {
  line-height: inherit;
}

/* The kicker's rule is a pseudo-element, which is why it is here at all.
 * It is drawn on the <p>, not on the widget wrapper: the wrapper's box
 * includes the paragraph's own margins, so a rule centred against the wrapper
 * sits off the text's optical middle.
 * `background: currentColor` means the rule takes whatever colour the panel
 * sets on the widget — nothing to contradict, nothing to keep in sync. */
.bnly-cshero__kicker.elementor-widget-text-editor
  .elementor-widget-container > p {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bnly-cshero__kicker.elementor-widget-text-editor
  .elementor-widget-container > p::after {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

/* The measure cap sits on the .elementor-heading-title, never the wrapper:
 * `ch` resolves against the element's OWN font, and on /blog a cap on a
 * wrapper inheriting the page's 20px sans computed to 249.7px and broke a
 * fifteen-character headline across two lines. */
.bnly-cshero__h1 .elementor-heading-title {
  max-width: 16ch;
}

/* -----------------------------------------------------------------------------
 * THE CARD
 *
 * The loop item's root container is a real <a> (html_tag = "a"), so the whole
 * card is the link.
 * -------------------------------------------------------------------------- */

/* `text-decoration` PROPAGATES from an ancestor and cannot be removed by a
 * descendant rule, so this line is load-bearing: without it all four card
 * texts ship underlined and nothing lower down can undo it.
 *
 * `color: inherit` is the other half. The kit emits `.elementor-kit-6 a:hover
 * { color: #0092D5 }` at (0,0,2,1), and brand blue is 3.46 on white — the
 * palette's law is that it is a border, a glow and a hover surface, never a
 * small-text colour. All four card texts carry their own colour from the data,
 * so the <a>'s own colour paints nothing; taking it out of the link cascade
 * removes the failing hover value with no hover colour to replace it, which is
 * the honest half-state-free answer (fill and text both stay put).
 * (0,0,3,0) — beats the kit's (0,0,2,1) on class count. */
.elementor .elementor-element.csc,
.elementor .elementor-element.csc:link,
.elementor .elementor-element.csc:visited,
.elementor .elementor-element.csc:hover,
.elementor .elementor-element.csc:focus {
  color: inherit;
  text-decoration: none;
}

/* The well is sized by the ASSETS, not by taste. Nine of the fifteen logos
 * are only 325px wide natively, so 180 CSS px is the largest box that still
 * renders at 2x; the normalised files are 360x144, exactly 2x of 180x72.
 * `flex: 0 0 112px` pins the basis so the well cannot stretch when the grid
 * equalises card heights (grid-auto-rows:1fr): before this the well grew to
 * 175px around a 54px logo. 112 = 72 + the 20px block padding set in the
 * data, and Elementor's box-sizing is border-box. */
.csc__well.e-con {
  flex: 0 0 112px;
  height: 112px;
}

/* The parent theme filters `wp_get_attachment_image_attributes` and stamps
 * style="width:100%;height:40%;max-width:360px" INLINE on every attachment
 * image. An inline style beats any stylesheet rule lacking !important, so a
 * plain rule loses silently — measured 135x54 against a target of 180x72.
 * Verify with getComputedStyle(img).width, never by reading the generated
 * CSS: the rule exists either way. */
.csc__logo.elementor-widget img {
  width: 180px !important;
  height: 72px !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* The body takes the slack so `margin-top:auto` on the CTA has somewhere to
 * push from; without it "Read the story" sits directly under the title and
 * the foot of every card lands at a different height. */
.csc__body.e-con {
  flex: 1 1 auto;
}
.csc__go.elementor-widget {
  margin-top: auto;
}

/* The industry wraps rather than truncates — "Food Harvesting, Processing &
 * Distribution" is 42 characters and a truncation would name a different
 * industry. The size pill never wraps; no control expresses `white-space`. */
.csc__size.elementor-widget {
  white-space: nowrap;
}

/* Titles run to 83 characters ("Improved medical plans, increased network of
 * doctors and lowered insurance premiums"), so the clamp is structural, not
 * cosmetic — three lines at 17/1.38 is what makes a ragged set of headlines
 * produce cards of one height. The clamp goes on the element that paints the
 * text; the wrapper carries no text of its own. */
.csc__title .elementor-heading-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover: a transform is not a control, and the shadow rides with it as one
 * gesture. Deliberately no colour change — see the `color: inherit` note. */
.elementor .elementor-element.csc {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
              box-shadow .28s cubic-bezier(.22, 1, .36, 1),
              border-color .28s cubic-bezier(.22, 1, .36, 1);
}
.elementor .elementor-element.csc:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(16, 29, 43, .10);
}
@media (prefers-reduced-motion: reduce) {
  .elementor .elementor-element.csc,
  .elementor .elementor-element.csc:hover {
    transition: none;
    transform: none;
  }
}

/* Focus ring. No control expresses one, so it stays here — but as a kit
 * reference, not a hex, so it tracks the palette. Navy on mist measures 9.06
 * and on white 9.86; the ring is measured against the card's PARENT ground
 * because a ring paints outside the element. `:focus` rather than
 * `:focus-visible` on purpose: the site already paints a 3px ring on plain
 * :focus, so this recolours an existing behaviour instead of removing it for
 * pointer users — and a `:focus:not(:focus-visible){outline:none}` guard would
 * delete the ring under programmatic focus, which is how it gets tested. */
.elementor .elementor-element.csc:focus {
  outline: 2px solid var( --e-global-color-secondary );
  outline-offset: 3px;
}