/* styles/sections/split-hero.css
 * /strategy/ hero: the centred campaign hero (campaign-hero.css: padding, h1 and deck
 * measures, actions) set as copy beside the mind-map image from 900px, where the copy goes
 * to the start edge; stacked and centred below. Adds the credibility line under the deck. */
@layer sections {
  .hero-content {
    display: grid;
    gap: var(--space-48);
    align-items: center;
  }

  .hero-text {
    text-align: center;
  }

  .hero .credibility-line {
    margin: var(--space-16) 0 var(--space-24);
    color: var(--ink-muted);
    font-weight: 400;
  }

  .hero-image img {
    width: 100%;
    border-radius: var(--radius-md);
  }

  @media (width >= 900px) {
    .hero-content {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-96);
    }

    .hero-text {
      text-align: left;
    }

    .hero-text .cta-pair {
      justify-content: flex-start;
    }
  }
}