.institution-catalog-page { background: #f4f7f8; }
.institution-banner { padding-top: 24px; }
.institution-banner img { width: 100%; height: auto; display: block; aspect-ratio: 96 / 19; object-fit: cover; border-radius: 6px; background: #eaf2ff; }
.institution-catalog-section { padding: 46px 0 76px; }
.institution-section-heading { min-height: 34px; display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.institution-section-heading h1 { position: relative; margin: 0; padding-left: 13px; color: #243138; font-size: 19px; font-weight: 600; }
.institution-section-heading h1::before { position: absolute; top: 2px; bottom: 2px; left: 0; width: 3px; content: ""; border-radius: 2px; background: var(--brand); }
.institution-section-heading span { color: #8b969b; font-size: 12px; }
.institution-card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.institution-card-grid > .state-panel { grid-column: 1 / -1; }
.institution-catalog-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e5eaed; border-radius: 6px; color: inherit; background: #fff; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.institution-catalog-card:hover { border-color: #b8dcc9; color: inherit; box-shadow: 0 10px 24px rgba(27, 65, 49, .08); transform: translateY(-2px); }
.institution-card-media { height: 132px; display: grid; place-items: center; overflow: hidden; padding: 24px; background: linear-gradient(150deg, #dceeff 0%, #afd3f3 100%); }
.institution-card-media::before { position: absolute; top: -36px; right: -22px; width: 120px; height: 120px; content: ""; border: 1px solid rgba(255, 255, 255, .48); border-radius: 50%; }
.institution-card-media img { position: relative; width: 90px; height: 82px; display: block; object-fit: contain; border-radius: 5px; background: rgba(255, 255, 255, .92); box-shadow: 0 7px 18px rgba(33, 86, 124, .11); }
.institution-type-icon { position: absolute; top: 112px; left: 15px; width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; font-size: 16px; background: var(--brand); box-shadow: 0 4px 10px rgba(8, 132, 78, .18); }
.institution-card-body { min-height: 150px; display: flex; flex-direction: column; padding: 26px 15px 14px; }
.institution-card-body h2 { margin: 0 0 8px; overflow: hidden; color: #253239; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.institution-card-body p { min-height: 40px; margin: 0 0 13px; display: -webkit-box; overflow: hidden; color: #8a959b; font-size: 11px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.institution-card-tags { min-height: 22px; display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; overflow: hidden; }
.institution-card-tags span { max-width: 92px; padding: 3px 7px; overflow: hidden; color: #67747a; font-size: 10px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; background: #f1f4f5; border-radius: 3px; }
.institution-card-tags span:nth-child(2) { color: #0b9a61; background: #e9faf2; }
.institution-pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 34px; }
.institution-pagination button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #dce4e8; border-radius: 4px; color: #647178; font-size: 12px; background: #fff; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.institution-pagination button:hover:not(:disabled), .institution-pagination button.is-active { border-color: var(--brand); color: #fff; background: var(--brand); }
.institution-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.institution-pagination button:focus-visible, .institution-catalog-card:focus-visible { outline: 2px solid rgba(8, 185, 104, .38); outline-offset: 2px; }
.institution-skeleton { min-width: 0; }
.institution-skeleton .skeleton-card { height: 286px; }

@media (max-width: 1199px) {
  .institution-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .institution-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .institution-banner { width: 100%; padding-top: 0; }
  .institution-banner img { border-radius: 0; }
  .institution-catalog-section { padding: 30px 0 52px; }
  .institution-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .institution-card-media { height: 112px; padding: 18px; }
  .institution-card-media img { width: 76px; height: 68px; }
  .institution-type-icon { top: 94px; left: 12px; width: 34px; height: 34px; font-size: 14px; }
  .institution-card-body { min-height: 146px; padding: 23px 12px 12px; }
}