/* ==========================================================================
   Product detail pages — shared across every "View Specifications" page
   (ORT 1/2, RM-Lite, KR-Lite, LM 300, LB3, iVA+). One file so every
   detail page stays visually identical in its underlying components,
   even though each product arranges a different subset of them.

   Component naming: "pd-" prefix (product detail) throughout, to keep
   this file's classes clearly distinct from page-specific files like
   home.css / about.css / products.css.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.pd-breadcrumb {
  padding-top: calc(var(--header-h) + var(--space-3));
  padding-bottom: var(--space-2);
  background: var(--navy-900);
}

.pd-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--mist-dim);
}

.pd-breadcrumb a {
  color: var(--mist);
  transition: color var(--dur-fast) var(--ease-out);
}

.pd-breadcrumb a:hover {
  color: var(--electric-2);
}

.pd-breadcrumb li[aria-current] {
  color: var(--electric-2);
}

/* ---------- Hero (image + text intro, dark background) ----------
   Deliberately capped height — every product brief stressed this
   section must never run tall. min-height keeps it consistent without
   forcing a fixed height that would clip larger content. */
.pd-hero {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
  color: var(--text-on-dark);
}

.pd-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(50% 60% at 90% 15%, rgba(0, 163, 255, 0.16) 0%, rgba(0, 163, 255, 0) 60%),
    radial-gradient(40% 45% at 5% 95%, rgba(38, 56, 128, 0.4) 0%, rgba(38, 56, 128, 0) 65%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-900) 100%);
}

.pd-hero .container {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6);
}

/* Light "ash" variant — LB3 is the one product whose hero brief calls
   for a light background instead of the dark navy every other product
   uses. Overrides every child color that assumed a dark backdrop,
   including the outline button (Brochure), which otherwise renders
   white-on-white here.

   Layered rather than flat: a soft navy glow sits behind the product
   image (left), a faint electric-blue glow sits near the CTA buttons
   (bottom-right), and the base diagonal runs from the original ash
   tone into a slightly cooler blue-gray at the far corner. The text
   column (upper-right) stays at or lighter than the original flat
   gradient's lightest stop, so the eyebrow contrast note below still
   holds. */
.pd-hero--light {
  background:
    radial-gradient(50% 60% at 15% 20%, rgba(38, 56, 128, 0.20) 0%, rgba(38, 56, 128, 0) 62%),
    radial-gradient(45% 50% at 88% 92%, rgba(0, 163, 255, 0.14) 0%, rgba(0, 163, 255, 0) 65%),
    linear-gradient(150deg, #EEF1F5 0%, #E9EDF5 40%, #E1E8F4 70%, #D3DCEC 100%);
  color: var(--ink);
}

.pd-hero--light .pd-eyebrow-code {
  /* electric-dim measured 4.27:1 here (fails 4.5:1) — this specific
     light gradient is a touch darker than the plain white/ice
     backgrounds electric-dim was originally tuned against. This shade
     passes comfortably (5.33:1). */
  color: #00639C;
}

.pd-hero--light .pd-hero-copy .pd-subtitle,
.pd-hero--light .pd-hero-copy p.pd-description {
  color: var(--ink-soft);
}

.pd-hero--light .pd-hero-visual {
  background: linear-gradient(160deg, var(--ice-100) 0%, var(--white) 60%, var(--ice) 100%);
  border-color: var(--line-light);
  /* Layers the standard card shadow with the design system's ambient
     blue glow token, so the card reads as sitting inside the new navy
     glow behind it rather than just floating on top of it. */
  box-shadow: var(--shadow-md), var(--shadow-glow-soft);
  /* Keep this one rectangular — no rounded corners — rather than the
     shared --radius-xl every other product's hero image uses. */
  border-radius: 0;
}

.pd-hero--light .pd-hero-visual .thumb-placeholder {
  color: var(--ink-soft);
}

.pd-hero--light .pd-hero-visual .thumb-placeholder svg {
  color: var(--electric-dim);
}

/* LB3's hero photo is wider than the shared 4:3 hero box, so the
   default object-fit: contain left empty bands top and bottom. cover
   fills the box completely; scoped to the light hero only so every
   other product's (correctly-fitting) hero image is untouched. */
.pd-hero--light .pd-hero-visual img {
  object-fit: cover;
}

/* Previously border-color: var(--line-light) — a near-invisible
   hairline against this light gradient, so the button only read as
   clickable once hovered. Giving it a solid white fill, a real brand
   border, and a shadow makes it look like a button at rest, not just
   on hover. */
.pd-hero--light .btn-outline {
  color: var(--ink);
  background: var(--white);
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-sm);
}

