/* ============================================================
   SC-1 PRODUCT PAGE — page stylesheet
   Only layout / positioning rules specific to sc1page.html.
   Reuses everything from page.css and the component CSS files
   (cards, menu, captions, buttons, machine-header, footer).
   ============================================================ */

/* ---- top section: menu + machine header ---------------------
   Uses the same .sc-card .sc-card--solid .section wrapper as
   index.html's hero so the menu inherits the identical layout
   chain (1680px max-width, .section__inner 150px padding, etc.)
   and renders at the exact same horizontal position.

   The only difference vs the hero: no background image, no
   1120px min-height, and we strip the card's visible chrome
   (border / background / shadow) since this page doesn't want
   a card outline around the top section.
   ------------------------------------------------------------ */
.section--sc1page {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.section--sc1page::before,
.section--sc1page::after {
  display: none !important;
}

/* keep top padding at 0 (matching index.html's hero) so the menu
   sits at the exact same vertical position. Bottom padding gives
   space before the next section. */
.section--sc1page .section__inner {
  padding-top: 0;
  padding-bottom: 80px;
}

/* machine header sits below the menu, aligned to the menu's logo.
   The menu has 14px internal padding, so the header gets the same
   14px horizontal offset for perfect left-edge alignment. */
.sc1page__header {
  margin-top: 60px;
  padding-left: 14px;
  padding-right: 14px;
  max-width: 1400px; /* same cap as the menu */
  width: 100%;
}
@media (max-width: 1100px) {
  .sc1page__header {
    margin-top: 40px;
  }
}
@media (max-width: 720px) {
  .sc1page__header {
    margin-top: 32px;
  }
}

/* ============================================================
   SC-1 SPECS CARD
   Dashed card (inherits .sc-card--dashed border from the cards
   component). Two-column layout: callout-labeled machine on the
   left, two secondary-caption blocks + ghost-link list on the right.
   ============================================================ */
.section--sc1specs .section__inner {
  --sc1specs-pad-x: 80px;
  padding: 80px var(--sc1specs-pad-x) 80px;
}

.sc1specs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: start;
}

/* LEFT — machine + callouts.
   The image is constrained narrower than the column so there's
   breathing room on the right where the callout labels can sit
   without overlapping the machine. Top padding reserves space
   for the "stage" label above the lid. */
