/* ======================================================================
   /products/explore — technical product page layer
   Ported 1:1 from the design source "Product Pages/ARTILUX Explore_0708.html"
   (tp-* system: technical hero, stat strip, arch split, form-factor grid,
   platform accordion table with per-item spec grids, product-photo strip).
   Loaded only on this page via $d['css'][]. Tokens (--c-*, --font-*) come
   from css/artilux-c.css. Sibling of css/products_aware.css.
   ====================================================================== */

/* Explore — same Physical AI cyan/teal accent as Aware/Connect, so the domain reads as one continuous journey */
.concept-c{ --domain-accent:var(--c-cyan); --domain-accent2:var(--c-teal); }
.concept-c .eyebrow{ color:var(--c-ink-2); font-size:15px; letter-spacing:0.18em; }
/* Section & CTA headings here are two-line <br> stacks ("Wide-spectrum 3D ToF" /
   "for real-world perception"); .display's global line-height:0.96 is tuned for
   single-line hero type and cramps the stacked lines together — open it up so
   the two lines breathe (mirrors #contact .display in artilux-c.css). */
.concept-c .display{ line-height:1.1; }

/* ---- technical hero (product-name led, Lightmatter-style rhythm) ---- */
.tp-hero{ padding-block:clamp(64px,9vh,100px) 0; border-bottom:1px solid var(--c-hair); }
.back-link{ font-family:var(--font-mono); font-size:16px; letter-spacing:0.20em; text-transform:uppercase; color:var(--c-muted); text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin-bottom:24px; transition:color .2s; }
.back-link:hover{ color:var(--c-ink); }
.tp-kicker{ font-family:var(--font-mono); font-size:15px; font-weight:500; letter-spacing:0.20em; text-transform:uppercase; color:var(--c-ink-2); margin-bottom:20px; }
.tp-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5.6vw,86px); line-height:0.92; letter-spacing:-0.03em; color:var(--c-ink); margin:0; text-transform:none; }
.tp-tagline{ font-family:var(--font-body); font-weight:500; font-size:clamp(20px,2.2vw,28px); letter-spacing:normal; margin-top:20px; max-width:56ch; color:var(--c-ink); }
.tp-desc{ font-size:clamp(16px,1.4vw,20px); line-height:1.5; color:var(--c-ink-2); margin-top:18px; max-width:none; }
.tp-hero-art{ margin-top:clamp(40px,6vh,64px); aspect-ratio:16/7; border-radius:16px; background:var(--c-bg-2); overflow:hidden; border:1px solid var(--c-hair); }
.tp-hero-art img, .tp-hero-art video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* ---- stat strip ---- */
.tp-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--c-hair); }
.tp-stat{ padding:26px clamp(20px,2.6vw,32px); border-left:1px solid var(--c-hair); }
.tp-stat:first-child{ border-left:none; }
.tp-stat-label{ font-family:var(--font-mono); font-size:15px; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-muted); margin-bottom:10px; }
.tp-stat-val{ font-family:var(--font-display); font-weight:700; font-size:clamp(17px,1.6vw,21px); letter-spacing:-0.01em; color:var(--c-ink); line-height:1.25; }
@media (max-width:760px){ .tp-stats{ grid-template-columns:1fr 1fr; } .tp-stat:nth-child(3){ border-left:none; } .tp-stat{ border-top:1px solid var(--c-hair); } .tp-stat:first-child,.tp-stat:nth-child(2){ border-top:none; } }

/* ---- architecture split (challenge / approach) ---- */
.tp-arch{ padding-block:clamp(72px,10vh,120px); border-bottom:1px solid var(--c-hair); }
.tp-arch-head{ margin-bottom:clamp(36px,5vh,52px); }
.tp-arch-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); }
.tp-arch-col{ border-top:2px solid var(--domain-accent, var(--c-teal)); padding-top:20px; }
.tp-arch-col h3{ font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-0.01em; color:var(--c-ink); margin:0 0 12px; }
.tp-arch-col p{ font-size:15px; line-height:1.7; color:var(--c-ink-2); margin:0; }
@media (max-width:760px){ .tp-arch-split{ grid-template-columns:1fr; } }

