/* =====================================================
   RESOURCES PAGE
===================================================== */

.resources-hero {
  background: radial-gradient(circle at 88% 20%, rgba(8,102,213,.07), transparent 28%),
              linear-gradient(180deg,#f7fbff 0%,#fff 100%);
  border-bottom: 1px solid #e7eef7;
}
.resources-hero-inner {
  max-width:1100px;
  margin:auto;
  padding:82px 30px 76px;
  text-align:center;
}
.resources-hero .hero-label {
  display:inline-flex;
  margin-bottom:18px;
  padding:8px 14px;
  border:1px solid #d9e8f8;
  border-radius:999px;
  background:#fff;
  color:#0866d5;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.16em;
}
.resources-hero h1 {
  margin:0;
  color:#10233f;
  font-size:clamp(2.0rem,5vw,3rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.resources-hero h1 span { color:#0866d5; padding:0 5px; }
.resources-hero p {
  max-width:780px;
  margin:24px auto 0;
  color:#5e6d80;
  font-size:1.04rem;
  line-height:1.8;
}

.resources-section { padding:72px 0 90px; background:#fff; }
.resources-container { width:min(1180px,calc(100% - 48px)); margin:auto; }
.resources-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:28px;
}
.section-eyebrow {
  color:#0866d5;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.15em;
}
.resources-heading h2 {
  margin:8px 0;
  color:#10233f;
  font-size:clamp(1.8rem,3vw,2.45rem);
  letter-spacing:-.03em;
}
.resources-heading p { max-width:670px; margin:0; color:#6a7788; line-height:1.7; }
.resource-count {
  flex:0 0 auto;
  padding:10px 14px;
  border:1px solid #e0e9f3;
  border-radius:999px;
  background:#f8fbfe;
  color:#53647a;
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap;
}

.resource-search {
  position:relative;
  display:flex;
  align-items:center;
  max-width:780px;
  margin:0 auto 48px;
}
.resource-search > i {
  position:absolute;
  left:20px;
  color:#7b8ba0;
  pointer-events:none;
}
.resource-search input {
  width:100%;
  height:58px;
  padding:0 54px 0 52px;
  border:1px solid #dce6f1;
  border-radius:16px;
  outline:none;
  background:#fff;
  color:#1a2d47;
  font:inherit;
  box-shadow:0 8px 30px rgba(25,67,112,.06);
}
.resource-search input:focus {
  border-color:#8db9ea;
  box-shadow:0 10px 34px rgba(8,102,213,.10);
}
.resource-search button {
  position:absolute;
  right:11px;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:10px;
  background:#eef5fc;
  color:#55708e;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:scale(.92);
  transition:.2s ease;
}
.resource-search button.visible { opacity:1; pointer-events:auto; transform:scale(1); }

.resource-message { margin:0 auto 28px; text-align:center; color:#68778a; font-size:.95rem; }
.resource-message i { margin-right:7px; }
.resource-message.error { color:#a34848; }

.class-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.class-card {
  min-width:0;
  padding:26px;
  border:1px solid #e1e9f2;
  border-radius:22px;
  background:linear-gradient(145deg,#fff 0%,#fbfdff 100%);
  box-shadow:0 12px 35px rgba(25,67,112,.06);
  transition:.22s ease;
}
.class-card:hover {
  transform:translateY(-4px);
  border-color:#cbddec;
  box-shadow:0 18px 44px rgba(25,67,112,.10);
}
.class-card-top { display:flex; align-items:flex-start; gap:16px; }
.class-icon {
  width:52px; height:52px; flex:0 0 52px;
  display:flex; align-items:center; justify-content:center;
  border-radius:15px;
  background:#edf6ff;
  border:1px solid #d9eafa;
  font-size:1.55rem;
}
.class-title { min-width:0; }
.class-title > span {
  display:block; margin-bottom:5px; color:#6f8094;
  font-size:.76rem; font-weight:800; letter-spacing:.08em;
}
.class-title h3 { margin:0; color:#172b46; font-size:1.05rem; line-height:1.4; }
.class-divider { height:1px; margin:22px 0 17px; background:#e9eef4; }
.resource-links { display:grid; gap:9px; }
.resource-link {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:8px 11px;
  border:1px solid transparent;
  border-radius:13px;
  color:#31465f;
  text-decoration:none;
  transition:.18s ease;
}
.resource-link:hover {
  background:#f2f8fe;
  border-color:#dbeaf8;
  color:#0866d5;
  transform:translateX(2px);
}
.resource-link-icon {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px;
  background:#f6f9fc; font-size:1rem;
}
.resource-link-text { min-width:0; font-size:.9rem; font-weight:650; line-height:1.35; }
.resource-link > i { color:#9aa9ba; font-size:.72rem; }
.resource-link:hover > i { color:#0866d5; }

.no-results {
  padding:60px 20px;
  border:1px dashed #d7e2ed;
  border-radius:20px;
  background:#fbfdff;
  text-align:center;
}
.no-results-icon {
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 15px; border-radius:16px; background:#eef5fc;
  color:#6e8cab; font-size:1.35rem;
}
.no-results h3 { margin:0 0 7px; color:#253951; }
.no-results p { margin:0; color:#718094; }

@media (max-width:1050px) {
  .class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .resources-hero-inner { padding:62px 24px 58px; }
  .resources-hero h1 { font-size:2.45rem; }
  .resources-section { padding:54px 0 70px; }
  .resources-container { width:min(100% - 32px,600px); }
  .resources-heading { display:block; margin-bottom:24px; }
  .resource-count { display:inline-block; margin-top:16px; }
  .resource-search { margin-bottom:34px; }
  .class-grid { grid-template-columns:1fr; gap:18px; }
  .class-card { padding:22px; }
}
@media (max-width:480px) {
  .resources-hero-inner { padding:52px 18px 48px; }
  .resources-hero h1 { font-size:2.05rem; }
  .resources-container { width:min(100% - 24px,600px); }
  .resources-heading h2 { font-size:1.8rem; }
  .resource-search input { height:54px; padding-left:46px; font-size:.9rem; }
  .resource-search > i { left:17px; }
  .class-card { padding:19px; border-radius:19px; }
  .class-icon { width:48px; height:48px; flex-basis:48px; }
  .resource-link { grid-template-columns:28px minmax(0,1fr) 16px; gap:8px; padding:8px 7px; }
}