/* ============================================================
   SWISS CLUSTER CTA — component styles
   Framework-free. Reusable call-to-action block.
   Intended to be placed INSIDE a section card (sc-card.sc-card--solid
   or similar), so it carries no outer padding of its own — the section
   provides that. The block itself is just a layout grid + content.

   Block:    .sc-cta
   Elements: .sc-cta__heading, .sc-cta__body, .sc-cta__desc, .sc-cta__btn

   Usage:
     <section class="sc-card sc-card--solid section">
       <div class="section__inner">
         <div class="sc-cta">
           <h2 class="sc-heading sc-heading--display sc-cta__heading">
             Configure Your Architecture
           </h2>
           <div class="sc-cta__body">
             <p class="sc-cta__desc">…body copy…</p>
             <a class="sc-btn sc-btn--accent sc-cta__btn" href="#">
               Discuss System Configuration
             </a>
           </div>
         </div>
       </div>
     </section>

   Components consumed:
     • .sc-heading / .sc-heading--display  (caption component)
     • .sc-btn / .sc-btn--accent           (button component — solid dark fill)

   Theming: override the CSS variables below in :root or on the block.
   ============================================================ */

.sc-cta {
  /* ---- design tokens (override to re-theme) ---- */
  --sc-cta-gap: 80px; /* column gap between heading and body */
  --sc-cta-body-gap: 32px; /* gap between desc and button */

  --sc-cta-desc-size: 18px;
  --sc-cta-desc-weight: var(--sc-weight-regular);
  --sc-cta-desc-line: 1.4;
  --sc-cta-desc-color: var(--sc-ink);
  --sc-cta-desc-max: 560px;

  /* ---- layout ---- */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sc-cta-gap);
  align-items: start;
  width: 100%;
}

.sc-cta *,
.sc-cta *::before,
.sc-cta *::after {
  box-sizing: border-box;
}

/* ---- heading (left column) ---- */
.sc-cta__heading {
  margin: 0;
  line-height: 1.05;
  /* uses .sc-heading .sc-heading--display for styling; no size override
     so it matches "ALD/PVD Cluster." / "Batch ALD." etc. */
}

/* ---- body wrapper (right column) ---- */
.sc-cta__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-cta-body-gap);
}

/* ---- body text ---- */
.sc-cta__desc {
  margin: 0;
  max-width: var(--sc-cta-desc-max);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-cta-desc-size);
  font-weight: var(--sc-cta-desc-weight);
  line-height: var(--sc-cta-desc-line);
  color: var(--sc-cta-desc-color);
}

/* ---- button ----
   Uses .sc-btn .sc-btn--accent from the buttons component; this hook
   exists for any layout tweaks specific to the CTA block. */
.sc-cta__btn {
  /* no overrides needed by default */
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1400px) {
  .sc-cta {
    --sc-cta-gap: 60px;
  }
}

@media (max-width: 1100px) {
  .sc-cta {
    --sc-cta-gap: 40px;
    --sc-cta-body-gap: 24px;
    /* stack: heading on top, body below */
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}

@media (max-width: 720px) {
  .sc-cta {
    --sc-cta-desc-size: 16px;
    --sc-cta-body-gap: 20px;
    row-gap: 24px;
  }
  /* keep the button content-sized on mobile (don't let it stretch to
     the column width); slightly tighter horizontal padding so the
     pill reads as a button rather than a bar. */
  .sc-cta__btn {
    align-self: flex-start;
    width: auto;
    padding-left: 32px;
    padding-right: 32px;
    font-size: var(--sc-text-base);
  }
}