/* ═══════════════════════════════════════════════════════
   POINTS COMPARISON MODULE
   Two-column "point → detail" layout: short numbered
   headlines on the left, their supporting copy on the
   right, row-synced with a scroll/hover-driven arrow.
   Structure borrowed from 2026-challenges-comparison.
   ═══════════════════════════════════════════════════════ */

.points-compare {
  --navy: #09476E;
  --blue: #0096D6;
  --gold: #C5960C;
  --lgray: #c5c5c5;
}

.imgt-module--outer-section {
  padding: 30px 0 45px;
}
.imgt-module--outer-section a,
.imgt-module--outer-section a > span {
  font-family: "Galano Grotesque Bold", Sans-Serif;
  color: #0096d6 !important;
}

.points-compare .points-compare-wrap {
  max-width: 1077px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* Widths below match production's usable content width once nested in
   .row > .col-md-12 (container width minus the row/col 15px gutter cancel-out
   leaves a net -30px vs. the container's own outer width). */
@media (min-width: 768px) {
  .points-compare .points-compare-wrap {
    width: 720px;
  }
}
@media (min-width: 992px) {
  .points-compare .points-compare-wrap {
    width: 940px;
  }
}
@media (min-width: 1200px) {
  .points-compare .points-compare-wrap {
    width: 1077px;
  }
}

.points-compare .section-label {
  font-family: "Galano Grotesque Bold", Sans-Serif;
  color: var(--navy);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.points-compare .section-lede {
  margin: 0 auto 32px;
}

/* ── GRID ── */
.points-compare .points-compare-grid {
  display: grid;
  grid-template-columns: minmax(280px,530px) auto minmax(280px,530px);
  grid-template-rows: auto repeat(20, auto);
  align-items: stretch;
  gap: 0;
  justify-content: center;
}
.points-compare .cbox {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  padding: 40px 32px;
  box-sizing: border-box;
}
.points-compare .cbox.points { background: #f5f5f5; border-radius: 4px 0 0 4px; }
.points-compare .cbox.details { background: #ffffff; border-radius: 0 4px 4px 0; box-shadow: 0 2px 14px rgba(9,71,110,.06); padding: 32px 28px; }
.points-compare .cbox h4 {
  font-family: "Galano Grotesque Bold", Sans-Serif;
  color: var(--navy);
  font-size: 16px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.points-compare .cbox-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
  text-align: center;
}
.points-compare .cbox-heading h4 { margin-bottom: 0; }

/* ── ROWS ── */
.points-compare .citem { position: relative; margin: 0 0 24px; }
.points-compare .citem span:not(.badge) { padding-left: 0; display: block !important; margin-bottom: 10px !important; }
.points-compare .cbox.points .citem { display: flex; align-items: center; gap: 10px; }
.points-compare .cbox.details .citem span { padding-left: 0 !important; margin-bottom: 6px !important; }

.points-compare .points-compare-wrap .citem .badge {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px 0 0 !important;
  padding: 0;
}
.points-compare .citem .badge svg { width: 11px; height: 11px; }
.points-compare .citem .ptitle {
  font-family: "Galano Grotesque Bold", Sans-Serif !important;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.35;
}
.points-compare .cbox.details .citem span {
  font-size: 16px;
  line-height: 1.35;
  color: var(--navy);
}
.points-compare .cbox.details .citem span em { color: var(--navy); font-style: italic;   font-family: "Galano Grotesque Bold", Sans-Serif; }
.points-compare .cbox.details .citem span p { margin: 0 0 4px !important; }
.points-compare .cbox.details .citem span p:last-child { margin-bottom: 0 !important; }

/* ── ARROW ── */
.points-compare .arrow-circle {
  grid-row: 1 / -1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 -1px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(9,71,110,.25);
  transition: transform .35s ease;
  will-change: transform;
}
.points-compare .arrow-circle svg { display: block; width: 24px; height: 24px; }

/* ── ACTIVE ROW HIGHLIGHT ── */
.points-compare .citem::before {
  content: "";
  position: absolute;
  inset: -6px -12px;
  border-radius: 8px;
  background: transparent;
  z-index: 0;
  pointer-events: none;
  transition: background-color .3s ease;
}
.points-compare .citem > * { position: relative; z-index: 1; }
.points-compare .citem.active::before { background: rgba(9,71,110,.06); }
.points-compare .cbox.details .citem.active::before { background: rgba(0,150,214,.08); }
.points-compare .citem.active .ptitle { color: var(--blue); }
.points-compare .citem.active .badge { transform: scale(1.12); transition: transform .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .points-compare .arrow-circle { transition: none; }
  .points-compare .citem::before,
  .points-compare .citem.active .badge { transition: none; }
}

.points-compare .points-compare-close {
  text-align: center;
  color: var(--navy);
  font-size: 14px;
  margin: 30px 0 0 !important;
}

@media (max-width: 767px) {
  .points-compare .points-compare-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .points-compare .cbox { grid-template-rows: auto; grid-row: auto; }
  .points-compare .cbox.points { border-radius: 4px 4px 0 0; }
  .points-compare .cbox.details { border-radius: 0 0 4px 4px; }
  .points-compare .arrow-circle { grid-row: auto; margin: -16px auto; }
}