/* LIVZO — Directory pages
 *
 * The three listing pages that feed the society profile: Explore Societies
 * (societies.php), the location pages (locations.php) and Compare (compare.php).
 *
 * They share one small vocabulary (`.lz-dir__*`) and reuse the existing card components —
 * `.lz-society` for a society card and `.lz-compare__*` for the comparison — so nothing
 * here re-draws a card that already exists.
 *
 * Mobile-first: one column, full-width controls, then wider grids at 640 / 1024.
 */

/* ===== 1. Page scaffolding ===== */

.lz-dir {
    position: relative;
    /* Clears the fixed header: the eyebrow / breadcrumb are the first thing in this block
       and were sitting behind it. */
    padding: calc(var(--lz-header-h) + clamp(10px, 1.4vw, 22px)) 0 clamp(56px, 8vw, 96px);
}

.lz-dir__wash {
    position: absolute;
    inset: -20% -10% auto;
    height: 60%;
    background: radial-gradient(50% 60% at 30% 0%, rgba(109, 74, 255, 0.10), rgba(109, 74, 255, 0) 70%);
    pointer-events: none;
}

.lz-dir__inner {
    position: relative;
    display: grid;
    gap: clamp(20px, 3vw, 32px);
}

/* ===== 2. Header ===== */

.lz-dir__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

/* The head's type block. It owns the column width and the stack gap, so the head itself can
   become a two-column hero without the copy changing (Explore Societies). */
.lz-dir__head-copy {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    max-width: 62ch;
}

.lz-dir__eyebrow {
    margin: 0;
    color: var(--lz-accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lz-dir__title {
    margin: 0;
    color: var(--lz-navy);
    font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.lz-dir__lead {
    margin: 0;
    color: var(--lz-body);
    font-size: 0.98rem;
    line-height: 1.62;
}

/* ===== 3. Breadcrumbs ===== */

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

.lz-dir__crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lz-dir__crumb-link {
    color: var(--lz-body);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--lz-t) var(--lz-ease-out);
}

.lz-dir__crumb-link:hover {
    color: var(--lz-accent);
}

.lz-dir__crumb-sep {
    display: inline-flex;
    color: var(--lz-muted);
}

.lz-dir__crumb-sep .lz-icon {
    width: 13px;
    height: 13px;
}

.lz-dir__crumb-current {
    color: var(--lz-navy);
    font-size: 0.82rem;
    font-weight: 700;
}

.lz-dir__back {
    margin: 0;
}

.lz-dir__back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-block: 6px;
    color: var(--lz-body);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--lz-t) var(--lz-ease-out);
}

.lz-dir__back-link:hover {
    color: var(--lz-accent);
}

.lz-dir__back-ico {
    width: 16px;
    height: 16px;
    transition: transform var(--lz-t) var(--lz-ease-out);
}

.lz-dir__back-link:hover .lz-dir__back-ico {
    transform: translateX(-3px);
}

/* ===== 4. Filter pills ===== */

.lz-dir__filters {
    display: grid;
    gap: 16px;
}

.lz-dir__filter-group {
    display: grid;
    gap: 8px;
}

.lz-dir__filter-label {
    margin: 0;
    color: var(--lz-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lz-dir__pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.lz-dir__pills::-webkit-scrollbar {
    display: none;
}

.lz-dir__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background: var(--lz-surface);
    color: var(--lz-body);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--lz-t) var(--lz-ease-out),
                background var(--lz-t) var(--lz-ease-out),
                color var(--lz-t) var(--lz-ease-out),
                box-shadow var(--lz-t) var(--lz-ease-out);
}

.lz-dir__pill:hover {
    border-color: var(--lz-accent-soft-2);
    color: var(--lz-accent);
}

.lz-dir__pill.is-active {
    border-color: transparent;
    background: var(--lz-accent);
    color: #fff;
    box-shadow: var(--lz-sh-accent);
}

