/* ============================================================
   SWISS CLUSTER MACHINE HEADER — component styles
   Framework-free. Stacked header block for machine product pages:
     • name        — small bold label (e.g. "SC-1")
     • caption     — large primary heading (e.g. "ALD/PVD Cluster")
     • description — supporting body text below

   All three lines are dark var(--sc-ink) for a quiet, consistent feel.
   Sizes mirror the rest of the design system (caption matches the
   .sc-heading primary scale; name is bold but smaller; description
   uses the same body text scale as section descriptions).

   Usage:
     <header class="sc-machine-header">
       <span class="sc-machine-header__name">SC-1</span>
       <h1   class="sc-machine-header__caption">ALD/PVD Cluster</h1>
       <p    class="sc-machine-header__desc">
         The first (PE)-ALD and PVD cluster system in a compact and modular equipment
       </p>
     </header>

   Theming: override the CSS variables on .sc-machine-header.
   ============================================================ */

.sc-machine-header {
  /* ---- design tokens (override to re-theme) ---- */
  --sc-machine-header-color: var(--sc-ink); /* shared dark colour for all 3 lines */
  --sc-machine-header-font: var(--sc-font-sans);

  --sc-machine-header-name-size: 36px;
  --sc-machine-header-name-weight: var(--sc-weight-bold);
  --sc-machine-header-name-tracking: -0.5px;

  --sc-machine-header-caption-size: 48px; /* matches .sc-heading primary scale */
  --sc-machine-header-caption-weight: var(--sc-weight-bold); /* heavy display weight, like the screenshot */
  --sc-machine-header-caption-tracking: -1.5px;
  --sc-machine-header-caption-leading: 1;

  --sc-machine-header-desc-size: 24px;
  --sc-machine-header-desc-weight: var(--sc-weight-regular);
  --sc-machine-header-desc-leading: 1.4;
  --sc-machine-header-desc-max: 900px; /* sensible cap so long lines don't sprawl */

  --sc-machine-header-name-gap: 4px; /* space between name and caption */
  --sc-machine-header-desc-gap: 10px; /* space between caption and description */

  /* ---- layout ---- */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--sc-machine-header-font);
  color: var(--sc-machine-header-color);
  -webkit-font-smoothing: antialiased;
}

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

/* small bold name label */
.sc-machine-header__name {
  margin: 0 0 var(--sc-machine-header-name-gap);
  font-family: inherit;
  color: inherit;
  font-size: var(--sc-machine-header-name-size);
  font-weight: var(--sc-machine-header-name-weight);
  letter-spacing: var(--sc-machine-header-name-tracking);
  line-height: 1;
  display: block;
}

/* large primary caption */
.sc-machine-header__caption {
  margin: 0;
  font-family: inherit;
  color: inherit;
  font-size: var(--sc-machine-header-caption-size);
  font-weight: var(--sc-machine-header-caption-weight);
  letter-spacing: var(--sc-machine-header-caption-tracking);
  line-height: var(--sc-machine-header-caption-leading);
}

/* supporting description */
.sc-machine-header__desc {
  margin: var(--sc-machine-header-desc-gap) 0 0;
  font-family: inherit;
  color: inherit;
  font-size: var(--sc-machine-header-desc-size);
  font-weight: var(--sc-machine-header-desc-weight);
  line-height: var(--sc-machine-header-desc-leading);
  max-width: var(--sc-machine-header-desc-max);
}

/* ---------- RESPONSIVE ----------
   Scale the type down at the same breakpoints the rest of the
   design system uses, so machine pages feel consistent across
   widths. Override the variables — no rule rewriting needed. */

@media (max-width: 1400px) {
  .sc-machine-header {
    --sc-machine-header-name-size: 32px;
    --sc-machine-header-caption-size: 44px;
    --sc-machine-header-desc-size: 22px;
  }
}

@media (max-width: 1100px) {
  .sc-machine-header {
    --sc-machine-header-name-size: 28px;
    --sc-machine-header-caption-size: 36px;
    --sc-machine-header-desc-size: 20px;
    --sc-machine-header-desc-gap: 8px;
  }
}

@media (max-width: 720px) {
  .sc-machine-header {
    --sc-machine-header-name-size: 22px;
    --sc-machine-header-caption-size: 28px;
    --sc-machine-header-caption-tracking: -1px;
    --sc-machine-header-desc-size: 17px;
    --sc-machine-header-name-gap: 2px;
    --sc-machine-header-desc-gap: 6px;
  }
}