/* Unified public hero rhythm
   Keeps every public page and the client dashboard aligned directly below the header. */
:root {
    --public-hero-top-space: 68px;
    --public-hero-bottom-space: 72px;
    --public-hero-min-height: 470px;
}

body.public-transport-page main,
body.public-page main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Every public hero starts at the same point below the shared header. */
body.public-transport-page :is(
    .hp-hero,
    .page-hero,
    .about-hero-premium,
    .services-hero-premium,
    .fleet-hero-premium,
    .service-detail-hero,
    .tracking-hero-pro,
    .faq-help-hero,
    .legal-hero
),
body.public-page .client-dashboard-hero {
    box-sizing: border-box;
    min-height: var(--public-hero-min-height) !important;
    margin-top: 0 !important;
    padding-top: var(--public-hero-top-space) !important;
    padding-bottom: var(--public-hero-bottom-space) !important;
    align-items: flex-start !important;
}

/* Remove page-specific inner padding so the first hero line shares one baseline. */
body.public-transport-page :is(
    .hp-hero-grid,
    .page-hero-grid,
    .about-hero-inner,
    .services-hero-inner,
    .fleet-hero-inner,
    .service-detail-hero-inner,
    .tracking-hero-grid-pro,
    .faq-help-hero-inner,
    .legal-hero-grid
),
body.public-page .client-dashboard-hero > .container {
    box-sizing: border-box;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: start !important;
}

/* The first text element never inherits a page-specific top margin. */
body.public-transport-page :is(
    .hp-hero-copy,
    .page-hero-grid > div:first-child,
    .about-hero-copy,
    .services-hero-copy,
    .fleet-hero-copy,
    .service-detail-hero-copy,
    .tracking-hero-copy-pro,
    .faq-help-hero-copy,
    .legal-hero-grid > div:first-child
),
body.public-page .client-dashboard-hero > .container {
    margin-top: 0 !important;
    transform: none !important;
}

body.public-transport-page :is(
    .hp-hero-copy,
    .page-hero-grid > div:first-child,
    .about-hero-copy,
    .services-hero-copy,
    .fleet-hero-copy,
    .service-detail-hero-copy,
    .tracking-hero-copy-pro,
    .faq-help-hero-copy,
    .legal-hero-grid > div:first-child
) > :first-child,
body.public-page .client-dashboard-hero > .container > :first-child {
    margin-top: 0 !important;
}

/* Login and registration use the same start distance although they are form-led pages. */
body.public-transport-page .auth-section-pro {
    margin-top: 0 !important;
    padding-top: var(--public-hero-top-space) !important;
}

@media (max-width: 991.98px) {
    :root {
        --public-hero-top-space: 56px;
        --public-hero-bottom-space: 60px;
        --public-hero-min-height: 410px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --public-hero-top-space: 46px;
        --public-hero-bottom-space: 50px;
        --public-hero-min-height: 350px;
    }

    body.public-transport-page :is(
        .hp-hero,
        .page-hero,
        .about-hero-premium,
        .services-hero-premium,
        .fleet-hero-premium,
        .service-detail-hero,
        .tracking-hero-pro,
        .faq-help-hero,
        .legal-hero
    ),
    body.public-page .client-dashboard-hero {
        min-height: var(--public-hero-min-height) !important;
    }
}


/* Legal pages contain short hero copy, so they intentionally use a smaller hero. */
body.public-transport-page .legal-hero.legal-hero--compact {
    min-height: 330px !important;
    padding-top: 54px !important;
    padding-bottom: 56px !important;
}

@media (max-width: 991.98px) {
    body.public-transport-page .legal-hero.legal-hero--compact {
        min-height: 300px !important;
        padding-top: 46px !important;
        padding-bottom: 48px !important;
    }
}

@media (max-width: 767.98px) {
    body.public-transport-page .legal-hero.legal-hero--compact {
        min-height: 270px !important;
        padding-top: 38px !important;
        padding-bottom: 40px !important;
    }
}