/* ==================================================
   PR1MELAB — Global spacing & rhythm system
   Loads last. Normalizes containers, section padding,
   header rhythm, cards, grids, buttons, and motion.
================================================== */

:root {
    --site-section-padding-y-active: max(
        var(--site-section-inner-y, 0px),
        var(--site-section-padding-y-desktop, 96px)
    );
    --site-section-header-inner-gap: var(--section-heading-text-gap-desktop, 20px);
    --site-section-header-content-gap: var(--section-text-content-gap-desktop, 40px);
    --site-section-stack-gap: var(--section-eyebrow-heading-gap-desktop, 12px);
    --site-section-block-gap: var(--site-grid-gap-desktop, 28px);
    --site-card-padding-active: var(--site-card-padding-desktop, 32px);
    --site-grid-gap-active: var(--site-grid-gap-desktop, 28px);
    --reveal-distance: var(--section-reveal-distance-desktop, 16px);
    --site-reveal-distance: var(--section-reveal-distance-desktop, 16px);
    --site-reveal-duration: var(--section-reveal-duration-desktop, 0.72s);
}

@media (max-width: 760px) {
    :root {
        --site-section-padding-y-active: max(
            var(--site-section-inner-y, 0px),
            var(--site-section-padding-y-mobile, 64px)
        );
        --site-section-header-inner-gap: var(--section-heading-text-gap-mobile, 15px);
        --site-section-header-content-gap: var(--section-text-content-gap-mobile, 28px);
        --site-section-stack-gap: var(--section-eyebrow-heading-gap-mobile, 9px);
        --site-section-block-gap: var(--site-grid-gap-mobile, 18px);
        --site-card-padding-active: var(--site-card-padding-mobile, 24px);
        --site-grid-gap-active: var(--site-grid-gap-mobile, 18px);
        --reveal-distance: var(--section-reveal-distance-mobile, 8px);
        --site-reveal-distance: var(--section-reveal-distance-mobile, 8px);
        --site-reveal-duration: var(--section-reveal-duration-mobile, 0.38s);
    }
}

/* ----- Viewport safety ----- */
html {
    overflow-x: clip;
    max-width: 100%;
    scroll-behavior: auto;
}

body:not(.dashboard-app-body) {
    overflow-x: hidden !important;
    max-width: 100%;
    width: 100%;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
}

body:not(.dashboard-app-body) .site-page,
body:not(.dashboard-app-body) .site-main {
    overflow-x: hidden;
    max-width: 100%;
}

/* ----- Global containers ----- */
body:not(.dashboard-app-body) .container,
body:not(.dashboard-app-body) .site-main .container,
body:not(.dashboard-app-body) .footer-container,
body:not(.dashboard-app-body) .footer-bottom-container {
    width: 100%;
    max-width: var(--container-width, var(--site-container-max, 1240px));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding, var(--site-container-padding-desktop, 32px));
    padding-right: var(--container-padding, var(--site-container-padding-desktop, 32px));
    box-sizing: border-box;
}

@media (max-width: 760px) {
    body:not(.dashboard-app-body) .container,
    body:not(.dashboard-app-body) .site-main .container,
    body:not(.dashboard-app-body) .footer-container,
    body:not(.dashboard-app-body) .footer-bottom-container {
        padding-left: var(--container-padding, var(--site-container-padding-mobile, 18px));
        padding-right: var(--container-padding, var(--site-container-padding-mobile, 18px));
    }
}

/* ----- Section vertical rhythm ----- */
body:not(.dashboard-app-body) :is(
    .programs-section,
    .membership-section,
    .partnerships-section,
    .booking-section,
    .about-section,
    .bmi-section,
    .location-section,
    .faq-section,
    .equipment-section,
    .gym-gallery-section,
    .strength-section,
    .get-in-touch-section,
    .contact-page-section,
    .legal-page-section,
    .blog-page-section,
    .programs-page-section,
    .about-page-section,
    .partnerships-page-section,
    .program-detail-section,
    .single-post-content-section,
    .single-post-image-section
) {
    padding-top: var(--site-section-padding-y-active) !important;
    padding-bottom: var(--site-section-padding-y-active) !important;
}

/* Compact mobile sections (optional modifier) */
@media (max-width: 760px) {
    body:not(.dashboard-app-body) .site-section--compact-mobile {
        padding-top: var(--site-section-padding-y-compact-mobile, 48px) !important;
        padding-bottom: var(--site-section-padding-y-compact-mobile, 48px) !important;
    }
}

