/* =========================================================================
   template-parts/sections/section-why.php
   Moved out of the partial's inline <style id="es-why-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.
   ========================================================================= */

/* Author-controlled line breaks, same rule the other sections use: a <br>
   an editor pins against the desktop measure would strand words on a
   phone, so it only applies from 992px up. */
.es-why br {
  display: none;
}

@media (min-width: 992px) {
  .es-why br {
    display: inline;
  }
}

.es-why__list {
  border-top: 1px solid var(--border-subtle);
}

/* Named areas rather than bare columns, because the three parts do not
   stay in three columns at every width and the areas are what let the
   breakpoints below re-flow them without restating the markup. */
.es-why__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-areas: "num title text";
  gap: var(--gap-fluid-md);
  align-items: start;
  padding: var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  transition:
    background var(--duration-normal) var(--ease-out),
    padding-left var(--duration-normal) var(--ease-out);
}

.es-why__row:hover {
  background: var(--accent-subtle);
  padding-left: var(--space-5);
}

/* gray-600, not the lighter --text-muted the extracted version used.
   Muted resolves to gray-500, which measures 3.8:1 on the light surfaces
   this section sits on and misses AA at 14px. gray-600 clears it. Same
   substitution, for the same reason, as the feature grid's card label. */
.es-why__num {
  grid-area: num;
  padding-top: 4px;
  color: var(--gray-600);
  font-family: var(--font-label);
  font-size: var(--fs-small);
  line-height: var(--lh-subhead);
  transition: color var(--duration-normal) var(--ease-out);
}

.es-why__row:hover .es-why__num {
  color: var(--brand-500);
}

.es-why__row h3 {
  grid-area: title;
  margin: 0;
  color: var(--text-heading);
  font-size: var(--fs-title-sm);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-subhead);
}

.es-why__row p {
  grid-area: text;
  margin: 0;
  padding-top: 3px;
  color: var(--text-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* ── Tablet ────────────────────────────────────────────────
   Three columns need roughly 900px before the middle one stops
   breaking the claim across four lines. Below that the ordinal keeps
   its gutter and the claim and its sentence stack in the remaining
   column, which keeps the row scannable instead of squeezing two text
   columns into half a tablet. The number spans both rows and pins to
   the top of them. */
@media (max-width: 991px) {
  .es-why__row {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "num title"
      "num text";
    column-gap: var(--gap-fluid-sm);
    row-gap: var(--space-3);
  }

  .es-why__num {
    align-self: start;
  }
  .es-why__row p {
    padding-top: 0;
  }
}

/* ── Phone ─────────────────────────────────────────────────
   The 56px gutter is a sixth of a 360px screen spent on two
   characters, so the ordinal moves above the claim and the row
   becomes a single column. */
@media (max-width: 575px) {
  .es-why__row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "title"
      "text";
    row-gap: var(--space-2);
    padding: var(--space-5) var(--space-2);
  }

  .es-why__num {
    padding-top: 0;
  }
}

/* The hover shift nudges the whole row right. Reduced-motion users keep
   the background change, which is what actually carries the state, and
   lose the movement: the padding is held at whatever the row rests on. */
@media (prefers-reduced-motion: reduce) {
  .es-why__row,
  .es-why__num {
    transition: none;
  }
  .es-why__row:hover {
    padding-left: var(--space-3);
  }
}

/* Flat rather than nested inside the block above, since nested @media is
   CSS Nesting and this stylesheet does not rely on it anywhere else. */
@media (prefers-reduced-motion: reduce) and (max-width: 575px) {
  .es-why__row:hover {
    padding-left: var(--space-2);
  }
}

/* ── Optional control under the list ────────────────────────
   Left-aligned with the ordinals rather than centred: the list above it is
   a left-aligned column of rows, and a centred button under it reads as
   belonging to whatever comes next rather than to the argument it closes.
   The row's own padding-inline is matched so the button starts on the same
   vertical as the numbers. */
.es-why__cta {
  margin-top: var(--gap-fluid-lg);
  padding-inline: var(--space-3);
  display: flex;
  justify-content: center;
}

/* 17 Sep 2026: the closing button read as an afterthought under six full-width
   rows (base .es-btn is 9px 14px). One size up, with a 48px touch target, on
   every page that runs this section. */
.es-why__cta .es-btn {
  min-height: 52px;
  padding: 14px 30px;
  font-size: var(--fs-body);
  gap: var(--space-3);
}

@media (max-width: 575px) {
  .es-why__cta {
    padding-inline: var(--space-2);
  }
}