/* =============================================
   DR. LEANDRO MATTAR - LANDING PAGE REDESIGN
   Responsive Styles (Mobile First)
   Paleta: Navy #1B2A4A + Dourado #C9A96E
   ============================================= */

/* =============================================
   SMALL DEVICES (Phones - 576px and up)
   ============================================= */
@media (min-width: 576px) {
    :root {
        --container-padding: 1.5rem;
    }

    /* Hero */
    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-subtitle {
        font-size: var(--text-lg);
    }

    /* Badges */
    .hero-badges {
        gap: var(--space-4);
    }

    /* Buttons */
    .contact-buttons {
        flex-direction: row;
    }

    /* WhatsApp Float */
    .whatsapp-text {
        display: inline;
    }

    /* Treatment Cards */
    .treatment-card {
        padding: var(--space-8);
    }
}

/* =============================================
   MEDIUM DEVICES (Tablets - 768px and up)
   ============================================= */
@media (min-width: 768px) {
    :root {
        --container-padding: 2rem;
    }

    /* Typography */
    .section-title {
        font-size: var(--text-4xl);
    }

    .section-title::after {
        width: 80px;
    }

    /* Header */
    .nav {
        display: block;
    }

    .hamburger {
        display: none;
    }

    .btn-header {
        display: inline-flex;
    }

    /* Hero */
    .hero {
        padding-top: calc(var(--header-height) + var(--space-16));
        padding-bottom: var(--space-20);
    }

    .hero .container {
        flex-direction: row;
        align-items: center;
    }

    .hero-content {
        flex: 1;
        text-align: left;
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-badges {
        justify-content: flex-start;
    }

    .hero-image {
        flex: 1;
        justify-content: flex-end;
    }

    .hero-image img {
        width: 416px;
        height: 520px;
    }

    /* Problems */
    .problems-content {
        flex-direction: row;
        align-items: flex-start;
    }

    .problems-text {
        flex: 1;
    }

    .problems-list {
        flex: 1;
    }

    /* About */
    .about-content {
        flex-direction: row;
        align-items: center;
    }

    .about-image {
        flex: 0 0 40%;
    }

    .about-text {
        flex: 1;
    }

    .about-text .section-title {
        font-size: var(--text-3xl);
    }

    /* Treatments */
    .treatments-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .treatment-card-highlight {
        grid-column: span 2;
    }

    /* Differentials */
    .differentials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Zigomatic */
    .zigomatic-content {
        flex-direction: row;
        align-items: center;
    }

    .zigomatic-text {
        flex: 1;
    }

    .zigomatic-image {
        flex: 0 0 40%;
    }

    /* Testimonials */
    .testimonials-track {
        gap: var(--space-8);
    }

    .testimonial-card {
        flex: 0 0 calc(50% - var(--space-4));
    }

    /* Process - horizontal on tablet */
    .process-timeline::before {
        display: none;
    }

    .process-timeline {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-6);
    }

    .process-step {
        flex: 0 0 calc(50% - var(--space-3));
        flex-direction: column;
        text-align: center;
    }

    .process-number {
        margin: 0 auto var(--space-4);
    }

    .process-content {
        border-left: none;
        border-top: 3px solid var(--color-accent);
    }

    /* Contact */
    .contact-content {
        flex-direction: row;
        align-items: flex-start;
    }

    .contact-info {
        flex: 1;
    }

    .contact-form-wrapper {
        flex: 0 0 400px;
    }

    /* Footer */
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* =============================================
   LARGE DEVICES (Desktops - 992px and up)
   ============================================= */
@media (min-width: 992px) {
    /* Typography */
    .section-title {
        font-size: var(--text-4xl);
    }

    /* Hero */
    .hero-title {
        font-size: var(--text-5xl);
    }

    .hero-subtitle {
        font-size: var(--text-lg);
        max-width: 90%;
    }

    .hero-image img {
        width: 494px;
        height: 624px;
    }

    /* Treatments */
    .treatments-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .treatment-card-highlight {
        grid-column: span 1;
    }

    /* Differentials */
    .differentials-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Testimonials */
    .testimonial-card {
        flex: 0 0 calc(33.333% - var(--space-5));
    }

    /* Process */
    .process-step {
        flex: 1;
    }

    /* Footer */
    .footer-content {
        gap: var(--space-10);
    }
}

/* =============================================
   EXTRA LARGE DEVICES (Large Desktops - 1200px and up)
   ============================================= */
@media (min-width: 1200px) {
    :root {
        --container-max: 1200px;
    }

    /* Hero */
    .hero {
        padding-top: calc(var(--header-height) + var(--space-20));
        padding-bottom: var(--space-24);
    }

    .hero-title {
        font-size: var(--text-5xl);
        max-width: 90%;
    }

    .hero-image img {
        width: 546px;
        height: 676px;
    }

    /* About Image */
    .about-image img {
        height: 400px;
    }

    /* Contact Form */
    .contact-form-wrapper {
        flex: 0 0 450px;
    }

    /* Treatments CTA */
    .treatments-cta {
        padding: var(--space-12);
    }

    .treatments-cta p {
        font-size: var(--text-xl);
    }
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
    .header,
    .whatsapp-float,
    .btn,
    .hamburger,
    .testimonials-nav,
    .contact-form-wrapper,
    .map-container {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .hero {
        padding-top: var(--space-8);
        background: none !important;
        color: #000 !important;
    }

    .hero-title,
    .hero-subtitle {
        color: #000 !important;
    }

    .differentials,
    .contact {
        background: none !important;
        color: #000 !important;
    }

    .differentials .section-title,
    .differentials .differential-title,
    .differentials .differential-text,
    .contact .section-title,
    .contact-text,
    .contact-details h3,
    .contact-details p {
        color: #000 !important;
    }

    .section-title {
        font-size: 18pt;
    }

    .section-title::after {
        background: #000 !important;
    }

    a {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-animate {
        opacity: 1;
        transform: none;
    }

    .treatment-card:hover,
    .differential-item:hover,
    .problem-item:hover,
    .testimonial-btn:hover {
        transform: none;
    }
}

/* =============================================
   HIGH CONTRAST MODE
   ============================================= */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0F1A2E;
        --color-primary-dark: #070D17;
        --color-accent: #A68A4C;
    }

    .badge,
    .btn,
    .treatment-card,
    .faq-question,
    .faq-item {
        border-width: 2px;
    }

    .hero-badges .badge {
        border-color: var(--color-white);
    }
}

/* =============================================
   DARK MODE (Reserved for future)
   ============================================= */
@media (prefers-color-scheme: dark) {
    /*
    Note: The current design already uses dark navy backgrounds
    which provides good contrast. Dark mode adjustments reserved
    for future implementation if needed.
    */
}

/* =============================================
   LANDSCAPE ORIENTATION (Mobile)
   ============================================= */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        padding-top: calc(var(--header-height) + var(--space-6));
        padding-bottom: var(--space-8);
    }

    .hero .container {
        flex-direction: row;
        gap: var(--space-6);
    }

    .hero-content {
        flex: 1;
        text-align: left;
    }

    .hero-image {
        flex: 0 0 200px;
    }

    .hero-image img {
        width: 200px;
        height: 250px;
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .hero-badges {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .badge {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-2);
    }
}

