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

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

  .index-hero {
 background: linear-gradient(
    rgba(0, 0, 0, 0.2) 0%, 
    rgba(0, 0, 0, 0.5) 50%, 
    rgba(0, 0, 0, 0.9) 100%
  ), url(/assets/heros/index_hero_mobile.webp);
  background-position: left 1rem top 2rem;
  background-attachment:scroll;
  padding-top: 23rem;
}

  /* --- 1. Hero Callout Row --- */
  .hero-callout-row {
    flex-direction: column; /* Stack them */
    align-items: center;
    gap: 2rem;
    padding: .5rem .5rem;
    text-align: center;
  }

  .hero-outrage {
    text-align: center;
    font-size: 1.55rem;
    line-height: 1.4;
    border-left: 0.3rem solid var(--fc-accent-red); 
    background: rgba(234, 84, 85, 0.12);
    padding-left: .5rem
  }

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

  .btn-petition {
  display: inline-block;
  padding: 2rem 5rem;
  font-size: 2rem;
  line-height: 1.2;
  margin-top: 1.5rem;
  }

  .card-content .fs-polynesian {
    font-size: 1.7rem;
  }

  .status-group {
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centers the group over the petition button */
    text-align: center;
    width: 100%; /* Gives the group the absolute max width of the screen */
    gap: 1.2rem;
  }

  .status-badge {
    width: 100%;      
    max-width: 35rem; /* Keeps them a uniform, neat size on larger phones */
    min-width: 0; 
    
    /* 1. Centers the icon and text inside the badge */
    justify-content: flex-start; 
    
    /* 2. Shrink the contents slightly so the 3rd badge fits */
    font-size: 1.05rem; /* Down from 1.2rem */
    gap: 0.8rem;        /* Brings the icon closer to the text */
    padding: 1rem 1rem; /* Reduces left/right padding to give text more room */
    
    /* 3. The absolute guardrail: forbids the text from wrapping */
    white-space: nowrap; 
  }

  /* --- 3. Features Grid --- */
  .features-grid {
    grid-template-columns: 1fr; /* Single Column */
    gap: 3rem;
    margin: 4rem 0;
    padding: 0 1rem;
  }

  .feature-card {
    padding: 3rem 2rem;
  }
  
  .feature-card p {
    font-size: 1.5rem;
  }

  /* --- 4. Genetics & Carousel --- */
  .genetics-section {
    padding: 4rem 1.5rem;
  }

  .genetics-header a {
    font-size: 2.4rem; /* Smaller header */
    margin-bottom: -2rem;
  }

  

  .carousel-wrapper {
    padding: 0; /* Maximize width */
  }

  /* Adjust height for mobile proportions */
  .carousel-track-container {
    height: 40rem; 
  }

  .carousel-slide {
  margin-right: 0; 
}

  .card-image {
    width: 18rem;
    height: 24rem;
  }
  
  /* Move buttons to the edges to avoid covering art */
  .carousel-btn {
    width: 6rem;
    height: 6rem;
    font-size: 4rem;
  }
  .carousel-btn.prev { left: 0; border-radius: 50% 0 0 50%; }
  .carousel-btn.next { right: 0; border-radius: 0 50% 50% 0; }


  /* --- 5. Final CTA (Monolith) --- */
  .final-cta-wrapper {
    margin: 6rem auto 4rem;
    padding: 0 1.5rem;
  }

  .final-cta-card {
    padding: 4rem 2rem;
    gap: 2rem;
  }

  .cta-title {
    font-size: 2.6rem;
  }

  .cta-description {
    font-size: 1.5rem;
  }
}