/* ==========================================================================
   Zim Zam Labs — Page CSS: SCIENCE
   Adds: science-hero, comparison table, comparison section
   Reuses: chapter, pullquote-display (from page-story.css), ionic chart
   ========================================================================== */

/* ==========================================================================
   SCIENCE HERO — wide centered hero with masthead-style top rule
   ========================================================================== */
.science-hero {
  position: relative;
  background: var(--ink-800);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-top: clamp(7rem, 5rem + 6vw, 10rem);
  padding-bottom: clamp(4.5rem, 3rem + 5vw, 7rem);
  text-align: center;
}
.science-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.science-hero__top {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.science-hero__divider { color: var(--text-on-dark-subtle); }
.science-hero__date { color: var(--text-on-dark-subtle); }

.science-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-mega);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--cream-50);
  margin-bottom: var(--space-xl);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  text-wrap: balance;
}
.science-hero__title em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--gold-400);
  display: inline-block;
}

.science-hero__lead {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

.science-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--ink-line);
  max-width: 880px;
  margin-inline: auto;
}
.science-hero__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.science-hero__fact-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--cream-50);
}
.science-hero__fact-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-subtle);
  text-align: center;
}

/* ==========================================================================
   COMPARISON SECTION — the mineral table
   ========================================================================== */
.comparison {
  background: var(--cream-50);
  position: relative;
}

.comparison__header {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}
.comparison__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: var(--space-md);
}
.comparison__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--ink-900);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}
.comparison__title em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--gold-600);
}
.comparison__lead {
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--text-on-cream-muted);
  max-width: 56ch;
  margin-inline: auto;
}

.comparison__notes {
  max-width: 720px;
  margin-inline: auto;
  margin-top: var(--space-2xl);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--lh-prose);
  color: var(--text-on-cream-muted);
}
.comparison__notes p { margin-bottom: var(--space-md); }
.comparison__notes p.emphatic {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--ink-900);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--cream-400);
}

/* ==========================================================================
   COMPARE TABLE — mineral comparison data table
   ========================================================================== */
.compare-table {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  border: 1px solid var(--ink-900);
  background: var(--cream-50);
}
/* Gold corner brackets */
.compare-table::before,
.compare-table::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold-600);
  pointer-events: none;
}
.compare-table::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.compare-table::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.compare-table__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem var(--space-md);
  background: var(--ink-900);
  color: var(--cream-50);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.compare-table__head-unit { color: var(--gold-400); font-weight: 400; }

.compare-table__data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.compare-table__data thead th {
  padding: 0.75rem var(--space-md);
  background: var(--cream-200);
  border-bottom: 1px solid var(--ink-900);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-cream);
  text-align: right;
}
.compare-table__data thead th:first-child { text-align: left; }
.compare-table__data thead th.is-zamzam {
  color: var(--gold-700);
  background: var(--cream-100);
}

.compare-table__data tbody tr {
  border-bottom: 1px solid var(--cream-400);
}
.compare-table__data tbody tr:last-child { border-bottom: none; }
.compare-table__data tbody tr:nth-child(even) { background: rgba(232, 219, 193, 0.25); }

.compare-table__data td {
  padding: 0.875rem var(--space-md);
  font-size: var(--text-body);
  color: var(--text-on-cream-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.compare-table__data td:first-child {
  text-align: left;
  font-family: var(--font-display);
  color: var(--ink-900);
  font-variation-settings: "opsz" 48, "SOFT" 30;
  letter-spacing: -0.005em;
}
.compare-table__data td:first-child strong {
  font-weight: 500;
}
.compare-table__data td:first-child small {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--gold-700);
  letter-spacing: 0.04em;
}
.compare-table__data td:first-child small sub { font-size: 0.85em; }
.compare-table__data td:first-child small sup { font-size: 0.85em; }

.compare-table__data td.is-zamzam {
  background: var(--cream-100);
  color: var(--gold-700);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-variation-settings: "opsz" 48, "WONK" 1;
  font-weight: 500;
}
.compare-table__data td:nth-child(3),
.compare-table__data td:nth-child(4) {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: 0.02em;
}

.compare-table__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem var(--space-md);
  background: var(--cream-200);
  border-top: 1px solid var(--cream-400);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-cream-subtle);
}
.comparison__highlight { color: var(--gold-700); font-weight: 500; }

/* ==========================================================================
   MOBILE OPTIMIZATION
   ========================================================================== */
@media (max-width: 640px) {
  .science-hero {
    padding-top: clamp(5rem, 3.5rem + 6vw, 7rem);
    padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  }
  .science-hero__top {
    font-size: 0.5625rem;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
    gap: 0.5rem;
  }
  .science-hero__title {
    font-size: clamp(2.5rem, 1.8rem + 6vw, 4rem);
    margin-bottom: var(--space-md);
  }
  .science-hero__lead { font-size: 1rem; margin-bottom: var(--space-lg); }
  .science-hero__facts {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding-top: var(--space-md);
  }
  .science-hero__fact-value { font-size: 1.625rem; }
  .science-hero__fact-label { font-size: 0.5625rem; }

  .comparison__title { font-size: clamp(2rem, 1.5rem + 4vw, 2.75rem); }
  .comparison__lead { font-size: 1rem; }
  .comparison__label { font-size: 0.625rem; }

  /* Compare table — switch to a card layout per row on mobile */
  .compare-table__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.625rem var(--space-sm);
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
  }
  .compare-table__data thead {
    display: none;
  }
  .compare-table__data,
  .compare-table__data tbody,
  .compare-table__data tbody tr {
    display: block;
  }
  .compare-table__data tbody tr {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--cream-400);
    background: var(--cream-50);
  }
  .compare-table__data tbody tr:nth-child(even) { background: var(--cream-100); }
  .compare-table__data td {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    padding: 0.35rem 0;
    text-align: right;
    font-size: 0.875rem;
  }
  .compare-table__data td::before {
    content: attr(data-label);
  }
  .compare-table__data td:first-child {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 0.25rem 0 0.5rem 0;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--cream-400);
    font-size: 1.0625rem;
  }
  .compare-table__data td:first-child::before { content: none; }
  .compare-table__data td:nth-child(2)::before { content: "Zamzam"; color: var(--gold-700); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
  .compare-table__data td:nth-child(3)::before { content: "Mineral water"; color: var(--text-on-cream-subtle); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
  .compare-table__data td:nth-child(4)::before { content: "Tap water"; color: var(--text-on-cream-subtle); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
  .compare-table__data td.is-zamzam {
    background: transparent;
    font-size: 1.125rem;
  }
  .compare-table__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.5625rem;
    padding: 0.5rem var(--space-sm);
  }
  .comparison__notes p.emphatic { font-size: 1.0625rem; }
}