CtaSplitRounded CTA

---
interface Props {
  headline: string;
  subhead?: string;
  cta?: string;
  image: string;
  imageAlt?: string;
  bg?: 'dark' | 'accent';
}
const {
  headline,
  subhead,
  cta = 'Word lid',
  image,
  imageAlt = '',
  bg = 'dark',
} = Astro.props;
---
<section class="csr">
  <div class="csr-container">
    <div class={`csr-card csr-${bg}`}>
      <div class="csr-text">
        <h2>{headline}</h2>
        {subhead && <p>{subhead}</p>}
        <a href="#" class={bg === 'dark' ? 'csr-btn csr-btn-light' : 'csr-btn csr-btn-dark'}>{cta}</a>
      </div>
      <div class="csr-media">
        <img src={image} alt={imageAlt} />
        <svg class="csr-leaf" viewBox="0 0 100 100" aria-hidden="true">
          <path d="M50 10 C58 28, 72 32, 90 30 C72 38, 68 52, 70 70 C56 56, 42 56, 28 70 C30 52, 26 38, 8 30 C26 32, 40 28, 50 10 Z" opacity="0.5"/>
        </svg>
      </div>
    </div>
  </div>
</section>

<style>
  .csr {
    --ink: #131313;
    --ink-2: #2d2d2d;
    --accent: #ecf86e;
    --white: #ffffff;
    --radius: 28px;
    --pill: 999px;
    padding-block: clamp(48px, 8vw, 96px);
    background: #f4f4f2;
    font-family: 'Inter', system-ui, sans-serif;
  }
  .csr-container { max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
  .csr-card {
    border-radius: var(--radius); overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    min-height: 420px; position: relative;
  }
  .csr-dark   { background: var(--ink-2); color: var(--white); }
  .csr-accent { background: var(--accent); color: var(--ink); }
  .csr-text { padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 24px; z-index: 2; }
  .csr-text h2 { font-size: clamp(36px, 5vw, 56px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
  .csr-text p { max-width: 380px; opacity: 0.85; line-height: 1.55; margin: 0; }
  .csr-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border-radius: var(--pill);
    text-decoration: none; font-weight: 500; font-size: 15px;
    align-self: flex-start;
  }
  .csr-btn-light { background: var(--white); color: var(--ink); }
  .csr-btn-dark  { background: var(--ink); color: var(--white); }
  .csr-media { position: relative; height: 100%; overflow: hidden; }
  .csr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .csr-leaf {
    position: absolute; bottom: -60px; left: -40px;
    width: 260px; height: 260px;
    fill: rgba(255,255,255,0.12);
  }
  .csr-dark .csr-leaf { fill: rgba(255,255,255,0.08); }
  @media (max-width: 800px) {
    .csr-card { grid-template-columns: 1fr; }
    .csr-media { aspect-ratio: 4/3; }
  }
</style>