/* ---- form factor grid (2x2 strengths & benefits) ---- */
.tp-ff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--c-hair); border:1px solid var(--c-hair); border-radius:14px; overflow:hidden; margin-top:clamp(36px,5vh,52px); }
.tp-ff-card{ background:var(--c-bg-2); padding:28px; }
.tp-ff-icon{ width:48px; height:48px; margin-bottom:16px; }
.tp-ff-icon svg{ width:100%; height:100%; display:block; }
.tp-ff-name{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.015em; color:var(--c-ink); margin:0 0 8px; }
.tp-ff-desc{ font-size:15px; line-height:1.6; color:var(--c-ink-2); margin:0; }
@media (max-width:700px){ .tp-ff-grid{ grid-template-columns:1fr; } }

/* ---- platform listing (accordion table: Product / Model No. / Applications / +) ---- */
.tp-platform{ padding-block:clamp(72px,10vh,120px); background:var(--c-panel); scroll-margin-top:80px; }
.tp-plat-table{ margin-top:clamp(36px,5vh,52px); border:1px solid var(--c-hair); border-radius:18px; overflow:hidden; background:var(--c-bg-2); }
.tp-plat-head{ display:grid; grid-template-columns:2fr 1.4fr 2.2fr 44px; gap:20px; padding:14px clamp(16px,2.2vw,24px); background:var(--c-panel); border-bottom:1px solid var(--c-hair); }
.tp-plat-head span{ font-family:var(--font-mono); font-size:15px; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-muted); }
.tp-plat-row{ border-bottom:1px solid var(--c-hair); }
.tp-plat-row:last-child{ border-bottom:none; }
.tp-plat-summary{ display:grid; grid-template-columns:2fr 1.4fr 2.2fr 44px; gap:20px; align-items:center; padding:clamp(16px,2.2vw,24px); cursor:pointer; background:none; border:none; width:100%; text-align:left; font:inherit; }
.tp-plat-id{ display:flex; align-items:center; gap:14px; }
.tp-plat-name{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.015em; color:var(--c-ink); }
.tp-plat-models{ font-family:var(--font-mono); font-size:15px; color:var(--c-muted); line-height:1.65; }
/* Applications column carries the column typography; the round bullets come from the
   site-wide ul.dots style (style.css: list-style:disc + green2 ::marker) — the markup
   is <ul class="tp-plat-apps dots">, matching the legacy product-table look. */
.tp-plat-apps{ font-size:15px; color:var(--c-ink-2); margin:0; line-height:1.7; }
.tp-plat-toggle{ padding:0; cursor:pointer; font:inherit; width:28px; height:28px; border-radius:50%; border:1px solid var(--c-hair-2); background:var(--c-bg-2); display:flex; align-items:center; justify-content:center; flex:none; transition:transform .2s ease, background .2s ease; }
.tp-plat-toggle.open{ transform:rotate(45deg); background:var(--c-panel); }
/* visibility gate keeps the collapsed panel's links out of the tab order / AT tree;
   the 0s .25s delay on close lets the height transition finish before hiding */
.tp-plat-detail{ overflow:hidden; display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .25s ease, visibility 0s linear .25s; }
.tp-plat-detail.open{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .25s ease, visibility 0s; }
/* detail content is indented past the summary rule (matches the sibling Aware page);
   the mobile override below drops the indent back to the base gutter. */
.tp-plat-detail-inner{ min-height:0; overflow:hidden; padding:0 clamp(16px,2.2vw,24px) 0 calc(clamp(16px,2.2vw,24px) + 50px); transition:padding .25s ease; }
.tp-plat-detail.open .tp-plat-detail-inner{ padding-bottom:clamp(16px,2.2vw,24px); }
/* each row can hold several sub-products; a heading labels each one above its table */
.tp-plat-item-group{ margin-bottom:26px; }
.tp-plat-item-group:last-of-type{ margin-bottom:18px; }
.tp-plat-item-head{ display:flex; align-items:baseline; gap:10px; margin:0 0 10px; flex-wrap:wrap; }
.tp-plat-item-name{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-0.01em; color:var(--c-ink); }
.tp-plat-item-model{ font-family:var(--font-mono); font-size:13px; color:var(--c-muted); }
/* ---- platform detail: spec-sheet table (label/value + Dimension/Feature category column) ----
   Ported 1:1 from the ARTILUX Aware datasheet tables (css/products_aware.css). A real
   <table> keeps the label/value grid + rowspan'd Feature-bullets column faithful on desktop;
   .tp-plat-spec-wrap scrolls it horizontally on narrow screens so the accordion never forces
   page-level overflow (RWD container invariant). */
