/*
 * Southcare Medical General Family Healthcare page styles.
 *
 * Loaded only on Pages using template-general-family-healthcare.php.
 */



/* =========================================================
   Three service category pages only
   Scoped spacing layer for pages rebuilt from the former
   main Services template. Do not use these rules on the
   new main Services overview page.
   ========================================================= */
body:is(
    .page-template-template-general-family-healthcare,
    .page-template-template-preventative-chronic-care,
    .page-template-template-procedures-treatment-room
) {
    --apollo-category-section-gap: var(--wp--preset--spacing--70);
}

/* One consistent gap between category-page sections.
   Individual sections must not add their own block padding. */
body:is(
    .page-template-template-general-family-healthcare,
    .page-template-template-preventative-chronic-care,
    .page-template-template-procedures-treatment-room
) :is(
    .apollo-service-intro,
    .apollo-indigenous-health,
    .apollo-service-cards
) {
    margin-top: var(--apollo-category-section-gap);
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Card groups without a heading begin at the section gap. */
body:is(
    .page-template-template-general-family-healthcare,
    .page-template-template-preventative-chronic-care,
    .page-template-template-procedures-treatment-room
) .apollo-service-cards__inner
    > .apollo-service-cards__items:first-child {
    margin-top: 0;
}

/* Keep a smaller internal gap beneath a card-section heading. */
body:is(
    .page-template-template-general-family-healthcare,
    .page-template-template-preventative-chronic-care,
    .page-template-template-procedures-treatment-room
) .apollo-service-cards__header
    + .apollo-service-cards__items {
    margin-top: var(--wp--preset--spacing--50);
}

/* Below 1280px — small reduction only */
@media (max-width: 79.99rem) {
    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) {
        --apollo-category-section-gap: var(--wp--preset--spacing--50);
    }

    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) .apollo-service-cards__header
        + .apollo-service-cards__items {
        margin-top: var(--wp--preset--spacing--40);
    }
}

/* Below 992px — clear but compact section separation */
@media (max-width: 61.99rem) {
    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) {
        --apollo-category-section-gap: 2.5rem;
    }
}

/* Below 768px — compact separation, still visibly sectioned */
@media (max-width: 47.99rem) {
    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) {
        --apollo-category-section-gap: 2rem;
    }

    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) .apollo-service-cards__header
        + .apollo-service-cards__items {
        margin-top: var(--wp--preset--spacing--30);
    }

    /* Optional: a very light divider makes each section easier to identify
       without adding a large gap. Remove this block if you do not want it. */
    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) :is(
        .apollo-service-intro,
        .apollo-indigenous-health,
        .apollo-service-cards
    ) {
        border-top: 1px solid color-mix(
            in srgb,
            var(--wp--preset--color--contrast-muted) 12%,
            transparent
        );
        padding-top: 2rem;
    }
}

/* Below 560px */
@media (max-width: 34.99rem) {
    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) {
        --apollo-category-section-gap: 1.75rem;
    }

    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) :is(
        .apollo-service-intro,
        .apollo-indigenous-health,
        .apollo-service-cards
    ) {
        padding-top: 1.75rem;
    }
}

/* Below 400px */
@media (max-width: 24.99rem) {
    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) {
        --apollo-category-section-gap: 1.5rem;
    }

    body:is(
        .page-template-template-general-family-healthcare,
        .page-template-template-preventative-chronic-care,
        .page-template-template-procedures-treatment-room
    ) :is(
        .apollo-service-intro,
        .apollo-indigenous-health,
        .apollo-service-cards
    ) {
        padding-top: 1.5rem;
    }
}



/* ---------------------------------
   Services introduction button
   --------------------------------- */
.apollo-service-intro__button {
    margin-top: var(--wp--preset--spacing--50);
}


/* ---------------------------------
   Services page: service introduction
   40% image / 60% content
   --------------------------------- */
.apollo-service-intro--services-page .apollo-service-intro__image,
.apollo-service-intro--services-page-neonatal .apollo-service-intro__image,
.apollo-service-intro--services-page-skin-checks .apollo-service-intro__image {
    flex: 0 0 calc(40% - (var(--wp--preset--spacing--70) / 2));
}


