/* Shared spacing system. Loaded last so legacy pages converge on one rhythm. */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --page-gutter: clamp(16px, 3vw, 32px);
    --page-max-width: 1220px;
    --section-space: clamp(32px, 5vw, 48px);
    --card-space: 24px;
    --control-gap: 12px;
}

/* Keep the public experience on one predictable content rail. */
.container {
    width: 100%;
    max-width: var(--page-max-width);
}

main,
main > *,
.listing-page,
.support-page,
.portal-page,
.community-page {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* Page frames and section rhythm */
main > section,
main > .causes,
.listing-page,
.events,
.service,
.team,
.blog,
.single,
.contact,
.latest-updates,
.support-page,
.portal-page,
.community-page {
    scroll-margin-top: 88px;
}

.listing-page,
.support-page,
.portal-page,
.community-page,
.event-details-page,
.club-details-page {
    padding-top: var(--space-5);
    padding-bottom: var(--section-space);
}

.section-header {
    margin-bottom: var(--space-6);
}

.section-header > :last-child,
.card-body > :last-child,
.modal-body > :last-child,
.journey-panel > :last-child,
.detail-info-grid section > :last-child {
    margin-bottom: 0;
}

.club-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.club-claim-panel {
    margin-bottom: var(--space-5);
}

.club-claim-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.club-claim-form label {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    font-weight: 800;
}

.club-claim-form label:last-of-type,
.club-claim-form button,
.club-claim-form #clubClaimStatus {
    grid-column: 1 / -1;
}

/* Shared grid alignment */
.community-card-grid,
.home-action-grid,
.service-grid,
.team-grid,
.detail-info-grid,
.auto-path-grid,
.auto-persona-grid,
.auto-capability-grid,
.auto-event-type-grid {
    row-gap: var(--space-5);
}

.portal-layout,
.community-layout,
.market-layout,
.messages-layout,
.detail-shell,
.club-portal-shell {
    gap: var(--space-5);
}

/* Surfaces use the same internal inset unless a compact variant opts out. */
.card-body,
.profile-card,
.portal-profile-card,
.portal-panel,
.club-panel,
.booking-panel,
.support-panel,
.job-submit-panel,
.market-panel,
.messages-panel,
.community-sidebar,
.journey-panel,
.detail-info-grid section {
    padding: var(--card-space);
}

.listing-page .community-card-body,
.update-card-body,
.market-card-body,
.vehicle-card-body {
    padding: var(--space-4);
}

.card-header,
.modal-header,
.community-modal-header,
.market-modal-header,
.message-modal-header {
    padding: var(--space-4) var(--card-space);
}

.modal-body,
.community-modal-body,
.market-modal-body,
.message-modal-body {
    padding: var(--space-5);
}

.modal-footer {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-4);
}

/* Forms and controls */
.form-group {
    margin-bottom: var(--space-4);
}

form .row {
    row-gap: var(--space-4);
}

form label {
    margin-bottom: var(--space-2);
}

form .form-text,
form small,
.field-help {
    display: block;
    margin-top: var(--space-1);
}

.form-actions,
.modal-footer,
.listing-guide-actions,
.journey-actions,
.event-card-tools,
.leader-empty-actions,
.auth-actions,
.profile-actions {
    display: flex;
    align-items: center;
    gap: var(--control-gap);
    flex-wrap: wrap;
}

.form-actions {
    margin-top: var(--space-4);
}

/* Filters and result controls */
.listing-page .listing-toolbar {
    gap: var(--space-3);
    padding: var(--space-4);
}

.listing-page .listing-toolbar-sticky {
    z-index: 10;
}

