/* Responsive Styles */

/* Medium Devices (Tablets, less than 992px) */
@media (max-width: 991.98px) {
    #navbar nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #navbar .logo {
        margin-bottom: 0; 
    }

    .burger {
        display: block; 
    }

    #nav-links { 
        display: flex; 
        flex-direction: column;
        align-items: center; 
        
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: var(--card-background);
        
        padding: 1rem 0;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1); 
        
        transform: translateX(-100%); 
        transition: transform 0.3s ease-in-out;
        z-index: 999; 
    }

    #nav-links.nav-active {
        transform: translateX(0); 
    }

    #nav-links li {
        margin: 10px 0;
        width: 90%; 
    }

    #nav-links li a {
        display: block;
        padding: 12px 15px; 
        text-align: center;
        color: var(--primary-color); 
        border-radius: 4px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    #nav-links li a:hover,
    #nav-links li a:focus {
        background-color: var(--secondary-color);
        color: var(--light-text-color);
    }

    #nav-links li .nav-cta { 
        background-color: var(--accent-color);
        color: var(--light-text-color) !important; 
        font-weight: bold;
    }
    
    #nav-links li .nav-cta:hover,
    #nav-links li .nav-cta:focus {
        background-color: #d35400; 
    }

    #hero {
        margin-top: 120px; /* Adjust if navbar height changes significantly */
        height: auto; /* Adjust height for smaller screens */
        padding-top: 80px;
        padding-bottom: 80px;
    }

    #hero .hero-content h1 {
        font-size: 2.8rem;
    }

    .coach-section {
        flex-direction: column;
    }
}

/* Small Devices (Landscape Phones, less than 768px) */
@media (max-width: 767.98px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }

    #hero .hero-content h1 {
        font-size: 2.5rem;
    }

    #hero .hero-content p {
        font-size: 1rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr; /* Stack cards */
    }

    /* Responsive adjustments for benefits grid already here */
    /* Navbar handled by the 991.98px breakpoint rules */
}

/* Styles for wider screens (Desktops and large tablets) */
/* Medium-Wide Screens (e.g., Tablets in landscape, smaller desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #achieve .benefits-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for good card width */
  }

  /* Ensure cards in this grid take up their column */
  #achieve .benefits-grid .benefit-card {
    width: 100%; 
  }

  /* First row cards */
  #achieve .benefits-grid .benefit-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  #achieve .benefits-grid .benefit-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  #achieve .benefits-grid .benefit-card:nth-child(3) { grid-column: 3; grid-row: 1; }

  /* Second row, cards 4 and 5 centered in the 3-column layout */
  #achieve .benefits-grid .benefit-card:nth-child(4) {
    grid-column: 2; /* Start in the second column */
    grid-row: 2;
  }
  #achieve .benefits-grid .benefit-card:nth-child(5) {
    grid-column: 3; /* Start in the third column */
    grid-row: 2;
  }
}

/* Wide Screens (Desktops) - for the 'red box' precise centering */
@media (min-width: 1200px) {
  #achieve.container {
    width: 100%; /* Ensure this section's container uses full available width up to max-width */
  }

  #achieve .benefits-grid {
    grid-template-columns: repeat(6, minmax(150px, 1fr)); /* With border-box on cards, 150px/track gives ~280px content width */
  }

  #achieve .benefits-grid .benefit-card {
    min-width: 320px; /* Enforce min card width. (2 * 150px tracks + 20px internal gap) */
  }

  /* Individual card positioning for #achieve section on wide screens */
  /* Note: The general '#achieve .benefits-grid .benefit-card' rule was removed as it became empty. */

  /* Explicitly set start column, span, and row for each card */
  #achieve .benefits-grid .benefit-card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1;}
  #achieve .benefits-grid .benefit-card:nth-child(2) { grid-column: 3 / span 2; grid-row: 1;}
  #achieve .benefits-grid .benefit-card:nth-child(3) { grid-column: 5 / span 2; grid-row: 1;}
  
  #achieve .benefits-grid .benefit-card:nth-child(4) { grid-column: 2 / span 2; grid-row: 2;} /* Starts at track 2, spans tracks 2 & 3 */
  #achieve .benefits-grid .benefit-card:nth-child(5) { grid-column: 4 / span 2; grid-row: 2;} /* Starts at track 4, spans tracks 4 & 5 */
}

/* Extra Small Devices (Portrait Phones, less than 576px) */
@media (max-width: 575.98px) {
    body {
        font-size: 15px;
    }

    .container {
        width: 95%;
    }

    #hero .hero-content h1 {
        font-size: 2rem;
    }

    #hero .hero-cta {
        padding: 12px 25px;
        font-size: 1rem;
    }

    #waitlist-form {
        padding: 20px;
    }

    #navbar .logo a {
        font-size: 1.5rem;
    }
}