/* =========================================================================
   template-parts/sections/section-split.php
   Moved out of the partial's inline <style id="es-split-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

.es-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-fluid-lg);
  align-items: center;
}

@media (min-width: 992px) {
  .es-split__grid { grid-template-columns: 1fr 1.05fr; gap: var(--gap-fluid-xl); }
  /* Reorder rather than reverse the DOM, so reading order stays correct. */
  .es-split--reverse .es-split__media { order: 2; }
  .es-split--reverse .es-split__copy  { order: 1; }

  /* ── Sticky media ────────────────────────────────────────
     Optional. The photo pins while a longer copy column
     scrolls past. `align-items: start` is required: the
     default `center` sizes the track to the item, leaving
     sticky no distance to travel. Desktop only, since the
     columns stack below 992px and there is nothing to scroll
     against. Kept under prefers-reduced-motion: it is a
     layout affordance, not an animation. */
  .es-split--sticky .es-split__grid { align-items: start; }

  .es-split--sticky .es-split__media {
    position: sticky;
    top: var(--sticky-offset);
  }
}

/* ── Media ─────────────────────────────────────────────────
   One offset value drives the padding and the tinted panel, so
   they can never drift apart. --es-deco is 0 below 992px, where
   the panel is switched off and the frame runs full width.

   Overflow safety: the frame is pushed up and right by the
   bottom and left padding, so the tinted panel occupies that
   padding and never reaches past the column's left edge.
   Nothing can push the page sideways. */
.es-split__media {
  --es-deco: 0px;
  position: relative;
  padding: 0 0 var(--es-deco) var(--es-deco);
}

@media (min-width: 992px) {
  .es-split__media { --es-deco: clamp(18px, 2vw, 28px); }
}

/* Tinted panel, offset down and left behind the frame. */
.es-split__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: var(--es-deco) var(--es-deco) 0 0;
  border-radius: var(--radius-xl);
  background: var(--accent-subtle);
  pointer-events: none;
}

@media (max-width: 991px) {
  .es-split__media::before { display: none; }
}

.es-split__frame {
  position: relative;
  z-index: 1;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.es-split__frame:hover {
  border-color: var(--brand-200);
}

.es-split__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--es-split-ratio, 526 / 350);
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

/* Slow push-in on hover. Small on purpose: the frame is not a
   link, so this is a sign of life, not an affordance. */
.es-split__frame:hover img { transform: scale(1.03); }

/* ── Copy ──────────────────────────────────────────────── */
.es-split__copy .es-section-head { margin-bottom: var(--gap-fluid-sm); }

.es-split__body {
  margin: var(--space-4) 0 0;
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The turning point in the story, carried by weight and ink
   rather than a box around it. */
.es-split__body strong { color: var(--text-heading); font-weight: var(--font-bold); }

/* ── Checklist ─────────────────────────────────────────────
   Unboxed rows under a hairline. The rule does the separating
   so the rows themselves need no borders or fills. */
.es-split__list {
  --es-tick: 32px;
  list-style: none;
  margin: var(--gap-fluid-md) 0 0;
  padding: var(--gap-fluid-md) 0 0;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--gap-fluid-sm);
}

.es-split__point {
  display: grid;
  grid-template-columns: var(--es-tick) 1fr;
  gap: var(--space-4);
  align-items: start;
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.es-split__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--es-tick);
  height: var(--es-tick);
  /* Centres the tick against the first line of text rather
     than the top of the row box. */
  margin-top: calc((1em * var(--lh-body) - var(--es-tick)) / 2);
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  color: var(--brand-600);
  transition: background-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}

.es-split__tick svg { width: 15px; height: auto; }

.es-split__point:hover .es-split__tick {
  background: var(--brand-100);
  color: var(--brand-700);
}

.es-split__point b {
  color: var(--text-heading);
  font-weight: var(--font-bold);
}

.es-split__cta { margin-top: var(--gap-fluid-md); }

@media (prefers-reduced-motion: reduce) {
  .es-split__frame,
  .es-split__frame img,
  .es-split__tick { transition: none; }
  .es-split__frame:hover img { transform: none; }
}