/* css/responsive.css - True Tide Crewing - Responsive Breakpoints */

/* ============================================
   TABLET - 768px and below
   ============================================ */
@media (max-width: 768px) {

    /* Typography scales down */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.25rem; }

    /* Show hamburger, hide desktop links */
    .navbar__hamburger {
        display: flex;
    }

    .navbar__links {
        /* Hidden by default on mobile */
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        background-color: var(--color-navy);
        flex-direction: column;
        padding: var(--spacing-sm) 0;
        box-shadow: var(--shadow-lg);
    }

    /* Shown when menu is open */
    .navbar__links.active {
        display: flex;
    }

    .navbar__links a {
        padding: var(--spacing-sm) var(--spacing-md);
        width: 100%;
        text-align: center;
    }

    /* Remove underline effect on mobile */
    .navbar__links a::after {
        display: none;
    }

    .navbar__cta {
        margin: var(--spacing-xs) var(--spacing-md);
        text-align: center;
    }

    /* Hamburger open animation */
    .navbar__hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .navbar__hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .navbar__hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Hero */
    .hero {
        min-height: 70vh;
    }

    .hero__content h1 {
        font-size: 2rem;
    }

    .hero__content p {
        font-size: 1rem;
    }

    .hero--page {
        min-height: 25vh;
    }

    .hero--page h1 {
        font-size: 1.8rem;
    }

    /* Footer stacks to single column */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    /* Form rows stack on mobile */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Section spacing */
    .section {
        padding: var(--spacing-xl) 0;
    }

    /* Process steps stack */
    .process-steps {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Cards stack */
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SMALL MOBILE - 480px and below
   ============================================ */
@media (max-width: 480px) {

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .hero__content {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .hero__buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .form-container {
        padding: var(--spacing-md);
    }

    /* Cards need less padding */
    .card {
        padding: var(--spacing-md);
    }
}

/* ============================================
   LARGE DESKTOP - 1024px and above
   ============================================ */
@media (min-width: 1024px) {

    .hero__content h1 {
        font-size: 3.25rem;
    }

    /* Cards always 4 columns on desktop */
    .cards-grid--four {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Process steps always 4 columns */
    .process-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}