/**
 * Responsive CSS - Media Queries
 *
 * Ajustes responsivos Mobile First:
 * - Base: Mobile (< 576px)
 * - sm: Landscape phones (≥ 576px)
 * - md: Tablets (≥ 768px)
 * - lg: Desktops (≥ 992px)
 * - xl: Large desktops (≥ 1200px)
 *
 * @package RSimoesNegocios
 * @version 1.0.0
 */

/* ========================================
   SMALL DEVICES (≥ 576px)
   ======================================== */

@media (min-width: 576px) {
    /* Typography */
    h1 {
        font-size: var(--font-size-5xl);
    }

    /* Hero */
    .hero {
        min-height: 500px;
    }

    .hero h1 {
        font-size: var(--font-size-5xl);
    }
}

/* ========================================
   MEDIUM DEVICES (≥ 768px)
   ======================================== */

@media (min-width: 768px) {
    /* Spacing */
    section {
        padding: var(--spacing-20) 0;
    }

    /* Header */
    .header-spacer {
        height: var(--header-height);
    }

    /* Typography */
    h1 {
        font-size: var(--font-size-6xl);
    }

    /* Hero Image - Tablet */
    .hero-image {
        height: 520px;
    }

    h2 {
        font-size: var(--font-size-4xl);
    }

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

    /* Hero */
    .hero {
        min-height: 600px;
        padding: var(--spacing-32) var(--spacing-4);
    }

    .hero h1 {
        font-size: var(--font-size-6xl);
    }

    /* Cards Grid */
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer {
        padding: var(--spacing-5) 0 var(--spacing-3);
    }

    /* WhatsApp Float - Tablet ajuste removido (usa desktop) */
}

/* ========================================
   LARGE DEVICES (≥ 992px)
   ======================================== */

@media (min-width: 992px) {
    /* Spacing */
    section {
        padding: var(--spacing-24) 0;
    }

    /* Hero */
    .hero {
        min-height: 650px;
    }

    /* Cards Grid */
    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Navbar */
    .nav-link {
        padding: var(--spacing-3) var(--spacing-5);
    }
}

/* ========================================
   EXTRA LARGE DEVICES (≥ 1200px)
   ======================================== */

@media (min-width: 1200px) {
    /* Hero */
    .hero {
        min-height: 700px;
    }

    /* Container */
    .container {
        max-width: var(--container-max-width);
    }
}

/* ========================================
   UTILITIES RESPONSIVAS
   ======================================== */

/* Ocultar em Mobile */
@media (max-width: 767px) {
    .d-md-none {
        display: none !important;
    }
}

/* Mostrar apenas em Desktop */
@media (min-width: 768px) {
    .d-none.d-md-block {
        display: block !important;
    }

    .d-none.d-md-flex {
        display: flex !important;
    }
}

/* Ocultar em Desktop */
@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
}

