/* Shared Communities / Organizations directory (issue #46). Tokens only; light + dark.
 * Sidebar, chips, sort and result head reuse explore.css. */

/* Hero: fixed height, one image per tab, clipped so only the layers move. */
.directory-hero { position: relative; overflow: hidden; height: var(--directory-hero-h, 320px); min-height: 220px;
    display: flex; align-items: flex-end; color: #fff; background: var(--color-primary-600); isolation: isolate; }
@media (max-width: 767.98px) { .directory-hero { height: min(var(--directory-hero-h, 320px), 260px); } }
/* The layers themselves (position, visibility, direction-aware slide) come from hero-swipe.css / hero-swipe.js. */
.directory-hero__layer { background-repeat: no-repeat; }
/* Legibility: a fixed gentle gradient plus the owner's overlay strength. */
.directory-hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 70%),
                rgba(0, 0, 0, var(--directory-shade, 0%)); }
.directory-hero__inner { display: grid; padding-block: var(--space-6, 1.5rem); }
.directory-hero__text { grid-area: 1 / 1; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.directory-hero__text.is-active { opacity: 1; pointer-events: auto; transition-delay: .12s; }
.directory-hero__eyebrow { margin: 0 0 .35rem; font-family: var(--font-family-body, inherit); font-size: .8rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.directory-hero__title { margin: 0 0 .35rem; font-family: var(--font-family-heading, inherit); font-weight: 400; font-synthesis: none;
    font-size: clamp(1.8rem, 4vw, 2.8rem); color: inherit; }
.directory-hero__lead { margin: 0; max-width: 40rem; font-family: var(--font-family-body, inherit); font-size: 1.05rem; opacity: .95; }

.directory-body { padding-block: var(--space-6, 1.5rem) var(--space-8, 2rem); }

/* Tabs: two equal pills. */
.directory-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: 28rem; margin-bottom: var(--space-4, 1rem); }
.directory-tab { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .5rem 1rem; border-radius: 999px;
    border: 1px solid var(--border-default, var(--color-secondary-200)); background: var(--bg-primary, transparent); color: inherit;
    text-decoration: none; font-weight: 500; }
.directory-tab:hover { border-color: var(--bs-primary, var(--color-primary-500)); }
.directory-tab.is-active { background: var(--bs-primary, var(--color-primary-500)); border-color: transparent; color: var(--text-on-primary, #fff); }
.directory a:focus-visible, .directory button:focus-visible, .directory input:focus-visible, .directory select:focus-visible, .directory [tabindex="-1"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--bs-primary, var(--color-primary-500)) 55%, transparent); outline-offset: 2px; }
.directory [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.directory-search { display: flex; gap: .5rem; margin-bottom: var(--space-6, 1.5rem); }
.directory .directory-search .directory-search__q { border-radius: 999px; padding: .65rem 1.25rem; min-width: 0; flex: 1 1 auto; }
.directory-search__btn { border-radius: 999px; padding-inline: 1.5rem; }

/* Results: loading + error states. The swap never changes the layout height abruptly. */
.directory-results-wrap, [data-directory-results] { transition: opacity .15s ease; }
[data-directory-results].is-loading { opacity: .5; pointer-events: none; }
.directory-error { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--radius-md, .6rem);
    border: 1px solid var(--color-danger-300, #e8a3a3); background: var(--color-danger-50, #fdf0f0); color: var(--color-danger-800, #7a1f1f); }

@media (prefers-reduced-motion: reduce) {
    .directory-hero__text, [data-directory-results] { transition: none !important; }
}