.tp-plat-spec-wrap{ overflow-x:auto; margin:0 0 18px; border:1px solid var(--c-hair); border-radius:12px; }
.tp-plat-spec{ width:100%; min-width:600px; border-collapse:collapse; font-family:var(--font-body); font-size:14px; line-height:1.45; }
.tp-plat-spec th, .tp-plat-spec td{ text-align:left; vertical-align:top; padding:10px 16px; border-bottom:1px solid var(--c-hair); }
.tp-plat-spec [rowspan]{ border-bottom:none; }
.tp-plat-spec tr:last-child > *{ border-bottom:none; }
.tp-spec-k{ font-weight:400; color:var(--c-ink-2); background:var(--c-panel); white-space:nowrap; }
.tp-spec-v{ color:var(--c-ink); font-weight:500; }
.tp-spec-cat{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-teal); background:var(--c-panel); white-space:nowrap; vertical-align:middle; border-left:1px solid var(--c-hair); }
.tp-spec-catv{ color:var(--c-ink); font-weight:500; }
.tp-spec-feat ul{ margin:0; padding-left:18px; list-style:disc; }
.tp-spec-feat li{ margin:0 0 4px; color:var(--c-ink-2); }
.tp-spec-feat li::marker{ color:var(--green2, #68b1a1); }
.tp-spec-feat li:last-child{ margin-bottom:0; }
.tp-plat-cta{ font-size:15px; font-weight:600; color:var(--c-teal); text-decoration:none; }
@media (max-width:760px){ .tp-plat-head{ display:none; } .tp-plat-summary{ grid-template-columns:1fr 32px; grid-template-areas:'name toggle' 'models toggle' 'apps toggle'; } .tp-plat-id{ grid-area:name; } .tp-plat-models{ grid-area:models; } .tp-plat-apps{ grid-area:apps; } .tp-plat-toggle{ grid-area:toggle; } .tp-plat-detail-inner{ padding-left:clamp(16px,2.2vw,24px); } }

/* ---- full-width product photo carousel ----
   Mixed source aspect ratios (8:3 wide + ~4:3), so the 16:9 frame uses
   object-fit:contain to show every 2D/3D comparison in full (no cropping).
   Rounded corners come from the overflow-clipped viewport; nav buttons sit
   outside the viewport so they aren't clipped. Behaviour: js/products_explore.js */
.tp-photo-strip{ padding-block:clamp(56px,8vh,88px); }
.tp-gallery{ position:relative; }
.tp-gallery-viewport{ border-radius:16px; overflow:hidden; border:1px solid var(--c-hair); background:var(--c-bg-2); }
.tp-gallery-track{ display:flex; will-change:transform; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.tp-gallery-slide{ flex:0 0 100%; aspect-ratio:16/9; }
.tp-gallery-slide img{ width:100%; height:100%; object-fit:contain; display:block; }
/* paired slide — two same-size 4:3 captures (static photo + animated GIF) shown
   side by side; together they read as the same 8:3 dual-panel rhythm as the wide slides */
.tp-gallery-slide--pair{ display:flex; gap:12px; }
.tp-pair-cell{ flex:1 1 50%; min-width:0; }
.tp-pair-cell img{ width:100%; height:100%; object-fit:contain; display:block; }
/* prev / next */
.tp-gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid var(--c-hair-2); background:rgba(255,255,255,.82); backdrop-filter:blur(6px); color:var(--c-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, box-shadow .2s ease; }
.tp-gallery-nav:hover{ background:#fff; box-shadow:0 4px 18px rgba(21,49,76,.14); }
.tp-gallery-nav svg{ width:18px; height:18px; display:block; }
.tp-gallery-nav.prev{ left:16px; }
.tp-gallery-nav.next{ right:16px; }
/* dots (generated in JS) */
.tp-gallery-dots{ display:flex; justify-content:center; gap:10px; margin-top:20px; }
.tp-gallery-dot{ width:9px; height:9px; padding:0; border-radius:50%; border:none; background:var(--c-hair-2); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.tp-gallery-dot:hover{ background:var(--c-muted); }
.tp-gallery-dot.active{ background:var(--c-teal); transform:scale(1.3); }
@media (max-width:600px){ .tp-gallery-nav{ width:38px; height:38px; } .tp-gallery-nav.prev{ left:10px; } .tp-gallery-nav.next{ right:10px; } }

/* ---- CTA ---- */
.cta-section{ padding-block:clamp(80px,13vh,150px); border-top:1px solid var(--c-hair); }
/* CTA heading size is the shared .display.h-l (clamp 36→72px) — no per-page override,
   so every closing CTA across the site matches. (was clamp(38px,5.6vw,86px)) */