/* ==========================================================================
   LocalGen — Hub (annuaire) front-end styles
   Scoped entirely under #lap-hub. Composed ID+class selectors (specificity
   1-1-0) defeat most Elementor/theme rules without !important.
   No bare-tag styling. Spacing on an 8px grid. Units in px.
   ========================================================================== */

/* Cabinet silos: responsive auto-fit grid, no overflow at any width. */
#lap-hub {
    --lap-hub-accent: #2563eb;
    --lap-hub-accent-soft: #eff4ff;
    --lap-hub-ink: #1d2327;
    --lap-hub-muted: #5b6470;
    --lap-hub-border: #e4e7ec;
    --lap-hub-surface: #ffffff;
    --lap-hub-radius: 12px;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 0;
    color: var(--lap-hub-ink);
}

#lap-hub, #lap-hub * {
    box-sizing: border-box;
}

#lap-hub .lap-hub-intro {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--lap-hub-muted);
}

#lap-hub .lap-hub-intro p {
    margin: 0 0 12px;
}

#lap-hub .lap-hub-cabinet {
    margin: 0;
    padding: 24px;
    background: var(--lap-hub-surface);
    border: 1px solid var(--lap-hub-border);
    border-radius: var(--lap-hub-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

#lap-hub .lap-hub-cabinet-header {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

#lap-hub .lap-hub-cabinet-name {
    margin: 0 0 4px;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lap-hub-ink);
}

#lap-hub .lap-hub-cabinet-link {
    color: var(--lap-hub-ink);
    text-decoration: none;
    transition: color 150ms ease-out;
}

#lap-hub .lap-hub-cabinet-link:hover {
    color: var(--lap-hub-accent);
    text-decoration: underline;
}

#lap-hub .lap-hub-cabinet-link:focus-visible {
    outline: 2px solid var(--lap-hub-accent);
    outline-offset: 2px;
}

#lap-hub .lap-hub-cabinet-city {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--lap-hub-accent);
    overflow-wrap: anywhere;
}

#lap-hub .lap-hub-cabinet-desc {
    margin: 12px 0 16px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lap-hub-muted);
}

#lap-hub .lap-hub-cabinet-desc p {
    margin: 0 0 8px;
}

/* City list: wrapping pills. */
#lap-hub .lap-hub-cities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#lap-hub .lap-hub-city {
    margin: 0;
    padding: 0;
}

#lap-hub .lap-hub-link,
#lap-hub .lap-hub-city-name {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}

#lap-hub .lap-hub-link {
    background: var(--lap-hub-accent-soft);
    color: var(--lap-hub-accent);
    font-weight: 600;
    box-shadow: none;
    border: 1px solid transparent;
}

#lap-hub .lap-hub-link:hover {
    background: var(--lap-hub-accent);
    color: #ffffff;
    transform: translateY(-1px);
}

#lap-hub .lap-hub-link:focus-visible {
    outline: 2px solid var(--lap-hub-accent);
    outline-offset: 2px;
}

/* Cities without a published page: shown but not clickable. */
#lap-hub .lap-hub-city-name {
    background: #f3f4f6;
    color: var(--lap-hub-muted);
    border: 1px solid var(--lap-hub-border);
}

#lap-hub .lap-hub-cities-empty,
#lap-hub .lap-hub-empty {
    margin: 0;
    font-size: 14px;
    color: var(--lap-hub-muted);
    font-style: italic;
}

#lap-hub .lap-hub-empty {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    #lap-hub {
        gap: 16px;
    }
    #lap-hub .lap-hub-cabinet {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #lap-hub .lap-hub-link {
        transition: none;
    }
    #lap-hub .lap-hub-link:hover {
        transform: none;
    }
}