/* styles/sections/deliverables-box.css
 * /strategy/ "What You Get": one ruled box, the icon, h2, intro and action beside the
 * numbered deliverable steps at 2fr and 3fr from 900px (a rule between them); stacked below
 * with a rule above the steps. The 767px query is the page's own pre-swap divider switch. */
@layer sections {
  .what-you-get {
    padding-block: var(--space-64);
  }

  .wyg-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
    padding: clamp(24px, 3vw, 56px);
    border: 1px solid var(--rule-edge);
  }

  .wyg-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-32);
    object-fit: contain;
  }

  /* The label wraps where the box is narrower than it (320px), so the box never overflows. */
  .wyg-left .btn {
    white-space: normal;
  }

  .wyg-left h2 {
    margin-bottom: var(--space-32);
  }

  .wyg-intro {
    margin: var(--space-16) 0 var(--space-24);
    color: var(--ink-muted);
  }

  .deliverable-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    margin: 0;
  }

  .deliverable-step {
    margin-bottom: var(--space-24);
  }

  .step-title {
    margin-bottom: var(--space-8);
  }

  .step-items {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .step-items li {
    margin-bottom: var(--space-8);
    color: var(--ink-muted);
  }

  .step-items strong {
    color: var(--ink);
  }

  .wyg-conclusion {
    margin-top: var(--space-32);
    padding-top: var(--space-24);
    border-top: 1px solid var(--rule-edge);
    color: var(--ink-muted);
    font-weight: 500;
  }

  @media (width >= 900px) {
    .wyg-content {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    .wyg-right {
      padding-left: clamp(18px, 2vw, 24px);
      border-left: 1px solid var(--rule-edge);
    }
  }

  @media (width <= 767px) {
    .wyg-right {
      padding-top: var(--space-32);
      border-top: 1px solid var(--rule-edge);
    }
  }
}