/* css/pages/fungiflex.css
   FungiFlex-specific section: the test lineup cards. Shared pieces
   (hero, section-head, why-cards, badge, the 4-step assay flow) come
   from components/. Individual test detail pages are deferred — the
   lineup cards link to "#" for now. */

/* ------------------------------------------------------------
   Test lineup — three cards, one per test.
   ------------------------------------------------------------ */
/* Three cards side by side, each a vertical column: badge + title up
   top, description in the middle, "view details" link at the foot. */
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.test-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.test-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
}
.test-card .top-row {
  display: flex;
  align-items: flex-start;
}
.test-card h3 {
  margin-top: 16px;
  font-size: 20px;
}
.species-list {
  flex-grow: 1;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.species-list b {
  font-weight: 600;
  color: var(--blue-deep);
}
/* Mono "view details" link with an arrow that slides on hover, going
   from blue to the teal accent. */
.test-card .go {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}
.test-card .go svg {
  transition: transform 0.15s ease;
}
.test-card:hover .go {
  color: var(--teal);
}
.test-card:hover .go svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .test-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Horizontal variant — RESERVED for the tabbed view coming later.
   Add the `horizontal` class to .test-grid to lay each card out as a
   full-width row (heading block left, description middle, link pinned
   right) instead of a column. Not currently applied anywhere.
   ------------------------------------------------------------ */
.test-grid.horizontal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.test-grid.horizontal .test-card {
  flex-direction: row;
  align-items: center;
  gap: 36px;
  padding: 26px 32px;
}
/* Fixed-width left column so all three descriptions align vertically. */
.test-grid.horizontal .test-head {
  flex: 0 0 260px;
}
.test-grid.horizontal .test-card .top-row {
  margin-bottom: 12px;
}
.test-grid.horizontal .test-card h3 {
  margin-top: 0;
}
.test-grid.horizontal .species-list {
  flex: 1;
  margin-top: 0;
}
/* In the horizontal (tabbed) view the "view details" link stays hidden
   until the card is hovered or focused, then fades in. opacity (not
   display) keeps it in the layout so nothing shifts. */
.test-grid.horizontal .test-card .go {
  flex: 0 0 auto;
  margin-top: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.test-grid.horizontal .test-card:hover .go,
.test-grid.horizontal .test-card:focus-within .go {
  opacity: 1;
}
@media (max-width: 760px) {
  .test-grid.horizontal .test-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
  }
  .test-grid.horizontal .test-head {
    flex-basis: auto;
  }
}


/* ============================================================
   Lab tabs — Test menu / Submit a sample / About our lab
   A page-level tab group ([data-tabs]) driven by js/tabs.js.
   ============================================================ */

/* The section carries an ambient backdrop the glass panel refracts:
   soft blue + teal light and a faint GMR sensor-array dot grid — the
   same multi-sensor motif Zepto's platform is built on. Clipped to the
   section so nothing bleeds past its edges. */
.lab-section {
  position: relative;
  overflow: hidden;
}
.lab-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: auto, auto, 24px 24px;
  /* Ease the texture in at the top and out at the bottom so it never
     meets the neighbouring sections on a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 130px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 130px, #000 calc(100% - 80px), transparent);
  z-index: 0;
}
/* Keep real content above the backdrop layer. */
.lab-section > .wrap {
  position: relative;
  z-index: 1;
}

/* The tab group sits on a frosted-glass panel. A faint top-down tint
   plus the backdrop blur give it depth; the bright hairline edge and
   soft cast shadow read as a pane of glass floating over the sensor
   grid. The cool tint also lets the white inner cards stand off it. */
.lab-tabs {
  /* Breathing room above when the FAQ's "View complete test menu"
     button scrolls the visitor here. */
  scroll-margin-top: 24px;
  padding: 30px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(238, 241, 250, 0.45));
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow:
    0 28px 64px -28px rgba(20, 28, 66, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Tab bar — an enclosed segmented control. A white, hairline pill track
   lifts off the pale section; the active view reads as a solid-blue
   pill (same blue as the primary CTA), inactive views as muted mono
   labels that tint on hover. Echoes the badge pills used on the cards. */
.lab-tabnav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 40px;
  padding: 5px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20, 28, 66, 0.05);
}
.lab-tabnav .tab-btn {
  padding: 11px 22px;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.18s ease, background-color 0.18s ease;
}
.lab-tabnav .tab-btn:hover {
  color: var(--blue-deep);
  background: var(--blue-tint);
}
.lab-tabnav .tab-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Active wins over :hover — listed last so hovering the current tab
   keeps the solid fill. */
.lab-tabnav .tab-btn.active,
.lab-tabnav .tab-btn.active:hover {
  color: var(--white);
  background: var(--blue);
}
/* On phones the three labels overflow one line — keep them on a single
   swipeable row rather than wrapping the pill. */
@media (max-width: 600px) {
  .lab-tabnav {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lab-tabnav::-webkit-scrollbar {
    display: none;
  }
  .lab-tabnav .tab-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
  }
}

/* Only the active panel shows. Scoped under .lab-tabs so it never
   collides with the per-card tabs elsewhere. */
.lab-tabs > .tab-panel {
  display: none;
}
.lab-tabs > .tab-panel.active {
  display: block;
}

