/* ================= Home: Featured Colleges (prefix agh-col-) =================
   Scroll-snap carousel of compact, equal-height college cards.
   4 per view >=1200px, 3 >=992px, 2 >=576px, 86% (one card + a peek) on phones. */
.agh-colleges {
  --agh-col-tile: color-mix(in srgb, var(--ag-brand-soft) 62%, var(--ag-surface));
  background: var(--ag-bg-alt); overflow: clip; isolation: isolate;
}

/* Background: two very large, soft glows (no texture) */
.agh-col-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.agh-col-glow {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ag-glow), transparent);
  animation: ag-blob 32s ease-in-out infinite;
}
.agh-col-glow-a { width: 680px; height: 680px; top: -300px; right: -240px; }
.agh-col-glow-b { width: 560px; height: 560px; bottom: -260px; left: -240px; animation-duration: 38s; animation-direction: reverse; }

/* ---------- Header ---------- */
.agh-col-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: 20px 32px; margin-bottom: 34px;
}
.agh-col-intro { max-width: 640px; }
.agh-col-intro .agh-title { margin-bottom: 8px; }
.agh-col-sub { margin: 0; color: var(--ag-text); font-size: 1.02rem; line-height: 1.7; }
.agh-col-actions { display: flex; align-items: center; gap: 12px; }

.agh-colleges .agh-col-all {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px;
  border: 1px solid var(--ag-line); border-radius: 999px; background: var(--ag-surface);
  color: var(--ag-ink); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(2, 44, 34, .05);
  transition: border-color .3s, color .3s, transform .35s var(--ag-ease), box-shadow .35s var(--ag-ease);
}
.agh-col-all i { color: var(--ag-brand); transition: transform .35s var(--ag-ease); }
.agh-colleges .agh-col-all:hover {
  border-color: var(--ag-brand); color: var(--ag-brand); transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(2, 44, 34, .35);
}
.agh-col-all:hover i { transform: translateX(4px); }
.agh-col-all:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 3px; }

.agh-col-nav { display: inline-flex; gap: 10px; }
.agh-col-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; border: 1px solid var(--ag-line); background: var(--ag-surface); color: var(--ag-ink);
  font-size: 1.05rem; cursor: pointer; box-shadow: 0 1px 2px rgba(2, 44, 34, .05);
  transition: transform .3s var(--ag-ease), background-color .3s, color .3s, border-color .3s, opacity .3s, box-shadow .3s;
}
.agh-col-btn:hover:not(:disabled) {
  background: var(--ag-brand); border-color: var(--ag-brand); color: var(--ag-on-brand);
  transform: translateY(-2px); box-shadow: 0 12px 24px -10px var(--ag-brand-mid);
}
.agh-col-btn:active:not(:disabled) { transform: scale(.94); }
.agh-col-btn:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 3px; }
.agh-col-btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.agh-col-static .agh-col-nav { display: none; }

/* ---------- Track (full cards per view, no edge fades) ---------- */
.agh-col-track {
  --agh-col-gap: 24px;
  display: flex; gap: var(--agh-col-gap); list-style: none;
  /* Room for the hover lift and shadow; cancelled by the negative margin. Phones: full bleed. */
  margin: -20px -12px -46px; padding: 20px 12px 46px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.agh-col-track::-webkit-scrollbar { display: none; }
.agh-col-track:focus { outline: none; }
.agh-col-track:focus-visible { outline: 2px solid var(--ag-brand); outline-offset: -8px; border-radius: 26px; }

.agh-col-item { flex: 0 0 86%; display: flex; min-width: 0; scroll-snap-align: start; container-type: inline-size; }

@media (min-width: 576px) {
  /* The side padding equals the gap, so the next card starts exactly outside the view: nothing is cut. */
  .agh-col-track { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
  .agh-col-item { flex-basis: calc((100% - var(--agh-col-gap)) / 2); }
}
@media (min-width: 992px) { .agh-col-item { flex-basis: calc((100% - 2 * var(--agh-col-gap)) / 3); } }
@media (min-width: 1200px) { .agh-col-item { flex-basis: calc((100% - 3 * var(--agh-col-gap)) / 4); } }

/* ---------- Card ---------- */
.agh-col-card {
  position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0;
  background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: var(--ag-radius);
  box-shadow: 0 1px 2px rgba(2, 44, 34, .04), 0 14px 30px -20px rgba(2, 44, 34, .28);
  isolation: isolate;
  transition: transform .45s var(--ag-ease), box-shadow .45s var(--ag-ease), border-color .35s;
}
/* Pointer spotlight (data-ag-spotlight sets --ag-mx / --ag-my) */
.agh-col-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--ag-mx, 50%) var(--ag-my, 50%), var(--ag-glow), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ag-ease);
}
.agh-col-card:hover,
.agh-col-card:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--ag-brand) 34%, var(--ag-line));
  box-shadow: 0 26px 46px -24px rgba(2, 44, 34, .34), 0 16px 36px -18px color-mix(in srgb, var(--ag-brand-mid) 55%, transparent);
}
.agh-col-card:hover::before { opacity: 1; }

