/* =====================================================================
   Section: D - Table  (Figma 10159:3722)
   "Annual Gold Prices and % Returns by Currency"
   Desktop target: 1240 content width inside .container @ 1440 frame.
   13 equal columns (YEAR + 12 currency/return columns). Token-only.
   ===================================================================== */

.table-sec {
  background: var(--color-bg);
}
.table-sec__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 40px;
}

/* ---- Heading + intro ---- */
.table-sec__title {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
}
.table-sec__intro {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: 1;
  color: var(--gray-8);
}

/* ---- Scroll wrapper (keeps the 13-col grid intact on narrow viewports) ---- */
.table-sec__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Table grid ---- */
.table-sec__table {
  width: 100%;
  min-width: 760px;            /* below this the fixed grid scrolls */
  border-collapse: collapse;
  table-layout: fixed;
}
.table-sec__row { height: 40px; }

.table-sec__cell {
  box-sizing: border-box;
  height: 40px;
  padding: 4px 5px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-soft);
  border-right: 1px solid var(--color-border-soft);
}
/* Close the left edge of the grid */
.table-sec__cell:first-child {
  border-left: 1px solid var(--color-border-soft);
}

/* Header cells */
.table-sec__cell--head {
  background: var(--pale-blue);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: var(--gray-8);
  border-right-color: transparent;   /* header reads as one pale band */
}
.table-sec__cell--head:first-child { border-left-color: transparent; }

/* YEAR column (left): dusty-blue fill, white text, on every row */
.table-sec__cell--year {
  background: var(--dusty-blue);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  color: var(--gray-0);
}

/* Data cells */
.table-sec__cell--data {
  background: var(--color-bg);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  color: var(--gray-8);
}

/* % return cells: colour gains green and losses red (same convention as the
   price-stats band). "—" (no data) cells get no modifier and stay neutral. */
.table-sec__cell--pct--up { color: var(--green); font-weight: var(--fw-medium); }
.table-sec__cell--pct--down { color: var(--red); font-weight: var(--fw-medium); }

/* ---- Tablet (600–1023): tighten heading + cell padding, reduce font ---- */
@media (max-width: 1023.98px) {
  .table-sec__inner { padding-block: 32px; gap: 14px; }
  .table-sec__title { font-size: clamp(24px, 7vw, var(--fs-32)); line-height: 1.2; }
  .table-sec__cell { padding: 4px 4px; font-size: var(--fs-12); }
  .table-sec__cell--head { font-size: var(--fs-14); }
}

/* =====================================================================
   Mobile — M - Table (Figma 10159:4438) 390-wide.
   Title 26/36 + 16px intro stacked, gap 10px. The 13-column grid keeps
   its fixed widths and HORIZONTAL-SCROLLS (the M- frame clips it at the
   390 edge). Each column locks to ~75px; cells stay 12px / 40px tall.
   New tokens reported: --fs-26, --lh-36.
   ===================================================================== */
@media (max-width: 767.98px) {
  .table-sec__inner { padding: 30px 0 40px; gap: 10px; }
  .table-sec__title { font-size: 26px; line-height: 36px; }
  .table-sec__intro { font-size: var(--fs-16); line-height: normal; }

  /* 13 fixed 75px columns => ~975px, scrolls inside the wrapper */
  .table-sec__table { min-width: 975px; }
  .table-sec__cell {
    width: 75px;
    font-size: var(--fs-12);
    padding: 4px 5px;
  }
  .table-sec__cell--head { font-size: var(--fs-12); }
}