/* ==========================================================================
   COMPARE COLLEGES TEMPLATE
   Reuses: .container
   Theme vars: --brand, --brand-yellow, --sans, --sans-condensed, --sans-alt

   Figma palette:
   - cell bg     #F6F6F6  (from 0.963, 0.963, 0.963)
   - sub banner  #CCE1F4  (from 0.800, 0.882, 0.957)
   - title bars  yellow #EAE856 / blue #037ABF / green #408257 / orange #F26836
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — COLLEGE SELECTOR (3 cols: select + icon + name)
   ========================================================================== */
.compare-selector {
  padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 4vw, 64px);
  background: #CDE7CA;
  background-image: url(../img/key-lines.png);
  background-repeat: repeat-x;
  background-position: 0 calc(100% + 165px);
}
.compare-selector__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.compare-selector__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.compare-selector__col h2 {
  display: block;
  background: #004F42;
  padding: 5px 20px;
  color: var(--MSSF-New-Site-White, #FFF);
  font-family: var(--sans-condensed);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 45px */
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin: 0 0;
}

/* Native select styled like the Figma design */
.compare-selector__select-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.compare-selector__select-wrap::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.compare-selector__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #FFFFFF;
  border: 2px solid var(--brand);
  border-radius: 0;
  padding: 14px 40px 14px 18px;
  font-family: var(--sans-condensed);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand);
  cursor: pointer;
  line-height: 1.1;
}
.compare-selector__select:focus {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
}

.compare-selector__icon {
  width: 167px;
  height: 167px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #F6F6F6;
  margin: 26px 0 18px;
}
.compare-selector__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.compare-selector__icon--empty { background: #F6F6F6; }

.compare-selector__name {
  font-family: var(--sans);
  color: var(--brand);
  margin: 0;
  min-height: 1.5em;
  

/* MSSF H5 */
  font-size: 36px;
  font-style: normal;
  font-weight: var(--font-weight-600, 600);
  line-height: 150%; /* 54px */
}

/* ==========================================================================
   SECTION 2 — TABLES
   Single white section holding 4 stacked tables. Each table has a colored
   title bar glued on top. Tables stack with no gap between them. Inside a
   table, optional sub-sections (light-blue banner) are glued to their rows
   below. Rows alternate gray/white (zebra), cells have no gap.
   ========================================================================== */
.compare-tables {
  background: #FFFFFF;
  padding: clamp(56px, 6vw, 96px) 0;
}

/* Each table is a simple stacking block — no padding, no margin */
.compare-table { display: block; }

/* Colored title bar glued on top of each table */
.compare-table__title {
  padding: clamp(18px, 20px, 28px) clamp(24px, 35px, 40px);
  font-family: var(--sans-condensed);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1;
  color: var(--brand);
  margin: 0;
}
.compare-table__title--yellow { background: #EAE856; color: var(--brand); }
.compare-table__title--blue   { background: #037ABF; color: #FFFFFF; }
.compare-table__title--green  { background: #408257; color: #FFFFFF; }
.compare-table__title--orange { background: #F26836; color: #FFFFFF; }

/* Full-width light-blue sub-section banner (inside a table) */
.compare-table__subsection {
  background: #CCE1F4;
  padding: clamp(16px, 20px, 24px) clamp(24px, 35px, 40px);
}
.compare-table__subsection-title {
  display: block;
  font-family: var(--sans);
  font-size: clamp(22px, 32px, 32px);
  font-weight: 400;
  line-height: 1.2;
  color: #282828;
}

/* Group of rows — used for zebra striping via :nth-child */
.compare-table__rows {
  display: flex;
  flex-direction: column;
}

/* Row of 3 cells — no gap, cells sit flush */
.compare-table__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Zebra — odd rows gray, even rows white */
.compare-table__rows > .compare-table__row:nth-child(odd) {
  background: #F6F6F6;
}
.compare-table__rows > .compare-table__row:nth-child(even) {
  background: #FFFFFF;
}

/* Individual cell — inherits row bg, just holds the value + label */
.compare-table__cell {
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  color: var(--meetingstreetscholarshipfund-org-black, var(--color-black-solid, #000));

/* MSSF H6 */
  font-size: 23px;
  font-style: normal;
  font-weight: 550;
  line-height: 150%; /* 34.5px */
}

.compare-table__value {
  display: block;
  font-family: var(--sans-condensed);
  letter-spacing: -0.01em;
  color: var(--meetingstreetscholarshipfund-org-palm-green, var(--color-cyan-7, #061C18));

/* MSSF H5 */
  font-size: 36px;
  font-style: normal;
  font-weight: var(--font-weight-600, 600);
  line-height: 150%; /* 54px */
}
.compare-table__value sup {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 1;
  font-weight: 700;
  margin-left: 2px;
}

.compare-table__label {
  font-family: var(--sans);
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand);
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .compare-selector__col h2 {
    font-size: 20px
  }
  .compare-selector__select {
    font-size: 16px;
  }
  .compare-selector__name {
    font-size: 24px;
  }
}
@media (max-width: 991px) {
  .compare-selector__grid {
    /* grid-template-columns: 1fr; */
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .compare-table__subsection-title {
    font-size: 20px;
  }
  .compare-table__row,
  .compare-selector__grid {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .compare-table__cell:last-child,
  .compare-selector__col:last-child {
    display: none
  }
  .compare-selector__col h2 {
    font-size: 18px
  }
  .compare-selector__select {
    font-size: 14px;
  }
  .compare-selector__name {
    font-size: 18px;
  }
}
@media (max-width: 640px) {
  .compare-tables { padding: 48px 0; }
  .compare-table__cell {
    min-height: 0;
    padding: 16px 24px;
  }
  .compare-table__value { font-size: 36px; }
  .compare-table__title {
    letter-spacing: 2px;
    padding: 16px 24px;
  }
  .compare-table__subsection {
    padding: 16px 24px;
  }
}