/* Lynkeas – Products Page Styles
 * Extends style.css. THz source specs and use cases.
 */

/* Subset of the token aliases from tools.css that the rules below use
 * (names that never made it into style.css; mapped onto the live design system). */
:root {
  --navy:    var(--ink-900);
  --card-bg: var(--ink-800);
  --border2: var(--ink-300);
  --muted:   var(--mist-2);
  --slate:   var(--mist);
}

/* ─── THz Source: specs (layout classes shared with index #academic-source) ─── */
.thz-source { padding: 132px 0 var(--s-6); } /* leaves room for the "Back" pill under the logo */
/* heading + intro across the normal page width, image and specs side by side below (compact, so the
   whole block fits on one screen view) */
.product-head { padding-top: var(--s-4); border-top: var(--rule-strong); }
.product-head .academic-label { margin-bottom: var(--s-3); }
/* "New product" tag: solid orange with dark text (the "Back" button is an orange outline) */
.product-head .academic-tag { background: var(--orange); color: var(--ink-900); border-color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; }
.product-title { font-size: clamp(38px, 4vw, 56px); line-height: 1; margin: 0 0 var(--s-3); }
.spec-intro { font-size: 19px; line-height: 1.5; color: var(--mist-2); margin: 0 0 var(--s-5); max-width: none; }
.product-grid { gap: var(--s-6); align-items: start; }
/* the whole photo, not cropped or distorted, just smaller: fixed height, width follows the aspect ratio */
.product-grid .academic-media { width: fit-content; max-width: 100%; }
.product-grid .academic-media img { width: auto; max-width: 100%; height: clamp(280px, min(calc(100vh - 270px), 33vw), 450px); }
@media (min-width: 900px) { .product-grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); } }
/* single column: the photo keeps its proportions (no fixed height) */
@media (max-width: 899px) { .product-grid .academic-media img { width: 100%; height: auto; max-width: 440px; } }
.spec-body { padding-top: 0; }
.spec-table { width: 100%; border-collapse: collapse; border-top: var(--rule); }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: 8px 0; border-bottom: var(--rule); font-size: 15px; line-height: 1.35; }
.spec-table th { font-weight: 400; color: var(--mist); width: 45%; padding-right: var(--s-4); }
.spec-table td { color: var(--bone); font-weight: 500; }
.spec-caption { margin: 0 0 var(--s-2); font-size: var(--fs-small); color: var(--mist); }
.spec-note { margin: var(--s-3) 0 0; font-size: 12.5px; color: var(--mist); line-height: 1.45; }

/* the three buttons (flyer, configure, quote) in one row under the specs */
.spec-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.spec-cta .btn { padding-left: 16px; padding-right: 16px; }

/* ─── THz Source: applications (cards reuse .app-slide from style.css) ─── */
.product-apps { padding: var(--s-6) 0 var(--s-10); }
.product-apps-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .product-apps-grid { grid-template-columns: repeat(3, 1fr); } }
/* large, centred icon tile; title and text centred below it */
.product-apps .app-slide { align-items: center; text-align: center; }
.product-apps .app-slide-icon { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; margin: var(--s-2) auto var(--s-4); }
.product-apps .app-slide-icon { border-radius: 50%; overflow: hidden; }
.product-apps .app-slide-icon img { width: 56%; height: 56%; }
/* illustration that already has its own round frame: fills the whole tile */
.product-apps .app-slide-icon--photo { background: #fff; }
.product-apps .app-slide-icon--photo img { width: 100%; height: 100%; object-fit: cover; }
/* image that has its own orange ring but is wider than tall (723x641): stretched to the round frame so
   the ring closes into a full circle and its cut-off top/bottom edges lie outside the frame
   (~13% vertical stretch; "cover" would crop the ring at the sides, "contain" shows the cut edges) */
.product-apps .app-slide-icon--fill img { object-fit: fill; }