/**
 * Layout responsivo — gutters, containers e helpers de breakpoint.
 */

:root {
  --page-gutter: var(--space-4); /* 16px */
}

@media (min-width: 768px) {
  :root {
    --page-gutter: var(--space-5); /* 20px */
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: var(--space-6); /* 24px */
  }
}

/* Reforça o container global sem quebrar páginas que o overrideiam */
.container {
  width: min(100% - (var(--page-gutter) * 2), var(--maxw, 1080px));
  margin-inline: auto;
}

.sc-section {
  padding-block: var(--space-8);
}

@media (min-width: 768px) {
  .sc-section {
    padding-block: var(--space-10);
  }
}

.sc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sc-stack--sm { gap: var(--space-2); }
.sc-stack--lg { gap: var(--space-6); }

.sc-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.sc-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Evita scroll horizontal acidental sem quebrar sticky do header */
html {
  overflow-x: clip;
}

/* Safe area para barras inferiores (bottom nav) */
.sc-safe-bottom {
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

/* Tipografia fluida opcional */
.sc-fluid-title {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: var(--tracking-title-lg);
  line-height: var(--lh-tight);
}

@media (max-width: 389px) {
  .container {
    width: min(100% - 32px, var(--maxw, 1080px));
  }
}