.lz-dir__pill-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: var(--lz-r-pill);
    background: var(--lz-accent-soft);
    color: var(--lz-accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.lz-dir__pill.is-active .lz-dir__pill-count {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.lz-dir__pill-ico {
    display: inline-flex;
    color: inherit;
}

.lz-dir__pill-ico .lz-icon {
    width: 15px;
    height: 15px;
}

.lz-dir__count {
    margin: 0;
    color: var(--lz-body);
    font-size: 0.86rem;
    font-weight: 500;
}

/* ===== 5. Card grids ===== */

.lz-dir__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lz-dir__item {
    min-width: 0;
}

.lz-dir__item .lz-society {
    height: 100%;
}

/* ===== 6. Empty state ===== */

.lz-dir__empty {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: clamp(30px, 5vw, 52px) 20px;
    border: 1px dashed var(--lz-line-2);
    border-radius: var(--lz-r-lg);
    background: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
    text-align: center;
}

.lz-dir__empty-art {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--lz-accent-soft);
    color: var(--lz-accent);
}

.lz-dir__empty-title {
    margin: 4px 0 0;
    color: var(--lz-navy);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lz-dir__empty-text {
    margin: 0;
    max-width: 44ch;
    color: var(--lz-body);
    font-size: 0.92rem;
    line-height: 1.6;
}

.lz-dir__empty-cta {
    margin-top: 8px;
}

/* ===== 7. Compare ===== */

.lz-dir__chosen {
    display: grid;
    gap: 10px;
}

.lz-dir__chosen-label {
    margin: 0;
    color: var(--lz-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lz-dir__chosen-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lz-dir__chosen-item {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
}

.lz-dir__chosen-link {
    display: grid;
    gap: 1px;
    padding: 9px 14px;
    text-decoration: none;
    transition: background var(--lz-t) var(--lz-ease-out);
}

.lz-dir__chosen-link:hover {
    background: var(--lz-accent-soft);
}

.lz-dir__chosen-name {
    color: var(--lz-navy);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lz-dir__chosen-meta {
    color: var(--lz-body);
    font-size: 0.74rem;
    font-weight: 500;
}

.lz-dir__chosen-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-left: 1px solid var(--lz-line);
    color: var(--lz-body);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--lz-t) var(--lz-ease-out), color var(--lz-t) var(--lz-ease-out);
}

.lz-dir__chosen-remove:hover {
    background: var(--lz-red-soft);
    color: var(--lz-red-600);
}

.lz-dir__chosen-remove .lz-icon {
    width: 14px;
    height: 14px;
}

/* A plain grid here: the homepage carousel is not needed on a comparison page. */
.lz-dir__compare-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lz-dir__hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--lz-accent-soft-2);
    border-radius: var(--lz-r-md);
    background: var(--lz-accent-soft);
}

.lz-dir__hint-ico {
    display: inline-flex;
    flex: none;
    color: var(--lz-accent);
}

.lz-dir__hint-body {
    display: grid;
    gap: 3px;
    margin: 0;
}

.lz-dir__hint-body strong {
    color: var(--lz-navy);
    font-size: 0.94rem;
    font-weight: 700;
}

.lz-dir__hint-body span {
    color: var(--lz-body);
    font-size: 0.88rem;
    line-height: 1.55;
}

.lz-dir__add {
    display: grid;
    gap: 8px;
    padding-top: clamp(20px, 3vw, 30px);
    border-top: 1px solid var(--lz-line);
}

.lz-dir__add-label {
    margin: 0;
    color: var(--lz-navy);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lz-dir__add-lead {
    margin: 0;
    color: var(--lz-body);
    font-size: 0.9rem;
    line-height: 1.55;
}

.lz-dir__pill.is-add {
    border-style: dashed;
}

.lz-dir__note {
    margin: 0;
    color: var(--lz-body);
    font-size: 0.82rem;
    line-height: 1.6;
}

/* ===== 8. Wider screens ===== */

@media (min-width: 640px) {
    .lz-dir__grid,
    .lz-dir__compare-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lz-dir__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lz-dir__compare-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== 9. Reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
    .lz-dir__pill {
        transition: none;
    }
}

/* ==========================================================================
   10. Explore Societies — this page's own design

   Everything below is scoped to `.lz-dir--societies`, because `locations.php` renders the
   same `.lz-dir__*` chrome and must not change with it. Three deliberate moves:

     1. the header became a tinted panel with a row of counted facts,
     2. the filters sit in a card under a real search field (the hero search submits here,
        so this page has to give the term back for editing),
     3. the cards lost the purple veil over their images, and the two white chips that sit
        on the photo now carry their own edge instead of relying on it.
   ========================================================================== */

/* The wash is purely decorative and its `-10%` side insets pushed the document 10% wider than
   the viewport (masked by `body { overflow-x: hidden }`, but real). Pulled inside the section
   on this page only — the glow is unchanged, the overflow goes. */
.lz-dir--societies .lz-dir__wash {
    inset: -20% 0 auto;
}

/* One explicit column. The implicit `auto` track this replaced was sized by its widest item's
   min-content, and the sort pill row's min-content is ~295px — enough to widen the whole
   document by 25px at 320 (gotcha 3). `minmax(0, 1fr)` keeps the column at the container's
   width and lets the pill row scroll inside it instead. */
.lz-dir--societies .lz-dir__inner {
    grid-template-columns: minmax(0, 1fr);
}

/* --- Headings, a step down from the shared listing scale --- */

.lz-dir--societies .lz-dir__head {
    gap: clamp(20px, 2.6vw, 30px);
    max-width: none;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--lz-accent-soft-2);
    border-radius: var(--lz-r-xl);
    background-color: var(--lz-accent-soft);
    overflow: hidden;
    position: relative;
}

.lz-dir--societies .lz-dir__head-copy {
    gap: 9px;
}

/* A decorative hairline along the top edge — no text sits on it, so the panel's own
   background stays a flat, computable colour. */
.lz-dir--societies .lz-dir__head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background-image: linear-gradient(
        90deg,
        var(--lz-accent) 0%,
        var(--lz-accent-700) 42%,
        rgba(109, 74, 255, 0) 100%
    );
}

