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

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

  .about-hero {
  background: linear-gradient(
    rgba(0, 0, 0, 0.3) 0%, 
    rgba(0, 0, 0, 0.6) 60%, 
    rgba(10, 15, 25, 0.9) 100%
  ), url(/assets/heros/about_hero_mobile.jpg);
  background-size: cover;
  background-position: top;
  padding-top: 20rem;
}

.about-chapter {
width:90%
}

.about-chapter:nth-child(1) {
  padding-top: 0;
}
  /* --- 2. Typography --- */
  .chapter-title {
    font-size: 2.2rem;
    letter-spacing: 0.2rem;
    border-left-width: 0.3rem;
  }

  .about-text {
    font-size: 1.5rem;
  }

  /* --- 3. Grid Collapse --- */
  .chapter-grid {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 3rem;
  }

  /* --- 4. Image Styling --- */
  .framed-image {
    /* Reduce rotation on mobile so it doesn't clip */
    transform: rotate(1deg); 
    max-width: 90%; /* Prevent edge touching */
    margin: 0 auto;
    display: block;
  }

  .alert-box {
    padding: 1rem;
  }
 
  .alert-box .copy-text {
    margin: 0;
  }

  /* --- 5. Petition Monolith --- */
  .petition-wrapper {
    padding: 6rem 0;
  }
  
  .petition-header {
    font-size: 3rem;
    line-height: 1.1;
  }
  
  .petition-card-monolith .card-body {
    padding: 3rem 2rem;
  }

  /* Stack the horizontal check list */
  .petition-check-list {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
}