/* TRAUKLAR directory overview heroes, 2026-10-17. */
.directory-header.trauklar-overview-header.directory-category-hero.directory-overview-hero {
    min-height: 320px;
    padding: 28px 0;
}
.directory-header.directory-overview-hero h1 {
    max-width: min(760px, 75%);
    font-size: clamp(36px, 3.2vw, 48px);
    line-height: 1.1;
}
.directory-header.directory-overview-hero > .container > p:not(.eyebrow) {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
}
.directory-overview-hero .directory-search { margin-top: 20px; }
.directory-overview-hero + .directory-content { padding-top: 32px; }
@media (min-width: 1200px) {
    .directory-overview-hero[data-trauklar-directory-overview-hero="providers"] .directory-category-hero__background::after {
        background: linear-gradient(90deg, rgb(8 27 21 / 10%) 0%, rgb(8 27 21 / 18%) 30%, rgb(8 27 21 / 72%) 56%, rgb(8 27 21 / 78%) 100%);
    }
    .directory-overview-hero[data-trauklar-directory-overview-hero="providers"] > .container > .eyebrow,
    .directory-header.directory-overview-hero[data-trauklar-directory-overview-hero="providers"] h1,
    .directory-header.directory-overview-hero[data-trauklar-directory-overview-hero="providers"] > .container > p:not(.eyebrow),
    .directory-overview-hero[data-trauklar-directory-overview-hero="providers"] .directory-search {
        width: min(620px, 55%);
        max-width: min(620px, 55%);
        margin-left: auto;
        margin-right: 0;
        text-align: left;
    }
}
@media (max-width: 1199px) {
    .directory-header.trauklar-overview-header.directory-category-hero.directory-overview-hero {
        --directory-hero-photo-height: clamp(110px, 25vw, 160px);
        min-height: 0;
        padding: calc(var(--directory-hero-photo-height) - 16px) 0 22px;
    }
    .directory-header.directory-overview-hero h1 { max-width: 100%; font-size: clamp(30px, 4.4vw, 40px); }
    .directory-overview-hero > .container > .eyebrow { margin-bottom: 6px; }
    .directory-header.directory-overview-hero > .container > p:not(.eyebrow) { margin-top: 10px; font-size: 14px; }
    .directory-overview-hero .directory-search { margin-top: 16px; }
    .directory-overview-hero + .directory-content { padding-top: 24px; }
}
@media (max-width: 640px) {
    .directory-header.directory-overview-hero h1 { font-size: clamp(28px, 7.6vw, 34px); line-height: 1.1; }
    .directory-overview-hero .directory-search input[type="search"] { min-height: 42px; }
    .directory-overview-hero .directory-search button { min-height: 42px; }
}