/* Hero-less inner pages keep header clearance tokens */
body:not(.dashboard-app-body) .contact-page-flow--no-hero .contact-page-section--top,
body:not(.dashboard-app-body) .legal-page-flow--content-only .legal-page-section,
body:not(.dashboard-app-body) .about-page-flow--text-only .about-page-section--text-only {
    padding-top: var(--page-inner-padding-top-desktop, 260px) !important;
    padding-bottom: var(--page-inner-padding-bottom-desktop, 130px) !important;
}

@media (max-width: 760px) {
    body:not(.dashboard-app-body) .contact-page-flow--no-hero .contact-page-section--top,
    body:not(.dashboard-app-body) .legal-page-flow--content-only .legal-page-section,
    body:not(.dashboard-app-body) .about-page-flow--text-only .about-page-section--text-only {
        padding-top: var(--page-inner-padding-top-mobile, 180px) !important;
        padding-bottom: var(--page-inner-padding-bottom-mobile, 90px) !important;
    }
}

/* Remove extra between-section margins when padding handles rhythm */
body:not(.dashboard-app-body) :is(
    .programs-section,
    .membership-section,
    .partnerships-section,
    .booking-section,
    .about-section,
    .bmi-section,
    .location-section,
    .faq-section,
    .equipment-section,
    .contact-page-section,
    .legal-page-section,
    .blog-page-section,
    .programs-page-section
) {
    margin-bottom: 0 !important;
}

/* ----- Section header max-width (rhythm margins stay in premium-layout.css) ----- */
body:not(.dashboard-app-body) :is(
    .section-heading,
    .programs-intro,
    .membership-heading,
    .partnerships-heading,
    .booking-section-intro,
    .about-heading,
    .bmi-heading,
    .location-heading,
    .faq-heading,
    .equipment-heading,
    .gym-gallery-heading,
    .strength-heading,
    .get-in-touch-heading
) {
    max-width: min(100%, var(--site-section-header-max-width, var(--section-heading-width, 720px)));
}

