/* ==========================================================================
   LAYOUT — Grid, Container, Wrappers
   ========================================================================== */

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

/* ── Grid System ────────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--gutter);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}

/* ── Flex Helpers ───────────────────────────────────────────────────────────── */
.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(--space-2); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }
.gap-8       { gap: var(--space-8); }

/* ── Section ────────────────────────────────────────────────────────────────── */
.section {
  position: relative;
  padding-block: var(--section-gap);
  overflow: hidden;
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section--lg {
  padding-block: var(--section-gap-lg);
}

.section--sm {
  padding-block: calc(var(--section-gap) / 2);
}

/* ── Superfícies ────────────────────────────────────────────────────────────── */
.surface           { background-color: var(--color-surface); }
.surface-low       { background-color: var(--color-surface-low); }
.surface-container { background-color: var(--color-surface-container); }
.surface-high      { background-color: var(--color-surface-high); }
.surface-bright    { background-color: var(--color-surface-bright); }

/* ── Dark Surface (utilitária) ──────────────────────────────────────────────
   Sobrescreve os tokens de cor localmente para seções escuras (header, hero,
   footer, stats-bar, cta-banner). Todos os componentes filhos (btn, card,
   badge, etc.) se adaptam automaticamente por herdarem as custom properties. */
.dark-surface {
  --color-background:        var(--color-dark-background);
  --color-surface:           var(--color-dark-background);
  --color-surface-low:       var(--color-dark-surface-low);
  --color-surface-container: var(--color-dark-surface-container);
  --color-surface-high:      var(--color-dark-surface-high);
  --color-surface-highest:   var(--color-dark-surface-highest);
  --color-surface-bright:    var(--color-dark-surface-bright);
  --color-on-surface:        var(--color-dark-on-surface);
  --color-on-surface-variant: var(--color-dark-on-surface-variant);
  --color-outline:           var(--color-dark-outline);
  --color-outline-variant:   var(--color-dark-outline-variant);
  background-color: var(--color-background);
  color: var(--color-on-surface);
}

/* ── Layout de página interna (com sidebar) ─────────────────────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 1024px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Main content area ──────────────────────────────────────────────────────── */
.site-main {
  min-height: 60vh;
}

/* ── Page header (hero interno) ────────────────────────────────────────────── */
.page-header {
  background-color: var(--color-background);
  padding-block: var(--space-20);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-header__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-header__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-header__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(19,17,15,0.94) 0%, rgba(19,17,15,0.82) 45%, rgba(19,17,15,0.6) 100%);
}

/* Padrão decorativo: linhas finas em formato de engrenagem, repetido em mosaico */
.page-header__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23F5A623' stroke-width='1'%3E%3Cpath d='M80,60 a20,20 0 1,1 -0.1,0 M80,44 v6 M80,110 v6 M60,80 h6 M94,80 h6 M65,65 l4,4 M91,91 l4,4 M65,95 l4,-4 M91,69 l4,-4 M69.5,50 l2,5.5 M88.5,50 l-2,5.5 M69.5,110 l2,-5.5 M88.5,110 l-2,-5.5 M50,69.5 l5.5,2 M50,90.5 l5.5,-2 M110,69.5 l-5.5,2 M110,90.5 l-5.5,-2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}

.page-header__inner {
  position: relative;
  z-index: 2;
}

.page-header .page-header__title,
.page-header .page-header__label,
.page-header .breadcrumb li,
.page-header .breadcrumb li a,
.page-header .rank-math-breadcrumb,
.page-header .rank-math-breadcrumb a {
  color: #f5f1ea;
}

.page-header .page-header__desc {
  color: #cbbfa8;
}

.page-header .breadcrumb li a:hover,
.page-header .rank-math-breadcrumb a:hover {
  color: var(--color-primary-container);
}

.page-header__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary-container);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.page-header__title {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.page-header__desc {
  font-size: var(--text-lg);
  color: var(--color-on-surface-variant);
  max-width: 600px;
}