/* ======================================================= */
/* ESTILOS PARA DISPOSITIVOS MÓVEIS (ATÉ 768px)            */
/* ======================================================= */

/* --- AJUSTES NO CABEÇALHO E FILTROS --- */
.header-content {
    flex-direction: column; /* ESTA É A LINHA MAIS IMPORTANTE: empilha os itens */
    align-items: stretch; /* Faz os itens ocuparem a largura toda */
    gap: 20px;
}

.site-header h1 {
    font-size: 3rem;
    text-align: center; /* Centraliza o título no mobile */
}

.site-header h2 {
    text-align: center; /* Centraliza o subtítulo no mobile */
}

.filter-form {
    flex-direction: column; /* Empilha os campos do formulário */
    align-items: stretch;
}

.filter-form input[type="text"],
.filter-form select {
    min-width: 100%; /* Faz os campos ocuparem a largura total */
}

/* --- AJUSTES NO CATÁLOGO E CARDS --- */
.grid-container {
    grid-template-columns: 1fr; /* Exibe um card por linha */
}

.catalog-container {
    padding: 20px;
    margin: 20px 15px; /* Adiciona margem lateral */
}

/* --- AJUSTES NO RODAPÉ --- */
.site-footer-public {
    margin-top: 20px;
    padding: 20px 15px;
}

/* ======================================================= */
/* AJUSTES NO MODAL PARA DISPOSITIVOS MÓVEIS               */
/* ======================================================= */

.modal-content {
    padding: 20px;
    max-height: 95vh; /* Aumenta um pouco a altura máxima */
}

.modal-body {
    flex-direction: column; /* Empilha a imagem e o texto */
    gap: 20px;
}

.modal-info-container h2 {
    font-size: 2rem;
}

.modal-close {
    font-size: 2rem;
    top: 10px;
    right: 10px;
}