@media (min-width: 761px) {
    body:not(.dashboard-app-body) :is(
        .section-heading,
        .programs-intro,
        .membership-heading,
        .partnerships-heading,
        .booking-section-intro,
        .about-heading,
        .bmi-heading,
        .location-heading,
        .faq-heading,
        .equipment-heading,
        .gym-gallery-heading,
        .strength-heading,
        .get-in-touch-heading
    ) {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 760px) {
    body:not(.dashboard-app-body) :is(
        .section-heading,
        .programs-intro,
        .membership-heading,
        .partnerships-heading,
        .booking-section-intro,
        .about-heading,
        .bmi-heading,
        .location-heading,
        .faq-heading,
        .equipment-heading,
        .gym-gallery-heading,
        .strength-heading,
        .get-in-touch-heading
    ) {
        max-width: 100%;
    }
}

/* ----- Cards & grids (content cards only — specialty cards keep their own tokens) ----- */
body:not(.dashboard-app-body) :is(
    .contact-info-card,
    .legal-content-card,
    .legal-content-panel,
    .legal-content-card--continuous,
    .blog-card,
    .programs-page-card,
    .about-page-block,
    .about-page-value,
    .partnerships-page-card,
    .partnerships-page-benefit
) {
    padding: var(--site-card-padding-active);
    box-sizing: border-box;
}

body:not(.dashboard-app-body) :is(
    .programs-grid,
    .membership-grid,
    .membership-cards,
    .blog-grid,
    .blog-page-grid,
    .programs-page-grid,
    .about-page-values,
    .partnerships-page-grid,
    .contact-tiles,
    .gym-gallery-grid,
    .program-detail-gallery
) {
    gap: var(--site-grid-gap-active);
}

/* ----- Buttons ----- */
body:not(.dashboard-app-body) :is(
    .btn,
    .button,
    .site-button,
    .membership-card-button,
    .program-card-link,
    .booking-submit,
    .strength-form button[type="submit"],
    .get-in-touch-form button[type="submit"],
    .bmi-form button[type="submit"]
) {
    min-height: var(--button-min-height, var(--site-button-min-height-desktop, 48px));
    box-sizing: border-box;
}

@media (max-width: 760px) {
    body:not(.dashboard-app-body) :is(
        .btn,
        .button,
        .site-button,
        .membership-card-button,
        .program-card-link,
        .booking-submit,
        .strength-form button[type="submit"],
        .get-in-touch-form button[type="submit"],
        .bmi-form button[type="submit"]
    ) {
        min-height: var(--button-min-height, var(--site-button-min-height-mobile, 48px));
    }
}

/* ----- Typography line-height (Greek-friendly body rhythm) ----- */
body:not(.dashboard-app-body) {
    line-height: var(--site-line-height-body, var(--body-line-height, 1.65));
}

body:not(.dashboard-app-body) :is(h1, .hero-title) {
    line-height: var(--site-line-height-heading-large, 1.02);
}

body:not(.dashboard-app-body) :is(h2, h3, [class*="-title"]:not(.hero-title)) {
    line-height: var(--site-line-height-heading, 1.1);
}

body:not(.dashboard-app-body) :is(p, li, [class*="-text"], [class*="-intro"], [class*="-lead"]) {
    line-height: var(--site-line-height-body, 1.65);
}

body:not(.dashboard-app-body) :is(small, .text-small, [class*="-meta"], [class*="-note"]) {
    line-height: var(--site-line-height-small, 1.5);
}

/* ----- Mobile text alignment for content-heavy pages ----- */
@media (max-width: 760px) {
    body:not(.dashboard-app-body) :is(
        .legal-page-section,
        .legal-content-card,
        .legal-content-panel,
        .legal-page-container,
        .contact-page-section:not(.contact-page-section--hero),
        .programs-page-section,
        .programs-page-container,
        .about-page-section,
        .about-page-block,
        .blog-page-section,
        .single-post-content-section,
        .program-detail-section,
        .program-detail-intro,
        .bmi-section,
        .bmi-form,
        .strength-section,
        .get-in-touch-section
    ),
    body:not(.dashboard-app-body) :is(
        .legal-page-section,
        .contact-page-section,
        .programs-page-section,
        .about-page-section,
        .blog-page-section,
        .program-detail-section
    ) :is(p, li, h1, h2, h3, h4, [class*="-title"], [class*="-text"], [class*="-intro"], [class*="-lead"]) {
        text-align: left !important;
    }
}

/* ----- Scroll reveal & motion ----- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body:not(.dashboard-app-body) .site-scroll-reveal,
    body:not(.dashboard-app-body) [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    body:not(.dashboard-app-body) [data-parallax-target] {
        transform: none !important;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    body:not(.dashboard-app-body) [data-parallax-target] {
        transform: none !important;
    }
}

/* ----- Booking panel — same rhythm as section headers ----- */
body:not(.dashboard-app-body) .booking-section-intro {
    max-width: min(100%, var(--site-section-header-max-width, 720px));
    margin-left: auto;
    margin-right: auto;
}

body:not(.dashboard-app-body) .booking-section-intro .booking-section-intro-eyebrow {
    margin-bottom: var(--site-section-stack-gap) !important;
}

body:not(.dashboard-app-body) .booking-section-intro-title {
    margin-bottom: var(--site-section-header-inner-gap) !important;
}

body:not(.dashboard-app-body) .booking-container {
    margin-top: var(--site-section-header-content-gap) !important;
}

body:not(.dashboard-app-body) .booking-step-panel .booking-panel-app-head {
    gap: var(--site-section-stack-gap) !important;
    padding: var(--booking-panel-head-padding-y) var(--booking-panel-head-padding-x) !important;
}

body:not(.dashboard-app-body) .booking-step-panel .booking-progress {
    gap: var(--site-section-stack-gap) !important;
    padding: var(--site-section-stack-gap) 12px !important;
}

body:not(.dashboard-app-body) .booking-step-panel .booking-panel-view,
body:not(.dashboard-app-body) .booking-step-panel .booking-panel-form {
    padding: var(--booking-panel-view-padding-y) var(--booking-panel-view-padding-x) !important;
    gap: var(--site-section-header-inner-gap) !important;
}

body:not(.dashboard-app-body) .booking-step-panel .booking-panel-header {
    margin-bottom: var(--site-section-header-inner-gap) !important;
    gap: var(--site-section-stack-gap) !important;
}

body:not(.dashboard-app-body) .booking-step-panel .booking-fields,
body:not(.dashboard-app-body) .booking-step-panel .booking-options,
body:not(.dashboard-app-body) .booking-step-panel .booking-times,
body:not(.dashboard-app-body) .booking-step-panel .booking-services {
    gap: var(--site-section-block-gap) !important;
}

body:not(.dashboard-app-body) .booking-step-panel .booking-panel-view-actions {
    gap: var(--site-section-header-inner-gap) !important;
    padding-top: var(--site-section-header-inner-gap) !important;
}

@media (max-width: 760px) {
    :root {
        --booking-panel-stack-gap: var(--section-eyebrow-heading-gap-mobile);
        --booking-panel-inner-gap: var(--section-heading-text-gap-mobile);
        --booking-panel-block-gap: var(--section-text-content-gap-mobile);
        --booking-panel-view-padding-y: 20px;
        --booking-panel-view-padding-x: 16px;
    }

    body:not(.dashboard-app-body) .booking-section-intro .booking-section-intro-eyebrow {
        margin-bottom: var(--section-eyebrow-heading-gap-mobile) !important;
    }

    body:not(.dashboard-app-body) .booking-section-intro-title {
        margin-bottom: var(--section-heading-text-gap-mobile) !important;
    }

    body:not(.dashboard-app-body) .booking-container {
        margin-top: var(--section-text-content-gap-mobile) !important;
    }
}

/* ----- Symmetrical section rhythm: heading block → content → buttons ----- */
body:not(.dashboard-app-body) :is(
    .programs-intro-right,
    .membership-heading,
    .partnerships-heading,
    .booking-section-intro,
    .about-heading,
    .about-home-spotlight__content,
    .gym-gallery-heading,
    .bmi-heading,
    .strength-heading,
    .get-in-touch-heading,
    .location-heading,
    .faq-heading,
    .equipment-heading
) :is(
    .about-text,
    .programs-description,
    .membership-text,
    .partnerships-text,
    .gym-gallery-text,
    .bmi-text,
    .strength-intro,
    .get-in-touch-intro,
    .location-text,
    .faq-intro,
    .equipment-text
) {
    margin-bottom: 0 !important;
}

body:not(.dashboard-app-body) .programs-intro-right .programs-button,
body:not(.dashboard-app-body) .about-actions,
body:not(.dashboard-app-body) .about-home-spotlight__content .about-actions,
body:not(.dashboard-app-body) .gym-gallery-heading + .gym-gallery-grid,
body:not(.dashboard-app-body) .strength-heading + .strength-layout,
body:not(.dashboard-app-body) .get-in-touch-heading + .get-in-touch-form,
body:not(.dashboard-app-body) .bmi-heading + .bmi-container {
    margin-top: var(--site-section-header-content-gap) !important;
}

body:not(.dashboard-app-body) .programs-intro-right .programs-button,
body:not(.dashboard-app-body) .programs-intro-actions .programs-button,
body:not(.dashboard-app-body) .about-actions,
body:not(.dashboard-app-body) .about-page-cta,
body:not(.dashboard-app-body) .gym-gallery-actions,
body:not(.dashboard-app-body) .partnerships-cta,
body:not(.dashboard-app-body) .strength-button,
body:not(.dashboard-app-body) .membership-button,
body:not(.dashboard-app-body) .equipment-button,
body:not(.dashboard-app-body) .faq-actions .btn,
body:not(.dashboard-app-body) .get-in-touch-form + .btn,
body:not(.dashboard-app-body) .program-detail-actions .btn {
    margin-top: var(--section-header-button-gap-desktop, 32px) !important;
}

@media (max-width: 760px) {
    body:not(.dashboard-app-body) .programs-intro-right .programs-button,
    body:not(.dashboard-app-body) .programs-intro-actions .programs-button,
    body:not(.dashboard-app-body) .about-actions,
    body:not(.dashboard-app-body) .about-home-spotlight__content .about-actions,
    body:not(.dashboard-app-body) .about-page-cta,
    body:not(.dashboard-app-body) .gym-gallery-actions,
    body:not(.dashboard-app-body) .partnerships-cta,
    body:not(.dashboard-app-body) .strength-button,
    body:not(.dashboard-app-body) .membership-button {
        margin-top: var(--section-header-button-gap-mobile, 24px) !important;
    }

    body:not(.dashboard-app-body) .about-home-spotlight__content .about-actions {
        margin-top: var(--section-header-button-gap-mobile, 24px) !important;
    }
}