/* Inset image */
.agh-col-media { position: relative; flex: none; padding: 9px 9px 0; }
.agh-col-frame {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  border-radius: 14px; background: var(--ag-surface-2);
}
.agh-colleges .agh-col-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ag-ease);
}
.agh-col-card:hover .agh-col-frame img { transform: scale(1.06); }
.agh-col-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 30, 24, .26) 0%, rgba(2, 30, 24, 0) 30%, rgba(2, 30, 24, 0) 58%, rgba(2, 30, 24, .46) 100%);
}

/* Glass chips on the image */
.agh-col-glass {
  position: absolute; top: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(4, 24, 19, .44); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  font-size: .72rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.agh-col-type { left: 10px; max-width: 52%; overflow: hidden; text-overflow: ellipsis; display: block; }
.agh-col-type i { margin-right: 3px; opacity: .9; }
.agh-col-rate {
  right: 10px; max-width: 46%; font-weight: 700;
  border-color: rgba(245, 181, 63, .55);
  background: linear-gradient(135deg, rgba(245, 181, 63, .3), rgba(4, 24, 19, .5) 70%);
}
.agh-col-rate i { color: var(--ag-gold); }

/* Monogram "logo" overlapping the image edge */
.agh-col-logo {
  position: absolute; left: 21px; bottom: -22px; z-index: 1;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--ag-grad); color: #fff;
  font-family: var(--ag-font); font-size: 1rem; font-weight: 700; letter-spacing: .03em; line-height: 1;
  box-shadow: 0 0 0 4px var(--ag-surface), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 22px -8px rgba(2, 44, 34, .5);
  transition: transform .45s var(--ag-ease);
}
.agh-col-card:hover .agh-col-logo { transform: translateY(-3px); }

/* Body */
.agh-col-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding: 30px 16px 0; }
.agh-colleges .agh-col-name {
  margin: 0; font-family: var(--ag-font); font-size: 1.05rem; font-weight: 700; line-height: 1.38;
  letter-spacing: -.01em; color: var(--ag-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.agh-colleges .agh-col-link { color: inherit; text-decoration: none; transition: color .25s; }
.agh-colleges .agh-col-card:hover .agh-col-link { color: var(--ag-brand); }
/* Stretched link: the whole card is clickable, and its focus ring wraps the whole card */
.agh-col-link::after { content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: var(--ag-radius); }
.agh-col-link:focus-visible { outline: none; }
.agh-col-link:focus-visible::after { box-shadow: 0 0 0 3px var(--ag-brand), 0 0 0 7px var(--ag-glow); }

.agh-col-loc {
  display: flex; align-items: center; gap: 6px; min-width: 0; margin: 5px 0 0;
  font-size: .85rem; line-height: 1.45; color: var(--ag-muted);
}
.agh-col-loc i { flex: none; font-size: .8rem; color: var(--ag-brand); }
.agh-col-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Key facts: real data only, up to three compact stat tiles */
.agh-col-facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  margin: 12px 0 0; padding: 0;
}
.agh-col-fact {
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 1px;
  min-width: 0; padding: 7px 4px 6px; border-radius: 12px; text-align: center;
  background: var(--agh-col-tile);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ag-brand) 7%, transparent);
}
.agh-col-fact dt {
  max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .64rem; font-weight: 500; line-height: 1.3; color: var(--ag-muted);
}
.agh-col-fact dd {
  margin: 0; white-space: nowrap; font-size: .95rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--ag-ink);
}
.agh-col-fact small { font-size: .62rem; font-weight: 600; letter-spacing: .02em; color: var(--ag-muted); }

