/* =====================================================================
   KlinikPlus – Service pages · MOBILE section rhythm + hero order
   ---------------------------------------------------------------------
   Same treatment About got in about-mobile.css: the desktop composition
   carries 60–130px of vertical padding per section, which stacks into
   large empty bands once everything is in one column on a phone. This
   file pulls the service page into the same tighter rhythm and reorders
   the hero to heading -> image -> text -> CTA.

   Everything is wrapped in `@media (max-width: 991px)`, so the
   laptop/desktop design is never touched. Load this AFTER services.css —
   several rules below match services.css selectors one-for-one so the
   later position in the cascade is what makes them win.
   ===================================================================== */

@media (max-width: 991px) {

    /* -----------------------------------------------------------------
       TOP OF PAGE — space above the breadcrumb
       The markup carries a fixed 100px spacer div between the navigation
       and the hero (inline height, hence `!important`), and the
       breadcrumb adds another 20px on top of that.
    ----------------------------------------------------------------- */
    .service-top-spacer {
        height: 24px !important;
    }

    .klinikplus-service-page .service-breadcrumb {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    /* -----------------------------------------------------------------
       HERO — mobile order: heading -> image -> text -> CTA
       The heading, text and button live in one column and the image in
       another, so flatten both wrappers with `display: contents` and
       reorder the now-sibling pieces with flex `order` (the same trick
       about-mobile.css uses on the About hero).
    ----------------------------------------------------------------- */
    .service-hero-section .row {
        display: flex !important;
        flex-direction: column !important;
        /* the row is `align-items-center`; in column-flex that shrinks
           every child to its content width */
        align-items: stretch !important;
        /* `display: contents` drops the columns' 12px gutter but the row
           keeps its matching negative margin, so every flattened child
           would hang 12px past the container on both sides. Cancel the
           negative margin instead of padding each child back in. */
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* marketing-services.blade.php puts `gap-8 mb-12` on this row. Once
           the columns are flattened that 2rem gap lands between every piece
           of the hero, and the 3rem tail fights the 24px section rhythm.
           No-ops on the pages whose row carries no utility classes. */
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

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

    .service-hero-section .service-heading {
        order: 1;
        /* centred like the About page's section headings on mobile; the body
           copy and the CTA below it stay left-aligned */
        text-align: center;
    }

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

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

    .service-hero-section .hero-btn-primary {
        order: 4;
        /* the row stretches its children; on tablets (where services.css
           does not set width:100%) that would blow the pill up to the full
           screen width. Below 576px width:100% still wins, as designed. */
        align-self: flex-start;
        /* The "Join Now" pill's shape comes from services.css, which
           seo-services.blade.php never loads (its <link>s sit in a dead
           @push). Restating it here makes that page's button match every
           other service page; on the pages that DO load services.css these
           are the identical values, so nothing changes. */
        justify-content: center;
        font-weight: 500;
        border-radius: 28px;
    }

    /* services.css takes the pill full-width only on phones — tablets keep
       the content-width pill. Same breakpoint so every service page agrees. */
    @media (max-width: 576px) {
        .service-hero-section .hero-btn-primary {
            width: 100%;
        }
    }

    /* services.css pins these three with `!important` on a six-class
       selector, so the overrides have to match it and rely on this file
       loading later. */
    .klinikplus-service-page .service-hero-section .klinikplus-container .row .col-12 .service-hero-content .service-heading {
        margin-bottom: 12px !important;
    }

    .klinikplus-service-page .service-hero-section .klinikplus-container .row .col-12 .service-hero-content .service-hero-text {
        margin-bottom: 20px !important;
    }

    /* -----------------------------------------------------------------
       SECTION RHYTHM (About-page values)
    ----------------------------------------------------------------- */
    .service-hero-section {
        padding-top: 0 !important;
        padding-bottom: 24px !important;
    }

    /* These are deliberately NOT scoped under `.klinikplus-service-page`:
       seo-services.blade.php has stray closing tags that end that wrapper
       early, leaving the CTA, testimonials, FAQ and contact sections
       outside it. The wrapper is styled in klinikplus.css, so re-nesting
       them would change that page's desktop layout. Scoping by "this file
       is only included on service pages" is enough. */
    .stats-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .services-section-container {
        padding: 24px 0 !important;
    }

    /* the other stats treatment — <x-stats-section /> renders a wavy band of
       plain counters rather than the three coloured cards */
    .stats-section-wavy {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .design-approach-section,
    .development-services-section,
    .why-choose-us-section,
    .content-services-section,
    .seo-optimization-section,
    .seo-services-section,
    .why-seo-matters-section,
    /* these two are bare <section>s with inline padding; the classes exist
       only as hooks for this file, hence the !important above */
    .mkt-services-section,
    .mkt-why-choose-section,
    .smm-services-section,
    .smm-benefits-section,
    .email-services-section,
    .email-benefits-section,
    .mvc-services-section,
    .mvc-benefits-section,
    .crm-why-section,
    .crmsetup-why-section,
    .crmsetup-how-it-works,
    .crmsup-services-section,
    .crmsup-why-section,
    .fm-services-section,
    .fm-why-section,
    .fms-services-section,
    .fms-why-section,
    .mfn-services-section,
    .mfn-why-section,
    .pms-services-section,
    .pms-why-section,
    .epcm-services-section,
    .epcm-why-section,
    .paym-services-section,
    .paym-why-section,
    .paid-services-section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .fm-why-head,
    .fms-services-head,
    .fms-why-head,
    .mfn-services-head,
    .mfn-why-head,
    .pms-services-head,
    .pms-why-head,
    .epcm-services-head,
    .epcm-why-head,
    .paym-services-head,
    .paym-why-head,
    .paid-services-head {
        margin-bottom: 16px !important;
    }

    /* -----------------------------------------------------------------
       "Benefits of Professional Website Design" list (website-design).
       Each row is `<span>Title:</span><span>body copy</span>` and BOTH
       spans carry an inline `font-size` — which is why the page's own
       `@media (max-width: 768px)` rules for them never took effect: a
       style attribute beats a stylesheet rule that has no !important.

       On phones the title drops to the body copy's size and becomes a
       block, so the copy starts on the line underneath instead of running
       on from the colon.
    ----------------------------------------------------------------- */
    .design-approach-section .benefit-item > div > span:first-child {
        display: block;
        font-size: 1.125rem !important;
        margin-bottom: 2px;
    }

    /* Our Financial Modeling Services: the dashboard preview is the right
       half on desktop, so it lands under the tabs once the grid collapses
       to one column. Put it on top instead. */
    .fm-services-grid .fm-media-col {
        order: 1;
    }

    .fm-services-grid .fm-tabs-col {
        order: 2;
    }

    /* Patient Management Services: same shape — the dashboard preview is the
       right half on desktop, so it falls under the tabs once the grid
       collapses to one column. Put it on top instead. */
    .pms-media-col,
    .paym-media-col {
        order: 1;
    }

    .pms-tabs-col,
    .paym-tabs-col {
        order: 2;
    }

    /* The column carries an inline `min-height: 380px` so the absolutely
       positioned `.tab-content` images have something to fill — it was sized
       to match the three stacked tabs beside it on desktop. Below 768px the
       page shrinks `.pms-tab-img` to 260px but leaves the column at 380px,
       so 120px of empty space opened up under the image. Match the two.
       (768-991px keeps 380px, where the image still fills the column.) */
    @media (max-width: 767px) {
        .pms-media-col,
        .paym-media-col {
            min-height: 260px !important;
        }
    }

    /* Both CRM Support grids are `repeat(3, 1fr)` inline with no breakpoint
       of their own, so all three cards stayed side by side on a phone. */
    .crmsup-services-grid,
    .crmsup-why-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .crmsup-service-card,
    .crmsup-why-card {
        padding: 20px !important;
    }

    /* -----------------------------------------------------------------
       OUR CRM SERVICES — each of the three rows reads
       heading -> image -> copy -> link on mobile.
       The heading, copy and link share one `.crm-service-copy` wrapper,
       so it is flattened to let the image slide in under the heading.
       This also normalises rows 1 and 3 (copy first) with row 2 (image
       first), which alternate on desktop.
    ----------------------------------------------------------------- */
    .crm-service-row {
        /* the row is `align-items: flex-start`; in column-flex that shrinks
           every flattened child to its own content width */
        align-items: stretch !important;
    }

    .crm-service-copy {
        display: contents !important;
    }

    .crm-service-row h3 {
        order: 1;
    }

    .crm-service-media {
        order: 2;
    }

    .crm-service-row p {
        order: 3;
    }

    .crm-service-row .btn-explore,
    .crm-service-row .btn-visit {
        order: 4;
    }

    /* --- and tighten the section ---------------------------------------
       The row's 24px gap was a desktop column gutter; flattened it lands
       between all four pieces. On top of that the heading, paragraph and
       button carry inline margins written for the desktop stack, so the
       gap and the margins were being paid twice over.
    ------------------------------------------------------------------- */
    .crm-services-title-wrap {
        margin-bottom: 12px !important;
    }

    .crm-service-row {
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    /* The page centres the whole row below 1024px. Keep the h3 centred (as
       asked) but set the body copy back to left — centred paragraphs of this
       length are hard to read on a narrow column. */
    .crm-service-row p {
        text-align: left;
    }

    .crm-service-row h3 {
        margin-bottom: 0 !important;
    }

    .crm-service-row p {
        margin-bottom: 0 !important;
    }

    /* 2 classes + tag, to beat the page's own `img.crm-service-img` rule
       which sets 280px !important from a later <style> block */
    .crm-service-row img.crm-service-img {
        height: 190px !important;
    }

    /* A compact, centred pill. klinikplus.css forces these full-width with
       `.btn-explore, .btn-visit { width: 100% !important }` under 768px, so
       the two-class selector here is what wins it back. */
    .crm-service-row .btn-explore,
    .crm-service-row .btn-visit {
        margin-top: 0 !important;
        padding: 10px 20px !important;
        font-size: 0.875rem !important;
        width: auto !important;
        align-self: center;
    }

    /* -----------------------------------------------------------------
       WHY CHOOSE OUR CRM SOLUTIONS — one card per row.
       The grid is `repeat(3, 1fr)` as an inline style with no breakpoint
       of its own, so all three cards stayed side by side on a phone.
    ----------------------------------------------------------------- */
    .crm-why-head {
        margin-bottom: 16px !important;
    }

    .crm-why-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .crm-why-grid .crm-why-card {
        padding: 20px !important;
    }

    /* -----------------------------------------------------------------
       OUR MEDICAL VIDEO SERVICES (slider) — mobile order:
       title -> image -> copy + link -> arrows/dots.
       The title, copy and link all live inside one `.slide`, so that
       wrapper has to be flattened for the image to sit between the title
       and the copy.

       Only the VISIBLE slide may be flattened. The slider JS toggles an
       inline `display: none/block` on each `.slide` and never syncs the
       `.active` class (it only moves that class between dots), so
       `.slide.active` would be wrong from the second slide onward.
       Matching "has no inline display:none" tracks the JS exactly: it is
       true for slide 0 on load (no style attribute at all) and true for
       whichever slide the JS last set to `block`.
    ----------------------------------------------------------------- */
    .mvc-services-section .slider-row {
        /* the row is `align-items: center` inline; in column-flex that
           shrinks every flattened child to its own content width */
        align-items: stretch !important;
    }

    .mvc-services-section .slider-content,
    .mvc-services-section .slide:not([style*="display: none"]) {
        display: contents !important;
    }

    .mvc-services-section .slide h3 {
        order: 1;
    }

    .mvc-services-section .slider-image {
        order: 2;
    }

    .mvc-services-section .slide p {
        order: 3;
    }

    .mvc-services-section .slide > a {
        order: 4;
        /* the link is inline-flex, so centring the flex item is what actually
           centres it in the card */
        align-self: center;
    }

    /* the unclassed prev / dots / next row, last child of .slider-content */
    .mvc-services-section .slider-content > div:last-child {
        order: 5;
        /* it is a full-width flex row whose children pack left by default */
        justify-content: center !important;
    }

    /* --- and compress the card itself ---------------------------------
       The 40px row gap was written for a two-column desktop card, where it
       is a single gutter. Flattened into one column it lands between all
       five pieces (4 x 40px = 160px of dead space), which is most of why
       the card ran to 737px on a phone. Same story for the stacked
       heading/paragraph margins, which the gap now covers. */
    .mvc-services-section .slider-card {
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .mvc-services-section .slider-row {
        gap: 14px !important;
    }

    .mvc-services-section .slide h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
    }

    .mvc-services-section .slide p {
        margin-bottom: 0 !important;
    }

    .mvc-services-section .slide > a {
        font-size: 0.9375rem !important;
    }

    .mvc-services-section .slider-image img.mvc-slide-img {
        height: 170px !important;
    }

    .mvc-services-section .slider-content > div:last-child {
        margin-top: 0 !important;
        gap: 12px !important;
    }

    /* `margin: 0` matters: klinikplus.css carries an unrelated global
       `.next-btn` rule (a full-width 3.5rem form button) whose 32px/24px
       margins land on this slider's "next" arrow, adding 56px of dead
       height to the nav row and knocking the two arrows out of line. */
    .mvc-services-section .slider-btn {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
    }

    /* the heading above the card */
    .mvc-services-section .klinikplus-container > div:first-child {
        margin-bottom: 16px !important;
    }

    /* -----------------------------------------------------------------
       WHY CHOOSE VIDEO MARKETING — mobile order: image before the three
       benefit cards. The page already stacks `.video-benefits-row` into a
       column; the cards column just comes first in the DOM because it is
       the left half on desktop. The heading above is already centred by
       its own wrapper.
    ----------------------------------------------------------------- */
    .video-benefits-image {
        order: 1;
    }

    .video-benefits-cards {
        order: 2;
    }

    /* -----------------------------------------------------------------
       DEVELOPMENT SERVICES — mobile order: heading + text -> image ->
       the three feature cards. The markup puts the image column first
       (it is the left half on desktop) with the heading, copy and cards
       in the second column, so flatten both columns plus
       `.development-content` and reorder, exactly as the hero does.
    ----------------------------------------------------------------- */
    .development-services-section .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .development-services-section .row > [class*="col-"],
    .development-services-section .development-content {
        display: contents !important;
    }

    .development-services-section .development-heading {
        order: 1;
        /* centred like the About page's section headings on mobile
           (.who-we-are-heading / .our-story-heading in about-mobile.css) */
        text-align: center;
    }

    .development-services-section .development-text {
        order: 2;
    }

    .development-services-section .development-image-container {
        order: 3;
        margin: 4px 0 20px;
    }

    .development-services-section .development-features {
        order: 4;
    }

    /* -----------------------------------------------------------------
       SEO OPTIMIZATION — mobile order: centred heading -> image -> the
       rest of the copy -> the three cards. The page already collapses
       `.seo-grid` to a single flex column below 992px; the heading, body
       copy and orange tagline are wrapped together in `.seo-intro`, so
       that wrapper is flattened to let the image slide in between the
       heading and the copy.
    ----------------------------------------------------------------- */
    .seo-optimization-section .seo-intro {
        display: contents !important;
    }

    .seo-optimization-section .seo-heading {
        order: 1;
        text-align: center;
        /* the grid's own 1.25rem gap now sets the rhythm between these
           pieces, so their stacked margins would double it up */
        margin-bottom: 0 !important;
    }

    .seo-optimization-section .seo-image-container {
        order: 2;
    }

    .seo-optimization-section .seo-text {
        order: 3;
        margin-bottom: 0 !important;
    }

    .seo-optimization-section .benefits-heading {
        order: 4;
    }

    .seo-optimization-section .seo-card-trust {
        order: 5;
    }

    .seo-optimization-section .seo-card-boosts {
        order: 6;
    }

    .seo-optimization-section .seo-card-engagement {
        order: 7;
    }

    /* -----------------------------------------------------------------
       OUR MARKETING SERVICES — compress the six cards.
       Every value here is an inline style in the markup (built for the
       desktop row layout: 40px padding, a 40px gap between the number,
       the copy and the button), which stacks into ~450px-tall cards once
       the row becomes a column on a phone. Hence the !importants.
    ----------------------------------------------------------------- */
    .mkt-services-head {
        margin-bottom: 16px !important;
    }

    /* the wrapper and the h2 each carry a 50px tail — 100px of dead space */
    .mkt-services-head h2 {
        margin-bottom: 0 !important;
    }

    .mkt-services-list {
        gap: 16px !important;
    }

    .mkt-services-section .service-item {
        padding: 20px !important;
        gap: 14px !important;
        border-radius: 1.25rem !important;
    }

    /* the rule that sized the orange "01" / "02" index is gone with the
       index itself — the service logos replaced those numbers, and its
       `> div:first-child` selector now matches nothing anyway, since the
       card's first child is the <img>. */

    .mkt-services-section .service-item h3 {
        font-size: 1.125rem !important;
        margin-bottom: 8px !important;
    }

    .mkt-services-section .service-item p {
        font-size: 0.9375rem !important;
    }

    /* "Explore Now" — same compact pill sizing cta-mobile.css gives the
       other buttons on phones */
    .mkt-services-section .service-item a {
        padding: 9px 18px !important;
        font-size: 0.8125rem !important;
    }

    .mkt-services-section .service-item a svg {
        width: 14px;
        height: 14px;
    }

    /* -----------------------------------------------------------------
       WHY SEO MATTERS — mobile order: centred heading -> image -> the
       benefit list. The image is its own column (the left half on
       desktop) and the heading + list share the second one, so flatten
       both columns and reorder.
    ----------------------------------------------------------------- */
    .why-seo-matters-section .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .why-seo-matters-section .row > [class*="col-"] {
        display: contents !important;
    }

    .why-seo-matters-section .why-seo-heading {
        order: 1;
        text-align: center;
        /* the h2 also carries Bootstrap's `mb-4`, which is !important */
        margin-bottom: 12px !important;
    }

    .why-seo-matters-section .why-seo-image-container {
        order: 2;
        margin: 0 0 20px;
    }

    .why-seo-matters-section .seo-benefits {
        order: 3;
    }

    /* updated.css sets `margin: 0 0 80px !important` on this wrapper. */
    .cta-section-wrapper {
        margin: 0 0 32px !important;
    }

    /* the faq component carries `padding: 0 0 130px` as an inline style */
    .faq-section {
        padding-bottom: 24px !important;
    }

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

    /* -----------------------------------------------------------------
       CONTACT SECTION + FORM — the landing page's compact phone treatment.
       These rules already existed, but only inside home-mobile.css scoped
       under `.klinikplus-home-page`, so every service page rendered the
       full-size desktop form (1350px tall vs the home page's 1042px).
       Same values, unscoped, so the two now match.
    ----------------------------------------------------------------- */
    .contact-section .transform-clinic-container {
        gap: 16px !important;
    }

    .contact-section .transform-content {
        padding: 6px !important;
    }

    .contact-section .transform-content h2 {
        font-size: 1.25rem !important;      /* 20px */
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .contact-section .transform-text {
        font-size: 0.9375rem !important;    /* 15px */
        margin-bottom: 16px !important;
    }

    .contact-section .contact-info {
        margin-top: 18px !important;
    }

    .contact-section .contact-info-item {
        margin-bottom: 14px !important;
    }

    .contact-section .contact-info-content h3 {
        margin-bottom: 0 !important;
        line-height: 1.3 !important;
    }

    .contact-section .contact-info-content p {
        line-height: 1.3 !important;
    }

    .contact-section .transform-form {
        padding: 20px 16px !important;
    }

    .contact-section form {
        gap: 10px !important;
    }

    .contact-section .form-title {
        font-size: 1.1875rem !important;    /* 19px */
        line-height: 1.3 !important;
    }

    .contact-section .form-subtitle {
        font-size: 0.875rem !important;     /* 14px */
        line-height: 1.4 !important;
    }

    .contact-section .form-field .form-label {
        margin-bottom: 4px !important;
    }

    .contact-section .form-field input,
    .contact-section .form-field textarea {
        padding: 11px 14px !important;
        font-size: 0.875rem !important;     /* 14px */
    }

    /* 20px, not the 24-32px used elsewhere: the form sits above the copy on
       mobile, so this tail lands right before the footer and stacks on the
       footer's own top padding. */
    .contact-section {
        padding-bottom: 20px !important;
    }

    /* -----------------------------------------------------------------
       FOOTER — same mobile treatment the landing page already has
       (home-mobile.css). The footer is a shared layout partial with no
       per-page body class, so these selectors are unscoped and are
       page-scoped by the fact that this file only loads here.

       The logo / email / phone block above "Follow Us" repeats the
       contact section directly above it, so it is dropped on phones and
       the social row closes the gap it leaves behind.
    ----------------------------------------------------------------- */
    footer .footer-brand-intro {
        display: none !important;
    }

    footer .footer-social-link {
        margin-top: 0 !important;
    }

    footer > .container {
        padding-top: 12px !important;
    }
}