/* Single case study — template 2542, condition include/singular/casestudies.
 *
 * Companion to case-studies.css (the index). Same tokens, same 1200 rail, so
 * the click from the wall into a story does not feel like a different site.
 *
 * WHAT IS DELIBERATELY NOT HERE: colour and typography. Both live in the
 * Elementor data as Global Kit references, because a component styled from a
 * stylesheet makes the Style panel lie — the panel says one thing, the canvas
 * paints another, and an editor's change does nothing. That is the failure
 * Rule 1 exists to prevent, and it is why this file is as short as it is.
 *
 * The exceptions are three CONTAINERS that inherit text colour to their
 * children. A container has no text-colour control in Elementor, so there is
 * nothing for a panel to disagree with — the elements that actually paint
 * text all carry their colour in the data.
 *
 * SCOPE ON THE COMPONENT CLASS, never on `.elementor-location-*`: that
 * wrapper is front-end only, so footer.css was invisible in the editor for its
 * whole life. Compound `.elementor-element` to hold the specificity tier
 * without depending on load order.
 */

/* The card edge and the fixed-header height. Declared here because the kit
 * emits neither, and an unresolvable var() is invalid at computed-value time —
 * it drops the WHOLE declaration, so a missing token means no border and no
 * sticky offset rather than a wrong one. The header is 120px at every width;
 * measured, not assumed. */
:root { --hair: #E3EAF1; --header-h: 120px; }

/* ===================================================================
   HERO
   =================================================================== */

/* The back link is a container with html_tag=a, so the UA underlines every
 * descendant — and text-decoration PROPAGATES from an ancestor and cannot be
 * removed by a descendant rule. Lose this and the label ships underlined with
 * no way to undo it lower down. `color: inherit` keeps the cyan that lives in
 * the heading's own data, instead of the site-wide a{color:#0092D5} (3.46). */
.csx-back.elementor-element {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  width: auto;
}
.csx-back.elementor-element:hover { text-decoration: underline; text-underline-offset: 4px; }
.csx-back.elementor-element:focus-visible {
  outline: 2px solid var( --e-global-color-amber );
  outline-offset: 4px;
}

.csx-hero__grid.elementor-element { align-items: flex-start; }

/* The logo chip. White is not decoration: twelve of the fifteen logos are
 * opaque with a baked white ground, so on ink they would paint their own white
 * rectangle regardless. Making it a deliberate plate is the honest option.
 * Radius 6 inside the hero keeps the curve nesting the right way round.
 *
 * The chip must hug its image, not stretch: a flex child fills the cross axis
 * by default, which rendered it 404px wide. */
.csx-chip.elementor-element {
  flex: 0 0 auto;
  width: auto;
  border-radius: 6px;
}

/* The parent theme filters wp_get_attachment_image_attributes and stamps
 * `width:100%;height:…;max-width:…px` INLINE on every attachment image. An
 * inline style beats any stylesheet rule lacking !important, so a plain rule
 * loses silently and the logo collapses. Verify with
 * getComputedStyle(img).width, never by reading the generated CSS. */
.csx-chip img {
  width: 180px !important;
  height: 72px !important;
  max-width: 100% !important;
  object-fit: contain;
}

.csx-facts.elementor-element {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: auto;
}
.csx-fact.elementor-element {
  width: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
  padding: 6px 13px;
}

/* ===================================================================
   BODY — one measured prose column, one content-height side card
   =================================================================== */

.csx-body.elementor-element {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* content-height children: what makes sticky possible */
  gap: clamp(32px, 4.4vw, 56px);
  justify-content: flex-start;
}

/* FILL THE RAIL, matching /blog. The index and the blog archive both run
 * two columns edge to edge across the 1200 rail — measured on /blog's
 * generated CSS: 72% / 28% at desktop, 65% / 35% at tablet. The prose grows
 * to take whatever the aside leaves, so the pair ends flush with the hero
 * above it instead of stopping short.
 *
 * `flex: 1 1 0` with `min-width: 0` is what makes it fill: a flex item's
 * default `min-width: auto` refuses to shrink below its content, which is
 * how a long word or a wide image silently pushes a column past its share. */
.csx-prose.elementor-element {
  flex: 1 1 0;
  max-width: none;
  min-width: 0;
}

.csx-prose img { border-radius: var(--benely-radius, 8px); }

/* Any in-prose jump target must clear the fixed header. This goes on [id]
 * inside the prose, NOT on h2/h3: many Benely posts carry empty
 * <a id="…"></a> anchors before their headings, and getElementById returns
 * whichever comes first — the anchor, which is not a heading and so never
 * matched a heading-keyed rule. Every jump then parked under the nav. */
.csx-prose [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* --- the About card ------------------------------------------------
 * STICKY NEEDS ROOM AND THE RIGHT ANCESTOR. /blog's sidebar carried
 * position:sticky and never once stuck: it was a column, and Elementor
 * stretches a column and its widget-wrap to the row's full height, leaving
 * zero px to travel. Here the aside is a content-height flex child (see
 * align-items above), so it has room by construction.
 *
 * `top` clears the 120px fixed header — top:24px would park this 96px behind
 * the nav, which looks like a z-index bug and is not one. */
.csx-aside.elementor-element {
  flex: 0 0 28%;
  max-width: 336px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border: 1px solid var(--hair);
  border-radius: var(--benely-radius, 8px);
  color: var( --e-global-color-deep );   /* container: no control to contradict */
}

@media (max-width: 900px) {
  /* Below this the aside is context, not a companion — it reads better above
   * the story than orphaned beneath it. Sticky is pointless in one column. */
  .csx-aside.elementor-element {
    position: static;
    order: -1;
    flex-basis: 100%;
    max-width: 100%;
  }
  .csx-prose.elementor-element { flex-basis: 100%; max-width: 100%; }

  /* The hero already states Industry and Size as chips. Side by side those
     two facts sit far from the hero and the card is sticky, so repeating them
     is a persistent reference worth having. STACKED, they land a few
     centimetres under the identical chips — the same two facts twice in one
     screen. Measured at 390: hero chips at y=281/304, the card's repeat at
     y=596/628. Hide the repeat; keep the About prose, which is the only thing
     here the hero does not already say. */
  .csx-aside .csx-aside__dl { display: none; }
}

/* ===================================================================
   MORE CLIENT STORIES
   =================================================================== */

/* The cards come from loop template 13295 — the same card the index wall
 * uses — so everything about their appearance is already styled by
 * case-studies.css. Only the grid stretch belongs here. */
.csx-next .elementor-widget-loop-grid .e-loop-item { display: flex; }
.csx-next .elementor-widget-loop-grid .e-loop-item > .elementor-element { width: 100%; }