/* ============================================================
   LAYOUT.CSS — Grid, Containers, Seções
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Grid de Cards (fluid auto-fit) ──────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, 300px), 1fr)
  );
  gap: clamp(var(--sp-4), 3vw, var(--sp-8));
  width: 100%;
}

/* ── Seção Principal ──────────────────────────────────────── */
.section-main {
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-24));
}

/* ── Seção de Resultados ──────────────────────────────────── */
.section-results {
  padding-block: var(--sp-8) var(--sp-16);
  min-height: 60vh;
}

/* ── Flex Utilitários ─────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap   { flex-wrap: wrap; }
.gap-2       { gap: var(--sp-2); }
.gap-3       { gap: var(--sp-3); }
.gap-4       { gap: var(--sp-4); }
.gap-6       { gap: var(--sp-6); }
.gap-8       { gap: var(--sp-8); }

/* ── Text Utilitários ─────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Espaçamento ──────────────────────────────────────────── */
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

/* ── Estado Oculto ────────────────────────────────────────── */
.hidden { display: none !important; }
.invisible { visibility: hidden; }

/* ── Divisor ──────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  margin-block: var(--sp-8);
}