.listing-page .listing-refine-bar {
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.listing-results-bar {
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.listing-active-filters,
.listing-filter-group,
.event-segmented {
    gap: var(--space-1);
}

/* Clubs is a short directory: keep filters in normal flow and close to context. */
.clubs-listing-page .listing-guide {
    margin-bottom: var(--space-3) !important;
}

.clubs-listing-page .listing-toolbar,
.clubs-listing-page .listing-toolbar-sticky {
    position: relative;
    top: auto;
    margin: 0 0 var(--space-3) !important;
}

.clubs-listing-page .listing-results-bar {
    min-height: 36px;
    margin: 0 0 var(--space-4);
}

.clubs-listing-page .community-card-grid {
    margin-top: 0;
    padding-top: 0;
}

.clubs-listing-page .community-card-grid > [class*="col-"] {
    margin-bottom: var(--space-4) !important;
}

.events-listing-page .listing-guide {
    margin-bottom: var(--space-3) !important;
}

.events-listing-page .listing-toolbar,
.events-listing-page .listing-toolbar-sticky {
    position: relative;
    top: auto;
    margin: 0 0 var(--space-3) !important;
}

.events-listing-page .listing-results-bar {
    min-height: 36px;
    margin: 0 0 var(--space-4);
}

.events-listing-page .community-card-grid {
    margin-top: 0;
    padding-top: 0;
}

.events-listing-page .community-card-grid > [class*="col-"] {
    margin-bottom: var(--space-4) !important;
}

.mechanics-listing-page .listing-guide {
    margin-bottom: var(--space-3) !important;
}

.mechanics-listing-page .listing-toolbar,
.mechanics-listing-page .listing-toolbar-sticky {
    position: relative;
    top: auto;
    margin: 0 0 var(--space-3) !important;
}

.mechanics-listing-page .listing-results-bar {
    min-height: 36px;
    margin: 0 0 var(--space-4);
}

.mechanics-listing-page .community-card-grid {
    margin-top: 0;
    padding-top: 0;
}

.mechanics-listing-page .community-card-grid > [class*="col-"] {
    margin-bottom: var(--space-4) !important;
}

@media (min-width: 768px) {
    .clubs-listing-page .listing-guide > div:first-child,
    .events-listing-page .listing-guide > div:first-child,
    .mechanics-listing-page .listing-guide > div:first-child {
        min-width: 0;
        flex: 1;
    }

    .clubs-listing-page .listing-guide-actions,
    .events-listing-page .listing-guide-actions,
    .mechanics-listing-page .listing-guide-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }
}

/* Tables retain density while gaining consistent scan lines. */
.table-responsive {
    margin-bottom: var(--space-5);
}

.table {
    margin-bottom: 0;
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

.table .btn + .btn,
td .btn + .btn {
    margin-left: var(--space-2);
}

/* Content hierarchy */
.card h2,
.card h3,
.portal-panel h2,
.club-panel h2,
.support-panel h2,
.booking-panel h2 {
    margin-bottom: var(--space-3);
}

.dashboard-intro,
.section-intro,
.detail-eyebrow {
    margin-bottom: var(--space-4);
}

.community-empty,
.dashboard-empty,
.market-empty {
    padding: var(--space-5);
}

@media (max-width: 991.98px) {
    :root {
        --card-space: 20px;
    }

    .portal-layout,
    .community-layout,
    .market-layout,
    .messages-layout,
    .detail-shell,
    .club-portal-shell {
        gap: var(--space-4);
    }
}

@media (max-width: 767.98px) {
    :root {
        --page-gutter: 16px;
        --section-space: 32px;
        --card-space: 16px;
        --control-gap: 8px;
    }

    .container,
    .container-fluid {
        padding-right: var(--page-gutter);
        padding-left: var(--page-gutter);
    }

    .listing-page,
    .support-page,
    .portal-page,
    .community-page,
    .event-details-page,
    .club-details-page {
        padding-top: var(--space-4);
        padding-bottom: var(--space-6);
    }

    .section-header {
        margin-bottom: var(--space-4);
    }

    .community-card-grid,
    .home-action-grid,
    .service-grid,
    .team-grid,
    .detail-info-grid {
        row-gap: var(--space-3);
    }

    .card-body,
    .profile-card,
    .portal-profile-card,
    .portal-panel,
    .club-panel,
    .booking-panel,
    .support-panel,
    .job-submit-panel,
    .market-panel,
    .messages-panel,
    .community-sidebar,
    .journey-panel,
    .detail-info-grid section,
    .listing-page .community-card-body {
        padding: var(--card-space);
    }

    .modal-header,
    .community-modal-header,
    .market-modal-header,
    .message-modal-header,
    .modal-body,
    .community-modal-body,
    .market-modal-body,
    .message-modal-body {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

    .table th,
    .table td {
        padding: var(--space-2) var(--space-3);
    }

    .club-hero-actions,
    .club-claim-form {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .table .btn + .btn,
    td .btn + .btn {
        margin-top: var(--space-2);
        margin-left: 0;
    }

    .form-actions,
    .modal-footer,
    .listing-guide-actions,
    .journey-actions {
        width: 100%;
    }

    .clubs-listing-page .listing-guide {
        margin-bottom: var(--space-2) !important;
    }

    .clubs-listing-page .listing-toolbar,
    .clubs-listing-page .listing-toolbar-sticky {
        margin-bottom: var(--space-2) !important;
    }

    .clubs-listing-page .listing-results-bar {
        margin-bottom: var(--space-3);
    }

    .events-listing-page .listing-guide {
        margin-bottom: var(--space-2) !important;
    }

    .events-listing-page .listing-toolbar,
    .events-listing-page .listing-toolbar-sticky {
        margin-bottom: var(--space-2) !important;
    }

    .events-listing-page .listing-results-bar {
        margin-bottom: var(--space-3);
    }

    .mechanics-listing-page .listing-guide {
        margin-bottom: var(--space-2) !important;
    }

    .mechanics-listing-page .listing-toolbar,
    .mechanics-listing-page .listing-toolbar-sticky {
        margin-bottom: var(--space-2) !important;
    }

    .mechanics-listing-page .listing-results-bar {
        margin-bottom: var(--space-3);
    }
}

/* Public club showcase responsive overrides load after mobile-app.css. */
@media (min-width: 1200px) {
    .event-details-page.club-detail-page {
        padding-top: 184px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .event-details-page.club-detail-page {
        padding-top: 236px !important;
    }
}

@media (max-width: 991.98px) {
    .club-showcase-layout { grid-template-columns: 1fr; }
    .club-join-card { position: static; order: -1; }
    .club-proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .club-proof-strip > div:nth-child(2) { border-right: 0; }
    .club-proof-strip > div:nth-child(-n+2) { border-bottom: 1px solid #e7ecf1; }
}

@media (max-width: 767.98px) {
    .club-loading-hero { min-height: 480px; border-radius: 14px; }
    .club-loading-strip { grid-template-columns: repeat(2, 1fr); }
    .club-loading-strip span { height: 70px; }
    .event-details-page:has(.club-showcase-hero) { padding-top: 12px !important; }
    .club-portal-shell { gap: 18px !important; }
    .club-detail-breadcrumb { overflow: hidden; white-space: nowrap; }
    .club-detail-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; }
    .club-showcase-hero { min-height: 500px; align-items: flex-end; padding: 22px !important; border-radius: 14px; }
    .club-showcase-hero-shade { background: linear-gradient(0deg, rgba(5, 13, 22, .97) 0%, rgba(5, 13, 22, .72) 58%, rgba(5, 13, 22, .24) 100%); }
    .club-showcase-hero .club-identity { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); align-items: end !important; gap: 12px !important; }
    .club-showcase-hero .club-identity img { width: 64px !important; height: 64px !important; border-width: 3px !important; }
    .club-showcase-hero .club-identity h1 { font-size: clamp(2rem, 10vw, 3rem) !important; line-height: 1 !important; }
    .club-showcase-hero .club-identity span { font-size: .78rem !important; }
    .club-showcase-summary { margin: 18px 0; font-size: .92rem; line-height: 1.5; }
    .club-showcase-hero .club-hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .club-showcase-hero .club-hero-actions .btn { width: 100%; justify-content: center; }
    .club-website-link { justify-content: center; }
    .club-proof-strip { grid-template-columns: 1fr; }
    .club-proof-strip > div { padding: 16px; border-right: 0; border-bottom: 1px solid #e7ecf1; }
    .club-proof-strip > div:last-child { border-bottom: 0; }
    .club-showcase-main { gap: 36px; }
    .club-story-section { padding-top: 0; }
    .club-story-section h2,
    .club-section-heading h2 { font-size: 1.7rem; }
    .club-story-lead { margin: 15px 0 20px; font-size: .96rem; line-height: 1.65; }
    .club-activity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .club-activity-list span { min-width: 0; border-radius: 10px; font-size: .78rem; }
    .club-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .club-event-showcase-grid,
    .club-detail-feature-grid { grid-template-columns: 1fr; }
    .club-event-image { height: 175px; }
    .club-detail-feature-card { min-height: 0; padding: 22px; }
    .club-updates-section { padding: 22px; }
    .club-updates-section .club-news-list article { grid-template-columns: 1fr 20px; gap: 8px; }
    .club-updates-section .club-news-date { grid-column: 1 / -1; }
    .club-join-card { padding: 22px !important; }
}