/* Responsive Styles */

/* Mobile First Approach - Base styles are for mobile */

/* Small Mobile (320px - 479px) */
@media (max-width: 479px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero__title {
        font-size: var(--font-size-xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-base);
    }
    
    .section__title {
        font-size: var(--font-size-lg);
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
    
    .header__content {
        padding: var(--spacing-xs) 0;
        min-height: 60px;
    }
    
    .logo__text {
        font-size: var(--font-size-base);
    }
    
    .contact__link {
        width: 32px;
        height: 32px;
    }
    
    .contact__icon {
        width: 20px;
        height: 20px;
    }
    
    .intro-trust,
    .upcoming-trips,
    .services,
    .instagram,
    .testimonials,
    .contact-form {
        padding: var(--spacing-xl) 0;
    }
    
    .trip-card__content {
        padding: var(--spacing-md);
    }
    
    .service-card {
        padding: var(--spacing-lg);
    }
    
    .testimonial-card {
        padding: var(--spacing-lg);
    }
    
    .form__row {
        grid-template-columns: 1fr;
    }
}

/* Mobile (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .hero__title {
        font-size: var(--font-size-2xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-lg);
    }
    
    .section__title {
        font-size: var(--font-size-xl);
    }
    
    .trips-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__title {
        font-size: var(--font-size-3xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-xl);
    }
    
    .section__title {
        font-size: var(--font-size-2xl);
    }
    
    .trips-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
    
    .intro-trust__main {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .form__row {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer__content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

/* Desktop (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .hero__title {
        font-size: var(--font-size-4xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-xl);
    }
    
    .section__title {
        font-size: var(--font-size-3xl);
    }
    
    .trips-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
    
    .footer__content {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .hero__title {
        font-size: var(--font-size-5xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-xl);
    }
    
    .section__title {
        font-size: var(--font-size-4xl);
    }
    
    .container {
        padding: 0 var(--spacing-xl);
    }
    
    .intro-trust,
    .upcoming-trips,
    .services,
    .instagram,
    .testimonials,
    .contact-form {
        padding: var(--spacing-3xl) 0;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: 100vh;
        min-height: 400px;
    }
    
    .hero__title {
        font-size: var(--font-size-xl);
    }
    
    .hero__subtitle {
        font-size: var(--font-size-base);
    }
    
    .hero__actions {
        flex-direction: row;
        gap: var(--spacing-md);
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero__video,
    .hero__image,
    .trip-card__image img,
    .instagram-post img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .contact__link {
        width: 48px;
        height: 48px;
    }
    
    .nav__link {
        padding: var(--spacing-sm) 0;
    }
    
    .trip-card:hover,
    .instagram-post:hover,
    .service-card:hover {
        transform: none;
    }
    
    .trip-card__overlay,
    .instagram-post__overlay {
        opacity: 0;
    }
}

/* Hover Devices */
@media (hover: hover) and (pointer: fine) {
    .trip-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .instagram-post:hover {
        transform: scale(1.05);
    }
    
    .btn:hover {
        transform: translateY(-2px);
    }
}

/* Print Responsive */
@media print {
    .container {
        max-width: none;
        padding: 0;
    }
    
    .hero {
        height: auto;
        padding: 2cm 0;
    }
    
    .hero__content {
        max-width: none;
        padding: 0;
    }
    
    .trips-grid,
    .services-grid,
    .testimonials-grid,
    .instagram-grid {
        display: block;
    }
    
    .trip-card,
    .service-card,
    .testimonial-card {
        margin-bottom: 1cm;
        page-break-inside: avoid;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        animation: none;
    }
    
    .trip-card:hover,
    .instagram-post:hover,
    .btn:hover {
        transform: none;
    }
    
    .trip-card__overlay,
    .instagram-post__overlay {
        transition: none;
    }
}

/* Dark Mode Responsive */
@media (prefers-color-scheme: dark) {
    .header {
        background-color: rgba(0, 0, 0, 0.95);
        border-bottom-color: #333;
    }
    
    .header--scrolled {
        background-color: rgba(0, 0, 0, 0.9);
    }
    
    .mobile-menu {
        background-color: var(--color-secondary);
        border-bottom-color: #333;
    }
}

/* Container Queries (Modern browsers) */
@supports (container-type: inline-size) {
    .trips-grid {
        container-type: inline-size;
    }
    
    @container (min-width: 600px) {
        .trip-card {
            display: flex;
            flex-direction: row;
        }
        
        .trip-card__image {
            width: 40%;
        }
        
        .trip-card__content {
            width: 60%;
        }
    }
    
    @container (min-width: 900px) {
        .trip-card {
            flex-direction: column;
        }
        
        .trip-card__image {
            width: 100%;
        }
        
        .trip-card__content {
            width: 100%;
        }
    }
}

/* Flexible Grid System */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Flexible Spacing */
.spacing-xs { margin-bottom: var(--spacing-xs); }
.spacing-sm { margin-bottom: var(--spacing-sm); }
.spacing-md { margin-bottom: var(--spacing-md); }
.spacing-lg { margin-bottom: var(--spacing-lg); }
.spacing-xl { margin-bottom: var(--spacing-xl); }
.spacing-2xl { margin-bottom: var(--spacing-2xl); }
.spacing-3xl { margin-bottom: var(--spacing-3xl); }

/* Responsive Typography */
.text-responsive {
    font-size: var(--font-size-base);
}

@media (min-width: 768px) {
    .text-responsive {
        font-size: var(--font-size-lg);
    }
}

@media (min-width: 1024px) {
    .text-responsive {
        font-size: var(--font-size-xl);
    }
}

/* Responsive Images */
.img-responsive {
    width: 100%;
    height: auto;
}

.img-responsive--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-responsive--contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive Utilities */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
    
    .hide-tablet {
        display: none;
    }
}

@media (min-width: 1024px) {
    .hide-tablet {
        display: block;
    }
    
    .hide-desktop {
        display: none;
    }
}

.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none;
    }
}