/* ============================================================
   PRODUCT PAGE TEMPLATE — stylesheet
   Reused as-is across products. Per-product colors/text live in
   config.js, not here. Only touch this file if you want to change
   the template design itself (for every product at once).
   ============================================================ */

:root{
  /* -- design tokens -- */
  --bg:        #0E1116;
  --panel:     #171B21;
  --panel-2:   #1D222A;
  --text:      #E8E6DF;
  --text-dim:  #9AA3AD;
  --accent:    #F2A93B;   /* signal amber — calibration / readout color */
  --accent-2:  #5B7C99;   /* steel blue — secondary / data */
  --line:      #2A2F37;

  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --tile-ratio: 4 / 3;   /* fixed aspect ratio for ALL pics/videos */
  --radius: 3px;
  --container: 1080px;
  --text-measure: 700px;  /* comfortable reading width for body copy */
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color: inherit; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9em;
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--accent);
  display:inline-block;
}

/* ---------------- topbar ---------------- */
.topbar{
  position: sticky; top:0; z-index: 50;
  background: rgba(14,17,22,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand{
  font-family: var(--font-mono);
  font-size: .95rem;
  letter-spacing: .04em;
  display:flex; align-items:center; gap:.6em;
}
.brand .dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.topnav{ display:flex; gap: 28px; }
.topnav a{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--text-dim);
  transition: color .15s;
}
.topnav a:hover{ color: var(--accent); }
@media (max-width: 720px){ .topnav{ display:none; } }

/* ---------------- hero (text only — no image, matches the brief) ---------------- */
.hero{
  padding: 72px 0 56px;
}
.hero h1{
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  max-width: var(--text-measure);
}
.hero .tagline{
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: var(--text-measure);
  margin-bottom: 28px;
}
.hero .intro{
  max-width: var(--text-measure);
}
.hero .intro p{ margin: 0 0 14px; }
.hero .intro ul{
  margin: 0 0 14px;
  padding-left: 1.2em;
  color: var(--text);
}
.hero .intro li{ margin-bottom: 6px; }

/* ---------------- generic section ---------------- */
section{ padding: 56px 0; border-top: 1px solid var(--line); }
.section-head{ max-width: var(--text-measure); margin-bottom: 28px; }
.section-head p{ color: var(--text-dim); margin:0 0 14px; }
.section-head ul{ color: var(--text); padding-left: 1.2em; margin: 0 0 14px; }
.section-head li{ margin-bottom: 6px; }

/* ---------------- media grid (used for both gallery rows) ---------------- */
.media-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 720px){
  .media-grid{ grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
}
.tile{
  position:relative;
  aspect-ratio: var(--tile-ratio);
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: zoom-in;
}
.tile img, .tile video{
  width:100%; height:100%; object-fit:cover;
  transition: transform .3s;
}
.tile:hover img, .tile:hover video{ transform: scale(1.045); }
.tile .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 8px 10px 7px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text);
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.play-badge{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.play-badge::after{
  content:"";
  width:0; height:0;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent rgba(232,230,223,.92);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* ---------------- cases ---------------- */
.case{
  padding: 28px 0;
  border-top: 1px solid var(--line);
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 36px;
  align-items: start;
}
.case:first-of-type{ border-top: none; }
@media (max-width: 860px){ .case{ grid-template-columns: 1fr; } }
.case .case-num{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--accent);
  margin-bottom: 8px;
}
.case h3{ font-size: 1.15rem; margin-bottom: 10px; }
.case p{ color: var(--text-dim); margin: 0; }
.case .media-grid{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 540px){
  .case .media-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- spec table (optional, inside details) ---------------- */
.spec-table{
  width:100%;
  max-width: var(--text-measure);
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .9rem;
  margin-top: 8px;
}
.spec-table tr{ border-bottom: 1px solid var(--line); }
.spec-table tr:first-child{ border-top: 1px solid var(--line); }
.spec-table td{ padding: 12px 10px; }
.spec-table td:first-child{
  color: var(--text-dim);
  width: 40%;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
}
.spec-table td:last-child{ color: var(--accent); }

/* ---------------- attachments / links ---------------- */
.attachments-list{ max-width: var(--text-measure); }
.attachment-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 16px 4px;
  border-top: 1px solid var(--line);
  text-decoration:none;
  color: var(--text);
}
.attachment-row:last-child{ border-bottom: 1px solid var(--line); }
.attachment-row .name{
  font-family: var(--font-mono);
  font-size: .92rem;
}
.attachment-row .meta{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.attachment-row:hover .name{ color: var(--accent); }

/* ---------------- footer ---------------- */
footer.site-footer{
  padding: 36px 0 44px;
  border-top: 1px solid var(--line);
}
.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 12px;
}
.site-footer .brand{ opacity:.85; }
.fineprint{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-dim);
  opacity: .7;
}

/* ---------------- lightbox ---------------- */
.lightbox{
  position: fixed; inset:0; z-index: 100;
  background: rgba(6,7,9,.92);
  display:none;
  align-items:center; justify-content:center;
  padding: 40px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
  max-width: 1100px; max-height: 86vh; width:100%;
  position:relative;
}
.lightbox-inner img, .lightbox-inner video{
  width:100%; height:100%;
  max-height: 86vh;
  object-fit: contain;
  border: 1px solid var(--line);
  background:#000;
}
.lightbox-caption{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-dim);
  margin-top: 12px;
  text-align:center;
}
.lightbox-close{
  position:absolute; top:-46px; right:0;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--text);
  background:none; border: 1px solid var(--line);
  padding: 8px 14px;
  cursor:pointer;
  border-radius: var(--radius);
}
.lightbox-close:hover{ border-color: var(--accent); color: var(--accent); }

/* focus visibility */
a:focus-visible, button:focus-visible, .tile:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .tile img,.tile video{ transition:none; }
}