/* styles/sections/offer-split.css
 * /strategy/ offer summary: three icon rows, the limitation callout and the action beside
 * the photo at 5fr and 7fr from 900px; stacked below. The callout lines up with the row text
 * (64px icon plus 16px) and goes full width at 600px and below (the page's own query). */
@layer sections {
  .offer-grid {
    display: grid;
    gap: var(--space-48);
  }

  .offer-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--space-16);
    align-items: start;
    margin-bottom: var(--space-48);
  }

  .offer-icon {
    width: 64px;
    height: 64px;
  }

  .offer-text h3 {
    margin-bottom: var(--space-8);
  }

  .offer-limitation {
    margin: var(--space-24) 0 var(--space-24) calc(64px + var(--space-16));
    padding: var(--space-16);
    border-left: 3px solid var(--success);
    background: var(--paper);
    color: var(--ink-muted);
    font-style: italic;
    font-weight: 500;
  }

  /* The action is centred in its column, as the pre-swap button group was. */
  .offer-left .cta-pair {
    justify-content: center;
  }

  .offer-image {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border-radius: var(--radius-md);
    background: var(--line-2);
    object-fit: cover;
  }

  @media (width >= 900px) {
    .offer-grid {
      grid-template-columns: 5fr 7fr;
      align-items: start;
    }

    .offer-image {
      min-height: 520px;
    }
  }

  @media (width <= 600px) {
    .offer-limitation {
      margin-left: 0;
      padding: var(--space-24) var(--space-16);
    }
  }
}