/* Grid Responsivo */
@media (max-width: 767px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* Text Alignment Responsivo */
@media (max-width: 767px) {
    .text-md-center {
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    .text-md-left {
        text-align: left !important;
    }

    .text-md-right {
        text-align: right !important;
    }
}

/* Spacing Responsivo */
@media (min-width: 768px) {
    .mt-md-0 { margin-top: 0 !important; }
    .mt-md-6 { margin-top: var(--spacing-6) !important; }
    .mt-md-8 { margin-top: var(--spacing-8) !important; }

    .mb-md-0 { margin-bottom: 0 !important; }
    .mb-md-6 { margin-bottom: var(--spacing-6) !important; }
    .mb-md-8 { margin-bottom: var(--spacing-8) !important; }

    .py-md-8 {
        padding-top: var(--spacing-8) !important;
        padding-bottom: var(--spacing-8) !important;
    }
}

@media (min-width: 992px) {
    .mt-lg-0 { margin-top: 0 !important; }
    .mb-lg-0 { margin-bottom: 0 !important; }
}

/* ========================================
   AJUSTES ESPECÍFICOS DE COMPONENTES
   ======================================== */

/* Hero - Ajustes Mobile */
@media (max-width: 767px) {
    /* Remover altura mínima forçada no mobile */
    .min-vh-75 {
        min-height: auto !important;
    }

    /* Hero: altura natural + padding ajustado */
    .hero {
        min-height: auto !important;
        padding: var(--spacing-12) 0 var(--spacing-10);
    }

    /* Container: padding lateral adequado */
    .hero .container {
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }

    /* Título: tamanho reduzido + quebra de linha melhorada */
    .hero h1 {
        font-size: 1.75rem !important; /* 28px - menor para evitar quebras */
        line-height: 1.25;
        word-break: keep-all; /* Evita quebrar no meio das palavras */
        overflow-wrap: break-word; /* Quebra só se realmente necessário */
        hyphens: none !important; /* Remove hífens */
        margin-bottom: var(--spacing-4);
    }

    /* Lead: tamanho adequado */
    .hero .lead {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: var(--spacing-4);
    }

    /* Lista de serviços: espaçamento + tamanho */
    .hero .list-unstyled {
        margin-bottom: var(--spacing-5);
    }

    .hero .list-unstyled li {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.4;
        margin-bottom: var(--spacing-2) !important;
    }

    /* Botões: tamanho adequado para mobile */
    .hero .btn {
        font-size: 0.9375rem;
        padding: var(--spacing-3) var(--spacing-5);
    }

    .hero-ctas {
        flex-direction: column;
    }

    .hero-ctas .btn {
        width: 100%;
    }

    /* Hero Image - Mobile */
    .hero-image {
        height: 360px;
    }
}

/* ========================================
   EXTRA SMALL DEVICES (≤ 390px) - iPhone específico
   ======================================== */

@media (max-width: 390px) {
    /* Título ainda menor para iPhones pequenos */
    .hero h1 {
        font-size: 1.625rem !important; /* 26px - iPhone SE/Mini */
        line-height: 1.3;
    }

    /* Container com mais padding para não grudar */
    .hero .container {
        padding-left: var(--spacing-6); /* 24px */
        padding-right: var(--spacing-6);
    }

    /* Lead text ligeiramente menor */
    .hero .lead {
        font-size: 0.9375rem; /* 15px */
    }
}

/* Cards - Ajustes Mobile */
@media (max-width: 767px) {
    .card-servico,
    .card-beneficio,
    .card-depoimento {
        padding: var(--spacing-6);
    }

    .card-title {
        font-size: var(--font-size-lg);
    }
}

/* Equipe - Ajustes Mobile */
@media (max-width: 991px) {
    .equipe-foto {
        max-height: 500px;
    }
}

@media (max-width: 767px) {
    .equipe-foto {
        max-height: 400px;
        border-radius: 12px;
    }

    .equipe-info {
        padding: var(--spacing-3);
    }

    .equipe-nome {
        font-size: var(--font-size-md);
    }

    .equipe-descricao,
    .equipe-local {
        font-size: var(--font-size-xs);
    }
}

/* Footer - Ajustes Mobile */
@media (max-width: 767px) {
    .footer {
        text-align: center;
    }

    .footer-links,
    .footer-contact {
        margin-bottom: var(--spacing-6);
    }
}

/* WhatsApp Float - Ajustes Mobile */
@media (max-width: 767px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }
}

/* Navbar - Ajustes Mobile */
@media (max-width: 991px) {
    .navbar-collapse {
        margin-top: var(--spacing-4);
    }

    .nav-link {
        padding: var(--spacing-3) 0;
    }

    .btn-whatsapp-header {
        margin-top: var(--spacing-4);
        width: 100%;
    }
}

/* Brand Tagline - Mobile */
@media (max-width: 767px) {
    .brand-tagline {
        font-size: 11px;
        white-space: normal;
        max-width: 180px;
        line-height: 1.4;
    }
}

/* Forms - Ajustes Mobile */
@media (max-width: 767px) {
    .form-control {
        font-size: 16px; /* Previne zoom no iOS */
    }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    /* Ocultar elementos não necessários na impressão */
    .header,
    .footer,
    .whatsapp-float,
    .btn,
    nav {
        display: none !important;
    }

    /* Ajustar cores para impressão */
    body {
        color: var(--color-black);
        background: var(--color-white);
    }

    a {
        text-decoration: underline;
    }

    /* Quebras de página */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        page-break-inside: avoid;
    }
}