:root{
  --offwhite:#f7f6f2;
  --surface:#ffffff;
  --text:#0e75c2;
  --muted:#475569;
  --line:rgba(15, 23, 42, 0.12);
  --shadow:0 18px 45px rgba(2, 6, 23, 0.10);
  --shadow2:0 10px 28px rgba(2, 6, 23, 0.08);
  --radius:20px;
  --accent:#0e75c2; /* TEN/MET blue */
  --accent2:#0b7a4b;
}

*{box-sizing:border-box}
.sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ==============================
   RESOURCES (keep your layout)
============================== */
.resources{
  background:var(--offwhite);
  padding:clamp(3rem, 5vw, 5.5rem) 1rem;
}
.resources__container{max-width:1180px;margin:0 auto}

.resources__header{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items:start;
  margin-bottom: 1.3rem;
}

.resources__kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800;color:var(--accent);
  letter-spacing:.02em;margin:0 0 .4rem;
}
.resources__kicker::before{
  content:"";width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  /* box-shadow:0 0 0 6px rgba(14,117,194,.10); */
}

.resources__title{
  font-size: clamp(2rem, 4.1vw, 3.1rem);
  line-height:1.06;margin:0 0 .65rem;
  color:var(--accent);letter-spacing:-.02em;
}

.resources__subtitle{
  margin:0;color:var(--muted);
  font-size: 1.05rem;line-height:1.6;max-width: 62ch;
}

