/* ==========================================================
   REALPRO_SERVICES_MOBILE_GAP_AUTHORITY_V1
   FINAL mobile spacing authority for /services/.
   Loaded after legacy service layers.
   ========================================================== */

@media (max-width:760px){

  /* =========================================
     EACH SERVICE — TOP + BOTTOM BREATHING
     ========================================= */

  html body.rp-page-services
  section.rp-services-client-service{
    padding-top:64px !important;
    padding-bottom:68px !important;

    margin:0 !important;

    overflow:visible !important;
    box-sizing:border-box !important;
  }


  /* =========================================
     FORCE TRUE MOBILE STACK
     ========================================= */

  html body.rp-page-services
  section.rp-services-client-service
  > .container.rp-services-client-service__grid{

    display:flex !important;
    flex-direction:column !important;

    grid-template-columns:none !important;
    grid-template-rows:none !important;

    gap:42px !important;
    row-gap:42px !important;

    width:100% !important;
    height:auto !important;

    align-items:stretch !important;

    overflow:visible !important;
  }


  /* =========================================
     CONTENT
     ========================================= */

  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__copy{

    position:relative !important;

    order:1 !important;

    grid-column:auto !important;
    grid-row:auto !important;

    width:100% !important;
    max-width:none !important;
    height:auto !important;

    margin:0 !important;
    padding-bottom:0 !important;

    transform:none !important;
  }


  /* =========================================
     TITLE → LIST
     ========================================= */

  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__copy > h2{

    margin-top:0 !important;
    margin-bottom:26px !important;
  }


  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__list{

    margin-top:0 !important;
    margin-bottom:0 !important;
  }


  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__list > li{

    min-height:52px !important;

    padding-top:14px !important;
    padding-bottom:14px !important;

    line-height:1.4 !important;
  }


  /* =========================================
     LIST → BUTTON
     ========================================= */

  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__action{

    position:relative !important;

    display:block !important;

    width:100% !important;

    margin:34px 0 0 !important;
    padding:0 !important;

    transform:none !important;
  }


  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__action > .btn{

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-height:56px !important;

    margin:0 !important;

    padding:15px 22px !important;

    transform:none !important;
  }


  /* =========================================
     BUTTON → IMAGE
     This is now controlled by the 42px
     FLEX GAP — not margins.
     ========================================= */

  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__media{

    position:relative !important;

    display:block !important;

    order:2 !important;

    grid-column:auto !important;
    grid-row:auto !important;

    width:100% !important;
    max-width:none !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    inset:auto !important;
    transform:none !important;

    overflow:hidden !important;
  }


  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__media picture{

    position:relative !important;

    display:block !important;

    width:100% !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    inset:auto !important;
    transform:none !important;
  }


  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__media img,

  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__media img.image-cover{

    position:relative !important;

    display:block !important;

    width:100% !important;
    height:auto !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    margin:0 !important;

    transform:none !important;
  }


  /* reverse desktop sections still become
     CONTENT → IMAGE on mobile */

  html body.rp-page-services
  section.rp-services-client-service--reverse
  .rp-services-client-service__copy{
    order:1 !important;
  }

  html body.rp-page-services
  section.rp-services-client-service--reverse
  .rp-services-client-service__media{
    order:2 !important;
  }

}


@media (max-width:390px){

  html body.rp-page-services
  section.rp-services-client-service{
    padding-top:56px !important;
    padding-bottom:60px !important;
  }

  html body.rp-page-services
  section.rp-services-client-service
  > .container.rp-services-client-service__grid{

    gap:36px !important;
    row-gap:36px !important;
  }

  html body.rp-page-services
  section.rp-services-client-service
  .rp-services-client-service__action{

    margin-top:30px !important;
  }

}