/* ==========================================================================
   ReconditionTech V10
   Mobile behaviour mapped from the ACTUAL approved À propos implementation.

   À propos reference rules in apropos-master.css:
   - mobile breakpoint: max-width 900px
   - hero margin: 8px 12px
   - hero width effectively: viewport - 24px
   - hero height: auto
   - shell side padding: 20px
   - stacked content on mobile
   - no arbitrary 390/405/410px mobile hero height

   Scope of this file:
   - Notre mission & Impact
   - Donner du matériel
   - Notre processus
   ONLY.
   ========================================================================== */

@media (max-width: 900px) {

  /* --------------------------------------------------------------
     Shared mobile page geometry = À propos behaviour
     -------------------------------------------------------------- */
  .mi-section-shell,
  .dr-shell,
  .process-master-v1 .pr-shell {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* --------------------------------------------------------------
     HERO
     Exact À propos outer behaviour:
       margin: 8px 12px
       height: auto
     We keep the target pages' live HTML text, so their natural content
     determines height instead of forcing the old 410px mobile box.
     -------------------------------------------------------------- */
  .mi-hero.rt-green-hero,
  .dr-hero.rt-green-hero,
  .process-master-v1 .pr-hero.rt-green-hero {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 8px 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: block !important;
  }

  .mi-hero.rt-green-hero::before,
  .dr-hero.rt-green-hero::before,
  .process-master-v1 .pr-hero.rt-green-hero::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* Preserve the approved visual subjects on the right. */
  .mi-hero.rt-green-hero::before {
    background-position: 66% center !important;
  }

  .dr-hero.rt-green-hero::before {
    background-position: 68% center !important;
  }

  .process-master-v1 .pr-hero.rt-green-hero::before {
    background-position: 70% center !important;
  }

  /* Use the existing approved green treatment, without introducing
     a separate mobile-only layout or image band. */
  .mi-hero.rt-green-hero::after,
  .dr-hero.rt-green-hero::after,
  .process-master-v1 .pr-hero.rt-green-hero::after {
    background:
      linear-gradient(
        90deg,
        rgba(4,48,31,.95) 0%,
        rgba(4,48,31,.80) 52%,
        rgba(4,48,31,.42) 72%,
        rgba(4,48,31,.10) 100%
      ) !important;
  }

  /* À propos uses 30px 24px for the mobile hero copy before the
     image-only V7 rule hides it. Reuse that exact spacing here. */
  .mi-hero.rt-green-hero .mi-hero-copy,
  .dr-hero.rt-green-hero .dr-hero-copy,
  .process-master-v1 .pr-hero.rt-green-hero .pr-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 30px 24px !important;
    box-sizing: border-box !important;
  }

  /* Do not enlarge typography beyond the existing responsive values. */
  .mi-hero.rt-green-hero h1,
  .dr-hero.rt-green-hero h1,
  .process-master-v1 .pr-hero.rt-green-hero h1 {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  /* Keep calls-to-action inside the natural-height hero. */
  .mi-hero-actions,
  .dr-actions,
  .process-master-v1 .pr-actions {
    flex-wrap: wrap !important;
  }

  /* --------------------------------------------------------------
     CONTENT FLOW
     Map À propos' stacked-mobile philosophy to equivalent structures.
     -------------------------------------------------------------- */

  /* Mission & Impact */
  .mi-feature-layout {
    grid-template-columns: 1fr !important;
  }

  .mi-side-intro {
    padding-top: 0 !important;
  }

  .mi-side-intro > p {
    margin-left: 0 !important;
    max-width: none !important;
  }

  .mi-card-grid.mi-grid-4,
  .mi-card-grid.mi-grid-3,
  .mi-benefit-grid {
    grid-template-columns: 1fr !important;
  }

  .mi-process-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .mi-arrow {
    display: none !important;
  }

  /* Donner */
  .dr-two-col,
  .dr-equipment-grid,
  .dr-steps,
  .dr-final-grid {
    grid-template-columns: 1fr !important;
  }

  .dr-step-line {
    display: none !important;
  }

  .dr-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dr-btn {
    width: 100% !important;
  }

  /* Processus */
  .process-master-v1 .pr-steps,
  .process-master-v1 .pr-commitments,
  .process-master-v1 .pr-final-grid {
    grid-template-columns: 1fr !important;
  }

  .process-master-v1 .pr-steps article:not(:last-child)::after {
    display: none !important;
  }
}

@media (max-width: 560px) {
  /* Keep the exact À propos 20px shell padding even on narrower phones.
     Do not introduce a second arbitrary mobile scale. */
  .mi-section-shell,
  .dr-shell,
  .process-master-v1 .pr-shell {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mi-hero.rt-green-hero .mi-hero-copy,
  .dr-hero.rt-green-hero .dr-hero-copy,
  .process-master-v1 .pr-hero.rt-green-hero .pr-hero-copy {
    padding: 30px 24px !important;
  }
}