/* ==========================================================================
   KF Elements — Split Media
   --------------------------------------------------------------------------
   Every rule above the "the four looks" banner is the released 0.11.0 sheet
   with its site-level values re-read as tokens, each carrying today's value as
   its fallback (ADR-0004 decision 2), so a split that sets nothing computes
   exactly what it computed before. Every rule BELOW the banner leads with a
   class the released markup does not print, so it cannot reach a saved page.

   THE `.media` OVERLAP, MEASURED. base.css:215-229 styles
   `.kfe .kfe-split-bleed > .media` — a DIV, through a child combinator — and
   this widget puts `.media` on the `img` itself. The two meet only where a
   `.kfe-split-bleed` wraps a split-media image, and no look of spec §3.7
   bleeds: every one sits inside the wrap. This widget renders the primitive
   nowhere, so the overlap is nowhere (the grep of §4 item 6).

   The title's level is a control (`header_size`). At h2 — the released default
   — the widget prints a BARE <h2> with no class, so every rule on the title
   pairs the tag with the class the other levels carry, and the two stay in
   step (ADR-0002 decision 7).
   ========================================================================== */

/* The frame's head alignment, with this widget's own (inherited) as the
   fallback, so nothing moves until an instance sets it. */
.kfe .kfe-split-media { text-align: var(--kfe-head-align, inherit); }

.kfe .kfe-split-media h2,
.kfe .kfe-split-media .kfe-split-media-title {
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.9rem, 3.6vw, 2.9rem)));
  line-height: 1.18;
  max-width: var(--kfe-title-measure, 20ch);
}
/* The class-only rules restate what base.css's `.kfe h2` gives the bare tag.
   They are listed separately and never merged into the paired rule above,
   because a merged rule would outrank `.kfe .kfe-dark h2` and repaint every
   dark head. */
.kfe .kfe-split-media .kfe-split-media-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
}
.kfe .kfe-split-media.kfe-dark .kfe-split-media-title { color: #fff; }

.kfe .kfe-split-media .body p { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 17px); margin-top: 22px; max-width: var(--kfe-body-measure, 52ch); }
/* Rich body (ADR-0003 decision 3): the colour and size sit on `p`, so an
   allow-listed list needs them too, and base.css has no list reset. */
.kfe .kfe-split-media .body ul, .kfe .kfe-split-media .body ol { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 17px); margin-top: 22px; max-width: var(--kfe-body-measure, 52ch); padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-split-media .body li + li { margin-top: 6px; }
.kfe .kfe-split-media .actions { margin-top: 32px; }
.kfe .kfe-split-media .media {
  width: 100%; height: 100%; min-height: 440px;
  object-fit: cover; border-radius: var(--kfe-radius-media, 4px); display: block;
  object-position: var(--kfe-focus-x, 50%) var(--kfe-focus-y, 50%);
}

/* dark-ground flips */
.kfe .kfe-split-media.kfe-dark .body p { color: var(--kfe-on-dark); }

@media (max-width: 820px) {
  .kfe .kfe-split-media .media { min-height: 280px; }
}

/* ==========================================================================
   The four looks — every selector below carries a class the released markup
   does not print, so none of them can reach a page saved before this lane.
   ========================================================================== */

/* ---------- the shared text column (ADR-0004 decision 5) ---------- */
/* base.css styles the column once; these are the widget's own margins and the
   body size this widget has always used, as the column's fallback. */
.kfe .kfe-split-media .kfe-text-col { font-size: var(--kfe-body-size, 17px); margin-top: 22px; }
.kfe .kfe-split-media .kfe-text-col-lead,
.kfe .kfe-split-media .kfe-text-col-body { max-width: var(--kfe-body-measure, 52ch); }

/* ---------- the role line (spec :411 — 20/700, accent) ---------- */
.kfe .kfe-split-media .kfe-split-media-role {
  color: var(--kfe-accent); font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 10px;
}
.kfe .kfe-split-media.kfe-dark .kfe-split-media-role { color: var(--kfe-on-dark-soft); }

/* ---------- the heading above both columns (head_above) ---------- */
.kfe .kfe-split-media .head { margin-bottom: 36px; }

/* ---------- the column split ---------- */
.kfe .kfe-split-media .kfe-split.cols-46-46 { grid-template-columns: 46% 46%; justify-content: space-between; }
.kfe .kfe-split-media .kfe-split.cols-40-60 { grid-template-columns: 40% 1fr; }
@media (max-width: 820px) {
  .kfe .kfe-split-media .kfe-split.cols-46-46,
  .kfe .kfe-split-media .kfe-split.cols-40-60 { grid-template-columns: 1fr; }
}

