/* ==========================================================================
   D-TECH · JIVA pages (jiva.html + jiva-*.html).
   Component layer for the JIVA automation overview and its five section
   pages. Loaded after color.css on those pages only. Built entirely on the
   shared tokens (skin.css / skin-dark.css / color.css), so it follows the
   light and dark themes without its own theme rules.
   ========================================================================== */

body[data-page="jiva"] main h2,body[data-page="tfms"] main h2 { letter-spacing:-.03em; }

/* ---- Section index: overview + the five section pages ------------------ */

.jiva-subnav {
  position:sticky; top:72px; z-index:30;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.jiva-subnav ol {
  display:flex; gap:6px; overflow-x:auto; margin:0; padding:10px 0; list-style:none;
  scrollbar-width:none;
}
.jiva-subnav ol::-webkit-scrollbar { display:none; }
.jiva-subnav a {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.jiva-subnav a svg { width:15px; height:15px; }
.jiva-subnav a:hover { border-color:var(--c-blue); color:var(--c-blue); }
.jiva-subnav a[aria-current="page"] {
  background:var(--g-cool); border-color:transparent; color:#fff;
}

/* ---- Intro: copy beside a lead photo ------------------------------------ */

.jiva-intro { display:grid; gap:40px; align-items:center; }
@media (min-width:1024px) { .jiva-intro { grid-template-columns:1.05fr 1fr; gap:64px; } }
.jiva-intro .lead { font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--ink); }

/* ---- Photos ------------------------------------------------------------- */

.jiva-figure { margin:0; background:var(--surface); border:1px solid var(--line); }
.jiva-figure button {
  display:block; width:100%; padding:0; border:0; background:var(--well); cursor:zoom-in; position:relative;
}
.jiva-figure img { display:block; width:100%; height:100%; object-fit:cover; }
.jiva-figure figcaption {
  padding:10px 14px; border-top:1px solid var(--line);
  font:500 11px/1.45 var(--mono); letter-spacing:.04em; color:var(--muted);
}
.jiva-figure button::after {
  content:''; position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:6px;
  background:rgba(10,20,38,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/15px no-repeat;
  opacity:0; transition:opacity .16s ease;
}
.jiva-figure button:hover::after,.jiva-figure button:focus-visible::after { opacity:1; }

.jiva-lead-photo img { aspect-ratio:4/3; }
.jiva-lead-photo.is-banner img { aspect-ratio:auto; }

.jiva-gallery { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.jiva-gallery .jiva-figure img { aspect-ratio:4/3; }

/* ---- Coloured accents, cycled -------------------------------------------- */

.jiva-accent>*:nth-child(5n+1) { --jiva-c:var(--c-blue);   --jiva-wash:var(--c-blue-wash); }
.jiva-accent>*:nth-child(5n+2) { --jiva-c:var(--c-teal);   --jiva-wash:var(--c-teal-wash); }
.jiva-accent>*:nth-child(5n+3) { --jiva-c:var(--c-violet); --jiva-wash:var(--c-violet-wash); }
.jiva-accent>*:nth-child(5n+4) { --jiva-c:var(--c-orange); --jiva-wash:var(--c-orange-wash); }
.jiva-accent>*:nth-child(5n+5) { --jiva-c:var(--c-amber);  --jiva-wash:var(--c-amber-wash); }

/* ---- Capability tiles (the eight disciplines) --------------------------- */

.jiva-caps { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.jiva-cap {
  display:flex; align-items:center; gap:14px; padding:16px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--jiva-c);
  color:var(--ink); font:600 15px/1.3 var(--display); letter-spacing:-.01em;
}
.jiva-cap .jiva-icon {
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  background:var(--jiva-wash); color:var(--jiva-c); border-radius:8px;
}
.jiva-cap .jiva-icon svg { width:20px; height:20px; }
a.jiva-cap:hover { border-color:var(--jiva-c); }
a.jiva-cap .jiva-go { margin-left:auto; color:var(--muted); transition:transform .16s var(--ease),color .16s ease; }
a.jiva-cap:hover .jiva-go { color:var(--jiva-c); transform:translateX(3px); }

/* ---- Section cards ------------------------------------------------------ */

.jiva-cards { display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.jiva-card {
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-top:3px solid var(--jiva-c);
}
.jiva-card img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:1px solid var(--line); }
.jiva-card .jiva-card-body { display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1; }
.jiva-card .jiva-num { font:600 11px/1 var(--mono); letter-spacing:.1em; color:var(--jiva-c); }
.jiva-card h3 { margin:0; font-size:21px; line-height:1.2; }
.jiva-card p { margin:0; font-size:15px; line-height:1.65; }
.jiva-card .jiva-more {
  margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:8px;
  font:600 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--jiva-c);
}
.jiva-card .jiva-more svg { width:15px; height:15px; transition:transform .16s var(--ease); }
.jiva-card:hover { border-color:var(--jiva-c); }
.jiva-card:hover .jiva-more svg { transform:translateX(3px); }

/* ---- Numbered capability list -------------------------------------------- */

.jiva-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:jiva; }
.jiva-list li {
  counter-increment:jiva; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start;
  padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--jiva-c);
}
.jiva-list li::before {
  content:counter(jiva,decimal-leading-zero); font:600 12px/1 var(--mono); letter-spacing:.08em;
  color:var(--jiva-c); padding-top:5px;
}
.jiva-list strong { display:block; color:var(--ink); font:600 16px/1.35 var(--display); letter-spacing:-.01em; }
.jiva-list span { display:block; margin-top:4px; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

/* ---- Alternating feature rows (Turnkey Solutions) ------------------------ */

.jiva-rows { display:grid; gap:56px; }
.jiva-row { display:grid; gap:28px; align-items:center; scroll-margin-top:150px; }
@media (min-width:1024px) {
  .jiva-row { grid-template-columns:1fr 1fr; gap:56px; }
  .jiva-row:nth-child(even) .jiva-figure { order:2; }
}
.jiva-row .jiva-num { font:600 11px/1 var(--mono); letter-spacing:.12em; color:var(--jiva-c); }
.jiva-row h2 { margin:10px 0 14px; font-size:clamp(26px,2.4vw,34px); line-height:1.12; }
.jiva-row p { margin:0; font-size:16px; line-height:1.72; }
.jiva-row p+p { margin-top:14px; }
.jiva-row .jiva-figure { border-top:3px solid var(--jiva-c); }

/* ---- Feature tiles (Heavy Lifting key features) -------------------------- */

.jiva-features { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.jiva-feature {
  display:flex; align-items:center; gap:14px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--jiva-c);
  color:var(--ink); font:600 16px/1.3 var(--display); letter-spacing:-.01em;
}
.jiva-feature .jiva-icon {
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  background:var(--jiva-wash); color:var(--jiva-c); border-radius:8px;
}
.jiva-feature .jiva-icon svg { width:21px; height:21px; }

/* ---- Video card (links out to YouTube; the CSP blocks embedded frames) --- */

.jiva-video {
  position:relative; display:block; overflow:hidden; background:#000; border:1px solid var(--line);
}
.jiva-video img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.82; transition:opacity .2s ease; }
.jiva-video:hover img { opacity:1; }
.jiva-video .jiva-play {
  position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%;
  display:grid; place-items:center; background:var(--g-signal); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.jiva-video .jiva-play svg { width:30px; height:30px; margin-left:4px; }
.jiva-video .jiva-video-label {
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);
  color:#fff; font:500 12px/1.4 var(--mono); letter-spacing:.04em;
}

