/* ==========================================================================
   LK Risk — Layouts
   Reusable section compositions shared by every page. A section picks a
   layout here and a theme from utilities.css (.section--dark, --alt …);
   the content blocks it holds live in components.css.
   ========================================================================== */


/* ==========================================================================
   Split — media beside content on the 12-column grid
   Default: media left (cols 1–6), content right (cols 8–12).
   --media-end: content left (cols 1–5), media right (cols 7–12).
   Keep DOM order = visual order so mobile stacking reads naturally.
   ========================================================================== */
.split {
  align-items: center;
  row-gap: var(--space-9);
}

.split__media {
  grid-column: 1 / span 6;
}

.split__content {
  grid-column: 8 / span 5;
}

.split--media-end > .split__content {
  grid-column: 1 / span 5;
}

.split--media-end > .split__media {
  grid-column: 7 / span 6;
}


/* ==========================================================================
   Editorial — a narrow aside (label / heading) beside a wide body
   ========================================================================== */
.editorial {
  row-gap: var(--space-8);
}

.editorial__aside {
  grid-column: 1 / span 4;
}

.editorial__body {
  grid-column: 6 / span 7;
}


/* ==========================================================================
   Straddle — a panel bridging a dark band into the light section below.
   Pair the section above with .section--overlap so the panel has room.
   ========================================================================== */
.straddle {
  --split: 50%;
  position: relative;
  z-index: 1; /* paint the panel over the (positioned) section above */
  background: linear-gradient(
    180deg,
    var(--straddle-from, var(--navy-900)) var(--split),
    var(--straddle-to, var(--ivory)) var(--split)
  );
}

.straddle__panel {
  margin-top: calc(var(--space-9) * -1);
}


/* ==========================================================================
   Showcase — centred intro on white, then a row of image cards
   (components: benefit-card) bridging down into a navy band.
   4 cards by default; .showcase__grid--3 for three.
   ========================================================================== */
.showcase {
  --overlap: 12rem;
}

.showcase__intro {
  padding-block: var(--section-space) calc(var(--space-10) + var(--overlap));
  text-align: center;
}

.showcase__intro .rule {
  margin: 0 auto var(--space-6);
}

.showcase__title {
  margin-bottom: var(--space-5);
  font-size: var(--text-xl);
  color: var(--navy-900);
}

.showcase__title:last-child {
  margin-bottom: 0;
}

.showcase__text {
  max-width: 34rem;
  margin-inline: auto;
}

.showcase__band {
  padding-bottom: var(--section-space);
  background-color: var(--navy-900);
  color: var(--white);
}

.showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-9) var(--space-6);
  margin-top: calc(var(--overlap) * -1);
}

.showcase__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Alternative content: a .card-panel catalogue bridging into the band */
.showcase__panel {
  margin-top: calc(var(--overlap) * -1);
}

.showcase__actions {
  margin-top: var(--space-9);
  text-align: center;
}

.showcase__actions .pull {
  margin-bottom: var(--space-6);
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  /* Three portrait cards stack early rather than leave an orphan */
  .showcase__grid--3 {
    grid-template-columns: minmax(0, 30rem);
    justify-content: center;
  }

  /* Stacked, a landscape crop keeps three cards from becoming a long scroll */
  .showcase__grid--3 .benefit-card__media {
    aspect-ratio: 4 / 3;
  }

  .split__media,
  .split__content,
  .split--media-end > .split__media,
  .split--media-end > .split__content,
  .editorial__aside,
  .editorial__body {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .straddle {
    --split: 120px;
  }

  .showcase {
    --overlap: 8rem;
  }

  .showcase__grid {
    grid-template-columns: 1fr;
  }
}