/* Airport Lounges browse page (/lounges). A second view of the same Supabase
   data as the map — see public/js/lounges.js. Uses the shared design tokens from
   styles-v2.css so light/dark mode follow the rest of the site. */

.lounges-hero {
        max-width: 900px;
        margin: 0 auto;
        padding: 1.5rem 1rem 0.5rem;
        text-align: center;
}
.lounges-hero h1 {
        font-family: var(--font-heading);
        font-size: 1.6rem;
        color: var(--color-text);
        margin: 0 0 0.5rem;
}
.lounges-hero p {
        color: var(--color-text-light, #64748B);
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0 auto;
        max-width: 640px;
}
.lounges-hero a {
        color: var(--color-accent);
        text-decoration: underline;
}

.lounges-wrap {
        max-width: 760px;
        margin: 0 auto;
        padding: 0.5rem 1rem 3rem;
}

.lounges-summary {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-text-light, #64748B);
        margin: 0.75rem 0 1rem;
        text-align: center;
}

/* One collapsible card per state. */
.state-block {
        background: var(--color-card, #fff);
        border: 1px solid var(--color-border, #E2E8F0);
        border-radius: var(--radius-md, 10px);
        margin-bottom: 0.75rem;
        overflow: hidden;
}
.state-block > summary {
        cursor: pointer;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1rem;
        color: var(--color-text);
        padding: 0.85rem 1rem;
        list-style: none;
        user-select: none;
}
.state-block > summary::-webkit-details-marker { display: none; }
.state-block > summary::before {
        content: '\25B8'; /* ▸ */
        display: inline-block;
        margin-right: 0.5rem;
        transition: transform 0.15s ease;
        color: var(--color-text-light, #94A3B8);
}
.state-block[open] > summary::before { transform: rotate(90deg); }

.state-body {
        padding: 0.25rem 1rem 1rem;
        border-top: 1px solid var(--color-border, #E2E8F0);
}

.airport-h {
        font-family: var(--font-heading);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-text);
        margin: 0.9rem 0 0.3rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
}
.airport-count {
        background: var(--color-accent);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        border-radius: var(--radius-pill, 999px);
        padding: 0.05rem 0.45rem;
}

/* One row per lounge: logo + name + network + optional site link. */
.lounge-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px solid var(--color-border, #EEF2F6);
}
.lounge-row:last-child { border-bottom: none; }
/* Sourced terminal/hours sub-line — full width so it wraps below the
   logo+name row even when the string is long (multi-club airports). */
.lounge-row-meta {
        flex-basis: 100%;
        margin: 2px 0 0 30px;
        font-size: 0.74rem;
        line-height: 1.35;
        color: var(--color-text-light, #64748B);
}
.lounge-row-meta strong { font-weight: 600; }
.lounge-row-logo {
        width: 22px;
        height: 22px;
        object-fit: contain;
        border-radius: 4px;
        background: #fff;
        padding: 1px;
        box-sizing: border-box;
        flex: 0 0 auto;
}
.lounge-row-emoji {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        line-height: 1;
        background: transparent;
}
.lounge-row-name {
        flex: 1;
        min-width: 0;
        font-size: 0.85rem;
        color: var(--color-text);
}
.lounge-row-net {
        font-size: 0.72rem;
        color: var(--color-text-light, #94A3B8);
        white-space: nowrap;
}
.lounge-row-link {
        font-size: 0.75rem;
        color: var(--color-accent);
        text-decoration: underline;
        flex: 0 0 auto;
}

/* Dark mode: brand logos sit on a forced-white chip so they stay legible. */
[data-theme="dark"] .lounge-row-logo { background: #fff; }
[data-theme="dark"] .lounge-row-emoji { background: transparent; }