/* ---- Previous / next section pager -------------------------------------- */

.jiva-pager { display:grid; gap:12px; }
@media (min-width:768px) { .jiva-pager { grid-template-columns:1fr 1fr; } }
.jiva-pager a {
  display:flex; flex-direction:column; gap:6px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--line);
}
.jiva-pager a:hover { border-color:var(--c-blue); }
.jiva-pager .jiva-pager-dir { font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.jiva-pager .jiva-pager-title { font:600 18px/1.25 var(--display); color:var(--ink); }
.jiva-pager a.next { text-align:right; }
@media (min-width:768px) { .jiva-pager a.next:only-child { grid-column:2; } }

/* ---- Photo viewer -------------------------------------------------------- */

.jiva-lightbox {
  width:min(1200px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0;
  background:transparent; color:#fff; overflow:visible;
}
.jiva-lightbox::backdrop { background:rgba(4,9,18,.9); }
.jiva-lightbox img { display:block; max-width:100%; max-height:calc(100vh - 120px); margin:0 auto; object-fit:contain; }
.jiva-lightbox p { margin:12px 0 0; text-align:center; color:rgba(255,255,255,.8); font:500 13px/1.5 var(--mono); }
.jiva-lightbox button {
  position:fixed; top:16px; right:16px; width:44px; height:44px; border:1px solid rgba(255,255,255,.3);
  border-radius:8px; background:rgba(255,255,255,.08); color:#fff; font-size:22px; line-height:1;
}
.jiva-lightbox button:hover { background:rgba(255,255,255,.2); }

@media (max-width:640px) {
  .jiva-subnav { top:64px; }
  .jiva-card h3 { font-size:19px; }
  .jiva-rows { gap:44px; }
}

/* ---- Portrait photos (kiosks and other tall equipment) ------------------ */
.jiva-figure.is-portrait img,
.jiva-gallery.is-portrait .jiva-figure img { aspect-ratio:3/4; object-position:50% 30%; }
.jiva-lead-photo.is-portrait { max-width:460px; justify-self:center; width:100%; }
body[data-page="kiosk"] main h2 { letter-spacing:-.03em; }
.kiosk-lists { display:grid; gap:40px; }
@media (min-width:1024px) { .kiosk-lists { grid-template-columns:1fr 1fr; gap:64px; } }
.kiosk-proof {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--c-teal, #0d9488);
}
.kiosk-proof img { height:34px; width:auto; }
.kiosk-proof p { margin:0; color:var(--ink-soft); flex:1 1 320px; }
.jiva-gallery.is-portrait { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

/* ---- AI Supervisor: supervisor cards with detection lists and template download ---- */
body[data-page="ai-supervisor"] main h2 { letter-spacing:-.03em; }
.ais-card ul { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; }
.ais-card li { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-soft); }
.ais-card li svg { width:16px; height:16px; flex:none; color:var(--jiva-c); }
.ais-card:hover { border-color:var(--line); }
.ais-download {
  display:grid; gap:20px; align-items:center; padding:26px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--c-teal, #0d9488);
}
@media (min-width:900px) { .ais-download { grid-template-columns:auto 1fr auto; } }
.ais-download .ais-file {
  width:56px; height:56px; display:grid; place-items:center; border-radius:12px;
  background:rgba(13,148,136,.12); color:#0d9488;
}
.ais-download .ais-file svg { width:28px; height:28px; }
.ais-download h3 { margin:0 0 6px; font-size:20px; }
.ais-download p { margin:0; color:var(--ink-soft); }

/* ---- Cafeteria: numbered reason cards without photos ------------------- */
body[data-page="cafeteria"] main h2 { letter-spacing:-.03em; }
.cafe-card { padding-top:0; }
.cafe-card:hover { border-color:var(--line); }
.cafe-sectors { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.cafe-sectors li {
  padding:6px 12px; border:1px solid var(--line); background:var(--surface);
  font:600 12px/1.2 var(--mono); letter-spacing:.04em; color:var(--ink-soft);
}
.jiva-gallery.is-pair { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.jiva-gallery.is-pair .jiva-figure img { aspect-ratio:16/9; }
.jiva-figure.is-contain img { object-fit:contain; background:#1d6fb8; }
body[data-page="forklift"] main h2 { letter-spacing:-.03em; }
.cafe-card .jiva-icon { width:44px; height:44px; }
.cafe-card .jiva-icon { display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb, var(--jiva-c) 14%, transparent); color:var(--jiva-c); }
.cafe-card .jiva-icon svg { width:22px; height:22px; }
body[data-page]:not([data-page="home"]) main>section:first-child .hero-actions { justify-content:center; }
body[data-page="video-analytics"] main h2 { letter-spacing:-.03em; }
.jiva-gallery.is-pair .jiva-figure img[src*="video-analytics"] { aspect-ratio:3/2; }
.va-credits { margin-top:28px; font-size:13px; color:var(--muted); }
.va-credits summary { cursor:pointer; font:600 11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.va-credits p { margin:10px 0 6px; }
.va-credits ul { margin:0; padding-left:18px; display:grid; gap:4px; }
.va-credits a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.jiva-gallery.is-pair .jiva-figure img[src*="video-analytics"] { object-position:50% 40%; }
.jiva-figure img[src*="intrusion-perimeter-fence-camera"] { object-position:50% 88% !important; }
.jiva-figure img[src*="forklift-container-loading"] { object-position:50% 70% !important; }