/* Chips: university + approvals, max three plus a "+N". One row: long names shrink with an ellipsis. */
.agh-col-chips { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.agh-col-chip {
  display: inline-block; flex: 0 1 auto; min-width: 2.6em; padding: 3px 10px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem; font-weight: 600; line-height: 1.5;
  background: var(--ag-brand-soft); color: var(--ag-brand);
}
.agh-col-chip.is-uni { flex-shrink: 4; background: transparent; color: var(--ag-text); box-shadow: inset 0 0 0 1px var(--ag-line); }
.agh-col-chip.is-more { flex: none; background: color-mix(in srgb, var(--ag-ink) 7%, transparent); color: var(--ag-muted); }

/* No facts: the approvals take the facts slot */
.agh-col-approvals {
  margin: 12px 0 0; padding: 7px 10px 9px; border-radius: 12px;
  background: var(--agh-col-tile);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ag-brand) 7%, transparent);
}
.agh-col-approvals-k { display: block; margin-bottom: 6px; font-size: .64rem; font-weight: 500; line-height: 1.3; color: var(--ag-muted); }
.agh-col-approvals .agh-col-chips { margin: 0; }
.agh-col-approvals .agh-col-chip:not(.is-more) { background: var(--ag-surface); box-shadow: inset 0 0 0 1px var(--ag-line); }

/* Footer, pinned to the bottom */
.agh-col-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 16px 0; padding: 11px 0 14px; border-top: 1px solid var(--ag-line);
}
.agh-col-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.agh-col-estd { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 500; color: var(--ag-muted); white-space: nowrap; }
.agh-col-estd i { font-size: .76rem; color: var(--ag-brand); }
.agh-col-partner {
  display: inline-block; max-width: 100%; padding: 2px 9px 2px 7px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--ag-brand-soft); color: var(--ag-brand);
  font-size: .68rem; font-weight: 600; line-height: 1.5;
}
.agh-col-partner i { margin-right: 2px; }
.agh-col-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ag-brand) 45%, var(--ag-line));
  color: var(--ag-brand); font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color .35s var(--ag-ease), color .35s, border-color .35s, box-shadow .35s var(--ag-ease);
}
.agh-col-cta i { font-size: .82rem; transition: transform .4s var(--ag-ease); }
.agh-col-cta-short { display: none; }
.agh-col-card:hover .agh-col-cta,
.agh-col-card:focus-within .agh-col-cta {
  background: var(--ag-brand); border-color: var(--ag-brand); color: var(--ag-on-brand);
  box-shadow: 0 10px 20px -10px var(--ag-brand-mid);
}
.agh-col-card:hover .agh-col-cta i,
.agh-col-card:focus-within .agh-col-cta i { transform: translateX(3px); }

/* Card width adjustments (the list item is the size container) */
@container (max-width: 299.98px) {
  .agh-col-body { padding-inline: 14px; }
  .agh-col-foot { margin-inline: 14px; }
  .agh-col-fact { padding-inline: 2px; }
  .agh-col-fact dd { font-size: .86rem; }
  .agh-col-fact dt { font-size: .58rem; }
  .agh-col-partner { font-size: .64rem; }
  .agh-col-cta { padding-inline: 12px; }
  .agh-col-cta-long { display: none; }
  .agh-col-cta-short { display: inline; }
}
@container (max-width: 259.98px) {
  .agh-col-foot { gap: 6px; }
  .agh-col-partner { font-size: .62rem; padding: 2px 7px 2px 5px; }
  .agh-col-cta { gap: 4px; padding: 7px 10px; }
}
@container (min-width: 380px) {
  .agh-col-meta { flex-direction: row; align-items: center; gap: 10px; }
  .agh-colleges .agh-col-name { font-size: 1.1rem; }
}

/* ---------- Progress line (solid) ---------- */
.agh-col-progress {
  position: relative; width: min(100%, 320px); height: 3px; margin: 30px auto 0;
  border-radius: 999px; background: var(--ag-line); overflow: hidden;
}
.agh-col-thumb {
  position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: inherit;
  background: linear-gradient(90deg, var(--ag-brand), var(--ag-brand-mid));
  transition: transform .25s var(--ag-ease), width .25s var(--ag-ease);
}
.agh-col-static .agh-col-progress { visibility: hidden; }