.resources__controls{
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  /* border-radius: var(--radius); */
  padding: 1rem;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

.resources__search{
  position:relative;
  display:flex;align-items:center;gap:.65rem;
  padding:.75rem .85rem;
  border:1px solid var(--line);
  /* border-radius: 14px; */
  background: var(--surface);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.resources__search:focus-within{
  border-color: rgba(14,117,194,.40);
  box-shadow: 0 0 0 5px rgba(14,117,194,.12);
}
.resources__search .icon{
  width:20px;height:20px;color:rgba(15,23,42,.65);
  flex:0 0 auto;
}
.resources__search input{
  width:100%;
  border:0; outline:0;
  font-size: 1rem;
  color: #0b1b33;
  background:transparent;
}
.resources__search input::placeholder{color:rgba(71,85,105,.8)}
.resources__clear{
  width:34px;
  height:34px;
  border:0;
  /* border-radius: 10px; */
  background: rgba(2,6,23,.06);
  color:rgba(15,23,42,.85);
  font-size: 1.25rem;
  cursor:pointer;
  display:grid;place-items:center;
  transition: transform .12s ease, background .15s ease;
}
.resources__clear:hover{transform:translateY(-1px); background:rgba(2,6,23,.09)}
.resources__clear:active{transform:translateY(0px)}

.resources__filters{
  margin-top:.9rem;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.chip{
  border:1px solid var(--line);
  background: var(--surface);
  color: rgba(15,23,42,.9);
  padding:.55rem .75rem;
  /* border-radius: 999px; */
  cursor:pointer;
  font-weight:800;
  font-size:.9rem;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.chip:hover{transform:translateY(-1px)}
.chip.is-active{
  border-color: rgba(14,117,194,.35);
  background: linear-gradient(180deg, rgba(14,117,194,.12), rgba(14,117,194,.06));
  box-shadow: 0 0 0 5px rgba(14,117,194,.10);
}

.resources__stats{
  display:flex;gap:1rem;
  align-items:center;flex-wrap:wrap;
  margin: 1rem 0 1.25rem;
}
.stat{
  background: rgba(255,255,255,.82);
  border:1px solid var(--line);
  /* border-radius: 14px; */
  padding:.9rem 1rem;
  min-width: 190px;
  box-shadow: var(--shadow2);
}
.stat__num{
  display:block;
  font-size: 1.6rem;
  font-weight: 900;
  color: #0b1b33;
  letter-spacing:-.02em;
}
.stat__label{
  display:block;margin-top:.1rem;
  color: var(--muted);
  font-weight:750;font-size:.92rem;
}
.resources__hint{
  margin-left:auto;
  color: var(--muted);
  font-weight:750;
  background: rgba(255,255,255,.70);
  border:1px dashed rgba(15,23,42,.18);
  padding:.75rem 1rem;
  /* border-radius: 14px; */
}

.resources__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){
  .resources__header{grid-template-columns: 1fr;}
  .resources__hint{margin-left:0;width:100%}
  .resources__grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 620px){
  .resources__grid{grid-template-columns: 1fr;}
  .stat{min-width: 160px}
}

/* ==============================
   CARD (keep your style)
============================== */
.card{
  position:relative;
  background: var(--surface);
  border:1px solid var(--line);
  /* border-radius: 16px; */
  overflow:hidden;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;
  flex-direction:column;
  min-height: 240px;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(14,117,194,.22);
}
.card__top{
  padding: 1rem 1rem .75rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap: .85rem;
}
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .65rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .78rem;
  background: rgba(14,117,194,.10);
  color: rgba(14,117,194,.98);
  border: 1px solid rgba(14,117,194,.22);
  white-space:nowrap;
}
.card__meta{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.card__title{
  margin:0;font-size: 1.05rem;line-height:1.25;
  font-weight: 900;color: #0b1b33;
}
.card__desc{
  margin:0;color: var(--muted);
  font-weight:650;font-size:.95rem;line-height:1.45;
}
.card__info{
  padding: 0 1rem .85rem;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  color: rgba(71,85,105,.95);
  font-weight:800;font-size:.85rem;
}
.pill{
  background: rgba(2,6,23,.05);
  border: 1px solid rgba(2,6,23,.08);
  padding:.3rem .55rem;
  border-radius: 999px;
}
.card__actions{
  margin-top:auto;
  padding: 0 1rem 1rem;
  display:flex;gap:.7rem;align-items:center;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;border:0;
  /* border-radius: 12px; */
  padding:.78rem .95rem;
  font-weight: 900;
  cursor:pointer;text-decoration:none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(0px)}
.btn--primary{
  background: var(--accent);
  color:#fff;
  box-shadow: 0 10px 22px rgba(14,117,194,.20);
}
.btn--primary:hover{transform:translateY(-1px); box-shadow: 0 14px 28px rgba(14,117,194,.26)}
.btn--ghost{
  background: rgba(2,6,23,.06);
  color: rgba(15,23,42,.92);
  border: 1px solid rgba(2,6,23,.10);
}
.btn--ghost:hover{transform:translateY(-1px); background: rgba(2,6,23,.08)}

.card__icon{
  width:44px;height:44px;
  border-radius: 12px;
  background: rgba(14,117,194,.10);
  border: 1px solid rgba(14,117,194,.18);
  display:grid;place-items:center;
  flex: 0 0 auto;
  color: rgba(14,117,194,.95);
}
.card__icon svg{width:22px;height:22px}

/* ==============================
   PAGINATION (refined + clean)
   - offwhite + #0e75c2
   - no border radius (square)
   - prev/next closer
============================== */
.resources__pagination{
  margin-top: 22px;
  display:flex;
  justify-content:center;
}

/* Slim bar */
.pager{
  width: min(560px, 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;                 /* ✅ prev/next closer */
  padding: 10px 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
}

/* Clean buttons (square corners) */
.pager__btn{
  border: 1px solid rgba(14,117,194,.25);
  background: transparent;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 0;          /* ✅ no border radius */
  transition: background .15s ease, color .15s ease, transform .12s ease;
  min-width: 92px;
}
.pager__btn:hover{
  background: rgba(14,117,194,.08);
  transform: translateY(-1px);
}
.pager__btn:active{transform: translateY(0)}
.pager__btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  background: transparent;
}

/* Center "Page x of y" chip (square) */
.pager__center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 0;          /* ✅ no border radius */
  background: #0e75c2;
  border: 1px solid rgba(14,117,194,.18);
  color: #ffffff;
  font-weight: 900;
  min-width: 190px;
}

/* Strong focus states (accessibility) */
.pager__btn:focus-visible,
.pg-dot:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(14,117,194,.18);
}

/* Optional: dots row (if you use dot buttons) */
.pg-dots{
  display:flex;
  gap: 6px;
  justify-content:center;
  margin-top: 10px;
  width: min(560px, 100%);
}
.pg-dot{
  width: 38px;
  height: 38px;
  border-radius: 0;          /* ✅ no border radius */
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.92);
  font-weight: 900;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.pg-dot:hover{ background:#fff; transform: translateY(-1px); }
.pg-dot.is-active{
  background: var(--accent);
  border-color: rgba(14,117,194,.35);
  color:#fff;
}

/* Mobile: keep it clean + stacked */
@media (max-width: 520px){
  .pager{
    width: 100%;
    justify-content:space-between;
    gap: 8px;
  }
  .pager__btn{ min-width: 0; width: 34%; }
  .pager__center{ min-width: 0; width: 32%; text-align:center; }
}