/* ===================================================================
   CSS para os Cards de Clima (Layout Híbrido) - VERSÃO FINAL
   =================================================================== */

/* 1. Container do Grid - Comportamento Padrão para Telas Grandes
   ------------------------------------------------------------------- */
.cards-grid {
  display: grid;
  /* PADRÃO (TELAS MUITO GRANDES, > 1440px):
     - Força 6 colunas para que todos os cards fiquem na mesma linha,
       assumindo que há 6 cards e espaço suficiente.
  */
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 4px;
}

/* 2. Estilo dos Cards de Clima
   (Nenhuma mudança nesta seção)
   ------------------------------------------------------------------- */

.weather-cards-section .coleta-card {
  color: #fff;
  padding: 16px;
  border-radius: 8px;
  min-height: 130px;
  width: auto;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* --- NOVO: Habilita Container Queries --- */
  /* 1. Define este elemento como um contêiner de consulta. */
  container-type: inline-size;
  /* 2. (Opcional) Dá um nome ao contêiner para consultas mais claras. */
  container-name: weather-card;
}

.weather-cards-section .coleta-card.azul {
  background: #1D5DA4;
}

.weather-cards-section .coleta-card.verde {
  /* F1.4 · auditoria AA: branco 600-800/10-24px sobre #2BB686 cru dá
     2.58:1 — abaixo de 3:1 (texto grande) e pior ainda no rótulo pequeno
     (10px, abaixo do limite de "grande" — precisaria de 4.5:1). Reaproveita
     a variante --st-bom-text (mesmo escurecimento do badge de AQI "bom"),
     fixa nos 2 temas (o fundo é a própria cor, não muda com o tema). Esta
     é a regra que realmente vale (maior especificidade que ".verde" solto
     em paginas_sensores_unificados.css). */
  background: var(--st-bom-text);
}

.weather-cards-section .coleta-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weather-cards-section .coleta-titulo {
  /* Tamanho proporcional: mínimo de 12px, ideal de 8% da largura do card, máximo de 16px. */
  font-size: clamp(10px, 8cqw, 20px);
  font-weight: 600;
}

.weather-cards-section .coleta-valor {
  /* Tamanho proporcional: mínimo de 24px, ideal de 18% da largura do card, máximo de 36px. */
  font-size: clamp(24px, 18cqw, 36px);
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.weather-cards-section .coleta-valor .unidade {
  /* Mesma tipografia do valor */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.weather-cards-section .coleta-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.info-card-header .weather-section-title {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* 3. Estilo para placeholder e mensagens
   (Nenhuma mudança nesta seção)
   ------------------------------------------------------------------- */
.cards-grid .loading-placeholder,
.cards-grid .grid-message {
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  padding: 60px 0;
  color: var(--mu);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

.cards-grid .grid-message.error {
  /* F1.4 · auditoria AA: --st-muito-ruim cru sobre --sf claro dá 3.63:1 —
     mesma correção (e mesmo raciocínio "-label" teme-aware) do label de
     aviso de clima em card_qualidade_ar.css. */
  color: var(--st-muito-ruim-label);
}

/* 4. PONTOS DE QUEBRA PARA AJUSTAR COLUNAS EM TELAS MENORES
   ------------------------------------------------------------------- */

/* Para notebooks (como o seu) e telas médias */
@media (max-width: 1440px) {
  .cards-grid {
    /* Força o layout a ter 3 colunas */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Para tablets e telas menores */
@media (max-width: 992px) {
  .cards-grid {
    /* Muda para 2 colunas */
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Para celulares — F1.3: mantém a grade 2×3 em 2 colunas (em vez de
   empilhar em 1) até a largura mínima testada (390px); com 6 cards, 2
   colunas cabe melhor que 1 coluna alta e rolável. */
@media (max-width: 576px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .info-card-header .weather-section-title {
    font-size: 14px;
  }
}