/* feature-split — full-bleed band, photo one side, coloured panel the other.
 *
 * Measured from the artboard: band 661px tall, photo half 992 of 1920
 * (51.67%). The content block is optically centred in the panel rather than
 * padded from the top, so the 261px gap in the mockup is emergent and is
 * deliberately not a spacing token.
 *
 * Panel inner padding is 114px on Operations and 185px on Human Resources in
 * the design. That is drift; one value is used, aligned to the page gutter so
 * the copy lines up with every other section.
 */

.fsplit {
  display: grid;
  grid-template-columns: 992fr 928fr;
  min-height: var(--band-min-h);
  color: var(--color-text-inv);
}

.fsplit__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-row: 1;
}

.fsplit__panel {
  display: grid;
  align-content: center;
  grid-row: 1;
  padding-block: var(--space-2xl);
}

.fsplit__content {
  width: 100%;
  max-width: clamp(20rem, 12.5rem + 25.000vw, 35rem);
}

/* -- Variant: which side the photo is on ------------------------------- */
.fsplit--image-left  .fsplit__media { grid-column: 1; }
.fsplit--image-left  .fsplit__panel {
  grid-column: 2;
  padding-inline: var(--space-2xl) var(--gutter);
  justify-items: start;
}
.fsplit--image-right .fsplit__media { grid-column: 2; }
.fsplit--image-right .fsplit__panel {
  grid-column: 1;
  padding-inline: var(--gutter) var(--space-2xl);
  justify-items: start;
}

/* -- Variant: panel colour --------------------------------------------- */
.fsplit--teal     .fsplit__panel { background: var(--color-accent); }
.fsplit--charcoal .fsplit__panel { background: var(--color-charcoal); }
.fsplit--wine     .fsplit__panel { background: var(--color-primary); }

/* -- Content ------------------------------------------------------------ */
.fsplit__heading { text-wrap: balance; }
.fsplit__body { margin-top: var(--space-sm); }
.fsplit__subhead {
  margin-top: var(--space-sm);
  font-weight: var(--fw-bold);
}
/* The artboard's 148 is body-top to button-top. The real gap is far
 * smaller; the band's fixed height and centred content carry the rest. */
.fsplit__cta { margin-top: var(--space-lg); }

/* The History instance carries more copy than the Home three, so its button
 * sits closer to the body. Nothing in the design contradicts this. */
.fsplit__subbody + .fsplit__cta { margin-top: var(--space-md); }

@media (max-width: 992px) {
  /* Photo goes full width above the panel. No design exists for this.
   * Selectors are repeated at the variant specificity rather than reaching
   * for !important, which this stylesheet does not use outside the
   * reduced-motion block. */
  .fsplit {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .fsplit--image-left  .fsplit__media,
  .fsplit--image-right .fsplit__media {
    grid-column: 1;
    grid-row: 1;
    max-height: clamp(12.5rem, 9.375rem + 10.417vw, 18.75rem);
  }
  .fsplit--image-left  .fsplit__panel,
  .fsplit--image-right .fsplit__panel {
    grid-column: 1;
    grid-row: 2;
    padding-inline: var(--gutter);
    padding-block: var(--space-xl);
  }
  .fsplit__content { max-width: none; }
  .fsplit__cta { margin-top: var(--space-lg); }
}

/* -- Enclosure ----------------------------------------------------------
 * The bands stop being full-bleed and become inset plates sitting in a
 * tray. This is the single change that does most of the "expensive" work,
 * and it is why the design no longer needs extra height to feel generous.
 * ---------------------------------------------------------------------- */
.fsplit {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-block: var(--space-md);
  padding: var(--tray-pad);
  min-height: 0;
  background: var(--enclosure-bg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.fsplit__media { border-radius: var(--radius-core); }
.fsplit__panel {
  border-radius: var(--radius-core);
  padding-block: clamp(2rem, 1.5rem + 1.667vw, 3rem);
  box-shadow: var(--shadow-inner);
}
.fsplit--image-left  .fsplit__panel,
.fsplit--image-right .fsplit__panel {
  padding-inline: clamp(1.5rem, 1rem + 1.667vw, 2.5rem);
}

@media (max-width: 992px) {
  .fsplit { margin-inline: 1rem; border-radius: var(--radius-core); }
}