/* ==========================================================================
   CAFÉ TRÊS LOBOS — LAYOUT / GRID / CONTAINER
   ========================================================================== */

.ctl-container {
  width: 100%;
  max-width: var(--ctl-container-max);
  margin-inline: auto;
  padding-inline: var(--ctl-container-padding);
}

.ctl-container--narrow {
  max-width: 860px;
}

/* Grid genérico baseado em CSS Grid, usado dentro do Elementor via classe CSS extra */
.ctl-grid {
  display: grid;
  gap: var(--ctl-grid-gap);
  grid-template-columns: repeat(12, 1fr);
}

.ctl-grid > * {
  grid-column: span 12;
}

@media (min-width: 600px) {
  .ctl-grid--2-tablet > * { grid-column: span 6; }
}

@media (min-width: 1024px) {
  .ctl-grid--3-notebook > * { grid-column: span 4; }
  .ctl-grid--4-notebook > * { grid-column: span 3; }
}

@media (min-width: 1440px) {
  .ctl-grid--3-desktop > * { grid-column: span 4; }
  .ctl-grid--4-desktop > * { grid-column: span 3; }
}

/* ---------- Seções institucionais (espaçamento vertical padrão) ---------- */
.ctl-section {
  padding-block: var(--ctl-space-7);
}

.ctl-section--tight {
  padding-block: var(--ctl-space-5);
}

.ctl-section--soft-bg {
  background-color: var(--ctl-bg-soft);
}

.ctl-section__header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--ctl-space-5);
}

.ctl-section__eyebrow {
  display: inline-block;
  font-size: var(--ctl-fs-xs);
  font-weight: var(--ctl-fw-semibold);
  letter-spacing: var(--ctl-ls-menu);
  text-transform: uppercase;
  margin-bottom: var(--ctl-space-1);
}

/* Utilitário de espaço negativo — usado com moderação, respiro é regra da marca */
.ctl-stack > * + * {
  margin-top: var(--ctl-space-3);
}

@media (max-width: 599px) {
  .ctl-section { padding-block: var(--ctl-space-5); }
}