/* =====================================================
   HYGGE HEAD SPA – Responsive Styles
   Mobile-first Optimierung
   ===================================================== */

/* --- Tablet & below (max 1024px) --- */
@media (max-width: 1024px) {
    .intro-grid,
    .contact-grid,
    .atmosphere-grid,
    .atmosphere-grid.reverse {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .intro-image {
        aspect-ratio: 16/10;
        order: -1;
    }

    .features-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

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

/* --- Mobile Navigation (max 768px) --- */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(340px, 85vw);
        height: 100vh;
        background: var(--color-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        padding: 3rem;
        transform: translateX(100%);
        transition: transform 0.5s var(--ease-out);
        z-index: var(--z-nav);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.open {
        transform: translateX(0);
    }

    .nav-link {
        font-size: 1rem;
        letter-spacing: 0.12em;
    }

    .nav-cta {
        display: none;
    }

    /* Show CTA inside mobile menu */
    .nav-menu::after {
        content: 'Termin buchen';
        font-family: var(--font-sans);
        font-size: var(--fs-small);
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-white);
        background: var(--color-primary);
        padding: 0.9rem 2rem;
        border-radius: var(--radius-sm);
        margin-top: 1rem;
        cursor: pointer;
    }

    /* Hero adjustments */
    .hero {
        min-height: 100svh;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3.2rem);
    }

    .hero-text {
        font-size: 0.95rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-scroll {
        display: none;
    }

    /* Grid adjustments */
    .features-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-item {
        padding: 1.5rem;
        display: flex;
        gap: 1.5rem;
        text-align: left;
    }

    .feature-icon {
        margin: 0;
        flex-shrink: 0;
    }

    .packages-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-top {
        flex-direction: column;
        text-align: center;
    }

    .footer-cta {
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-legal {
        gap: 1.5rem;
    }

    /* Flash messages */
    .flash-messages {
        right: 1rem;
        left: 1rem;
        max-width: none;
    }

    /* Extras grid */
    .extras-grid {
        grid-template-columns: 1fr;
    }

    /* Process steps */
    .process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* Section padding */
    .section {
        padding: clamp(3.5rem, 8vw, 6rem) 0;
    }

    /* Page header */
    .page-header {
        padding: calc(var(--space-2xl) * 0.6) 0 var(--space-lg);
    }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .package-card {
        padding: 2rem 1.5rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-content {
        padding: 0 1.2rem;
    }
}

/* --- Large desktop (min 1440px) --- */
@media (min-width: 1440px) {
    :root {
        --section-padding: 10rem 0;
    }

    .hero-content {
        max-width: 900px;
    }
}

/* --- Touch device optimizations --- */
@media (hover: none) {
    .image-card:hover img {
        transform: none;
    }

    .image-card-overlay {
        opacity: 1;
    }

    .package-card:hover {
        transform: none;
    }

    .nav-link::after {
        display: none;
    }
}