/**
 * ============================================================
 * RESPONSIVE.CSS — Media Queries de Componentes
 * ============================================================
 * Projeto: Rio Quente Reservas
 * Foco: Grids, cards, modais e componentes específicos
 * (Header, Hero, FAQ e Footer já estão no style.css)
 * ============================================================
 */

/* ============================================================
   TABLET GRANDE (até 1200px)
   ============================================================ */
@media (max-width: 1200px) {
    /* Grids de 3 colunas → 2 colunas */
    .features-grid,
    .hoteis-grid,
    .depoimentos-grid,
    .blog-grid,
    .post-perfil-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

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

    /* Parques: mantém 2 colunas até 992px */
    .parques-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Galeria de fotos */
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog destaque */
    .blog-destaque-card {
        grid-template-columns: 1fr;
    }

    .blog-destaque-body {
        padding: 2rem;
    }

    /* Post sidebar */
    .post-grid {
        grid-template-columns: 1fr;
    }

    .post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Depoimento selo */
    .depoimento-selo {
        font-size: 0.68rem;
        padding: 0.3rem 0.65rem;
    }

    /* Widget orçamento */
    .hero-quote-widget {
        margin-bottom: -6rem;
    }

    .quote-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* ============================================================
   TABLET SMALL (até 992px)
   ============================================================ */
@media (max-width: 992px) {
    /* Parques → 1 coluna */
    .parques-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Pacote destaque: remove scale para não estourar */
    .pacote-destaque {
        transform: scale(1);
    }

    .pacote-destaque:hover {
        transform: translateY(-8px);
    }

    /* Formulário 5 colunas → 2 colunas */
    .quote-form-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Cards de parque */
    .parque-card-body {
        padding: 1.75rem;
    }

    .parque-card-title {
        font-size: 1.75rem;
    }

    .btn-parque {
        align-self: stretch;
        text-align: center;
    }

    /* Carrossel: botões sempre visíveis no tablet */
    .carrossel-btn {
        opacity: 1;
    }

    /* Post sidebar → 1 coluna */
    .post-sidebar {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE (até 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Container mais apertado */
    .container {
        padding: 0 1rem;
    }

    /* Todos os grids → 1 coluna */
    .features-grid,
    .pacotes-grid,
    .hoteis-grid,
    .depoimentos-grid,
    .blog-grid,
    .post-perfil-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .parques-grid {
        grid-template-columns: 1fr;
    }

    /* Cards com padding reduzido */
    .feature-card,
    .pacote-body,
    .hotel-body,
    .blog-body,
    .depoimento-card {
        padding: 1.5rem;
    }

    /* Hotel: botões empilhados */
    .hotel-actions {
        flex-direction: column;
    }

    .hotel-actions .btn {
        width: 100%;
    }

    /* Pacote footer: empilha preço e botão */
    .pacote-footer {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    /* Carrossel: botões sempre visíveis e maiores */
    .carrossel-btn {
        opacity: 1;
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }

    .carrossel-prev {
        left: 0.5rem;
    }

    .carrossel-next {
        right: 0.5rem;
    }

    /* Galeria: 2 colunas no mobile */
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* Modal galeria */
    .modal-galeria {
        padding: 1rem;
    }

    .modal-galeria-content {
        padding: 1.75rem 1.25rem;
        max-height: 92vh;
    }

    /* Depoimentos: header empilha */
    .depoimento-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .depoimento-info {
        flex: 1;
        min-width: 0;
    }

    .depoimento-selo {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        margin-top: 0.25rem;
    }

    /* FAB: tamanho reduzido */
    .fab-orcamento {
        bottom: 1.25rem;
        right: 1.25rem;
        padding: 0.75rem 1.1rem 0.75rem 0.9rem;
    }

    .fab-orcamento-text {
        font-size: 0.7rem;
    }

    .fab-orcamento-icon {
        width: 28px;
        height: 28px;
    }

    .fab-orcamento-icon svg {
        width: 20px;
        height: 20px;
    }

    /* Blog */
    .blog-hero-content h1 {
        font-size: 1.75rem;
    }

    .blog-destaque-body {
        padding: 1.5rem;
    }

    .blog-destaque-body h2 {
        font-size: 1.4rem;
    }

    /* Post */
    .post-hero-content h1 {
        font-size: 1.5rem;
    }

    .post-grid {
        gap: 2rem;
    }

    .post-main h2 {
        font-size: 1.35rem;
    }

    .post-main p {
        font-size: 1rem;
    }

    .post-resumo {
        padding: 1.5rem;
    }

    .post-pros-cons {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .post-pros-cons .pros,
    .post-pros-cons .cons {
        padding: 1.25rem;
    }

    .post-conclusao {
        padding: 1.75rem;
    }

    .post-table {
        font-size: 0.82rem;
    }

    .post-table th,
    .post-table td {
        padding: 0.7rem 0.6rem;
    }

    /* Cards de parque */
    .parque-card-body {
        padding: 1.5rem;
    }

    .parque-card-title {
        font-size: 1.6rem;
    }

    .parque-card-highlight {
        font-size: 0.7rem;
    }

    .btn-parque {
        align-self: stretch;
        text-align: center;
    }
}

/* ============================================================
   MOBILE PEQUENO (até 480px)
   ============================================================ */
@media (max-width: 480px) {
    /* Títulos menores */
    .section-title {
        font-size: 1.4rem;
    }

    /* Botões menores */
    .btn {
        padding: 0.75rem 1.1rem;
        font-size: 0.88rem;
    }

    .btn-lg {
        padding: 0.85rem 1.25rem;
        font-size: 0.92rem;
    }

    /* Depoimentos */
    .depoimento-header {
        flex-wrap: wrap;
    }

    .depoimento-selo {
        position: static;
        margin-top: 0.5rem;
    }

    .depoimento-avatar {
        width: 48px;
        height: 48px;
    }

    .depoimento-info h4 {
        font-size: 0.92rem;
    }

    .depoimento-info span {
        font-size: 0.78rem;
    }

    .depoimento-texto {
        font-size: 0.88rem;
    }

    /* FAB: ainda menor */
    .fab-orcamento {
        padding: 0.7rem 1rem 0.7rem 0.85rem;
        gap: 0.5rem;
    }

    .fab-orcamento-text {
        font-size: 0.65rem;
        letter-spacing: 0.05em;
    }

    /* Cards de parque */
    .parque-card-body {
        padding: 1.25rem;
        gap: 0.75rem;
    }

    .parque-card-title {
        font-size: 1.35rem;
    }

    .parque-card-list li {
        font-size: 0.82rem;
    }

    .parque-card-tag {
        font-size: 0.62rem;
        padding: 0.3rem 0.65rem;
    }

    /* Galeria: 1 coluna no mobile pequeno */
    .galeria-grid {
        grid-template-columns: 1fr;
    }

    .modal-galeria-content {
        padding: 1.5rem 1rem;
    }

    .modal-galeria-header h2 {
        font-size: 1.3rem;
    }

    /* Post */
    .post-hero-content h1 {
        font-size: 1.3rem;
    }

    .post-main h2 {
        font-size: 1.2rem;
    }

    .post-hotel-image {
        max-height: 220px;
    }

    .post-conclusao {
        padding: 1.5rem;
    }

    .post-conclusao h2 {
        font-size: 1.25rem;
    }
}

/* ============================================================
   MOBILE MUITO PEQUENO (até 360px) — iPhone SE, Galaxy Fold
   ============================================================ */
@media (max-width: 360px) {
    .container {
        padding: 0 0.85rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .glass-badge {
        padding: 0.4rem 0.75rem;
        font-size: 0.72rem;
    }

    .feature-card,
    .pacote-body,
    .hotel-body,
    .blog-body,
    .depoimento-card {
        padding: 1.25rem;
    }

    .parque-card-body {
        padding: 1rem;
    }

    .parque-card-title {
        font-size: 1.2rem;
    }

    .fab-orcamento-text {
        display: none; /* Esconde o texto, mostra só o ícone */
    }

    .fab-orcamento {
        padding: 0.85rem;
        border-radius: 50%;
    }

    .fab-orcamento-icon {
        width: 32px;
        height: 32px;
    }
}

/* ============================================================
   ACESSIBILIDADE — Reduz movimento
   ============================================================ */
@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;
    }

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