.pd-hero--light .btn-outline:hover {
  background: var(--ice-100);
  border-color: var(--brand-navy-700);
}

.pd-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  align-items: start;
}

/* Nudges the copy column up from its old vertical-center position,
   with a small offset so it isn't jammed flush against the top of
   the image column. */
.pd-hero-copy {
  padding-top: var(--space-3);
}

/* Image-right variant (used when a product's spec calls for the photo
   on the right instead of the left). */
.pd-hero-grid--reverse {
  grid-template-columns: 1.1fr 0.9fr;
}

.pd-hero-grid--reverse .pd-hero-visual {
  order: 2;
}

.pd-hero-grid--reverse .pd-hero-copy {
  order: 1;
}

@media (max-width: 860px) {
  .pd-hero-grid,
  .pd-hero-grid--reverse {
    grid-template-columns: 1fr;
  }
  .pd-hero-grid--reverse .pd-hero-visual,
  .pd-hero-grid--reverse .pd-hero-copy {
    order: initial;
  }
}

.pd-hero-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--ice-100) 0%, var(--white) 60%, var(--ice) 100%);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-lg);
}

.pd-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-slower) var(--ease-out);
}

.pd-hero-visual:hover img {
  transform: scale(1.04);
}

.pd-hero-visual .thumb-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-4);
}

.pd-hero-visual .thumb-placeholder svg {
  width: 36px;
  height: 36px;
  color: var(--electric-dim);
}

.pd-hero-visual.img-missing img {
  display: none;
}

.pd-hero-visual.img-missing .thumb-placeholder {
  display: flex;
}

/* Product identity: eyebrow-style model code (e.g. "KR-LITE") in caps,
   then a plain, non-bold, non-capitalized product-type line beneath. */
.pd-eyebrow-code {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--electric-2);
  margin-bottom: 6px;
}

.pd-hero-copy h1 {
  font-size: calc(var(--fs-h2) - 0.3rem);
  letter-spacing: 0.03em;
  font-weight: lighter;
  margin-bottom: 4px;
}

.pd-hero-copy .pd-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  font-size: var(--fs-body-lg);
  color: var(--mist);
  margin-bottom: var(--space-3);
}

.pd-hero-copy p.pd-description {
  color: var(--mist);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
  max-width: 54ch;
}

/* Demo / Brochure button pair — left-aligned to match the text column
   above it, never centered or full-width. */
.pd-cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Slightly smaller than the site's default .btn size, scoped to this
   hero button pair only. zoom scales font-size/padding together (and,
   unlike transform, still reflows layout correctly), so this shrinks
   the buttons a touch without needing the base .btn values. */
.pd-cta-group .btn {
  zoom: 0.92;
}

/* ---------- Features (white background, bulleted list) ---------- */
.pd-features {
  background: var(--white);
  padding-block: var(--space-6);
}

.pd-features h2 {
  font-size: calc(var(--fs-h3) - 0.21rem);
  font-weight: lighter;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.pd-features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-5);
  max-width: 920px;
}

@media (max-width: 700px) {
  .pd-features-list {
    grid-template-columns: 1fr;
  }
}

.pd-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
  line-height: var(--lh-relaxed);
}

.pd-features-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--electric-dim);
}

/* ---------- Split (generic alternating image/text section) ----------
   The workhorse component: "Tiltable LCD", "Network Ability", "Easy to
   Use", "5.6 LCD Screen", "Fast and Accurate", etc. all use this, just
   with --reverse toggled and a shorter padding than .pd-hero. */
.pd-split {
  padding-block: var(--space-3) !important;
  background: var(--white);
}

/* Scoped to the repeating split sections only (not Key Features or
   other reuses of .pd-split-visual) — a wider ratio means a shorter
   image at the same column width, so the photo shrinks along with
   the section's tighter padding instead of staying tall. */
.pd-split .pd-split-visual {
  aspect-ratio: 16 / 10 !important;
  /* No fill color here: with object-fit: contain below, the photo no
     longer covers the full box, so any background would show around
     it as a visible colored card. Transparent lets the section's own
     background (white / --ice) show through instead, so the product
     photo just sits on the page rather than floating in a box. */
  background: none !important;
}