.lz-dir--societies .lz-dir__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.11em;
}

.lz-dir--societies .lz-dir__title {
    font-size: clamp(1.4rem, 1.16rem + 1.05vw, 1.98rem);
    line-height: 1.14;
    text-wrap: balance;
}

.lz-dir--societies .lz-dir__lead {
    max-width: 58ch;
    font-size: 0.93rem;
}

.lz-dir--societies .lz-dir__title-accent {
    color: var(--lz-accent);
}

/* --- The two-column hero (Explore Societies) ---
   The head is already the tinted panel; an image turns it into copy + artwork. Below 980px
   the artwork simply stacks under the copy at full width. */

@media (min-width: 980px) {
    .lz-dir__head--hero {
        grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
        align-items: center;
    }
}

/* The copy column carries the hero, so it takes the bigger scale. */
.lz-dir--societies .lz-dir__head--hero .lz-dir__eyebrow {
    font-size: 0.78rem;
}

.lz-dir--societies .lz-dir__head--hero .lz-dir__title {
    font-size: clamp(1.72rem, 1.34rem + 1.55vw, 2.5rem);
}

.lz-dir--societies .lz-dir__head--hero .lz-dir__lead {
    max-width: 54ch;
    font-size: clamp(0.98rem, 0.94rem + 0.28vw, 1.08rem);
}

.lz-dir--societies .lz-dir__head--hero .lz-dir__head-chip {
    font-size: 0.86rem;
}

.lz-dir__hero-media {
    min-width: 0;
}