.sc1specs__machine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding-top: 40px;
  padding-right: 160px; /* space for ALD/PVD/metrology labels */
}
.sc1specs__img {
  display: block;
  max-width: 100%;
  max-height: 640px;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* callout labels — Inter, dark, positioned relative to the .sc1specs__machine
   container. With padding-right reserving space on the right, the callouts
   sit OUTSIDE the machine image rather than on top of it. */
.sc1specs__callout {
  position: absolute;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-lg);
  font-weight: var(--sc-weight-regular);
  color: var(--sc-ink);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.2;
  /* hidden initial state — animated in when .sc1specs__machine.is-revealed
     is applied by sc1page.js as the section enters the viewport */
  opacity: 0;
  transition:
    opacity 0.78s ease,
    transform 0.78s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* "stage" — above the machine lid, shifted slightly left.
   Initial state: slightly above its final position; slides down on reveal. */
.sc1specs__callout--stage {
  top: 0;
  left: 40%;
  transform: translate(-50%, -16px);
}
/* "ALD chamber" — right side, level with the upper red chamber.
   Initial state: shifted right; slides in from the right on reveal. */
.sc1specs__callout--ald {
  top: 22%;
  right: 0;
  transform: translateX(20px);
}
/* "PVD chamber" — right side, level with the lower red chamber.
   Initial state: shifted right; slides in from the right on reveal. */
.sc1specs__callout--pvd {
  top: 52%;
  right: 0;
  transform: translateX(20px);
}
/* "in-situ metrology" — right of the small black piece, two lines.
   Initial state: shifted down; slides up on reveal. */
.sc1specs__callout--metrology {
  top: 86%;
  right: 0;
  white-space: normal;
  max-width: 150px;
  transform: translateY(16px);
}

/* revealed state — restore each callout to its final position + opacity 1.
   Staggered transition-delays so they pop in one after another. */
.sc1specs__machine.is-revealed .sc1specs__callout {
  opacity: 1;
}
.sc1specs__machine.is-revealed .sc1specs__callout--stage {
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.sc1specs__machine.is-revealed .sc1specs__callout--ald {
  transform: translateX(0);
  transition-delay: 0.195s;
}
.sc1specs__machine.is-revealed .sc1specs__callout--pvd {
  transform: translateX(0);
  transition-delay: 0.39s;
}
.sc1specs__machine.is-revealed .sc1specs__callout--metrology {
  transform: translateY(0);
  transition-delay: 0.585s;
}

/* respect reduced-motion preference — show all instantly, no animation */
@media (prefers-reduced-motion: reduce) {
  .sc1specs__callout {
    transition: none;
    opacity: 1;
  }
  .sc1specs__callout--stage {
    transform: translate(-50%, 0);
  }
  .sc1specs__callout--ald,
  .sc1specs__callout--pvd {
    transform: translateX(0);
  }
  .sc1specs__callout--metrology {
    transform: translateY(0);
  }
}

/* RIGHT — content blocks */
.sc1specs__content {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.sc1specs__block {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* both secondary captions on this card — use the component's natural size
   (same as "No Vacuum Break" on the SC-1 section in index.html) */
.sc1specs__heading {
  margin: 0;
  line-height: 1;
}

.sc1specs__desc {
  margin: 0;
  max-width: 540px;
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-regular);
  line-height: 1.4;
  color: var(--sc-gray-2); /* slightly darker than body grey for readability */
}

/* dark "black" variant — applied to the Modular block paragraph only */
.sc1specs__desc--dark {
  color: var(--sc-ink);
}

/* ghost links stacked underneath */
.sc1specs__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* desktop only — this margin resets to a tight value once the
     two-column layout stacks at ≤1100px (see media query below) */
  margin-top: 72px;
}
/* ghost button alignment fix: text-only links shouldn't have the default
   button height — tight padding so they read as a stacked link list */
.sc1specs__links .sc-btn--ghost {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--sc-text-md);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1400px) {
  .section--sc1specs .section__inner {
    --sc1specs-pad-x: 60px;
    padding: 60px var(--sc1specs-pad-x);
  }
  .sc1specs__grid {
    column-gap: 60px;
  }
  .sc1specs__machine {
    min-height: 520px;
    padding-top: 36px;
    padding-right: 140px;
  }
  .sc1specs__img {
    max-height: 560px;
  }
}

@media (max-width: 1100px) {
  .section--sc1specs .section__inner {
    --sc1specs-pad-x: 40px;
    padding: 48px var(--sc1specs-pad-x);
  }
  /* stack vertically: machine on top, content below */
  .sc1specs__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .sc1specs__content {
    gap: 40px;
  }
  .sc1specs__links {
    margin-top: 12px;
  }
  .sc1specs__machine {
    min-height: 480px;
    padding-top: 32px;
    padding-right: 140px;
  }
  .sc1specs__img {
    max-height: 520px;
  }
  .sc1specs__callout {
    font-size: var(--sc-text-md);
  }
}

@media (max-width: 720px) {
  .section--sc1specs .section__inner {
    --sc1specs-pad-x: 20px;
    padding: 32px var(--sc1specs-pad-x);
  }
  .sc1specs__desc {
    font-size: var(--sc-text-base);
  }
  .sc1specs__content {
    gap: 32px;
  }
  .sc1specs__machine {
    min-height: 360px;
    padding-top: 24px;
    padding-right: 110px;
  }
  .sc1specs__img {
    max-height: 380px;
  }
  .sc1specs__callout {
    font-size: var(--sc-text-base);
  }
  .sc1specs__callout--metrology {
    max-width: 100px;
  }
  .sc1specs__links .sc-btn--ghost {
    font-size: var(--sc-text-base);
  }
}

/* ============================================================
   SC-1 PARAMETER SPACE CARD
   Solid-border card. Two-column grid:
   • LEFT  — primary caption heading + body paragraph
   • RIGHT — TEM image with a caption line beneath it
   ============================================================ */
.section--sc1param .section__inner {
  --sc1param-pad-x: 60px;
  padding: 72px var(--sc1param-pad-x) 50px;
}

.sc1param__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: start; /* text & image both anchored to the section top */
}

/* LEFT — text content */
.sc1param__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* primary caption — uses the component default size (same as
   "ALD/PVD Cluster" etc. on index.html). Just zero margins +
   tight line height. */
.sc1param__heading {
  margin: 0;
  line-height: 1.05;
}

/* body paragraph — same scale as the SC-1 / Batch / Services descriptions:
   18px grey body text, with the first sentence darker (.__desc-lead). */
.sc1param__desc {
  margin: 0;
  max-width: 560px;
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-regular);
  line-height: 1.4;
  color: var(--sc-gray-2);
}

.sc1param__desc-lead {
  color: var(--sc-ink);
}

/* RIGHT — image + caption */
.sc1param__figure {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc1param__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
}

.sc1param__caption {
  margin: 0;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-sm);
  font-weight: var(--sc-weight-regular);
  line-height: 1.4;
  color: var(--sc-gray-2); /* small grey caption text, matches screenshot */
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1400px) {
  .section--sc1param .section__inner {
    --sc1param-pad-x: 60px;
    padding: 56px var(--sc1param-pad-x) 40px;
  }
  .sc1param__grid {
    column-gap: 60px;
  }
  .sc1param__img {
    max-height: 420px;
  }
}

