/*
 * Kept legacy landings (landings/legacy/): only what ds.css of chinatoday-ds does not already style.
 * Every page loads ds.css first; colours and sizes here are ds.css tokens, never literals (CONV-4).
 * A rule belongs here only while no theme block carries its meaning — prefer a ds.css component.
 */

/* A photo with its caption inside long text (prose figure of the legacy pages). */
.legacy-figure { display: grid; gap: var(--sp-2); justify-items: center; }
.legacy-figure img { display: block; }
.legacy-figure figcaption { text-align: center; }

/* Text right under a section head keeps the head gap, the way the grids and lists of ds.css do;
   a grid after that text sits at the gap .features__text + .features__grid uses. */
.legacy-page .section-inner > .section-head + :is(.lead, .prose) { margin-top: var(--head-gap); }
.legacy-page .section-inner > .lead + :is(.steps, .gallery, .embed) { margin-top: var(--sp-8); }

/* A checkbox-group field (render.mjs field(), type "checkbox"): several .note-pill--check options
   stacked under the field label, ds.css has no multi-option field layout of its own. */
.field__options { display: grid; gap: var(--sp-3); }

/* calc-belaya's API-backed shipping calculator (render.mjs calc()): a hero-like intro next to the
   input card, then two result cards the calculator's own script fills in place. One page uses it, so
   its layout lives here rather than as a new ds.css component. */
.calc-widget__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-10);
  align-items: start;
}
.calc-widget__kicker {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin-bottom: var(--sp-3);
}
.calc-widget__pills { margin-top: var(--sp-6); }
.calc-widget__card { gap: var(--sp-5); }
.calc-widget__card-head { display: flex; align-items: center; gap: var(--sp-3); }
.calc-widget__form-ico { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
.calc-widget__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.calc-widget__extra { margin-top: var(--sp-4); }
.calc-widget__extra[hidden] { display: none; }
.calc-widget__toggle {
  margin-top: var(--sp-4);
  background: none;
  border: 0;
  padding: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--color-text-strong);
  cursor: pointer;
}
.calc-widget__error { color: var(--ct-orange-deep); font-size: var(--fs-sm); }
.calc-widget__results { margin-top: var(--sp-10); }
.calc-widget__results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-5); }
.calc-widget__kp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.calc-widget__kp-logo { font-weight: var(--fw-bold); color: var(--color-text-faint); }
.calc-widget__kp-rows, .calc-widget__kp-total { margin: 0; }
.calc-widget__kp-row, .calc-widget__kp-total > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--border-default);
}
.calc-widget__kp-row dt, .calc-widget__kp-total dt { color: var(--color-text-faint); font-weight: var(--fw-medium); }
.calc-widget__kp-row dd, .calc-widget__kp-total dd { margin: 0; font-weight: var(--fw-bold); text-align: right; }
.calc-widget__kp-group { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-text-faint); }
.calc-widget__kp-overlay {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  margin: var(--sp-2) 0 var(--sp-4);
  background: var(--ct-sky);
  border-radius: var(--radius-md);
}
.calc-widget__gift { display: flex; gap: var(--sp-3); align-items: flex-start; }
.calc-widget__gift-img { width: 4.5rem; height: auto; flex: 0 0 auto; border-radius: var(--radius-xs); }
.calc-widget__gift-title { font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
.calc-widget__kp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.calc-widget__kp-consent, .calc-widget__kp-disclaim { font-size: var(--fs-xs); color: var(--color-text-faint); }
.calc-widget__kp-total { margin-top: var(--sp-2); }
@media (max-width: 860px) {
  .calc-widget__grid, .calc-widget__results-grid, .calc-widget__form-grid { grid-template-columns: 1fr; }
}