/* Category pages: /<category>/<state> and /<category>/<state>/<city>
   (category-state.php, category-city.php). Result cards come from search.css. */

.cat-page {
   min-height: 70vh;
   padding: 94px 0 64px;
   background: linear-gradient(180deg, var(--bs-baby-blue) 0%, var(--bs-mist) 280px);
}

.cat-wrap {
   max-width: 960px;
}

.cat-crumbs {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 6px 8px;
   margin-bottom: 10px;
   font-size: 14px;
   color: var(--bs-slate);
}

.cat-crumbs a {
   font-weight: 600;
   text-decoration: none;
}

.cat-crumbs i {
   font-size: 10px;
   opacity: .6;
}

.cat-head {
   margin-bottom: 24px;
}

.cat-head h1 {
   margin: 0 0 6px;
   font-size: clamp(26px, 4vw, 34px);
   line-height: 1.15;
   font-weight: 800;
   letter-spacing: -0.02em;
   color: var(--bs-ink);
}

.cat-head p {
   margin: 0;
   font-size: 16px;
   color: var(--bs-slate);
}

.cat-section {
   margin-top: 28px;
}

.cat-section h2 {
   margin: 0 0 12px;
   font-size: 18px;
   font-weight: 700;
   color: var(--bs-ink);
}

/* State page: most listings */
.cat-top {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 10px;
}

.cat-top-card {
   display: grid;
   gap: 2px;
   padding: 14px 16px;
   background-color: white;
   border: 1px solid var(--bs-line);
   border-radius: 14px;
   color: var(--bs-ink);
   text-decoration: none;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.cat-top-card:hover {
   color: var(--bs-ink);
   border-color: var(--bs-line-strong);
   box-shadow: var(--bs-shadow-sm);
}

.cat-top-name {
   font-weight: 700;
   font-size: 16px;
}

.cat-top-card:hover .cat-top-name {
   color: var(--bs-lagoon);
}

.cat-top-count {
   font-size: 13.5px;
   color: var(--bs-slate);
}

/* State page: all cities */
.cat-letters {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 16px;
}

.cat-letters a {
   display: grid;
   place-items: center;
   min-width: 34px;
   height: 34px;
   padding: 0 8px;
   border: 1px solid var(--bs-line);
   border-radius: 10px;
   background-color: white;
   color: var(--bs-ink);
   font-weight: 700;
   font-size: 14px;
   text-decoration: none;
}

.cat-letters a:hover {
   border-color: var(--bs-lagoon);
   color: var(--bs-lagoon);
}

.cat-letter-group {
   padding: 16px 18px 10px;
   margin-bottom: 12px;
   background-color: white;
   border: 1px solid var(--bs-line);
   border-radius: 14px;
   scroll-margin-top: 90px;
}

.cat-letter-group h3 {
   margin: 0 0 6px;
   font-size: 18px;
   font-weight: 800;
   color: var(--bs-lagoon);
}

.cat-cities {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 0 24px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.cat-cities li {
   margin: 0;
   border-bottom: 1px solid var(--bs-mist);
}

.cat-cities a {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   padding: 8px 0;
   color: var(--bs-ink);
   text-decoration: none;
   font-weight: 500;
}

.cat-cities a:hover {
   color: var(--bs-lagoon);
}

.cat-count {
   font-size: 13px;
   color: var(--bs-slate);
   font-variant-numeric: tabular-nums;
}

/* City page: results */
.cat-results {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.cat-pager {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 12px 18px;
   margin-top: 24px;
}

.cat-pager-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 18px;
   border: 1px solid var(--bs-line-strong);
   border-radius: 999px;
   background-color: white;
   color: var(--bs-lagoon);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
}

.cat-pager-btn:hover {
   border-color: var(--bs-lagoon);
   color: var(--bs-lagoon-dark);
}

.cat-pager-status {
   font-size: 14px;
   color: var(--bs-slate);
}

/* City page: more cities */
.cat-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.cat-chips a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 14px;
   border: 1px solid var(--bs-line);
   border-radius: 999px;
   background-color: white;
   color: var(--bs-ink);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
}

.cat-chips a span {
   font-size: 12.5px;
   font-weight: 500;
   color: var(--bs-slate);
}

.cat-chips a:hover {
   border-color: var(--bs-line-strong);
   color: var(--bs-lagoon);
}

.cat-chips a.cat-chip-all {
   border-color: var(--bs-baby-blue);
   background-color: var(--bs-baby-blue);
   color: var(--bs-lagoon);
}