@media (max-width: 1100px) {
  .section--sc1param .section__inner {
    --sc1param-pad-x: 40px;
    padding: 32px var(--sc1param-pad-x) 40px;
  }
  /* stack: text on top, image below */
  .sc1param__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .sc1param__content {
    gap: 24px;
  }
  .sc1param__img {
    max-height: 380px;
  }
}

@media (max-width: 720px) {
  .section--sc1param .section__inner {
    --sc1param-pad-x: 20px;
    padding: 24px var(--sc1param-pad-x) 32px;
  }
  .sc1param__content {
    gap: 20px;
  }
  .sc1param__desc {
    font-size: var(--sc-text-base);
  }
  .sc1param__img {
    max-height: 280px;
  }
  .sc1param__caption {
    font-size: var(--sc-text-sm);
  }
}

/* ============================================================
   SC-1 TECHNICAL SPECS CARD
   White card with primary caption + 2-column "spec sheet" grid.
   • Outer card border: comes from .sc-card--white (1px solid black)
   • Inner grid border: 1px solid black around all cells, drawn with
     gap+background-color (CSS "thin grid" technique: cells with bg,
     1px gap between them showing the parent's bg through as lines).
   ============================================================ */

/* page.css's .section forces background-color:var(--sc-surface) onto every
   section card; restore the 60% white fill that .sc-card--white expects. */
.section--sc1specgrid {
  background-color: var(--sc-glass);
}

.section--sc1specgrid .section__inner {
  --sc1specgrid-pad-x: 60px;
  padding: 72px var(--sc1specgrid-pad-x) 72px;
  gap: 48px;
}

.sc1specgrid__heading {
  margin: 0;
  line-height: 1.05;
}

/* the grid itself sits inside the white card. Inner cell borders are
   drawn directly as 1px borders on the cells (no background-color trick),
   so the cells can be semi-transparent without a dark bleed-through. */
.sc1specgrid__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  border: 1px solid var(--sc-black); /* outer border around the grid */
}

.sc1specgrid__label,
.sc1specgrid__value {
  background-color: var(--sc-glass);
  padding: 22px 28px;
  font-family: var(--sc-font-sans);
  color: var(--sc-ink);
  /* 1px black border between cells. border-bottom on every cell draws
     the horizontal rules; border-left on the right column draws the
     vertical rule between columns. The :last-row override below
     suppresses the trailing bottom border (the outer .sc1specgrid__grid
     border covers that edge already). */
  border-bottom: 1px solid var(--sc-black);
}
.sc1specgrid__value {
  border-left: 1px solid var(--sc-black); /* divider between label and value columns */
}

/* drop the bottom border from the LAST row's two cells so it doesn't
   double up against the grid container's bottom border. */
.sc1specgrid__grid > :nth-last-child(-n + 2) {
  border-bottom: none;
}

.sc1specgrid__label {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-bold);
  line-height: 1.3;
}

.sc1specgrid__value {
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-regular);
  line-height: 1.4;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1400px) {
  .section--sc1specgrid .section__inner {
    --sc1specgrid-pad-x: 60px;
    padding: 56px var(--sc1specgrid-pad-x) 56px;
    gap: 40px;
  }
}

@media (max-width: 1100px) {
  .section--sc1specgrid .section__inner {
    --sc1specgrid-pad-x: 40px;
    padding: 40px var(--sc1specgrid-pad-x) 40px;
    gap: 32px;
  }
  .sc1specgrid__grid {
    grid-template-columns: minmax(180px, 1fr) 2fr;
  }
  .sc1specgrid__label,
  .sc1specgrid__value {
    padding: 18px 22px;
    font-size: var(--sc-text-base);
  }
}

@media (max-width: 720px) {
  .section--sc1specgrid .section__inner {
    --sc1specgrid-pad-x: 20px;
    padding: 32px var(--sc1specgrid-pad-x);
    gap: 24px;
  }
  /* stack each row vertically: label on top, value below */
  .sc1specgrid__grid {
    grid-template-columns: 1fr;
  }
  .sc1specgrid__label,
  .sc1specgrid__value {
    padding: 16px 18px;
    font-size: var(--sc-text-base);
  }
  .sc1specgrid__label {
    line-height: 1.25;
  }
}

/* ============================================================
   SC-1 CTA SECTION (wraps the sc-cta component)
   Same padding convention as the other sections.
   ============================================================ */
.section--sc1cta .section__inner {
  --sc1cta-pad-x: 60px;
  padding: 72px var(--sc1cta-pad-x) 72px;
}

@media (max-width: 1400px) {
  .section--sc1cta .section__inner {
    --sc1cta-pad-x: 60px;
    padding: 56px var(--sc1cta-pad-x) 56px;
  }
}

@media (max-width: 1100px) {
  .section--sc1cta .section__inner {
    --sc1cta-pad-x: 40px;
    padding: 48px var(--sc1cta-pad-x) 48px;
  }
}

@media (max-width: 720px) {
  .section--sc1cta .section__inner {
    --sc1cta-pad-x: 20px;
    padding: 32px var(--sc1cta-pad-x);
  }
}