/* ===== Base ===== */
:root { --brand:#072b57; --ink:#222; --muted:#6b7280; --link:#005fcc; --card:#fff; --line:#e5e7eb; }
* { box-sizing: border-box;}
html,body { margin:0; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#f6f8fa; color:var(--ink); }

/* ===== Hero ===== */
.hero { position:relative; overflow:hidden; background:var(--brand); color:#fff; text-align:center; }
.hero #heroBg { position:absolute; inset:0; width:100%; height:260px; }
.hero .hero-text { position:relative; padding:76px 16px 64px; }
.hero h1 { margin:0 0 8px; font-size:32px; font-weight:800; }
.hero p { margin:0; color:#dce8f6; }

/* ===== Controls ===== */
.controls { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; padding:14px; background:#fff; border-bottom:1px solid var(--line); }
.controls label { font-weight:600; color:#333; }
select, input[type="text"] { min-width:220px; padding:8px 10px; border:1px solid #cfd6df; border-radius:8px; font-size:14px; }
select:focus, input:focus { outline:none; border-color:var(--link); box-shadow:0 0 0 2px rgba(0,95,204,.15); }
.btn { padding:8px 12px; border:0; border-radius:8px; background:var(--link); color:#fff; cursor:pointer; font-weight:600; }
.btn:hover { background:#073a84; }
.note { color:var(--muted); font-size:13px; }

/* ===== Institution Grid (logos only) ===== */
.inst-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:22px; max-width:1200px; margin:0 auto; }
.inst-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; align-items:center; justify-content:center; height:132px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor:pointer; }
.inst-card:hover { transform:translateY(-2px); border-color:#c6d9f3; box-shadow:0 8px 18px rgba(0,80,160,.10); }
.inst-card img { max-height:96px; max-width:100%; object-fit:contain; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.inst-card .fallback { font-weight:700; text-align:center; color:#0f172a; }

/* ===== Results ===== */
.results { display:grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap:16px; padding:22px; max-width:1200px; margin:0 auto; }
.card { background:#fff; border:1px solid #e3e7ea; border-radius:14px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.08); }
.card h3 { font-size:16px; color:#072b57; margin:.2rem 0 .4rem; }
.meta { font-size:13px; color:#586069; margin-bottom:.4rem; }
.card p { font-size:14px; color:#444; line-height:1.45; margin:.4rem 0; }
.card a { color:var(--link); text-decoration:none; font-weight:600; }
.card a:hover { text-decoration:underline; }
.badges { margin-top:6px; }
.badge { display:inline-block; font-size:12px; background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; border-radius:999px; padding:2px 8px; margin:2px 4px 0 0; }

/* ===== Pagination ===== */
.pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px; background:#fff; border-top:1px solid var(--line); }
.pagination.hidden { display:none; }
.pagination button { background:var(--link); color:#fff; border:0; border-radius:8px; padding:6px 12px; cursor:pointer; }
.pagination button:hover { background:#073a84; }

/* ===== Footer ===== */
.footer { text-align:center; color:#666; font-size:13px; padding:18px; background:#f8f9fa; border-top:1px solid var(--line); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .inst-grid, .results { padding:14px; }
}