/* The artwork stays a step down from the copy — a banner beside the hero, not a second hero. */
.lz-dir__hero-img {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-inline: auto;
    border-radius: var(--lz-r-lg);
    box-shadow: var(--lz-sh-2);
}

/* --- The header's fact chips --- */

.lz-dir__head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.lz-dir__head-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 7px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
    color: var(--lz-navy);
    font-size: 0.81rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lz-dir__head-chip-ico {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent);
}

.lz-dir__head-chip-ico .lz-icon {
    width: 13px;
    height: 13px;
}

.lz-dir__head-chip--green .lz-dir__head-chip-ico {
    background-color: var(--lz-green-soft);
    color: var(--lz-green-600);
}

/* --- The search + filter card --- */

.lz-dir__panel {
    display: grid;
    /* Same trap one level down: an implicit `auto` column is sized by its items' min-content
       (the search row's is ~295px at 320), which would overflow the panel. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 2vw, 22px);
    padding: clamp(16px, 2.2vw, 24px);
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-xl);
    background-color: var(--lz-surface);
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 26px 54px -42px rgba(11, 27, 51, 0.5);
}

.lz-dir__search {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
}

.lz-dir__search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 220px;
    min-width: 0;
    height: 52px;
    padding: 0 12px 0 15px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-bg);
    transition: border-color 0.24s var(--lz-ease-out), box-shadow 0.24s var(--lz-ease-out),
        background-color 0.24s var(--lz-ease-out);
}

.lz-dir__search-field:focus-within {
    border-color: var(--lz-accent-ring);
    background-color: var(--lz-surface);
    box-shadow: 0 0 0 4px var(--lz-accent-soft);
}

.lz-dir__search-ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lz-accent);
}

.lz-dir__search-ico .lz-icon {
    width: 17px;
    height: 17px;
}

.lz-dir__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    color: var(--lz-navy);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    outline: none;
}

.lz-dir__search-input::placeholder {
    color: var(--lz-muted);
}

/* WebKit draws its own clear button, which would sit beside ours. */
.lz-dir__search-input::-webkit-search-cancel-button,
.lz-dir__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.lz-dir__search-clear {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
    transition: background-color 0.2s var(--lz-ease), color 0.2s var(--lz-ease);
}

.lz-dir__search-clear:hover {
    background-color: var(--lz-accent-soft-2);
    color: var(--lz-accent-700);
}

.lz-dir__search-clear .lz-icon {
    width: 13px;
    height: 13px;
}

.lz-dir__search-btn {
    flex: none;
    height: 52px;
    padding-inline: clamp(20px, 2.4vw, 28px);
}

/* --- Filter groups, lighter and labelled --- */

.lz-dir--societies .lz-dir__filters {
    gap: clamp(12px, 1.6vw, 16px);
}

.lz-dir--societies .lz-dir__filter-group {
    gap: 9px;
}

.lz-dir--societies .lz-dir__filter-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--lz-body);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.lz-dir--societies .lz-dir__filter-ico {
    display: grid;
    place-items: center;
    color: var(--lz-accent);
}

.lz-dir--societies .lz-dir__filter-ico .lz-icon {
    width: 13px;
    height: 13px;
}

.lz-dir--societies .lz-dir__pill {
    padding: 9px 15px;
    border-color: var(--lz-line-2);
    font-size: 0.84rem;
    transition: border-color 0.22s var(--lz-ease-out), background-color 0.22s var(--lz-ease-out),
        color 0.22s var(--lz-ease-out), box-shadow 0.22s var(--lz-ease-out),
        transform 0.22s var(--lz-ease-out);
}

.lz-dir--societies .lz-dir__pill:hover {
    transform: translateY(-1px);
}

