/* CALCULATORS HUB (Phase mktcalc.1).
 *
 * The page was the last of the v1 marketing templates: page-hero, page-card,
 * a four-figure stat row and two collection blocks, all styled from
 * site-styles.css and visibly older than everything around it.
 *
 * Rebuilt under the same grammar as the Solutions pages (Lewis's pick): the
 * marketing token system, teal accents, sketch panels drawn in CSS. The
 * device here is a card that leads with the figure its own calculator
 * produces — the hub's job is to get someone into the right calculator, so
 * the number does the pointing.
 *
 * Everything scoped .calc-* under [data-mr="1"].
 */

[data-mr="1"] .calc-hero__accent {
  color: var(--mr-teal-500);
  display: block;
}

/* Collection heading — only rendered when more than one collection is on the
   page (see the note in home.ejs). */
[data-mr="1"] .calc-collection-head {
  max-width: 60ch;
  margin-top: var(--mr-space-8);
}

[data-mr="1"] .calc-collection-head h3 {
  font-size: var(--mr-fs-h4);
  letter-spacing: -0.015em;
  color: var(--mr-text-primary);
  margin: var(--mr-space-2) 0 var(--mr-space-2) 0;
}

[data-mr="1"] .calc-collection-head p {
  font-size: 0.9rem;
  line-height: var(--mr-lh-body);
  color: var(--mr-text-secondary);
  margin: 0;
}

/* ── The calculator cards ─────────────────────────────────────────── */

[data-mr="1"] .calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mr-space-5);
  margin-top: var(--mr-space-8);
}

[data-mr="1"] .calc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mr-space-3);
  padding: var(--mr-space-7);
  background: var(--mr-surface-raised);
  border: 1px solid var(--mr-border-subtle);
  border-radius: var(--mr-radius-lg);
  box-shadow: var(--mr-shadow-sm);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--mr-dur-short) var(--mr-ease-soft),
    border-color var(--mr-dur-short) var(--mr-ease-soft),
    box-shadow var(--mr-dur-short) var(--mr-ease-soft);
}

/* A teal edge that arrives on hover — the card is a door, and this is the
   only motion on the page. */
[data-mr="1"] .calc-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--mr-teal-500);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--mr-dur-medium) var(--mr-ease-emphasis);
}

[data-mr="1"] .calc-card:hover,
[data-mr="1"] .calc-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--mr-teal-100);
  box-shadow: var(--mr-shadow-lg);
}

[data-mr="1"] .calc-card:hover::before,
[data-mr="1"] .calc-card:focus-visible::before {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-mr="1"] .calc-card,
  [data-mr="1"] .calc-card::before {
    transition: none;
  }
  [data-mr="1"] .calc-card:hover {
    transform: none;
  }
}

[data-mr="1"] .calc-card__module {
  font-size: var(--mr-fs-eyebrow);
  font-weight: var(--mr-fw-bold);
  letter-spacing: var(--mr-tr-eyebrow);
  text-transform: uppercase;
  color: var(--mr-teal-600);
}

[data-mr="1"] .calc-card__metric {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
  font-weight: var(--mr-fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mr-text-primary);
  font-variant-numeric: tabular-nums;
}

[data-mr="1"] .calc-card__metric-label {
  font-size: 0.85rem;
  color: var(--mr-text-muted);
  margin-top: calc(-1 * var(--mr-space-2));
}

[data-mr="1"] .calc-card__name {
  font-size: var(--mr-fs-h6);
  font-weight: var(--mr-fw-semi);
  letter-spacing: -0.01em;
  color: var(--mr-text-primary);
  margin: var(--mr-space-2) 0 0 0;
}

[data-mr="1"] .calc-card__desc {
  font-size: 0.88rem;
  line-height: var(--mr-lh-body);
  color: var(--mr-text-secondary);
  margin: 0;
}

[data-mr="1"] .calc-card__cta {
  margin-top: auto;
  padding-top: var(--mr-space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: var(--mr-fw-semi);
  color: var(--mr-teal-600);
}

[data-mr="1"] .calc-card:hover .calc-card__cta {
  color: var(--mr-teal-700);
}

/* ── How it works ─────────────────────────────────────────────────── */

[data-mr="1"] .calc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mr-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-mr="1"] .calc-step {
  display: flex;
  align-items: flex-start;
  gap: var(--mr-space-4);
}

[data-mr="1"] .calc-step__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mr-teal-050);
  border: 1px solid var(--mr-teal-100);
  color: var(--mr-teal-600);
  font-family: var(--mr-font-mono);
  font-size: 12px;
  font-weight: var(--mr-fw-semi);
}

[data-mr="1"] .calc-step strong {
  display: block;
  font-size: 0.95rem;
  color: var(--mr-text-primary);
  margin-bottom: 2px;
}

[data-mr="1"] .calc-step span {
  font-size: 0.85rem;
  line-height: var(--mr-lh-body);
  color: var(--mr-text-secondary);
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  [data-mr="1"] .calc-steps {
    grid-template-columns: 1fr;
    gap: var(--mr-space-5);
  }
}

@media (max-width: 700px) {
  [data-mr="1"] .calc-grid {
    grid-template-columns: 1fr;
  }

  [data-mr="1"] .calc-card {
    padding: var(--mr-space-6);
  }
}