/* ============================================================
   calculator.html — page-specific styles
   Everything else comes from assets/css/site.css (ab-* system).
   ============================================================ */

/* -- hero: the source H1 is two lines ("ABC Chemistry Calculator"
      + "Every Chemistry Tool, One Place"). The second runs as a
      gold sub-line under the first. -- */
.calc-hero .ab-hero__title { max-width: 20ch; }
.calc-hero .ab-hero__title em {
  display: block;
  font-size: .58em;
  line-height: 1.24;
  margin-top: .34em;
  letter-spacing: .005em;
}
.calc-hero .ab-hero__lede b {
  color: var(--gold-soft);
  font-weight: 600;
}

/* -- feature cards: two of the six titles wrap to a second line, so
      reserve exactly two lines and every card's body copy starts on
      the same baseline. Single column on phones needs no reserve. -- */
.calc-cards .ab-card h3 {
  line-height: 1.3;
  min-height: 2.6em;   /* = 2 lines at the line-height above */
}
@media (max-width: 640px) {
  .calc-cards .ab-card h3 { min-height: 0; }
}

/* -- source call-to-action row, on a light section --
      .ab-btn--ghost in site.css is built for the dark CTA panel
      (white border/white text), so it needs a light-background
      variant here. -- */
.calc-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.calc-btnrow .ab-btn--ghost {
  border: 1.5px solid var(--line);
  color: var(--navy);
  background: var(--card);
}
.calc-btnrow .ab-btn--ghost:hover,
.calc-btnrow .ab-btn--ghost:focus-visible {
  border-color: var(--gold);
  color: var(--navy-deep);
  background: var(--paper);
}

/* -- live tool embed: tall enough for the calculator's own UI --
      set here rather than inline so the height can shrink on
      small screens. -- */
.calc-embed iframe { height: 1000px; }
@media (max-width: 900px) {
  .calc-embed iframe { height: 820px; }
}
@media (max-width: 640px) {
  .calc-embed iframe { height: 680px; }
}