/* 
 * Veneto Hair Style di Kazi - Responsive Styles
 * Handling breakpoints for Mobile, Tablet, and Desktop
 */

/* -------------------------------------
   MEDIA QUERIES
   ------------------------------------- */

/* Large Desktop (1441px+) */
@media (min-width: 1441px) {
    .container {
        max-width: 1600px;
    }

    h1 {
        font-size: 5.5rem;
    }
}

/* Tablet / Small Desktop (1024px and below) */
@media (max-width: 1024px) {
    :root {
        --spacing-xl: 6rem;
        --spacing-md: 1.5rem;
    }

    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    .cursor-dot,
    .cursor-outline {
        display: none !important;
        /* Touch devices don't need custom cursor */
    }
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 3rem;
        --spacing-sm: 0.8rem;
    }

    .site-logo {
        max-height: 40px;
        /* Smaller on mobile */
    }

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

    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Utility adjustments */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    :root {
        font-size: 14px;
        /* Scaling down base font size */
    }

    h1 {
        font-size: 2.2rem;
        line-height: 1.1;
    }

    .btn {
        padding: 0.8rem 1.5rem;
        width: 100%;
        /* Full width buttons on mobile */
        text-align: center;
    }

    .section {
        padding: 3rem 0;
    }

    /* Mobile Grid Overrides */
    .services-grid,
    .admin-grid,
    .locations-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .location-card {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .loc-image {
        min-height: 200px;
    }

    /* Chi Siamo / About Page Fixes */
    .about-page .grid {
        display: flex;
        flex-direction: column-reverse;
        /* Text first, then image */
        gap: 2rem;
    }

    .about-page .reveal-from-right {
        width: 100%;
        margin-top: 1rem;
    }

    .about-page img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        margin: 0 auto;
    }

    /* Typography Adjustments */
    .hero-title {
        font-size: 2.5rem !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        z-index: 10;
        /* Fail-safe color if gradient clips incorrectly */
        color: #C9A961 !important;
        -webkit-text-fill-color: #C9A961 !important;
    }

    .hero-title .char {
        opacity: 1 !important;
        transform: none !important;
        color: #C9A961 !important;
        -webkit-text-fill-color: #C9A961 !important;
    }

    .section-title {
        font-size: 2rem !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .h-screen-70 {
        height: 60vh;
        min-height: 400px;
    }
}