/**
 * Responsive Styles - Maternidade Hospital HELP
 */

/* ============================================
   MOBILE (até 480px)
   ============================================ */

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .hero-section {
        min-height: 350px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-content h1 {
        font-size: 1.75rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .site-header {
        padding: 0.75rem 0;
    }

    .site-logo img {
        height: 40px;
    }

    .site-navigation {
        display: none;
    }

    .cta-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .cta-button.large {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .section {
        padding: 2rem 0;
    }

    .section-title {
        margin-bottom: 2rem;
    }

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

    .feature-card {
        padding: 1.5rem;
    }

    .feature-card .icon {
        width: 50px;
        height: 50px;
        font-size: 1.75rem;
    }

    .feature-card h3 {
        font-size: 1.1rem;
    }

    .row {
        gap: 1.5rem;
    }

    .col,
    .col-md-6,
    .col-lg-6 {
        grid-column: span 12;
    }

    .scheduling-form {
        padding: 1.5rem;
    }

    #scheduling-modal {
        padding: 0.5rem !important;
    }

    #scheduling-modal > div {
        max-width: 100% !important;
        border-radius: 8px;
    }

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

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

    .footer-bottom p {
        font-size: 0.85rem;
    }
}

/* ============================================
   TABLET (481px - 768px)
   ============================================ */

@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding: 0 1.25rem;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .hero-section {
        min-height: 450px;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .site-navigation {
        display: none;
    }

    .section {
        padding: 3rem 0;
    }

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

    .row {
        gap: 1.5rem;
    }

    .col-md-6 {
        grid-column: span 6;
    }

    .col-lg-6 {
        grid-column: span 12;
    }

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

/* ============================================
   DESKTOP (769px+)
   ============================================ */

@media (min-width: 769px) {
    .col-lg-6 {
        grid-column: span 6;
    }

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

    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

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

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }

    .section {
        padding: 5rem 0;
    }
}

/* ============================================
   ANIMAÇÕES
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }

    .feature-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cta-button {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .form-group input,
    .form-group textarea {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Se o usuário preferir modo escuro, adicionar suporte aqui */
}

/* ============================================
   IMPRESSÃO
   ============================================ */

@media print {
    .site-header,
    .site-footer,
    .cta-button,
    #scheduling-modal {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    a {
        color: black;
    }
}