/* =============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================= */
@media (hover: none) {
    .btn:hover,
    .treatment-card:hover,
    .differential-item:hover,
    .faq-question:hover,
    .problem-item:hover {
        transform: none;
    }

    .whatsapp-float:hover {
        transform: none;
    }

    .nav-list a::after {
        display: none;
    }

    /* Larger touch targets */
    .nav-list a,
    .faq-question,
    .testimonial-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .btn {
        min-height: 48px;
    }
}

/* =============================================
   SMALL HEIGHT DEVICES
   ============================================= */
@media (max-height: 600px) {
    .hero {
        padding-top: calc(var(--header-height) + var(--space-4));
        padding-bottom: var(--space-6);
    }

    .hero-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-3);
    }

    .hero-subtitle {
        margin-bottom: var(--space-3);
    }

    .hero-badges {
        margin-bottom: var(--space-4);
    }
}

/* =============================================
   HEADER SCROLL STATE
   ============================================= */
.header.scrolled {
    box-shadow: var(--shadow-lg);
    background-color: var(--color-primary-dark);
}

/* =============================================
   FORM FOCUS STATES (ACCESSIBILITY)
   ============================================= */
@media (min-width: 768px) {
    .form-group input:focus,
    .form-group select:focus {
        box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.2);
    }
}