/* ---------- one column, because the picture is empty (spec :427, :435) ---------- */
/* AFTER the column split on purpose: `.no-media .kfe-split` and `.kfe-split.cols-*`
   both count (0,4,0), so this rule has to be DECLARED later to collapse a
   photo-less band whatever column ratio the instance happens to set. */
.kfe .kfe-split-media.no-media .kfe-split { grid-template-columns: 1fr; }

/* ---------- the picture's own proportions ---------- */
/* `min-height` beats `aspect-ratio`, so a ratio'd or natural picture drops the
   floor here as well as through min_height's `condition` (class-split-media.php). */
.kfe .kfe-split-media.fit-natural .media,
.kfe .kfe-split-media.ratio-4-3 .media,
.kfe .kfe-split-media.ratio-3-2 .media,
.kfe .kfe-split-media.ratio-1-1 .media,
.kfe .kfe-split-media.ratio-16-9 .media { height: auto; min-height: 0; }
.kfe .kfe-split-media.fit-natural .media { aspect-ratio: auto; object-fit: unset; }
.kfe .kfe-split-media.ratio-4-3 .media { aspect-ratio: 4 / 3; }
.kfe .kfe-split-media.ratio-3-2 .media { aspect-ratio: 3 / 2; }
.kfe .kfe-split-media.ratio-1-1 .media { aspect-ratio: 1 / 1; }
.kfe .kfe-split-media.ratio-16-9 .media { aspect-ratio: 16 / 9; }

/* ---------- the cut-out (spec :410-411; post-323 :226-235) ---------- */
/* The margins are PHYSICAL on purpose and not logical: the PNG is cut on its
   own left edge and stands on the band's bottom edge, so mirroring them for a
   right-to-left page would move the cut to the wrong side of the picture. */
.kfe .kfe-split-media.mode-cutout { overflow: hidden; }
.kfe .kfe-split-media.mode-cutout .kfe-split { align-items: end; }
.kfe .kfe-split-media.mode-cutout .media {
  width: 118%; max-width: none; height: auto; min-height: 0;
  aspect-ratio: auto; object-fit: unset; border-radius: 0;
  margin: 0 0 -2px -9%;
}
@media (max-width: 820px) {
  /* The text reads first when the band stacks; `:has()` finds the media column
     without a class, so the released markup keeps its two bare wrappers. */
  .kfe .kfe-split-media.mode-cutout .kfe-split > :has(.media) { order: 2; }
}

/* ---------- the filled card (spec :413-414; post-323 :371) ---------- */
.kfe .kfe-split-media.mode-card .kfe-split > :has(.media) {
  position: relative; min-height: 280px; overflow: hidden;
  border-radius: var(--kfe-radius-card, 14px);
}
.kfe .kfe-split-media.mode-card .media {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  aspect-ratio: auto; object-fit: cover; border-radius: 0;
  object-position: var(--kfe-focus-x, 100%) var(--kfe-focus-y, 50%);
}

/* ---------- the text column drawn as a card (spec :413) ---------- */
.kfe .kfe-split-media.text-card .kfe-split > :not(:has(.media)) {
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 14px);
  padding: 30px 28px;
}

/* ==========================================================================
   w2.homepack.1 — a caption, a portrait ratio, a second button and two
   stacked layouts (ADR-0005's dated section of 2026-09-24)
   --------------------------------------------------------------------------
   ADDED RULES ONLY. Each leads with a class or a structure no released split
   prints — `.kfe-split-media-figure`, `.ratio-4-5`, `.side-above`,
   `.side-below`, an `.actions` holding TWO anchors — so no saved page can
   match one. Every colour and type size reads a `--kfe-*` token with today's
   value as its fallback — type on a picture reads `--kfe-caption-over-ink`,
   falling back to the pack's `--kfe-white`.
   ========================================================================== */

/* ---------- the figure and its caption ---------- */
.kfe .kfe-split-media .kfe-split-media-figure { margin: 0; position: relative; }
/* `font-style: normal` because a theme may italicise every figcaption (Hello
   Elementor does), and the caption's own emphasis is its <strong>/<em>. */
.kfe .kfe-split-media .kfe-split-media-caption { display: block; text-align: start; font-style: normal; }
.kfe .kfe-split-media .kfe-split-media-source {
  display: block; margin-top: 8px;
  font-size: var(--kfe-caption-source-size, 11.5px); font-style: italic; color: var(--kfe-body, var(--kfe-muted));
}
/* Under the picture: the figure is one card — the picture, then the caption
   on the card's ground under a hairline. */
