/* Medicare Advantage vs. Medicare Supplement (views/pages/compare-ma-medigap.njk).
   The hero, sections, cards, and closing pieces come from calculator.css,
   sections.css, home.css, and guia.css; this is the two-paths card, the
   side-by-side table, and small list/link styles. Both columns look the
   same on purpose: the page doesn't pick a winner. */

.compare-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* --- The two paths (hero card) --- */
.compare-paths { gap: var(--space-s); }
.compare-paths__title {
  font-size: var(--text-l);
  color: var(--color-primary-dark);
  margin: 0;
}
.compare-paths__item {
  background: #fff;
  border-radius: var(--radius-s);
  padding: var(--space-s) var(--space-m);
}
.compare-paths__name {
  font-size: var(--text-m);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-2xs);
}
.compare-paths__item p,
.compare-paths__note {
  margin: 0;
  line-height: 1.55;
  text-wrap: pretty;
}
.compare-paths__note {
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

/* --- Side-by-side table --- */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  overflow: hidden;
  text-align: left;
}
.compare-table th,
.compare-table td {
  padding: var(--space-s) var(--space-m);
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid var(--color-border);
}
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table thead th {
  background: var(--color-primary-dark);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-m);
  width: 40%;
}
.compare-table thead th:first-child { width: 20%; }
.compare-table tbody th {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  background: var(--color-primary-tint);
}
.compare-table td { text-wrap: pretty; }

/* Phones: each row becomes a card with its column names as labels. */
@media (max-width: 699px) {
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td { display: block; width: auto; }
  .compare-table { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .compare-table tr {
    background: #fff;
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-m);
    overflow: hidden;
    margin-bottom: var(--space-s);
  }
  .compare-table tbody th { font-size: var(--text-m); }
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 0.2rem;
  }
  .compare-table tbody tr:last-child > * { border-bottom: 1px solid var(--color-border); }
  .compare-table tbody tr > :last-child { border-bottom: 0; }
}

.compare-notes {
  max-width: 760px;
  margin: var(--space-l) auto 0;
  font-size: var(--text-s);
  color: var(--color-text-muted);
  text-align: center;
}
.compare-notes p { margin: 0 0 var(--space-2xs); }

/* --- Which one may fit, switching, special situations --- */
.compare-list {
  margin: 0;
  padding-inline-start: 1.25rem;
  text-align: left;
}
.compare-list li { margin-bottom: var(--space-2xs); line-height: 1.55; }
.compare-list li:last-child { margin-bottom: 0; }

.compare-cards { gap: var(--space-m); }
.compare-cards .card { padding: var(--space-l); }
.compare-cards .card__body { line-height: 1.6; text-wrap: pretty; }

.compare-subheading {
  text-align: center;
  color: var(--color-primary-dark);
  margin: var(--space-2xl) 0 var(--space-l);
}

.compare-link {
  color: var(--color-primary);
  font-weight: 600;
  margin-top: auto;
}

/* --- Keep learning --- */
.compare-learn__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.compare-learn__list .card { padding: var(--space-l); }
.compare-learn__list .card__heading a { color: var(--color-primary-dark); }
.compare-learn__list .card__heading a:hover { color: var(--color-primary); }

.pdp-tel { white-space: nowrap; }