/* ==========================================================================
   STRAINS-MOBILE.CSS (Phone Overrides)
   Max-Width: 768px
   ========================================================================== */

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

  .strains-hero {
  padding-top: 20rem;
}
  
  /* --- 1. Grid Collapse --- */
  .strain-grid {
    grid-template-columns: 1fr; /* Stack cards vertically */
    gap: 3rem;
    padding: 2rem 1.5rem;
  }

  /* --- 2. Card Adjustments --- */
  .strain-card {
    /* Remove hover lift on mobile to prevent sticky states */
    transform: none !important; 
  }
  
  .strain-image-container {
    /* Slightly taller on mobile for better visibility */
    aspect-ratio: 3 / 2; 
  }

  .strain-info {
    padding: 2rem;
  }

  .strain-name {
    font-size: 2.2rem;
  }

  .strain-info p {
    font-size: 1.5rem;
  }

  /* --- 3. Bottom Banner --- */
  .strains-petition-banner {
    padding: 4rem 2rem;
  }

  .banner-flex {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
  }

  .banner-content p {
    margin: 0 auto; /* Center align text block */
  }

  .btn-petition-alt {
    width: 100%; /* Full width button */
    display: block;
    text-align: center;
    padding: 1.5rem;
  }
}