/* Responsive Styles */

/* Small devices (phones, up to 640px) */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
    
    .section-header__title {
        font-size: var(--text-3xl);
    }
    
    .section-header__subtitle {
        font-size: var(--text-lg);
    }
    
    .hero__title {
        font-size: var(--text-4xl);
    }
    
    .hero__subtitle {
        font-size: var(--text-lg);
    }
    
    .hero__inner {
        flex-direction: column;
    }
    
    .hero__image {
        margin-top: var(--space-8);
    }
    
    .search-form {
        flex-direction: column;
    }
    
    .hero__cta {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero__stats {
        justify-content: space-between;
    }
    
    .step {
        flex-direction: column;
        text-align: center;
    }
    
    .step__number {
        margin-right: 0;
        margin-bottom: var(--space-4);
    }
    
    .step__image {
        order: -1;
        margin-bottom: var(--space-4);
    }
    
    .trust-guarantee {
        flex-direction: column;
        text-align: center;
    }
    
    .trust-guarantee__icon {
        margin-right: 0;
        margin-bottom: var(--space-4);
    }
    
    .footer__top {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
    
    .footer__legal {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .how-it-works__cta {
        flex-direction: column;
    }
    
    .featured-sitters__cta {
        flex-direction: column;
    }
}

/* Medium devices (tablets, 641px to 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .hero__inner {
        flex-direction: column;
    }
    
    .hero__image {
        margin-top: var(--space-8);
    }
    
    .search-form {
        flex-wrap: wrap;
    }
    
    .search-form__group {
        flex-basis: 100%;
        margin-bottom: var(--space-2);
    }
    
    .search-form__button {
        flex-basis: 100%;
    }
    
    .step {
        flex-direction: column;
        text-align: center;
    }
    
    .step__number {
        margin-right: 0;
        margin-bottom: var(--space-4);
    }
    
    .step__image {
        order: -1;
        margin-bottom: var(--space-4);
    }
    
    .footer__top {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    .footer__column--logo {
        grid-column: span 2;
    }
}

/* Medium-Large devices (tablets, 769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero__title {
        font-size: var(--text-4xl);
    }
    
    .hero__image {
        max-width: 400px;
    }
    
    .footer__top {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
    
    .footer__column--logo {
        grid-column: span 3;
    }
}

/* All mobile devices (up to 768px) */
@media (max-width: 768px) {
    .header__inner {
        height: 70px;
    }
    
    .nav {
        display: none;
    }
    
    .header__buttons {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .mobile-nav.active {
        display: block;
        transform: translateY(0);
    }
    
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

/* Landscape mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding-top: 100px;
        padding-bottom: var(--space-8);
    }
    
    .hero__inner {
        flex-direction: row;
        align-items: center;
    }
    
    .hero__title {
        font-size: var(--text-3xl);
    }
    
    .hero__subtitle {
        font-size: var(--text-base);
        margin-bottom: var(--space-4);
    }
    
    .hero__cta {
        margin-bottom: var(--space-4);
    }
    
    .hero__stats {
        margin-bottom: 0;
    }
}