/* =============================================
   UTILITIES FOR RESPONSIVE VISIBILITY
   ============================================= */
.hide-mobile {
    display: none !important;
}

.hide-desktop {
    display: block !important;
}

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

    .hide-desktop {
        display: none !important;
    }
}

/* =============================================
   GRID ADJUSTMENTS FOR VARIOUS SCREENS
   ============================================= */
@media (min-width: 768px) and (max-width: 991px) {
    /* Treatments - 2 columns on tablet with highlight spanning 2 */
    .treatment-card-highlight {
        grid-column: span 2;
    }

    /* Differentials - 2 columns */
    .differentials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    /* Treatments - 3 columns, highlight back to single */
    .treatment-card-highlight {
        grid-column: span 1;
    }

    /* Differentials - 3 columns */
    .differentials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================
   PREMIUM EFFECTS FOR LARGER SCREENS
   ============================================= */
@media (min-width: 992px) {
    /* Subtle hover effects for cards */
    .treatment-card {
        transition: all var(--transition-smooth);
    }

    .treatment-card:hover {
        transform: translateY(-8px);
    }

    .differential-item:hover {
        transform: translateY(-6px);
    }

    /* Enhanced testimonial cards */
    .testimonial-card {
        transition: all var(--transition-smooth);
    }

    .testimonial-card:hover {
        box-shadow: var(--shadow-xl);
    }

    /* Process content hover */
    .process-content {
        transition: all var(--transition-base);
    }

    .process-step:hover .process-content {
        border-color: var(--color-accent);
        box-shadow: var(--shadow-md);
    }
}

/* =============================================
   SECTION SPACING ADJUSTMENTS
   ============================================= */
@media (min-width: 768px) {
    .problems,
    .about,
    .treatments,
    .differentials,
    .zigomatic,
    .testimonials,
    .process,
    .faq,
    .contact {
        padding: var(--space-20) 0;
    }
}

@media (min-width: 1200px) {
    .problems,
    .about,
    .treatments,
    .differentials,
    .zigomatic,
    .testimonials,
    .process,
    .faq,
    .contact {
        padding: var(--space-24) 0;
    }
}

/* =============================================
   NAVIGATION IMPROVEMENTS
   ============================================= */
@media (min-width: 768px) {
    .nav-list {
        gap: var(--space-6);
    }
}

@media (min-width: 992px) {
    .nav-list {
        gap: var(--space-8);
    }
}

/* =============================================
   BADGE SIZE ADJUSTMENTS
   ============================================= */
@media (min-width: 768px) {
    .badge {
        padding: var(--space-2) var(--space-5);
    }

    .badge-icon {
        width: 24px;
        height: 24px;
    }
}

/* =============================================
   ABOUT QUOTE IMPROVEMENTS
   ============================================= */
@media (min-width: 768px) {
    .about-quote p {
        font-size: var(--text-lg);
    }

    .about-quote::before {
        font-size: 5rem;
    }
}

@media (min-width: 992px) {
    .about-quote p {
        font-size: var(--text-xl);
    }
}

/* =============================================
   FAQ IMPROVEMENTS
   ============================================= */
@media (min-width: 768px) {
    .faq-list {
        max-width: 900px;
    }

    .faq-question {
        padding: var(--space-6) var(--space-8);
    }

    .faq-answer p {
        padding: 0 var(--space-8) var(--space-8);
    }
}

/* =============================================
   CONTACT MAP IMPROVEMENTS
   ============================================= */
@media (min-width: 768px) {
    .map-container iframe {
        height: 350px;
    }
}

@media (min-width: 992px) {
    .map-container iframe {
        height: 400px;
    }
}

/* =============================================
   FOOTER IMPROVEMENTS
   ============================================= */
@media (min-width: 992px) {
    .footer {
        padding: var(--space-16) 0 var(--space-8);
    }

    .footer-name {
        font-size: var(--text-2xl);
    }
}

/* =============================================
   WHATSAPP BUTTON IMPROVEMENTS
   ============================================= */
@media (min-width: 576px) {
    .whatsapp-float {
        padding: var(--space-4) var(--space-6);
    }
}

@media (min-width: 768px) {
    .whatsapp-float {
        bottom: var(--space-8);
        right: var(--space-8);
    }
}