/* ---------- Secondary CTA ---------- */
.agh-col-more { display: flex; justify-content: center; margin-top: 30px; }
.agh-colleges .agh-col-help {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 6px 6px 6px 6px; border: 1px solid var(--ag-line); border-radius: 999px;
  background: var(--ag-surface); color: var(--ag-text); text-decoration: none;
  font-size: .93rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(2, 44, 34, .05);
  transition: border-color .3s, transform .35s var(--ag-ease), box-shadow .35s var(--ag-ease);
}
.agh-col-help-ico {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ag-brand-soft); color: var(--ag-brand); font-size: 1rem;
}
.agh-col-help-a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px;
  font-weight: 600; color: var(--ag-brand); transition: background-color .3s, color .3s;
}
.agh-col-help-a i { transition: transform .35s var(--ag-ease); }
.agh-colleges .agh-col-help:hover {
  border-color: color-mix(in srgb, var(--ag-brand) 45%, var(--ag-line)); color: var(--ag-text);
  transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(2, 44, 34, .35);
}
.agh-col-help:hover .agh-col-help-a { background: var(--ag-brand); color: var(--ag-on-brand); }
.agh-col-help:hover .agh-col-help-a i { transform: translateX(3px); }
.agh-col-help:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 3px; }

/* ---------- Empty state ---------- */
.agh-col-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 52px 20px; text-align: center;
  border: 1px solid var(--ag-line); border-radius: var(--ag-radius); background: var(--ag-surface); box-shadow: var(--ag-shadow);
}
.agh-col-empty-ico {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: var(--ag-brand-soft); color: var(--ag-brand); font-size: 1.6rem;
}
.agh-col-empty-t { margin: 4px 0 0; font-size: 1.05rem; font-weight: 600; color: var(--ag-ink); }
.agh-colleges .agh-col-empty-link { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--ag-brand); text-decoration: none; }
.agh-colleges .agh-col-empty-link:hover { color: var(--ag-brand-strong); }
.agh-col-empty-link i { transition: transform .35s var(--ag-ease); }
.agh-col-empty-link:hover i { transform: translateX(3px); }

/* ---------- Dark ---------- */
html[data-theme="dark"] .agh-colleges { --agh-col-tile: var(--ag-surface-2); }
html[data-theme="dark"] .agh-col-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 45%), var(--ag-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 32px -20px rgba(0, 0, 0, .8);
}
html[data-theme="dark"] .agh-col-card:hover,
html[data-theme="dark"] .agh-col-card:focus-within {
  box-shadow: 0 28px 50px -24px rgba(0, 0, 0, .85), 0 16px 38px -18px rgba(52, 211, 153, .3);
}
html[data-theme="dark"] .agh-col-frame img { filter: brightness(.9) saturate(1.05); }
html[data-theme="dark"] .agh-col-logo {
  box-shadow: 0 0 0 4px var(--ag-surface), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 22px -8px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .agh-col-chip.is-more { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .agh-col-fact,
html[data-theme="dark"] .agh-col-approvals { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
html[data-theme="dark"] .agh-colleges .agh-col-all:hover,
html[data-theme="dark"] .agh-colleges .agh-col-help:hover { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8); }

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .agh-col-head { margin-bottom: 26px; align-items: flex-start; }
  .agh-col-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 575.98px) {
  .agh-colleges .agh-col-all { height: 42px; padding: 0 16px; }
  .agh-col-btn { width: 42px; height: 42px; }
  .agh-colleges .agh-col-help { flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 20px; text-align: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .agh-col-glow { animation: none; }
  .agh-col-card, .agh-col-card::before, .agh-colleges .agh-col-frame img, .agh-col-logo, .agh-col-cta, .agh-col-cta i,
  .agh-col-thumb, .agh-col-btn, .agh-colleges .agh-col-all, .agh-col-all i, .agh-colleges .agh-col-help, .agh-col-help-a i { transition: none; }
  .agh-col-card:hover, .agh-col-card:focus-within,
  .agh-col-card:hover .agh-col-frame img, .agh-col-card:hover .agh-col-logo { transform: none; }
  .agh-col-track { scroll-behavior: auto; }
}

/* Partner mark: a small verified icon next to "Estd" (label kept as tooltip and for screen readers),
   so the word "Premium" isn't repeated on every card */
.agh-col-meta { flex-direction: row; align-items: center; gap: 8px; }
.agh-col-partner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 8px; font-size: .82rem;
}
.agh-col-partner i { margin: 0; }