/* ============================================================
   Properties by County (Home/HomeCounties) - page redesign.
   Ported from ui_changes. Navy comes from var(--PrimaryColorValue),
   teal from var(--SecondaryColorvalue), so the page follows the brand
   color set in admin rather than a hardcoded hex.

   Typography: unlike the ui_changes original, this port declares NO
   font-family anywhere - all text inherits the site's existing
   'Source Sans Pro' stack. Sizes/weights/spacing are kept as designed.

   Every selector is namespaced under the .counties-page root class on
   the section wrapper, so nothing can leak to other views. Classes are
   prefixed .pbc-* so they never collide with the legacy
   .gallery/.gallery-item/.set-bg markup (which the Masonry + set-bg JS
   still hook onto) - this page no longer uses those.
   ============================================================ */

/* Light-gray page background behind the white county cards. */
.counties-page {
    background: #F5F6F7;
}

/* ---------- Header band ---------- */
/* Simplified banner: heading only, on the page's light background (no navy
   hero block), with the same short teal underline the homepage section
   headings use (60x3px #30caa0, centered - see IndexCSS .ezw-avail rule). */
.counties-page .pbc-head {
    position: relative;
    padding: 40px 24px 26px;
    text-align: center;
}

.counties-page .pbc-head h1 {
    position: relative;
    font-size: clamp(1.7rem, 3.4vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
    padding-bottom: 14px;
    color: #333333;
    text-wrap: balance;
    text-transform: capitalize;
}

    .counties-page .pbc-head h1::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: #30caa0;
        border-radius: 2px;
    }

/* ---------- Grid ---------- */
.counties-page .pbc-wrap {
    max-width: 1180px;
    /* The old -48px pulled the cards up into the tall navy hero; with the
       compact light banner the grid sits normally below the heading. */
    margin: 0 auto;
    padding: 0 24px 80px;
}

.counties-page .pbc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .counties-page .pbc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .counties-page .pbc-grid {
        grid-template-columns: 1fr;
    }

    .counties-page .pbc-head {
        padding: 32px 20px 22px;
    }
}

/* ---------- Card ---------- */
.counties-page .pbc-card {
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-soft, #e6ebf1);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .counties-page .pbc-card:hover,
    .counties-page .pbc-card:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
        text-decoration: none;
        color: inherit;
        outline: none;
    }

    .counties-page .pbc-card:focus-visible {
        outline: 2px solid var(--SecondaryColorvalue);
        outline-offset: 2px;
    }

/* ---------- Media (real image OR branded placeholder) ---------- */
.counties-page .pbc-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Branded empty state: CMS navy + teal radial glow + dark corner.
       When a real image exists it's layered on top and covers this. */
    background:
        radial-gradient(circle at 30% 30%, rgba(48, 202, 160, .16), transparent 55%),
        linear-gradient(150deg, var(--PrimaryColorValue, #244565) 0%, #0e1826 100%);
}

    /* Fallback for browsers without aspect-ratio support. */
    @supports not (aspect-ratio: 1) {
        .counties-page .pbc-media {
            height: 0;
            padding-bottom: 62.5%;
        }
    }

.counties-page .pbc-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.counties-page .pbc-ph-icon {
    width: 52px;
    height: 52px;
    opacity: .9;
}

    .counties-page .pbc-ph-icon svg {
        width: 100%;
        height: 100%;
        fill: var(--SecondaryColorvalue);
    }

.counties-page .pbc-count {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(14, 24, 38, .82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 100px;
}

/* ---------- Card body ---------- */
.counties-page .pbc-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 22px;
}

.counties-page .pbc-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #16232f;
}

    .counties-page .pbc-name svg {
        width: 17px;
        height: 17px;
        flex-shrink: 0;
        fill: var(--SecondaryColorvalue);
    }

.counties-page .pbc-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--SecondaryColorvalue);
    font-size: .88rem;
    font-weight: 600;
}

    .counties-page .pbc-cta svg {
        width: 15px;
        height: 15px;
        fill: currentColor;
        transition: transform .18s ease;
    }

.counties-page .pbc-card:hover .pbc-cta svg,
.counties-page .pbc-card:focus-visible .pbc-cta svg {
    transform: translateX(4px);
}

/* ---------- Empty state (no counties returned) ---------- */
.counties-page .pbc-empty {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    color: var(--ink-soft, #5b6b7a);
    background: var(--surface, #fff);
    border: 1px solid var(--border-soft, #e6ebf1);
    border-radius: var(--radius-lg, 16px);
    padding: 48px 32px;
}

    .counties-page .pbc-empty svg {
        width: 40px;
        height: 40px;
        fill: var(--SecondaryColorvalue);
        opacity: .7;
        margin-bottom: 14px;
    }

    .counties-page .pbc-empty h2 {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--ink, #16233a);
        margin: 0 0 8px;
    }

    .counties-page .pbc-empty p {
        font-size: .95rem;
        line-height: 1.6;
        margin: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .counties-page .pbc-card,
    .counties-page .pbc-cta svg {
        transition: none;
    }

    .counties-page .pbc-card:hover,
    .counties-page .pbc-card:focus-visible {
        transform: none;
    }
}