/* =============================================================================================
   PUBLIC AGENT DIRECTORY LANDING PAGES
   /agents, /agents/{state}, /agents/{state}/{city}, /agents/specialty/{slug}, and the 404.

   A separate stylesheet rather than more of marketing.css because these pages have different
   priorities from the rest of the public site: they are the search-entry surface, so no layout
   shift, no additional web font, and every card sized so the grid reserves its space before the
   avatars arrive. The palette is the existing --wra-* dark navy set defined in marketing.css, so
   they read as part of the same site rather than a bolt-on.
   ============================================================================================= */

.wra-landing {
    background: var(--wra-navy);
    color: var(--wra-text);
}

.wra-landing .wra-section {
    padding: 64px 24px;
}

.wra-landing .wra-section-alt {
    background: var(--wra-navy-2);
}

.wra-landing .wra-section h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    margin: 0 0 12px;
    /* Stops a two-line heading breaking with one orphan word on the second line. */
    text-wrap: balance;
}

.wra-landing .wra-section-foot {
    margin-top: 24px;
    color: var(--wra-text-muted);
    font-size: 0.95rem;
}

.wra-landing a {
    color: var(--wra-gold);
}

.wra-landing .wra-section-foot a,
.wra-landing .wra-section-lead a {
    text-decoration: underline;
}

/* ---------- Directory hero ---------- */

.wra-dir-hero {
    text-align: left;
    padding: 112px 24px 56px;
}

.wra-dir-hero p,
.wra-dir-hero .wra-dir-hero-lead {
    margin: 0;
    /* Around 65 characters of running text. Longer lines measurably slow reading. */
    max-width: 68ch;
    color: var(--wra-text-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.wra-dir-hero h1 {
    text-align: left;
    text-wrap: balance;
    margin-bottom: 14px;
}

.wra-dir-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 0;
}

.wra-dir-stat {
    background: var(--wra-glass-bg);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    padding: 14px 20px;
    min-width: 140px;
}

.wra-dir-stat strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    /* Figures in a row of tiles line up only with tabular figures. */
    font-variant-numeric: tabular-nums;
}

.wra-dir-stat span {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wra-text-muted);
}

.wra-dir-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* ---------- Agent card grid ---------- */

.wr-dir-grid {
    display: grid;
    /* auto-fill, not auto-fit: auto-fit stretches a lone card on the last row across the full
       width, which makes an odd-numbered list look broken. */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.wr-dir-card {
    background: var(--wra-glass-bg);
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    overflow: hidden;
    transition: border-color 140ms ease, transform 140ms ease;
}

.wr-dir-card:hover {
    border-color: rgba(231, 168, 61, 0.45);
    transform: translateY(-2px);
}

.wr-dir-card-link {
    display: flex;
    gap: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}

.wr-dir-card-avatar {
    /* Explicit width/height in the markup AND here: the pair lets the browser reserve the box
       before the image arrives, which is the difference between a stable grid and a page that
       jumps as 48 avatars load. */
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--wra-navy-3);
}

.wr-dir-card-body {
    min-width: 0;
    flex: 1 1 auto;
}

.wr-dir-card-name {
    margin: 0 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    /* A long name must not push the badges out of the card. */
    overflow-wrap: anywhere;
}

.wr-dir-card-company,
.wr-dir-card-location {
    margin: 0 0 4px;
    font-size: 0.85rem;
    color: var(--wra-text-muted);
    overflow-wrap: anywhere;
}

.wr-dir-card-location i {
    margin-right: 5px;
    opacity: 0.7;
}

.wr-dir-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.wr-dir-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--wra-border);
    color: var(--wra-text-muted);
}

.wr-dir-badge.verified {
    color: var(--wra-green);
    border-color: rgba(47, 212, 138, 0.35);
    background: rgba(47, 212, 138, 0.1);
}

.wr-dir-badge.featured {
    color: var(--wra-gold);
    border-color: rgba(231, 168, 61, 0.4);
    background: rgba(231, 168, 61, 0.12);
}

.wr-dir-badge.fee {
    color: #cfe0ff;
    border-color: rgba(62, 123, 250, 0.4);
    background: rgba(62, 123, 250, 0.12);
    font-variant-numeric: tabular-nums;
}

.wr-dir-card-specialties {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
}

.wr-dir-card-specialties li {
    font-size: 0.72rem;
    color: var(--wra-text-muted);
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.wra-dir-more {
    margin-top: 26px;
    color: var(--wra-text-muted);
}

/* ---------- State / city / specialty link lists ---------- */

.wra-state-links,
.wra-city-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.wra-state-links {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.wra-city-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.wra-state-links a,
.wra-city-grid a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--wra-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--wra-text);
    text-decoration: none;
    font-size: 0.92rem;
    transition: border-color 140ms ease, background 140ms ease;
}

