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

/* ---- top section: menu + machine header ---------------------
   Same approach as sc1page.css / scqubepage.css. Uses the
   .sc-card .sc-card--solid .section wrapper so the menu inherits
   the identical layout chain (1680px max-width, .section__inner
   150px padding, .section .sc-page rules) — menu renders at the
   EXACT same horizontal position as on the other product pages
   and on index.html.

   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--scoptimapage {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.section--scoptimapage::before,
.section--scoptimapage::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--scoptimapage .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. */
.scoptimapage__header {
  margin-top: 60px;
  padding-left: 14px;
  padding-right: 14px;
  max-width: 1400px; /* same cap as the menu */
  width: 100%;
}
@media (max-width: 1100px) {
  .scoptimapage__header {
    margin-top: 40px;
  }
}
@media (max-width: 720px) {
  .scoptimapage__header {
    margin-top: 32px;
  }
}

/* ============================================================
   SC OPTIMA SPECS CARD
   Same construction as .section--scqubespecs (dashed card with
   2-column grid: machine + captions on the left, content +
   download link on the right). Left column shifted toward the
   page edge via transform; download link pinned to the right
   column's bottom so the two buttons share a horizontal axis.
   ============================================================ */
.section--scoptimaspecs .section__inner {
  --scoptimaspecs-pad-x: 80px;
  padding: 72px var(--scoptimaspecs-pad-x) 72px;
}

.scoptimaspecs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: stretch; /* both columns share the row height so the
                               download link can be pushed to the bottom */
}

/* LEFT — machine + chamber-volume captions + CTA */
.scoptimaspecs__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* visually shift the whole left column toward the page edge,
     matching the SC Qube specs treatment. */
  transform: translateX(-120px);
}

.scoptimaspecs__machine {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}

.scoptimaspecs__img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  height: auto;
  width: auto;
  object-fit: contain;
  /* nudge image a bit right on desktop (reset where layout stacks ≤1100) */
  transform: translateX(30px);
}

/* volume + CTA grouped: the group is centered in the left column and
   shrinks to the button's width (its widest child), so left-aligning
   its contents lines the chamber-volume text up with the button edge. */
.scoptimaspecs__cta-group {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* chamber volume captions: small orange label + big primary number */
.scoptimaspecs__volume {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.scoptimaspecs__volume-label {
  --sc-heading-size: clamp(18px, 1.6vw, 22px); /* small secondary caption */
  color: var(--sc-accent); /* brand orange */
}
.scoptimaspecs__volume-value {
  --sc-heading-size: clamp(30px, 2.9vw, 40px); /* big primary-style number */
  margin: 0;
  line-height: 1;
}

/* CTA button anchors the group's width (it's the widest child) */
.scoptimaspecs__cta {
  align-self: flex-start;
}

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

.scoptimaspecs__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scoptimaspecs__block-heading {
  margin: 0;
  line-height: 1.05;
}

/* description text — light grey body with darker "lead" highlight that
   matches the SC-1 / SC Qube secondary-block treatment. */
.scoptimaspecs__block-desc {
  margin: 0;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-regular);
  line-height: 1.45;
  color: var(--sc-gray-2);
  max-width: 560px;
}
.scoptimaspecs__desc-lead {
  color: var(--sc-ink);
}

/* ghost download link — pushed to the BOTTOM of the right column so it
   sits on the same horizontal axis as the CTA button on the left. */
.scoptimaspecs__download {
  align-self: flex-start;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: var(--sc-text-md);
  margin-top: auto;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1400px) {
  .section--scoptimaspecs .section__inner {
    --scoptimaspecs-pad-x: 60px;
    padding: 60px var(--scoptimaspecs-pad-x);
  }
  .scoptimaspecs__grid {
    column-gap: 60px;
  }
  .scoptimaspecs__left {
    transform: translateX(-40px);
  }
  .scoptimaspecs__machine {
    min-height: 420px;
  }
  .scoptimaspecs__img {
    max-height: 480px;
  }
}

@media (max-width: 1100px) {
  .section--scoptimaspecs .section__inner {
    --scoptimaspecs-pad-x: 40px;
    padding: 48px var(--scoptimaspecs-pad-x);
  }
  /* stack vertically: machine + CTA on top, content below */
  .scoptimaspecs__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .scoptimaspecs__left {
    transform: none;
  }
  .scoptimaspecs__content {
    gap: 40px;
  }
  .scoptimaspecs__machine {
    min-height: 360px;
  }
  .scoptimaspecs__img {
    max-height: 420px;
    transform: none;
  }
  .scoptimaspecs__volume-value {
  }
  /* once stacked the download link no longer needs to push to bottom
     to align with a sibling column — let it sit naturally below text */
  .scoptimaspecs__download {
    margin-top: 12px;
  }
}

@media (max-width: 720px) {
  .section--scoptimaspecs .section__inner {
    --scoptimaspecs-pad-x: 20px;
    padding: 32px var(--scoptimaspecs-pad-x);
  }
  .scoptimaspecs__grid {
    row-gap: 32px;
  }
  .scoptimaspecs__machine {
    min-height: 280px;
  }
  .scoptimaspecs__img {
    max-height: 320px;
  }
  .scoptimaspecs__volume-label {
  }
  .scoptimaspecs__volume-value {
  }
  .scoptimaspecs__block-desc {
    font-size: var(--sc-text-base);
  }
  .scoptimaspecs__download {
    font-size: var(--sc-text-base);
  }
}

/* ============================================================
   SC OPTIMA TECHNICAL SPECS CARD
   Same construction as .section--scqubespecgrid / .section--sc1specgrid:
   white card with primary caption + 2-column spec sheet grid.
   • Outer border: comes from .sc-card--white (1px solid black)
   • Inner cell borders: drawn directly via border-bottom on every
     cell + border-left on the right column, so the cells can stay
     semi-transparent (60% white) without black bleed-through.
   ============================================================ */

/* 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--scoptimaspecgrid {
  background-color: var(--sc-glass);
}

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

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

.scoptimaspecgrid__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  border: 1px solid var(--sc-black); /* outer border around the grid */
}

.scoptimaspecgrid__label,
.scoptimaspecgrid__value {
  background-color: var(--sc-glass);
  padding: 22px 28px;
  font-family: var(--sc-font-sans);
  color: var(--sc-ink);
  border-bottom: 1px solid var(--sc-black);
}
.scoptimaspecgrid__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. */
.scoptimaspecgrid__grid > :nth-last-child(-n + 2) {
  border-bottom: none;
}

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

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

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

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

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

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

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

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

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