/* ==========================================================================
   Category Landing Page — parent-category icon grid + top-rated picks
   ========================================================================== */

.cl-banner {
  background: var(--grad-navy); background-size: cover; background-position: center;
  color: #fff; padding: 34px 0 30px; position: relative;
}
.cl-banner::before { content: ''; position: absolute; inset: 0; background: rgba(11,31,58,0.6); }
.cl-banner .container-xl-custom { position: relative; z-index: 1; }
.cl-title { font-size: 28px; font-weight: 800; margin: 8px 0 6px; }
.cl-sub { color: rgba(255,255,255,0.75); font-size: 13.5px; max-width: 640px; }

.view-all-link { font-size: 13px; font-weight: 700; color: #1A5FB4; display: inline-flex; align-items: center; gap: 6px; }
.view-all-link:hover { color: var(--orange); }

.cl-picks-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 992px) { .cl-picks-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .cl-picks-row { grid-template-columns: 1fr; } }

.cl-pick { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.cl-pick-media { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.cl-pick-media img { width: 100%; height: 120px; object-fit: cover; background: var(--bg); display: block; }
.cl-pick-name { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.cl-pick-name i { color: #fff; background: var(--navy); font-size: 9px; padding: 4px; border-radius: 50%; flex-shrink: 0; }
.cl-pick-loc { font-size: 11.5px; color: var(--text-muted); }

.cl-city-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-city-chip {
  font-size: 13px; font-weight: 600; color: var(--navy); background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 15px; transition: all 0.15s;
}
.cl-city-chip span { color: var(--text-muted); font-weight: 500; }
.cl-city-chip:hover { border-color: var(--orange); color: var(--orange); }

.cl-hero-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: center; background: #F8FAFC; border-radius: var(--radius-md); padding: 20px; }
.cl-hero-photo { border-radius: var(--radius-sm); overflow: hidden; height: 100%; min-height: 220px; }
.cl-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-hero-grid-items { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
@media (max-width: 900px) {
  .cl-hero-grid { grid-template-columns: 1fr; }
  .cl-hero-photo { min-height: 160px; }
  .cl-hero-grid-items { grid-template-columns: repeat(3, 1fr) !important; }
}