/*
  Grid do tema original (baseado no Foundation) reimplementado com Flexbox moderno,
  mantendo os MESMOS nomes de classe: row/max_width, small-N/medium-N/large-N/columns.
  Isso é o que permite transcrever o HTML do site atual quase literalmente para as views
  Razor e ele encaixar — sem herdar as ~800KB de CSS do tema comercial.
*/

* {
  box-sizing: border-box;
}

html {
  font-size: var(--text-base);
}

body {
  margin: 0;
  font-family: var(--font-light);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* Regra global do site original: qualquer link sem hover próprio vira --color-accent no
   mouseover. Nav, cards, listas de widget e rodapé já têm hover mais específico e continuam
   vencendo essa regra por especificidade — isto é só a rede de segurança padrão. */
a:hover {
  color: var(--color-accent);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
}

.row.max_width {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.row.align-center {
  justify-content: center;
}

.row.align-middle {
  align-items: center;
}

.columns {
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
  width: 100%;
}

/* Mobile-first: small-N é a largura padrão (0 a 639px). */
.small-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.small-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.small-3  { flex: 0 0 25%;      max-width: 25%; }
.small-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.small-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.small-6  { flex: 0 0 50%;      max-width: 50%; }
.small-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.small-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.small-9  { flex: 0 0 75%;      max-width: 75%; }
.small-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.small-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.small-12 { flex: 0 0 100%;     max-width: 100%; }

@media (min-width: 640px) {
  .medium-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .medium-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .medium-3  { flex: 0 0 25%;      max-width: 25%; }
  .medium-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .medium-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .medium-6  { flex: 0 0 50%;      max-width: 50%; }
  .medium-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .medium-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .medium-9  { flex: 0 0 75%;      max-width: 75%; }
  .medium-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .medium-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .medium-12 { flex: 0 0 100%;     max-width: 100%; }
}

@media (min-width: 1024px) {
  .large-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .large-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .large-3  { flex: 0 0 25%;      max-width: 25%; }
  .large-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .large-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .large-6  { flex: 0 0 50%;      max-width: 50%; }
  .large-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .large-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .large-9  { flex: 0 0 75%;      max-width: 75%; }
  .large-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .large-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .large-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* Layout do blog: conteúdo principal + sidebar, como em index.php do tema original. */
.blog-main-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.blog-container {
  flex: 1 1 640px;
  min-width: 0;
}

.header-spacer {
  height: 90px;
}