/* ============================================================================
   Directory pages (/agents, /landlords) - hero photo, county index, card tweaks,
   dark FAQ extras. Loaded after landlord-landing.css + integrations.css.
   ============================================================================ */
/* Hero photo: Jack's "UK High Street" shot (cut to 1600w / 2560w WebP; the SVG wrapper is never
   served). Brighter than the integrations photo, so the left-to-right scrim is a touch heavier. */
.landlord-hero.landlord-hero--image.landlord-hero--directory {
    background-image:
        linear-gradient(to right, rgba(28,28,28,0.92) 0%, rgba(28,28,28,0.78) 42%, rgba(28,28,28,0.45) 68%, rgba(28,28,28,0.22) 100%),
        url('/assets-v2/images/agents-hero-high-street-1600.webp');
    background-position: center 62%;
}
@media (min-width: 1600px) {
    .landlord-hero.landlord-hero--image.landlord-hero--directory {
        background-image:
            linear-gradient(to right, rgba(28,28,28,0.92) 0%, rgba(28,28,28,0.78) 42%, rgba(28,28,28,0.45) 68%, rgba(28,28,28,0.22) 100%),
            url('/assets-v2/images/agents-hero-high-street-2560.webp');
    }
}
/* Proof line ("198 commercial property agents listing with Boxpod."): same style as the blurb, whole line bold */
.landlord-hero--directory .landlord-hero-proof { font-family: var(--font-primary); font-size: 19px; line-height: 155%; font-weight: var(--fw-700); color: rgba(255, 255, 255, 0.85); }
@media (max-width: 1199px) { .landlord-hero--directory .landlord-hero-proof { font-size: 18px; } }
@media (max-width: 767px) { .landlord-hero--directory .landlord-hero-proof { font-size: 16px; } }
/* Second lead line ("Are you an agent?") sits close under the blurb; orange link like elsewhere */
.landlord-hero--directory p.landlord-hero-lead + p.landlord-hero-lead { margin-top: -16px; }
.landlord-hero--directory .landlord-hero-lead a { color: var(--primary); font-weight: 600; text-decoration: none; }
.landlord-hero--directory .landlord-hero-lead a:hover { text-decoration: underline; }
/* Directory: county headings with a subtle grey rule, round count badge, tidy card footer */
.agents-county-heading { border-bottom: 0; border-top: 1px solid #E5E5E5; padding: 28px 0 0; margin: 20px 0 28px; } /* equal space rule->heading and heading->cards */
.agents-county-heading:first-of-type { border-top: 0; padding-top: 0; margin-top: 20px; }
.agents-county-count { flex-shrink: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.agents-card-wrap .property-card-type::after { content: none; }
.agents-card-wrap .property-card-type { transition: color 0.2s ease; }
.agents-card-wrap .property-card-link:hover .property-card-type,
.agents-card-wrap .property-card-link:focus .property-card-type { color: var(--primary); }
/* Dark FAQ: answer paragraphs + links */
.faq-section.landlord-faq .faq-answer p { margin: 0; }
.faq-section.landlord-faq .faq-answer a { color: var(--primary); text-decoration: underline; }
/* County index: A-Z in four columns (two on phones), footer-style links, orange on hover; smooth jump */
html { scroll-behavior: smooth; }
.agents-county-heading[id] { scroll-margin-top: 96px; }
.agents-county-index { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.agents-county-index li { margin: 0; padding: 0; line-height: 1.35; }
.agents-county-index a { font-family: var(--font-primary); font-size: 15px; font-weight: 400; color: #555; text-decoration: none; transition: color 0.2s ease; }
.agents-county-index a:hover, .agents-county-index a:focus { color: var(--primary); }
@media (min-width: 768px) { .agents-county-index { grid-template-columns: repeat(4, 1fr); gap: 12px 32px; } }
/* Buttons that anchor down the page (.hero-btn-down): arrow starts pointing right, swings to
   straight down on hover. Works for both the white (.about-btn-secondary) and dark (.btn-primary) styles. */
.landlord-hero-ctas .hero-btn-down .arrow img { transform: rotate(45deg); transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out; }
.landlord-hero-ctas .hero-btn-down:hover .arrow img,
.landlord-hero-ctas .hero-btn-down:focus .arrow img,
.landlord-hero-ctas .hero-btn-down:focus-within .arrow img { transform: rotate(135deg); }

/* /landlords hero: the warehouse-interior shot from the homepage carousel (banner-bg.png, as WebP).
   Darker image than the high street, so the standard scrim is enough. */
.landlord-hero.landlord-hero--image.landlord-hero--directory.landlord-hero--landlords {
    background-image:
        linear-gradient(to right, rgba(28,28,28,0.90) 0%, rgba(28,28,28,0.70) 42%, rgba(28,28,28,0.28) 68%, rgba(28,28,28,0.06) 100%),
        url('/assets-v2/images/landlords-hero-warehouse.webp');
    background-position: center 55%;
}

/* Dark hero button (global .btn-primary) at the standard 48px */
.landlord-hero-ctas .hero-btn-dark { min-height: 48px; box-sizing: border-box; line-height: 16px; }
@media (max-width: 767px) { .landlord-hero-ctas .hero-btn-dark { width: 100%; justify-content: center; } }