/* These product photos are mostly flat product shots on white/gray —
   object-fit: cover combined with the forced 16:10 ratio above was
   cropping and visually zooming into them (edges of the device or
   screen getting cut off). contain shows the whole photo, letterboxed
   rather than cropped, so nothing looks artificially enlarged. */
.pd-split .pd-split-visual img {
  object-fit: contain;
}

/* Some split-section photos (e.g. a composed 2x2 collage graphic) are
   naturally boxier than 16:10 — forcing them that wide left visible
   empty bands on the left/right. This modifier resets just that one
   instance back to a squarer box so the photo fills it properly.
   Needs the extra .pd-split-visual class repeated for specificity, to
   safely outrank the 16:10 rule above it. */
.pd-split .pd-split-visual.pd-split-visual--collage {
  aspect-ratio: 4 / 3 !important;
}

.pd-split--alt {
  background: var(--ice);
}

.pd-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.pd-split-grid--reverse {
  grid-template-columns: 1fr 1fr;
}

.pd-split-grid--reverse .pd-split-visual {
  order: 2;
}

.pd-split-grid--reverse .pd-split-copy {
  order: 1;
}

@media (max-width: 860px) {
  .pd-split-grid,
  .pd-split-grid--reverse {
    grid-template-columns: 1fr;
  }
  .pd-split-grid--reverse .pd-split-visual,
  .pd-split-grid--reverse .pd-split-copy {
    order: initial;
  }
}

.pd-split-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--ice-100) 0%, var(--white) 60%, var(--ice) 100%);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-sm);
}

.pd-split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}

.pd-split-visual:hover img {
  transform: scale(1.045);
}

.pd-split-visual .thumb-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}

.pd-split-visual .thumb-placeholder svg {
  width: 30px;
  height: 30px;
  /* electric-dim, not brand-mid — brand-mid measured 2.39:1 against
     this light backdrop in the contrast audit, well under the 3:1
     minimum for a UI icon (same fix already applied elsewhere on the
     site for this exact mistake). */
  color: var(--electric-dim);
}

.pd-split-visual.img-missing img {
  display: none;
}

.pd-split-visual.img-missing .thumb-placeholder {
  display: flex;
}

/* Scaled proportionally (rather than the flat rem-subtraction used
   elsewhere in this file) so it stays a consistent, smaller-than-h3
   size at every breakpoint — a fixed subtraction eats a bigger and
   bigger share of the heading as --fs-h3 itself shrinks on smaller
   screens. Only these three repeating split headings ("Tiltable LCD",
   "Network Ability", "Easy to Use") are affected — the hero h1 and
   the Key Features h2 near the footer use their own rules above and
   are untouched. */
.pd-split-copy h2 {
  font-size: var(--fs-h5) !important;
  font-weight: lighter !important;
  letter-spacing: 0.01em !important;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.pd-split-copy p {
  color: var(--ink-soft);
  font-size: var(--fs-body-sm) !important;
  line-height: var(--lh-relaxed);
}

/* ---------- Dual image section (two photos, one section) ---------- */
.pd-dual {
  padding-block: var(--space-3) !important;
  background: var(--white);
}

/* "Light blue faded with ash" — used for iVA+'s gallery section. */
.pd-dual--gradient {
  background: linear-gradient(135deg, var(--ash) 0%, var(--ice) 55%, var(--brand-pale) 100%);
}

.pd-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 700px) {
  .pd-dual-grid {
    grid-template-columns: 1fr;
  }
}

/* Same cause and same fix as the .pd-split sections above: cover +
   a forced 16:10 box was cropping/zooming into these product photos.
   contain shows the full photo, and dropping the background stops an
   empty colored card showing around it once the image no longer
   fills the box edge-to-edge. */
.pd-dual-grid .pd-split-visual {
  aspect-ratio: 16 / 10 !important;
  background: none !important;
}

.pd-dual-grid .pd-split-visual img {
  object-fit: contain;
}

/* ---------- Key Features (image + 5 paragraphs) ----------
   Background is deliberately distinct from both the white sections
   above it and the near-black footer below it — a soft slate tone that
   bridges the two without visually merging into either. */
.pd-key-features {
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-700) 100%);
  padding-block: var(--space-6);
  color: var(--text-on-dark);
}

.pd-key-features-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 860px) {
  .pd-key-features-grid {
    grid-template-columns: 1fr;
  }
}

.pd-key-features .pd-split-visual {
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
  border-color: var(--border-dark);
}

