/* ================================================================
   GPCompaReports landing.css
   Landing-page-only styles. Loads alongside site.css (which ships
   the tokens, base reset, chrome, shared components).
   ================================================================ */

/* ----------- Hero ----------- */

.hero {
  padding: var(--s-8) 0 var(--s-8);
  position: relative;
  background:
    radial-gradient(ellipse 65% 55% at 80% 35%,
      color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%,
      transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 85%,
      color-mix(in srgb, var(--brand-accent) 8%, transparent) 0%,
      transparent 70%);
}
.hero-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.hero-title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.8vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.hero-title-serif {
  background: linear-gradient(120deg, var(--fgColor-default) 0%, var(--fgColor-default) 55%, var(--brand-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tagline {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--fgColor-muted);
  max-width: 38rem;
  margin: 0 0 var(--s-5);
}
.hero-tagline strong { color: var(--fgColor-default); font-weight: 600; }

.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Hero emblem = the TGGR lab logo as the hero visual. The asset file
   (static/img/lablogo.png) is unchanged; only its rendered size is smaller,
   so the title, tagline and search carry more weight in the hero. */
.hero-emblem {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-emblem img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  width: auto;
  display: block;
}

/* ----------- Hero search teaser ----------- */

.hero-search {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s-5);
  margin-top: var(--s-6);
  position: relative;
}
.search-box {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--bgColor-default);
  border: 1px solid var(--borderColor-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-resting-medium);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  cursor: text;
}
.search-box:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--bgColor-accent-muted);
}
.search-icon { color: var(--fgColor-muted); flex-shrink: 0; }
#search-input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--fgColor-default);
  outline: none;
  min-width: 0;
}
#search-input::placeholder { color: var(--fgColor-muted); }
.search-kbd {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fgColor-muted);
  background: var(--bgColor-muted);
  border: 1px solid var(--borderColor-muted);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}
.search-results {
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  top: calc(100% + var(--s-2));
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  background: var(--bgColor-default);
  border: 1px solid var(--borderColor-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-floating-small);
  max-height: 360px;
  overflow: auto;
  z-index: 15;
}
.search-results li {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  justify-content: space-between;
}
.search-results li:hover,
.search-results li[aria-selected="true"] { background: var(--bgColor-muted); }
.search-results .result-gene { font-weight: 600; color: var(--fgColor-default); }
.search-results .result-name { color: var(--fgColor-muted); font-size: 0.88rem; }
.search-results .result-fam  { color: var(--fgColor-muted); font-size: 0.82rem; }

/* ----------- Responsive (landing-specific) ----------- */

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-emblem { order: -1; }
  .hero-emblem img { max-height: 140px; }
}

@media (max-width: 600px) {
  .hero { padding: var(--s-7) 0 var(--s-7); }
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero-tagline { font-size: 1rem; }
  .hero-emblem img { max-height: 120px; }
}

/* ----------- Dataset and analysis ----------- */
.dataset { padding: var(--s-6) 0; border-bottom: 1px solid var(--borderColor-muted); }
.dataset-table { border-collapse: collapse; font-size: 14.5px; margin: 0 0 var(--s-4); }
.dataset-table th { text-align: left; font-weight: 600; padding: 6px var(--s-5) 6px 0; white-space: nowrap; }
.dataset-table td { padding: 6px var(--s-5) 6px 0; font-variant-numeric: tabular-nums; }
.dataset-table .dataset-note { color: var(--fgColor-muted); font-size: 13px; font-variant-numeric: normal; }
.dataset-limitation { max-width: 70ch; color: var(--fgColor-muted); font-size: 14px; margin: 0; }
@media (max-width: 700px) { .dataset-table .dataset-note { display: none; } }

/* ----------- Worked example ----------- */
.worked { padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--borderColor-muted); }
.worked-grid { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: var(--s-6); align-items: start; }
.worked-fig { margin: 0; }
.worked-fig img { width: 100%; height: auto; border: 1px solid var(--borderColor-muted); border-radius: var(--r-md); }
.worked-fig figcaption { font-size: 12.5px; color: var(--fgColor-muted); margin-top: var(--s-2); }
.worked-copy p { margin: 0 0 var(--s-3); max-width: 60ch; }
.worked-table { border-collapse: collapse; margin: 0 0 var(--s-4); font-size: 14px; }
.worked-table caption { text-align: left; font-size: 12.5px; color: var(--fgColor-muted); padding-bottom: var(--s-2); }
.worked-table th { text-align: left; font-weight: 600; padding: 5px 14px 5px 0; color: var(--fgColor-muted); white-space: nowrap; }
.worked-table td { padding: 5px 0; font-variant-numeric: tabular-nums; }
.worked-table code { font-family: var(--font-mono); font-size: 12.5px; background: var(--bgColor-neutral-muted); border-radius: 4px; padding: 1px 5px; }
.worked-table .is-inactive { color: var(--semantic-inactive); font-weight: 700; }
.ex-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 1px; }
.ex-swatch.is-active { background: var(--semantic-active); }
.ex-swatch.is-inactive { background: var(--semantic-inactive); }
@media (max-width: 820px) { .worked-grid { grid-template-columns: 1fr; } }

/* ----------- CFR intro ----------- */
.cfr-intro { padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--borderColor-muted); }
.cfr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--s-6); align-items: start; }
.cfr-fig { margin: 0; }
.cfr-fig img { width: 100%; height: auto; }
.cfr-fig figcaption { font-size: 12.5px; color: var(--fgColor-muted); margin-top: var(--s-2); max-width: 70ch; }
.cfr-copy p { margin: 0 0 var(--s-3); max-width: 60ch; }
@media (max-width: 820px) { .cfr-grid { grid-template-columns: 1fr; } }

/* ----------- Contains, custom, methods, release ----------- */
.contains, .custom, .methods-sources, .release { padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--borderColor-muted); }
.release { border-bottom: 0; }
.contains-list { columns: 2; column-gap: var(--s-6); margin: 0 0 var(--s-4); padding-left: 1.1rem; }
.contains-list li { margin-bottom: var(--s-2); break-inside: avoid; }
.contains-note, .custom p, .methods-sources p { max-width: 70ch; margin: 0 0 var(--s-3); }
.release-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-4); }
.release-list dt { font-weight: 600; color: var(--fgColor-muted); }
.release-list dd { margin: 0; }
.release-scope { max-width: 70ch; color: var(--fgColor-muted); font-size: 14px; }
@media (max-width: 820px) { .contains-list { columns: 1; } }