/* ==========================================================================
   CULTIVATION-MOBILE.CSS
   Mobile Overrides (Max-width: 768px)
   ========================================================================== */

@media screen and (max-width: 768px) {

  .cultivation-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url(/assets/heros/cultivation_hero_mobile.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: 20rem;
}

  .narrow-container {
    width: 100% !important; /* Forces it to fill the screen, bypassing your variable */
    max-width: 100% !important; /* Prevents desktop styles from interfering */
    margin: 0 auto;
    padding: 0 2rem !important; /* Restores the 'safe area' so text doesn't touch the glass */
    box-sizing: border-box; /* Ensures the padding doesn't accidentally make it wider than 100% */
  }
  .process-section {
    padding: 6rem 0; 
  }

  /* 1. SHRINK AND FLOAT IMAGES ON MOBILE */
  .process-image-wrapper {
    float: left !important; /* Restores the text wrapping */
    width: 50% !important; /* Shrinks the photo to half the screen width */
    margin: 0.5rem 1.5rem 1rem 0 !important; /* Tighter gap so text has room to breathe */
  }

  /* 2. KEEP ALTERNATING EFFECT ON MOBILE */
  .process-section:nth-of-type(even) .process-image-wrapper {
    float: right !important; /* Puts the even photos on the right */
    margin: 0.5rem 0 1rem 1.5rem !important; /* Moves the gap to the left side of the photo */
  }

  /* Petition Adjustments */
  .petition-wrapper {
    padding: 6rem 0;
  }
  
  .petition-header {
    font-size: 3rem; 
  }
  
  .petition-card-monolith .card-body {
    padding: 3rem 2rem; 
  }
}