/* The .step-flow modifier (open image-led steps) now lives in the
   shared components/steps.css, since both the FungiFlex and Technology
   "how it works" sections use it. */

/* --- Submit a sample --- three info columns divided by hairlines. */
.submit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.submit-col + .submit-col {
  padding-left: 40px;
  border-left: 1px solid var(--line);
}
.submit-col .eyebrow {
  margin-bottom: 16px;
}
.submit-col p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.submit-col p + p {
  margin-top: 12px;
}
/* Requisition-form button sits below the submission copy. */
.submit-actions {
  margin-top: 22px;
}
/* Document-download buttons inside the tabs (client intake form, CLIA
   certifications, requisition form). Refines the shared .btn-primary
   for this context: a softer radius, the download glyph set in a
   translucent inset chip, and a hover lift with a coloured shadow — so
   it reads clearly as a "download this PDF" action rather than a plain
   button. Scoped to .submit-actions, so no other .btn is affected. */
.submit-actions .btn-primary {
  gap: 11px;
  padding: 11px 20px 11px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 18px -10px rgba(44, 54, 140, 0.55);
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.submit-actions .btn-primary svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
}
.submit-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(44, 54, 140, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .submit-actions .btn-primary:hover { transform: none; }
}
.submit-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.submit-address b {
  font-weight: 600;
  color: var(--blue-deep);
}
/* Contact line — mono, with a small uppercase label above the value. */
.submit-contact {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s ease;
}
.submit-contact:hover {
  color: var(--teal);
}
.submit-contact-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- About our lab --- a compact hero, then two lab staff. The hero
   is a two-column band: the "established" copy on the left, the CLIA
   certifications download pinned to the right and vertically centred. */
.lab-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  padding: 40px;
  background: var(--blue-tint);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lab-hero-copy {
  flex: 1;
  min-width: 0;   /* lets the copy column shrink instead of shoving the CTA off */
}
.lab-hero-title {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
}
.lab-hero-sub {
  margin-top: 16px;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
/* CTA column — hold its size and drop the stacked-button top margin
   that .submit-actions carries elsewhere. */
.lab-hero-cta {
  flex-shrink: 0;
  margin-top: 0;
}

@media (max-width: 760px) {
  /* Stack the CTA under the copy on narrow screens. */
  .lab-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.lab-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.lab-person {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* Photo-optional avatar — a teal-tinted disc with a person glyph,
   sized to match the advisory-board headshots on the About page. */
.lab-person-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal);
}
.lab-person-avatar svg {
  width: 28px;
  height: 28px;
}
.lab-person .person-desc {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .submit-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .submit-col + .submit-col {
    padding-left: 0;
    padding-top: 28px;
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .lab-people {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FAQ accordion — click a question to reveal its answer.
   Toggle behavior lives in js/faq.js (.faq-item gets .open).
   ============================================================ */
/* Spans the full section width so the questions line up with the
   section head and the cards above. */
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}

/* Question row — full-width button so the whole line is clickable.
   Hover tints the row and nudges the text in slightly for feedback. */
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 20px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.faq-q:hover {
  color: var(--blue);
  background: var(--blue-tint);
}
.faq-item.open .faq-q {
  color: var(--blue-deep);
}

/* Plus icon built from two bars; the vertical bar fades and rotates
   into the horizontal one when open, so + becomes −. */
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--blue);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item.open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0);
  opacity: 0;
}

/* Answer — collapsed to zero height by default and clipped, expanding
   on .open. max-height animates smoothly; the open value just needs to
   comfortably exceed the tallest answer. */
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-a {
  max-height: 700px;
}
/* Answer body. An answer may be a single paragraph or richer content —
   stacked paragraphs, a bulleted list, or a call-to-action button. All
   direct children share the same 20px horizontal inset so they line up
   under the question, and the foot padding rides on the last child so
   every answer closes with the same gap no matter what ends it. */
.faq-a > * {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 74ch;
}
.faq-a > *:last-child {
  padding-bottom: 26px;
}
.faq-a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.faq-a p + p {
  margin-top: 12px;
}
.faq-a i {
  font-style: italic;
}
/* Bulleted answer (e.g. which test to order) — markers sit just inside
   the shared inset, rows spaced for easy scanning. */
.faq-a ul {
  margin: 12px 0 0;
  padding-left: 40px;
  list-style: disc;
}
.faq-a li {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.faq-a li strong {
  font-weight: 600;
  color: var(--blue-deep);
}
/* CTA inside an answer (e.g. "View complete test menu"). Deliberately
   lighter than the solid download buttons in the tabs above: an
   outlined mono pill that inverts to a solid fill on hover, with an
   arrow that slides — echoing the "view details" links on the test
   cards. Sits at the copy inset with room above. */
.faq-a .submit-actions {
  margin-top: 20px;
}
.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease;
}
.faq-cta svg {
  transition: transform 0.15s ease;
}
.faq-cta:hover {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}
.faq-cta:hover svg {
  transform: translateX(3px);
}
.faq-cta:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-icon::before,
  .faq-icon::after {
    transition: none;
  }
}

@media (max-width: 600px) {
  .faq-q {
    font-size: 16px;
    padding: 20px 12px;
  }
  .faq-a p {
    padding: 0 12px 22px;
  }
}