/* ========================================================================== 
   IBRALE Visual System — 01 Components
   Classes reutilizáveis para homes, páginas, posts e blocos editoriais.
   ========================================================================== */

/* Seções e largura -------------------------------------------------------- */

.ibrale-section,
.slab-section {
  width: min(var(--ibrale-max), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.ibrale-section--wide,
.slab-section--wide {
  width: min(var(--ibrale-max-wide), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.ibrale-section--narrow,
.slab-section--narrow {
  width: min(var(--ibrale-max-narrow), calc(100% - 40px));
  margin-right: auto;
  margin-left: auto;
}

.ibrale-text-measure {
  max-width: var(--ibrale-max-text);
}

/* Rótulos, textos e CTAs -------------------------------------------------- */

.ibrale-eyebrow,
.slab-eyebrow {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ibrale-muted);
}

.ibrale-frase-fecho,
.slab-frase-fecho {
  margin: 28px 0 0;
  font-size: 1.12rem;
  line-height: 1.4;
  font-weight: 800;
  color: var(--ibrale-ink);
}

.ibrale-cta,
.ibrale-botao-secundario,
.slab-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 16px;
  border: 1px solid var(--site-ibralc);
  border-radius: 8px;
  color: #9a4a17;
  text-decoration: none;
  font-weight: 700;
}

.ibrale-cta:hover,
.ibrale-botao-secundario:hover,
.slab-cta:hover {
  background: #fff4ec;
  text-decoration: none;
}

/* Cards e painéis --------------------------------------------------------- */

.ibrale-card,
.ibrale-panel,
.slab-card,
.slab-panel {
  position: relative;
  background: var(--ibrale-white);
  border: 1px solid var(--ibrale-border);
  color: var(--ibrale-ink);
  overflow: hidden;
}

.ibrale-card,
.slab-card {
  border-radius: var(--ibrale-radius-card);
  box-shadow: var(--ibrale-shadow-card);
}

.ibrale-panel,
.slab-panel {
  border-radius: var(--ibrale-radius-panel);
  box-shadow: var(--ibrale-shadow-panel);
}

.ibrale-card--hover,
.slab-card--hover {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ibrale-card--hover:hover,
.slab-card--hover:hover {
  transform: translateY(-2px);
  border-color: #bdd1ca;
  box-shadow: var(--ibrale-shadow-card-hover);
}

.ibrale-card--top::before,
.ibrale-panel--top::before,
.ibrale-card--side::before,
.ibrale-panel--side::before,
.slab-card--top::before,
.slab-panel--top::before,
.slab-card--side::before,
.slab-panel--side::before {
  content: "";
  position: absolute;
  background: var(--site-ibrale);
}

.ibrale-card--top::before,
.ibrale-panel--top::before,
.slab-card--top::before,
.slab-panel--top::before {
  inset: 0 0 auto 0;
  height: 7px;
}

.ibrale-panel--top::before,
.slab-panel--top::before {
  height: 8px;
}

.ibrale-card--side::before,
.ibrale-panel--side::before,
.slab-card--side::before,
.slab-panel--side::before {
  inset: 0 auto 0 0;
  width: 6px;
}

/* Grids ------------------------------------------------------------------- */

.ibrale-grid-2,
.ibrale-grid-3,
.ibrale-grid-4,
.slab-grid-2,
.slab-grid-3,
.slab-grid-4 {
  display: grid;
  gap: var(--ibrale-gap);
}

.ibrale-grid-2,
.slab-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ibrale-grid-3,
.slab-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ibrale-grid-4,
.slab-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Acentos por site -------------------------------------------------------- */

.site-ibrale,
.ibrale-accent-blue { --accent: var(--site-ibrale); }
.site-ibralc,
.ibrale-accent-orange { --accent: var(--site-ibralc); }
.site-slab,
.ibrale-accent-green { --accent: var(--site-slab); }
.site-autor,
.ibrale-accent-slate { --accent: var(--site-autor); }
.site-ecossistema,
.ibrale-accent-ecosystem { --accent: var(--site-ecossistema); }

.site-ibrale::before,
.site-ibralc::before,
.site-slab::before,
.site-autor::before,
.site-ecossistema::before,
.ibrale-accent-blue::before,
.ibrale-accent-orange::before,
.ibrale-accent-green::before,
.ibrale-accent-slate::before,
.ibrale-accent-ecosystem::before {
  background: var(--accent) !important;
}

.site-ibrale strong,
.site-ibrale h2,
.site-ibrale h3,
.site-ibrale .ibrale-eyebrow { color: var(--site-ibrale); }
.site-ibralc strong,
.site-ibralc h2,
.site-ibralc h3,
.site-ibralc .ibrale-eyebrow { color: var(--site-ibralc); }
.site-slab strong,
.site-slab h2,
.site-slab h3,
.site-slab .ibrale-eyebrow { color: var(--site-slab); }
.site-autor strong,
.site-autor h2,
.site-autor h3,
.site-autor .ibrale-eyebrow { color: var(--site-autor); }
.site-ecossistema strong,
.site-ecossistema h2,
.site-ecossistema h3,
.site-ecossistema .ibrale-eyebrow { color: var(--site-ecossistema); }

/* Acentos por tema IBRALE ------------------------------------------------- */

.tema-corpo { --accent: var(--tema-corpo); }
.tema-linguagem { --accent: var(--tema-linguagem); }
.tema-convivencia { --accent: var(--tema-convivencia); }
.tema-prevencao { --accent: var(--tema-prevencao); }
.tema-recursos { --accent: var(--tema-recursos); }
.tema-geral { --accent: var(--tema-geral); }

.tema-corpo::before,
.tema-linguagem::before,
.tema-convivencia::before,
.tema-prevencao::before,
.tema-recursos::before,
.tema-geral::before {
  background: var(--accent) !important;
}

.tema-corpo h2, .tema-corpo h3, .tema-corpo strong, .tema-corpo .ibrale-eyebrow,
.tema-linguagem h2, .tema-linguagem h3, .tema-linguagem strong, .tema-linguagem .ibrale-eyebrow,
.tema-convivencia h2, .tema-convivencia h3, .tema-convivencia strong, .tema-convivencia .ibrale-eyebrow,
.tema-prevencao h2, .tema-prevencao h3, .tema-prevencao strong, .tema-prevencao .ibrale-eyebrow,
.tema-recursos h2, .tema-recursos h3, .tema-recursos strong, .tema-recursos .ibrale-eyebrow,
.tema-geral h2, .tema-geral h3, .tema-geral strong, .tema-geral .ibrale-eyebrow {
  color: var(--accent);
}

@media (max-width: 980px) {
  .ibrale-grid-4,
  .ibrale-grid-3,
  .slab-grid-4,
  .slab-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ibrale-section,
  .ibrale-section--wide,
  .ibrale-section--narrow,
  .slab-section,
  .slab-section--wide,
  .slab-section--narrow {
    width: min(100%, calc(100% - 28px));
  }

  .ibrale-grid-2,
  .ibrale-grid-3,
  .ibrale-grid-4,
  .slab-grid-2,
  .slab-grid-3,
  .slab-grid-4 {
    grid-template-columns: 1fr;
    gap: var(--ibrale-gap-sm);
  }

  .ibrale-card--hover:hover,
  .slab-card--hover:hover {
    transform: none;
  }
}