/* ============================================================
   SC QUBE PRODUCT PAGE — page stylesheet
   Only layout / positioning rules specific to scqubepage.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: uses the .sc-card .sc-card--solid
   .section wrapper so the menu inherits the identical layout
   chain (1680px max-width, .section__inner 150px padding, same
   .section .sc-page rules) — menu renders at the EXACT same
   horizontal position as on index.html / sc1page.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--scqubepage {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.section--scqubepage::before,
.section--scqubepage::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--scqubepage .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. */
.scqubepage__header {
  margin-top: 60px;
  padding-left: 14px;
  padding-right: 14px;
  max-width: 1400px; /* same cap as the menu */
  width: 100%;
}
@media (max-width: 1100px) {
  .scqubepage__header {
    margin-top: 40px;
  }
}
@media (max-width: 720px) {
  .scqubepage__header {
    margin-top: 32px;
  }
}

/* ============================================================
   SC QUBE SPECS CARD
   Dashed card. Two-column grid:
   • LEFT  — machine image + 3D-parts wireframe overlay,
             a small "Volume of ?" caption, and accent CTA button.
   • RIGHT — two secondary-caption blocks (3D parts / Scalable chamber)
             with body descriptions, plus a ghost-link "Download" below.
   Same padding / sizing / breakpoints convention as .section--sc1specs.
   ============================================================ */
.section--scqubespecs .section__inner {
  --scqubespecs-pad-x: 80px;
  padding: 80px var(--scqubespecs-pad-x) 80px;
}

.scqubespecs__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 + caption + CTA */
.scqubespecs__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* visually shift the whole left column toward the page edge. */
  transform: translateX(-120px);
}

/* CTA button sits centered under the caption */
.scqubespecs__cta {
  align-self: flex-end;
}

.scqubespecs__machine {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.scqubespecs__img {
  display: block;
  max-width: 100%;
  max-height: 560px;
  height: auto;
  width: auto;
  object-fit: contain;
}
/* wireframe overlay — positioned to the right of the main machine.
   Hidden when no src is provided. */
.scqubespecs__wireframe {
  position: absolute;
  top: 24%;
  right: 8%;
  width: 26%;
  height: auto;
  pointer-events: none;
  /* hidden initial state — animated in when the section is revealed
     by scqubepage.js (via .scqubespecs__machine.is-revealed). */
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.91s ease 0.26s,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.scqubespecs__wireframe[src=""] {
  display: none;
}

/* revealed state — fade + slide in from the right */
.scqubespecs__machine.is-revealed .scqubespecs__wireframe {
  opacity: 1;
  transform: translateX(0);
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .scqubespecs__wireframe {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* "Volume of ?" — small caption beneath the image, accent-coloured.
   Matches the SC-1 connector-label style but tinted with the brand
   accent so it reads as a callout / spec hint. */
/* volume + CTA grouped: centered in the left column and sized to the
   button (its widest child), so right-aligning its contents lines the
   chamber-volume text up with the button's right edge. */
.scqubespecs__cta-group {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}

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

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

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

/* secondary captions on this card — component's natural size,
   matching "Modular" / "Programmable" on the SC-1 specs card */
.scqubespecs__heading {
  margin: 0;
  line-height: 1;
}

.scqubespecs__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);
}
.scqubespecs__desc-lead {
  color: var(--sc-ink); /* dark accent on the lead phrase */
}

/* 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. */
.scqubespecs__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--scqubespecs .section__inner {
    --scqubespecs-pad-x: 60px;
    padding: 60px var(--scqubespecs-pad-x);
  }
  .scqubespecs__grid {
    column-gap: 60px;
  }
  .scqubespecs__left {
    transform: translateX(-40px);
  }
  .scqubespecs__machine {
    min-height: 420px;
  }
  .scqubespecs__img {
    max-height: 480px;
  }
}

@media (max-width: 1100px) {
  .section--scqubespecs .section__inner {
    --scqubespecs-pad-x: 40px;
    padding: 48px var(--scqubespecs-pad-x);
  }
  /* stack vertically: machine + CTA on top, content below */
  .scqubespecs__grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .scqubespecs__left {
    transform: none;
  } /* no shift when stacked */
  .scqubespecs__content {
    gap: 40px;
  }
  .scqubespecs__machine {
    min-height: 360px;
  }
  .scqubespecs__img {
    max-height: 420px;
  }
  .scqubespecs__volume-value {
  }
}

@media (max-width: 720px) {
  .section--scqubespecs .section__inner {
    --scqubespecs-pad-x: 20px;
    padding: 32px var(--scqubespecs-pad-x);
  }
  .scqubespecs__desc {
    font-size: var(--sc-text-base);
  }
  .scqubespecs__content {
    gap: 32px;
  }
  .scqubespecs__machine {
    min-height: 280px;
  }
  .scqubespecs__img {
    max-height: 320px;
  }
  .scqubespecs__volume-label {
  }
  .scqubespecs__volume-value {
  }
  .scqubespecs__download {
    font-size: var(--sc-text-base);
  }
}

/* ============================================================
   SC QUBE TECHNICAL SPECS CARD
   White card with primary caption + 2-column "spec sheet" grid.
   Same construction as .section--sc1specgrid on sc1page:
   • Outer border: comes from .sc-card--white (1px solid black)
   • Inner cell borders: gap+background-color "thin grid" technique
     (cells with white bg, 1px gap reveals black background 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--scqubespecgrid {
  background-color: var(--sc-glass);
}

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

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

/* the grid itself sits inside the white card; its black background
   shows through the 1px gaps between cells as the cell borders */
.scqubespecgrid__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  border: 1px solid var(--sc-black); /* outer border around the grid */
}

.scqubespecgrid__label,
.scqubespecgrid__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);
}
.scqubespecgrid__value {
  border-left: 1px solid var(--sc-black);
}

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

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

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

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

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

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

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

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

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

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