/* =====================================================================
   KlinikPlus – About page · MOBILE section rhythm
   ---------------------------------------------------------------------
   On desktop the About sections carry 60–120px of top/bottom padding.
   Stacked on a phone those add up to large empty bands between sections,
   so — matching the landing page's mobile treatment — they are pulled in
   to a tighter, consistent rhythm. Everything is wrapped in
   `@media (max-width: 991px)`, so large screens are never affected.
   ===================================================================== */

@media (max-width: 991px) {

    .about-hero-section {
        padding-bottom: 24px !important;
    }

    /* Hero: on mobile the desired order is heading -> image -> text.
       Heading + text live in one column and the image in another, so flatten
       the wrappers with `display: contents` and reorder with flex `order`. */
    .about-hero-section .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .about-hero-section .row > .col-12,
    .about-hero-section .about-hero-content {
        display: contents !important;
    }

    .about-hero-section .about-heading {
        order: 1;
    }

    .about-hero-section .about-hero-image {
        order: 2;
        margin: 12px auto 16px !important;
    }

    .about-hero-section .about-hero-text {
        order: 3;
    }

    /* restore the column gutter that `display: contents` dropped */
    .about-hero-section .about-heading,
    .about-hero-section .about-hero-text {
        padding-left: 12px;
        padding-right: 12px;
    }

    .stats-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .who-we-are-section {
        padding-bottom: 24px !important;
    }

    /* On mobile the desired order is: heading -> image -> text (mission box
       stays last). The heading + text + mission live in one column and the
       image in another, so flatten the wrappers with `display: contents` and
       reorder the now-sibling pieces with flex `order`. */
    .who-we-are-section .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .who-we-are-section .row > .col-12,
    .who-we-are-section .who-we-are-content {
        display: contents !important;
    }

    .who-we-are-section .who-we-are-heading {
        order: 1;
    }

    .who-we-are-section .who-we-are-image {
        order: 2;
        max-width: 320px !important;
        margin: 16px auto 4px !important;
        transform: none !important; /* cancel the fade-in-right shift on mobile */
    }

    .who-we-are-section .who-we-are-text {
        order: 3;
    }

    .who-we-are-section .mission-box {
        order: 4;
    }

    /* the flattened pieces lost the column padding – restore side spacing */
    .who-we-are-section .who-we-are-heading,
    .who-we-are-section .who-we-are-text,
    .who-we-are-section .mission-box {
        margin-left: 12px;
        margin-right: 12px;
    }

    .our-story-section {
        padding-bottom: 32px !important;
    }

    /* On mobile the desired order is: heading -> image -> text.
       The image and the (heading + text) live in two separate columns, so we
       flatten the wrappers with `display: contents` and reorder the now-sibling
       pieces with flex `order`. */
    .our-story-section .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .our-story-section .row > .col-12,
    .our-story-section .our-story-content {
        display: contents !important;
    }

    .our-story-section .our-story-heading {
        order: 1;
    }

    .our-story-section .our-story-image {
        order: 2;
        max-width: 260px !important;
        margin: 16px auto 4px !important;
        transform: none !important; /* cancel the fade-in-left shift on mobile */
    }

    .our-story-section .our-story-text {
        order: 3;
        transform: none !important;
    }

    /* the flattened pieces lost the column padding – restore side spacing */
    .our-story-section .our-story-heading,
    .our-story-section .our-story-text {
        padding-left: 12px;
        padding-right: 12px;
    }

    .team-section {
        padding-top: 8px !important;
        padding-bottom: 20px !important;
    }

    .join-us-section-wrapper {
        padding-bottom: 32px !important;
    }

    .partner-clinics-section {
        padding-bottom: 28px !important;
    }

    .how-it-works-section {
        padding-top: 8px !important;
        padding-bottom: 32px !important;
    }

    /* FAQ carried a 130px desktop tail that left a big empty band before the
       footer on phones (the gap the red arrow pointed at). Pull it in. */
    .faq-section {
        padding-bottom: 24px !important;
    }

    .faq-container {
        padding-bottom: 16px !important;
    }
}