/* ============================================================
   MyTrafficBuzz — Locations

   The district and state link grids used across /india.

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ---------- location grids ---------- */
.district-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.district-list__link{padding:13px 16px;background:var(--card);border:1px solid var(--line);border-radius:11px;font-weight:500;font-size:14px;color:var(--txt);transition:var(--t);display:flex;align-items:center;gap:8px}
.district-list__link:hover{border-color:rgba(226,58,78,.55);color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh);background:var(--card)}
.state-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.state-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:none;transition:var(--t);display:block}
.state-card:hover{transform:translateY(-5px);box-shadow:var(--shh);border-color:rgba(123,91,245,.35)}
.state-card__top{background:var(--aur),var(--g3);padding:22px;color:var(--wh);position:relative;overflow:hidden}
.state-card__top h3{font-size:20px;margin-bottom:3px;color:#fff}
.state-card__top span{font-size:13px;color:rgba(255,255,255,.75)}
.state-card__body{padding:18px 22px}
.state-card__body p{font-size:13.5px;color:var(--txt);margin-bottom:14px}
.state-card__body .btn{font-size:12.5px;padding:8px 18px}