.wra-state-links a:hover,
.wra-city-grid a:hover {
    border-color: rgba(231, 168, 61, 0.45);
    background: rgba(231, 168, 61, 0.07);
}

.wra-city-grid strong {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.wra-state-links span,
.wra-city-grid span {
    color: var(--wra-text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wra-specialty-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.wra-specialty-chips a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--wra-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--wra-text);
    text-decoration: none;
    font-size: 0.88rem;
    transition: border-color 140ms ease, background 140ms ease;
}

.wra-specialty-chips a:hover {
    border-color: rgba(231, 168, 61, 0.45);
    background: rgba(231, 168, 61, 0.08);
}

.wra-specialty-chips span {
    font-size: 0.74rem;
    color: var(--wra-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- How referrals work ---------- */

.wra-section-explainer {
    background: var(--wra-navy-2);
    border-top: 1px solid var(--wra-border);
}

.wra-steps {
    list-style: none;
    counter-reset: wra-step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 20px;
}

.wra-steps li {
    counter-increment: wra-step;
    position: relative;
    padding: 22px 20px 20px;
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    background: rgba(255, 255, 255, 0.03);
}

/* The number IS information here, because these steps genuinely happen in this order. That is
   the only case where a numbered marker earns its place rather than decorating the layout. */
.wra-steps li::before {
    content: counter(wra-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
    border-radius: 7px;
    background: rgba(231, 168, 61, 0.15);
    color: var(--wra-gold);
    font-weight: 800;
    font-size: 0.85rem;
}

.wra-steps h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
}

.wra-steps p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--wra-text-muted);
}

.wra-explainer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
    padding: 26px;
    border: 1px solid rgba(231, 168, 61, 0.28);
    border-radius: var(--wra-radius);
    background: rgba(231, 168, 61, 0.06);
}

.wra-explainer-cta h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

.wra-explainer-cta p {
    margin: 0;
    max-width: 62ch;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--wra-text-muted);
}

.wra-explainer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wra-landing-faq {
    margin-top: 40px;
}

.wra-landing-faq h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 16px;
    color: #fff;
}

.wra-landing-faq-more {
    margin-top: 16px;
    font-size: 0.92rem;
}

/* ---------- Breadcrumbs ---------- */

.wr-breadcrumbs {
    margin: 0 0 18px;
    font-size: 0.82rem;
}

.wr-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.wr-breadcrumbs li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--wra-text-muted);
    opacity: 0.5;
}

.wr-breadcrumbs a {
    color: var(--wra-text-muted);
    text-decoration: none;
}

.wr-breadcrumbs a:hover {
    color: var(--wra-gold);
    text-decoration: underline;
}

.wr-breadcrumbs [aria-current="page"] {
    color: var(--wra-text);
    font-weight: 600;
}

/* Breadcrumbs also appear on light authenticated pages (agent profile). */
.wr-dashboard-page .wr-breadcrumbs a {
    color: var(--wr-ink-600, #5b6472);
}

.wr-dashboard-page .wr-breadcrumbs [aria-current="page"] {
    color: var(--wr-ink-900, #141922);
}

/* ---------- 404 ---------- */

.wra-notfound-hero {
    padding: 120px 24px 56px;
}

.wra-notfound-lead {
    max-width: 62ch;
    margin: 0 auto;
}

.wra-notfound-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
}

.wra-notfound-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
}

.wra-notfound-links a {
    display: block;
    padding: 18px;
    border: 1px solid var(--wra-border);
    border-radius: var(--wra-radius);
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    color: var(--wra-text);
}

.wra-notfound-links a:hover {
    border-color: rgba(231, 168, 61, 0.45);
}

.wra-notfound-links strong {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: #fff;
}

.wra-notfound-links span {
    font-size: 0.87rem;
    line-height: 1.55;
    color: var(--wra-text-muted);
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
    .wra-dir-hero {
        padding: 96px 18px 40px;
    }

    .wra-landing .wra-section {
        padding: 44px 18px;
    }

    .wra-dir-stat {
        /* Two per row, rather than one tall column of four tiles. */
        flex: 1 1 calc(50% - 7px);
        min-width: 0;
        padding: 12px 14px;
    }

    .wra-dir-stat strong {
        font-size: 1.3rem;
    }

    .wr-dir-grid {
        grid-template-columns: 1fr;
    }

    .wra-state-links {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .wra-city-grid {
        grid-template-columns: 1fr;
    }

    .wra-explainer-cta {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wr-dir-card,
    .wra-state-links a,
    .wra-city-grid a,
    .wra-specialty-chips a {
        transition: none;
    }

    .wr-dir-card:hover {
        transform: none;
    }
}