.pd-key-features h2 {
  font-size: calc(var(--fs-h3) - 0.55rem) !important;
  font-weight: lighter !important;
  letter-spacing: 0.01em !important;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.pd-key-features p {
  color: var(--mist);
  font-size: var(--fs-body-sm) !important;
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-3);
}

.pd-key-features p:last-child {
  margin-bottom: 0;
}

/* ---------- YouTube video embed ---------- */
.pd-video-section {
  padding-block: var(--space-3);
}

.pd-video-section--gradient {
  /* "Mix of ash, light ash, light blue" — ash (warm neutral gray)
     blending into the site's existing cool blue tones. */
  background: linear-gradient(135deg, var(--ash) 0%, var(--ice) 55%, var(--brand-pale) 100%);
}

.pd-video-frame {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
}

.pd-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Placeholder shown until a real YouTube URL is added — see README. */
.pd-video-frame .video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.pd-video-frame .video-placeholder svg {
  width: 44px;
  height: 44px;
  color: var(--electric-2);
}

/* ---------- Full-width contained image section ---------- */
.pd-image-full {
  padding-block: var(--space-5);
  background: var(--white);
}

.pd-image-full--alt {
  background: var(--ice);
}

.pd-image-full .pd-split-visual {
  max-width: 920px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
}

/* Two-photo variant: splits what was one tall, full-width image into
   an uneven pair (one side visibly wider than the other, not
   shorter). --reverse flips which side is wider, so the two
   "high-image" sections alternate rather than mirror each other. */
.pd-image-full-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  max-width: 1100px;
  margin-inline: auto;
}

.pd-image-full-grid--reverse {
  grid-template-columns: 2fr 3fr;
}

@media (max-width: 700px) {
  .pd-image-full-grid,
  .pd-image-full-grid--reverse {
    grid-template-columns: 1fr;
  }
}

.pd-image-full-grid .pd-split-visual {
  max-width: none;
  margin-inline: 0;
}

/* The wider column keeps the same 4:3 ratio as the "Available in
   19-32 inch" photo above, so this section's height matches that one
   instead of the shorter 16:9 box these used before. The narrower
   column gets no aspect-ratio of its own — Grid's default row-stretch
   fills it to that same height automatically, so both photos in a
   pair line up edge to edge rather than one being shorter than the
   other. object-fit: cover (the shared default) handles filling each
   box completely regardless of its own width. */
.pd-image-full-grid .pd-split-visual:first-child {
  aspect-ratio: 4 / 3;
}

.pd-image-full-grid .pd-split-visual:last-child {
  aspect-ratio: auto;
}

.pd-image-full-grid--reverse .pd-split-visual:first-child {
  aspect-ratio: auto;
}

.pd-image-full-grid--reverse .pd-split-visual:last-child {
  aspect-ratio: 4 / 3;
}

/* Last image section before the footer — background chosen to blend
   with the footer's dark navy rather than cut sharply into it. */
.pd-image-full--footer-blend {
  background: linear-gradient(180deg, var(--ice) 0%, var(--navy-950) 100%);
}

/* Previously a dark navy fallback meant to blend into the footer
   below — but object-fit: cover hides this box entirely once a real
   photo is in place, so it only ever showed during the placeholder /
   missing-image state, where it read as a dark patch rather than a
   smooth blend. Using the same light fallback every other photo box
   uses instead. */
.pd-image-full--footer-blend .pd-split-visual {
  background: linear-gradient(160deg, var(--ice-100) 0%, var(--white) 60%, var(--ice) 100%);
  border-color: var(--line-light);
}

/* CMS-managed section motion. Presentation values such as height, spacing and
   typography are applied server-side from validated config values. */
@keyframes pd-cms-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pd-cms-fade{from{opacity:0}to{opacity:1}}
@keyframes pd-cms-fade-left{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes pd-cms-fade-right{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes pd-cms-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.pd-cms-motion-fade-up{animation:pd-cms-fade-up .7s ease both}
.pd-cms-motion-fade{animation:pd-cms-fade .7s ease both}
.pd-cms-motion-fade-left{animation:pd-cms-fade-left .7s ease both}
.pd-cms-motion-fade-right{animation:pd-cms-fade-right .7s ease both}
.pd-cms-motion-zoom{animation:pd-cms-zoom .7s ease both}
@media(prefers-reduced-motion:reduce){
  .pd-cms-motion-fade-up,.pd-cms-motion-fade,.pd-cms-motion-fade-left,.pd-cms-motion-fade-right,.pd-cms-motion-zoom{animation:none!important}
}