.apollo-service-intro--services-page .apollo-service-intro__content,
.apollo-service-intro--services-page-neonatal .apollo-service-intro__content,
.apollo-service-intro--services-page-skin-checks .apollo-service-intro__content {
    flex: 1 1 0;
}


.apollo-service-intro--services-page .apollo-service-intro__image img {
    aspect-ratio: 0.85 / 1;
}


@media (max-width: 79.99rem) {
    .apollo-service-intro--services-page .apollo-service-intro__image,
    .apollo-service-intro--services-page-neonatal .apollo-service-intro__image,
    .apollo-service-intro--services-page-skin-checks .apollo-service-intro__image {
        flex-basis: calc(40% - (var(--wp--preset--spacing--50) / 2));
    }
}


@media (max-width: 61.99rem) {
    .apollo-service-intro--services-page .apollo-service-intro__image,
    .apollo-service-intro--services-page-neonatal .apollo-service-intro__image,
    .apollo-service-intro--services-page-skin-checks .apollo-service-intro__image {
        flex: 0 0 auto;
        width: 100%;
    }
    .apollo-service-intro--services-page .apollo-service-intro__image img {
        aspect-ratio: 1.13 / 1;
    }
}



/* ---------------------------------
   Services page service introduction:
   wider 45% image variation
   --------------------------------- */
.apollo-service-intro--services-page-wide-image
    .apollo-service-intro__image,
.apollo-service-intro--services-page-womens-health
    .apollo-service-intro__image {
    flex: 0 0 calc(45% - (var(--wp--preset--spacing--70) / 2));
}


.apollo-service-intro--services-page-wide-image
    .apollo-service-intro__content,
.apollo-service-intro--services-page-womens-health
    .apollo-service-intro__content {
    flex: 1 1 0;
}


.apollo-service-intro--services-page-wide-image
    .apollo-service-intro__image img {
    aspect-ratio: 1.37 / 1;
}


@media (max-width: 79.99rem) {
    .apollo-service-intro--services-page-wide-image
        .apollo-service-intro__image,
    .apollo-service-intro--services-page-womens-health
        .apollo-service-intro__image {
        flex-basis: calc(45% - (var(--wp--preset--spacing--50) / 2));
    }
}


@media (max-width: 61.99rem) {
    .apollo-service-intro--services-page-wide-image
        .apollo-service-intro__image,
    .apollo-service-intro--services-page-womens-health
        .apollo-service-intro__image {
        flex: 0 0 auto;
        width: 100%;
    }
    .apollo-service-intro--services-page-wide-image
        .apollo-service-intro__image img {
        aspect-ratio: 1.5 / 1;
    }
}


@media (max-width: 47.99rem) {
    .apollo-service-intro--services-page-wide-image
        .apollo-service-intro__image img {
        aspect-ratio: 4 / 3;
    }
}



/* ---------------------------------
   Neonatal and ongoing child care
   Shorter image, 40% / 60% layout
   --------------------------------- */
.apollo-service-intro--services-page-neonatal
    .apollo-service-intro__image img {
    aspect-ratio: 1.5 / 1;
}


@media (max-width: 61.99rem) {
    .apollo-service-intro--services-page-neonatal
        .apollo-service-intro__image img {
        aspect-ratio: 1.5 / 1;
    }
}



/* ---------------------------------
   Women's Health
   Shorter image, 45% / 55% layout
   --------------------------------- */
.apollo-service-intro--services-page-womens-health
    .apollo-service-intro__image img {
    aspect-ratio: 1.8 / 1;
}


@media (max-width: 61.99rem) {
    .apollo-service-intro--services-page-womens-health
        .apollo-service-intro__image img {
        aspect-ratio: 1.8 / 1;
    }
}




/* ---------------------------------
   Skin Cancer Management
   50% / 50% layout, shorter image
   --------------------------------- */
.apollo-service-intro--services-page-skin-management
    .apollo-service-intro__image img {
    aspect-ratio: 1.68 / 1;
}



/* ---------------------------------
   Skin Cancer Checks
   40% / 60% layout, own image ratio
   --------------------------------- */
.apollo-service-intro--services-page-skin-checks
    .apollo-service-intro__image img {
    aspect-ratio: 1.1 / 1;
}