/* =============================================================================
   mod-half-image — "What is X?".

   Composition follows Formula's `mod_half_image`: image roughly 600px wide on
   one side, a copy column roughly 520px on the other, copy vertically centred
   against the image, generous gutter between them.

   Two things are deliberately different from Formula:

   1. HEIGHT IS CONTENT-DRIVEN. The image sets an aspect ratio, the copy sets
      the floor, and whichever is taller wins. No fixed heights anywhere, so a
      six-sentence definition simply makes the section taller.

   2. THE SIDE FLIPS ON A MODIFIER, not on a second copy of the module. The
      markup order never changes — media first — so the mobile reading order
      is identical in both variants and only the desktop grid re-orders.
   ============================================================================= */

/* No background or colour set here on purpose. The block inherits the page
   ground, which leaves `band--alt` / `band--sage` / `band--dark` free to work
   on the <section> — a background declared here would silently outrank them
   on source order and the modifier would look broken. */

.b-half-image__inner {
  display: grid;
  gap: var(--sp-10);
}

/* --- media ---------------------------------------------------------------- */

.b-half-image__media {
  position: relative;
  z-index: 0;
  margin: 0;
  align-self: center;
  padding: var(--sp-3);
  background: var(--card);
}

.b-half-image__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: calc(var(--sp-6) * -1);
  inset-block-end: calc(var(--sp-6) * -1);
  inline-size: 72px;
  block-size: 72px;
  background: var(--home-orange);
}

.b-half-image__media img,
.b-half-image__media .slot--media {
  width: 100%;
  border-radius: var(--radius-card);
}

.b-half-image__media img {
  aspect-ratio: 10 / 9;
  object-fit: cover;
}

/* --- copy ----------------------------------------------------------------- */

.b-half-image__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  align-self: center;
  max-width: var(--measure);
}

.b-half-image__eyebrow { color: var(--accent); }

/* --- slots ---------------------------------------------------------------- */

.b-half-image .slot {
  color: var(--soft);
  border: 1px dashed var(--sage);
  border-radius: var(--radius);
  margin: 0;
}

.b-half-image .slot__tag { color: var(--accent); }

.b-half-image .slot--chip {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
}

/* Inside the H2 the slot must not inherit display tracking at label size. */
.b-half-image .slot--line {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  letter-spacing: normal;
}

.b-half-image .slot--block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  width: 100%;
}

.b-half-image .slot--media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  text-align: center;
  background: var(--card);
  aspect-ratio: 10 / 9;
}

.b-half-image .slot__hint { color: var(--soft); }

.b-half-image .slot__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.b-half-image .slot__lines i {
  display: block;
  height: var(--sp-2);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.b-half-image .slot__lines i:last-child { width: 58%; }

/* --- two columns ----------------------------------------------------------
   Measured off Formula: image ~600px, copy ~520px, gutter ~80px. The image
   side is the wider of the two in both variants. */

@media (min-width: 900px) {
  .b-half-image__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    align-items: center;
    column-gap: clamp(var(--sp-10), 5vw, var(--sp-20));
  }

  /* image right, copy left. Source order is untouched — this is the whole
     reason the flip is a modifier and not a second block. */
  .b-half-image--flip .b-half-image__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  }
  .b-half-image--flip .b-half-image__media { order: 2; }
  .b-half-image--flip .b-half-image__copy  { order: 1; }
}

@media (max-width: 899.98px) {
  .b-half-image__media::after { inset-inline-end: 0; }
}