/* ── Data sheet page — gated download: intro + photo, intake form, download panel ── */

/* ═══════════════════════════════════════════
   DATA SHEET PAGE (cream theme, like contact / 404)
   ═══════════════════════════════════════════ */

.page-datasheet {
  background: var(--cream);
  color: var(--nav-bg);

  --ds-muted: rgba(16, 32, 39, 0.64);

  /* Distance from the top of the viewport to the content. Used for BOTH the
     section's top padding and the intro's sticky offset, so the left column
     starts and stays in the same place: fully visible on load and while the
     form scrolls past. Clears the 100px desktop nav with a small gap. */
  --ds-top: clamp(124px, 10vw, 148px);
  --ds-bottom-gap: 32px;
}

.datasheet-section {
  padding: var(--ds-top) 0 clamp(96px, 12vw, 160px);
}
.datasheet-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  /* max() with env() keeps content clear of the iPhone Dynamic Island
     in landscape (viewport-fit=cover); env() is 0 elsewhere. */
  padding-left: max(clamp(24px, 4vw, 72px), env(safe-area-inset-left));
  padding-right: max(clamp(24px, 4vw, 72px), env(safe-area-inset-right));
}

/* Two columns: intro + photo left (sticky), form right */
.datasheet-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

/* ── Left: framing copy + photo ──
   The column is exactly one viewport tall (minus the nav offset and a
   bottom gap) and sticks while the long form scrolls, so the whole column
   is always on screen. The copy takes its natural height and the photo
   flexes to fill whatever is left. */
.datasheet-intro {
  position: sticky;
  top: var(--ds-top);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--ds-top) - var(--ds-bottom-gap));
  height: calc(100svh - var(--ds-top) - var(--ds-bottom-gap));
  /* Cap for very tall windows: beyond this the photo panel would turn
     tall-and-narrow and start cropping the unit off the sides. 1040px fills
     a maximised window on a 27" (2560×1440) display. */
  max-height: 1040px;
}
.datasheet-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(120, 100, 60);
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.datasheet-headline {
  font-size: clamp(36px, 3.7vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--nav-bg);
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  text-wrap: balance;
}
.datasheet-sub {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--ds-muted);
  max-width: 440px;
  margin: 0;
}

/* Hero photo panel — fills the remaining height of the sticky column;
   object-fit: cover crops the photograph to whatever shape that leaves.
   The dark background only shows while the image is loading. */
.datasheet-hero {
  flex: 1 1 auto;
  min-height: 200px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  background: var(--nav-bg);
  border-radius: var(--radius-img-lg);
  max-width: 100%;
  overflow: hidden;
}
.datasheet-hero picture,
.datasheet-hero-img {
  display: block;
  width: 100%;
  height: 100%;
}
.datasheet-hero-img {
  object-fit: cover;
  /* The unit sits below the photo's midpoint, so the crop favours the
     bottom of the image to bring it to the centre of the panel. */
  object-position: center 80%;
}

/* Very large displays (27" iMac / Studio Display at 2560×1440, etc.):
   scale the copy up with the column so the left side doesn't read as
   small against the full-height form card. */
@media (min-width: 1920px) {
  .datasheet-headline {
    font-size: 64px;
  }
  .datasheet-sub {
    font-size: 18px;
    max-width: 480px;
  }
}

/* Short desktop windows (e.g. a laptop with the browser not maximised):
   a viewport-tall column would squeeze the photo, so let the column scroll
   normally with a fixed-ratio photo instead. */
@media (min-width: 901px) and (max-height: 700px) {
  .datasheet-intro {
    position: static;
    height: auto;
    max-height: none;
  }
  .datasheet-hero {
    flex: none;
    aspect-ratio: 4 / 3;
  }
}

/* ── Right: form container ── */
.datasheet-form-wrap {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 20px;
  padding: clamp(40px, 4.5vw, 60px) clamp(36px, 4vw, 52px);
  box-shadow: 0 8px 32px rgba(16, 32, 39, 0.03), 0 1px 3px rgba(16, 32, 39, 0.02);
}

/* ── Step 2: download panel (hidden until the submission is accepted) ── */
.datasheet-ready {
  background: var(--nav-bg);
  color: var(--cream);
  border-radius: 12px;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
  text-align: center;
}
/* Focused programmatically (to scroll into view + announce), not an
   interactive control — so no visible focus ring. */
.datasheet-ready:focus {
  outline: none;
}
.datasheet-ready-title {
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.datasheet-ready-note {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 18px auto 0;
  max-width: 46ch;
}
.datasheet-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  background: var(--gold);
  color: var(--nav-bg);
  padding: 15px 40px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.datasheet-download:hover {
  background: var(--gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(183, 150, 93, 0.25);
}
.datasheet-download:active {
  transform: translateY(0);
  box-shadow: none;
}
.datasheet-ready :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Belt-and-braces: JS toggles the `hidden` attribute on these two blocks. */
.datasheet-gate[hidden],
.datasheet-ready[hidden] {
  display: none;
}

/* Dark-on-light focus ring for the rest of the page (mirrors base.css) */
.datasheet-section :focus-visible {
  outline-color: var(--nav-bg);
}
.datasheet-section .datasheet-ready :focus-visible {
  outline-color: var(--gold);
}

/* Mobile menu inherits the dark nav background on this cream page
   (same pattern as contact and 404). */
.page-datasheet .mobile-menu { background: var(--nav-bg); }
.page-datasheet .mobile-menu a { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .datasheet-download {
    transition: none;
  }
  .datasheet-download:hover {
    transform: none;
  }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .page-datasheet {
    /* The nav drops to 56px at this width (base.css). */
    --ds-top: 104px;
  }
  .datasheet-layout {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 56px);
  }
  .datasheet-intro {
    position: static;
    height: auto;
    max-height: none;
  }
  .datasheet-sub {
    max-width: 100%;
  }
  .datasheet-hero {
    flex: none;
    aspect-ratio: 16 / 10;
  }
  .datasheet-form-wrap {
    padding: clamp(32px, 4vw, 44px) clamp(24px, 3vw, 36px);
  }
}

@media (max-width: 600px) {
  .datasheet-section {
    /* Mobile nav is 56px (base.css); 76px leaves a small gap below it. */
    padding-top: 76px;
  }
  .datasheet-headline {
    font-size: clamp(32px, 9.5vw, 44px);
  }
  .datasheet-hero {
    border-radius: var(--radius-img);
  }
  .datasheet-form-wrap {
    padding: 28px 20px;
    border-radius: 14px;
  }
  .datasheet-download {
    width: 100%;
    justify-content: center;
  }
}