/* The chosen pill keeps its filled accent — only the others take the hover tint. */
.lz-dir--societies .lz-dir__pill:not(.is-active):hover {
    border-color: var(--lz-accent-ring);
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

/* The count badge is a hair under 4.5:1 in the shared rule (#6d4aff on #f0edff = 4.48).
   One step darker clears it at ~8:1. */
.lz-dir--societies .lz-dir__pill-count {
    color: var(--lz-accent-700);
}

/* --- The results bar: the live count, with sort beside it --- */

.lz-dir--societies .lz-dir__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-top: clamp(14px, 1.8vw, 18px);
    border-top: 1px solid var(--lz-line);
}

.lz-dir--societies .lz-dir__bar .lz-dir__filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* A scroll container is still a flex item: without this its content's min-content counts
   toward the bar's (gotcha 3 — the same reason the pills row carries it anywhere it is placed). */
.lz-dir--societies .lz-dir__bar .lz-dir__pills {
    min-width: 0;
    padding-bottom: 0;
}

.lz-dir--societies .lz-dir__count {
    color: var(--lz-navy);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* --- The cards --- */

/* The purple veil over the imagery is gone on this page at the user's request. The two white
   chips that sit on the photo (the badge and the compare chip) take their own edge instead,
   so they still read on a pale image. */
.lz-dir--societies .lz-society__veil {
    display: none;
}

.lz-dir--societies .lz-society__badge,
.lz-dir--societies .lz-compare__add {
    border-color: var(--lz-line-2);
    box-shadow: 0 10px 22px -14px rgba(11, 27, 51, 0.55);
}

.lz-dir--societies .lz-society__name {
    font-size: 1rem;
}

/* The location line: `--lz-muted` is 3.83:1 on white (the shared issue §17/§21 records).
   Scoped to this page, where the cards are the main content. */
.lz-dir--societies .lz-society__meta {
    color: var(--lz-body);
}

/* Quieter at rest, an accent-tinted lift on hover. */
.lz-dir--societies .lz-society {
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 18px 40px -32px rgba(11, 27, 51, 0.5);
}

.lz-dir--societies .lz-society:hover,
.lz-dir--societies .lz-society:focus-within {
    transform: translateY(-6px);
    border-color: var(--lz-accent-soft-2);
    box-shadow: 0 2px 4px rgba(11, 27, 51, 0.05), 0 30px 58px -28px rgba(109, 74, 255, 0.42);
}

.lz-dir--societies .lz-dir__grid {
    gap: clamp(16px, 2vw, 22px);
}

/* --- Empty state --- */

.lz-dir--societies .lz-dir__empty {
    border-style: solid;
    border-color: var(--lz-line);
    border-radius: var(--lz-r-xl);
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 26px 54px -44px rgba(11, 27, 51, 0.5);
}

.lz-dir--societies .lz-dir__empty-art {
    width: 58px;
    height: 58px;
    box-shadow: 0 0 0 7px var(--lz-accent-soft);
}

.lz-dir--societies .lz-dir__empty-title {
    font-size: 1.02rem;
}

/* ===== 11. Explore Societies — narrow screens ===== */

@media (max-width: 600px) {
    .lz-dir--societies .lz-dir__head {
        padding: 20px 18px;
    }

    .lz-dir__panel {
        padding: 16px 14px;
    }

    /* The field and its action stack, both full width. */
    .lz-dir__search-field,
    .lz-dir__search-btn {
        flex: 1 1 100%;
    }

    .lz-dir--societies .lz-dir__bar {
        gap: 12px;
    }

    .lz-dir--societies .lz-dir__bar .lz-dir__filter-group {
        width: 100%;
    }
}

/* ===== 12. Explore Societies — reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
    .lz-dir--societies .lz-dir__pill,
    .lz-dir--societies .lz-dir__search-field,
    .lz-dir--societies .lz-dir__search-clear {
        transition: none;
    }

    .lz-dir--societies .lz-dir__pill:hover,
    .lz-dir--societies .lz-society:hover,
    .lz-dir--societies .lz-society:focus-within {
        transform: none;
    }
}