/* =====================================================================
   Conversion Chart — unit-conversion table (Figma 10159:3725)
   Desktop: 1240 content area, 4 equal columns, 40px rows.
   Header row: pale-blue strip; first column dusty-blue.
   Data rows: white; first column dusty-blue.
   Borders: --gray-4. Token-only; BEM, .conversion-scoped.
   ===================================================================== */

.conversion__inner {
  padding-block: 40px;
}

.conversion__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;          /* 4 equal columns, mirrors flex-[1_0_0] */
  color: var(--gray-8);
}

.conversion__caption {
  /* Title kept in DOM for a11y/CMS; visually hidden (no header label in design). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Cells (shared) ---- */
.conversion__cell {
  height: 40px;
  padding: 4px 5px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

/* ---- Header row ---- */
.conversion__head .conversion__cell {
  background: var(--pale-blue);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}

/* First (corner) header cell + every row's leading unit cell: dusty-blue */
.conversion__cell--corner,
.conversion__cell--unit {
  background: var(--dusty-blue);
  color: var(--gray-0);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}

/* The corner cell sits inside <thead>, so the header rule above
   (.conversion__head .conversion__cell { background: pale-blue }) outranks
   the single-class corner rule and was painting it pale-blue — leaving white
   text on light blue (~1.1:1, unreadable). Re-assert the dusty-blue corner
   with matching specificity so it reads like the row-unit cells. */
.conversion__head .conversion__cell--corner {
  background: var(--dusty-blue);
}

/* ---- Data rows ---- */
.conversion__body .conversion__row { background: var(--gray-0); }

.conversion__cell--value {
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  color: var(--gray-8);
}

/* Trailing right edge on the body table (design draws a right border on rows) */
.conversion__body .conversion__row .conversion__cell:last-child {
  border-right: 1px solid var(--color-border-soft);
}

/* =====================================================================
   Responsive — best-effort below 768. Keep 4 columns; shrink type so
   conversion strings ("Multiply by 31.103478") stay on one line as long
   as possible, then allow wrapping + taller rows on the narrowest frame.
   ===================================================================== */
@media (max-width: 1023.98px) {
  .conversion__inner { padding-block: 30px; }

  .conversion__head .conversion__cell,
  .conversion__cell--corner,
  .conversion__cell--unit {
    font-size: var(--fs-14);
  }

  .conversion__cell--value {
    font-size: var(--fs-12);
  }
}

/* =====================================================================
   Mobile — ≤767.98px. Keep 4 columns; allow wrapping + taller rows on
   narrow frames. Header/unit cells 14px, values clamp to 10–12px.
   ===================================================================== */
@media (max-width: 767.98px) {
  .conversion__inner { padding-block: 20px; }

  .conversion__cell {
    height: auto;
    min-height: 40px;
    padding: 6px 5px;
    white-space: normal;        /* allow wrap so values fit narrow columns */
    word-break: break-word;
  }

  .conversion__head .conversion__cell,
  .conversion__cell--corner,
  .conversion__cell--unit { font-size: var(--fs-14); }

  .conversion__cell--value { font-size: clamp(10px, 2.8vw, var(--fs-12)); }
}