/* ============================================
   DESKTOP STYLES - Zafira Odontologia
   Aplica-se apenas em telas >= 768px
   
   Este arquivo é dedicado EXCLUSIVAMENTE para 
   estilos desktop. Modificações aqui NÃO afetam
   o layout mobile.
   ============================================ */

@media (min-width: 768px) {

    /* ==========================================
     CSS VARIABLES - DESKTOP
     Sobrescreve as variáveis globais para desktop
     ========================================== */
    :root {
        /* Spacing - Desktop */
        --section-padding-y: 5rem;
        --container-padding-x: 2rem;

        /* Typography - Desktop */
        --heading-size-hero: 56px;
        --heading-size-section: 2.25rem;
        --text-base-size: 1rem;

        /* Hero - Desktop */
        --hero-image-size: 440px;
        --hero-min-height: 630px;

        /* Buttons - Desktop */
        --button-padding-y: 1rem;
        --button-padding-x: 2rem;
        --button-font-size: 1rem;
    }

    /* ==========================================
     HEADER - DESKTOP
     Adicione seus estilos desktop aqui
     ========================================== */

    /* ==========================================
     HERO SECTION - DESKTOP
     ========================================== */

    #home {
        min-height: var(--hero-min-height);
    }

    /* Hero headline */
    #home h1 {
        font-size: var(--heading-size-hero);
    }

    /* ==========================================
     ABOUT SECTION - DESKTOP
     ========================================== */

    #about {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
    }

    /* ==========================================
     SERVICES SECTION - DESKTOP
     ========================================== */

    #services {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
    }

    /* ==========================================
     GALLERY SECTION - DESKTOP
     ========================================== */

    #gallery {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
    }

    /* ==========================================
     CLINIC SECTION - DESKTOP
     ========================================== */

    #clinic {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
    }

    /* ==========================================
     TESTIMONIALS SECTION - DESKTOP
     ========================================== */

    #testimonials {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
    }

    /* ==========================================
     CONTACT SECTION - DESKTOP
     ========================================== */

    #contact {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
    }

    /* ==========================================
     FOOTER - DESKTOP
     Adicione seus estilos desktop aqui
     ========================================== */

    /* ==========================================
     HOVER EFFECTS - DESKTOP ONLY
     Efeitos hover mais elaborados que só fazem
     sentido em dispositivos com mouse
     ========================================== */

    /* Cards hover effect */
    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    /* Button hover glow */
    .hover-glow:hover {
        box-shadow: 0 0 30px rgba(0, 160, 210, 0.4);
    }

    /* Image hover zoom */
    .hover-zoom {
        overflow: hidden;
    }

    .hover-zoom img {
        transition: transform 0.5s ease;
    }

    .hover-zoom:hover img {
        transform: scale(1.05);
    }

    /* ==========================================
     ADVANCED ANIMATIONS - DESKTOP
     Animações mais complexas para desktop
     ========================================== */

    /* Parallax scroll effect preparation */
    .parallax-bg {
        will-change: transform;
    }

    /* Staggered fade-in for lists */
    .stagger-children>*:nth-child(1) {
        animation-delay: 0.1s;
    }

    .stagger-children>*:nth-child(2) {
        animation-delay: 0.2s;
    }

    .stagger-children>*:nth-child(3) {
        animation-delay: 0.3s;
    }

    .stagger-children>*:nth-child(4) {
        animation-delay: 0.4s;
    }

    .stagger-children>*:nth-child(5) {
        animation-delay: 0.5s;
    }

    .stagger-children>*:nth-child(6) {
        animation-delay: 0.6s;
    }

    /* ==========================================
     UTILITIES - DESKTOP ONLY
     ========================================== */

    /* Hide on desktop */
    .desktop-hidden {
        display: none !important;
    }

    /* Show on desktop only */
    .desktop-only {
        display: block !important;
    }

    /* Desktop-specific spacing */
    .desktop-py-lg {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .desktop-px-lg {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* Desktop-specific text sizes */
    .desktop-text-lg {
        font-size: 1.125rem !important;
    }

    .desktop-text-xl {
        font-size: 1.25rem !important;
    }

    .desktop-text-2xl {
        font-size: 1.5rem !important;
    }

    /* ==========================================
     LARGE DESKTOP (1280px+)
     ========================================== */

    @media (min-width: 1280px) {
        :root {
            --container-padding-x: 4rem;
        }
    }

    /* ==========================================
     EXTRA LARGE DESKTOP (1536px+)
     ========================================== */

    @media (min-width: 1536px) {
        :root {
            --section-padding-y: 6rem;
        }
    }

}