.kfe .kfe-split-media .kfe-split-media-figure.caption-below {
  overflow: hidden;
  border-radius: var(--kfe-radius-media, 8px);
  background: var(--kfe-white);
  box-shadow: var(--kfe-shadow-card, 0 30px 80px -40px rgba(10, 14, 28, 0.35));
}
.kfe .kfe-split-media .kfe-split-media-figure.caption-below .media { border-radius: 0; }
.kfe .kfe-split-media .kfe-split-media-figure.caption-below .kfe-split-media-caption {
  padding: 20px 28px;
  border-top: 1px solid var(--kfe-line);
  font-size: var(--kfe-caption-size, 14px); line-height: 1.65; color: var(--kfe-body, var(--kfe-muted));
}
.kfe .kfe-split-media .kfe-split-media-figure.caption-below strong { color: var(--kfe-heading, var(--kfe-primary)); }
/* Over the picture: white type on a scrim that fades out towards the middle. */
.kfe .kfe-split-media .kfe-split-media-figure.caption-over,
.kfe .kfe-split-media .kfe-split-media-figure.caption-over-top { overflow: hidden; border-radius: var(--kfe-radius-media, 14px); }
.kfe .kfe-split-media .kfe-split-media-figure.caption-over .media,
.kfe .kfe-split-media .kfe-split-media-figure.caption-over-top .media { border-radius: 0; }
.kfe .kfe-split-media .kfe-split-media-figure.caption-over .kfe-split-media-caption,
.kfe .kfe-split-media .kfe-split-media-figure.caption-over-top .kfe-split-media-caption {
  position: absolute; left: 0; right: 0; z-index: 1;
  color: var(--kfe-caption-over-ink, var(--kfe-white)); font-size: var(--kfe-caption-over-size, 13.5px); font-weight: 600; line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.kfe .kfe-split-media .kfe-split-media-figure.caption-over .kfe-split-media-caption {
  bottom: 0; padding: 30px 22px 16px;
  background: linear-gradient(to top, var(--kfe-caption-scrim, rgba(10, 14, 28, 0.85)), transparent);
}
.kfe .kfe-split-media .kfe-split-media-figure.caption-over-top .kfe-split-media-caption {
  top: 0; padding: 15px 18px 34px; text-align: center; font-size: var(--kfe-caption-over-top-size, 15px); font-weight: 700;
  background: linear-gradient(to bottom, var(--kfe-caption-scrim, rgba(10, 14, 28, 0.6)), transparent);
}
.kfe .kfe-split-media .kfe-split-media-figure.caption-over .kfe-split-media-source,
.kfe .kfe-split-media .kfe-split-media-figure.caption-over-top .kfe-split-media-source { color: inherit; opacity: 0.85; }

/* ---------- the portrait ratio ---------- */
.kfe .kfe-split-media.ratio-4-5 .media { height: auto; min-height: 0; aspect-ratio: 4 / 5; }

/* ---------- two actions side by side ---------- */
.kfe .kfe-split-media .actions:has(> a + a) { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- image_side = below: the copy centred, the figure under it ---------- */
.kfe .kfe-split-media.side-below .kfe-split-media-stack > :first-child {
  max-width: var(--kfe-stack-copy, 780px);
  margin-inline: auto;
  text-align: var(--kfe-head-align, center);
}
.kfe .kfe-split-media.side-below .kfe-split-media-stack > :first-child > h2,
.kfe .kfe-split-media.side-below .kfe-split-media-stack > :first-child > .kfe-split-media-title,
.kfe .kfe-split-media.side-below .kfe-text-col-lead,
.kfe .kfe-split-media.side-below .kfe-text-col-body { margin-inline: auto; }
.kfe .kfe-split-media.side-below .actions { justify-content: center; }
.kfe .kfe-split-media.side-below .kfe-split-media-stack > :nth-child(2) {
  max-width: var(--kfe-stack-media, 880px);
  margin: 46px auto 0;
}

/* ---------- image_side = above: the picture across the top, two columns under ---------- */
.kfe .kfe-split-media.side-above .kfe-split-media-stack > :first-child:not(.kfe-split-media-cols) { margin-bottom: 54px; }
.kfe .kfe-split-media .kfe-split-media-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--kfe-stack-gap, 60px);
  align-items: start;
}
.kfe .kfe-split-media .kfe-split-media-bodycol > :first-child { margin-top: 0; }
@media (max-width: 860px) {
  .kfe .kfe-split-media .kfe-split-media-cols { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- media_first_stacked: the picture above the copy once the columns stack ----------
   The same breakpoint as the stack itself (base.css `.kfe-split`, 820px), and
   the same `:has(.media)` the cut-out uses to find the column. It sits after
   the cut-out's `order: 2` at equal specificity, so the explicit choice wins. */
@media (max-width: 820px) {
  .kfe .kfe-split-media.media-first-stacked .kfe-split > :has(.media) { order: -1; }
}