/* Grade do mib-objetos: a mesma do Rato (Rato/WebsiteDevelopment/website/.work/bancada/grade.css),
   trazida por pedido do Daniel em 2026-10-30. Sobrepõe a convenção do estúdio (16/8 colunas,
   sangrando). O interativo roda no canvas 1920×1080; a ponta mobile fica só por paridade.
   Desktop (a partir de md): 16 colunas, gap 10px, margem lateral de meia coluna, no canvas 1920.
   Mobile:                    4 colunas, gap 10px, margem lateral de meia coluna, no canvas 390.

   Margem = meia coluna: a largura vira 2 margens + N colunas + (N-1) vãos = (N+1) colunas +
   (N-1) vãos, e a margem sai de (largura - (N-1) vãos) / (2(N+1)). No canvas 1920 dá coluna
   de 104,1px e margem de 52,1px; no 390, coluna de 72px e margem de 36px.

   A grade NÃO sangra: as colunas começam depois da margem lateral. O que é full bleed
   (foto de abertura, lâmina) fica fora da .grade, não em col-span-16.

   rem dinâmica: 1rem = 16px no canvas de cada ponta (1920 no desktop, 390 no mobile), e
   tudo em rem acompanha a largura da janela.

   :where() zera a especificidade: utilitário do Tailwind escrito na tag sobrescreve a grade
   sem !important. Vão e margem saem daqui; span e início de coluna saem do utilitário. */

/* --grade-coluna e --grade-margem expostas para o que fica fora da .grade e precisa se
   alinhar a ela (a marca fixa no canto, por exemplo). */
html {
  font-size: calc(100vw / 24.375);
  /* (24.375rem - 3 vãos) / 5 = 4.5rem; margem = meia coluna = 2.25rem */
  --grade-coluna: calc((24.375rem - 3 * 0.625rem) / 5);
  --grade-margem: calc(var(--grade-coluna) / 2);
}

@media (min-width: 768px) {
  html {
    font-size: calc(100vw / 120);
    /* (120rem - 15 vãos) / 17 ≈ 6.5074rem; margem ≈ 3.2537rem */
    --grade-coluna: calc((120rem - 15 * 0.625rem) / 17);
  }
}

:where(.grade) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0.625rem;
  padding-inline: var(--grade-margem);
}

@media (min-width: 768px) {
  :where(.grade) {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }
}

/* Guias: overlay de conferência desenhado por grade.js, ligado pela tecla g. Fixo, sem
   eventos de ponteiro, fora do layout. Colunas em magenta; linhas horizontais nos quartos, nos
   terços e na metade da ALTURA da janela, para compor a dobra. Terço contínuo, metade
   tracejada, quarto pontilhado e mais apagado. */
.grade-guias,
.grade-linhas {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms linear;
}

.grade-guias[data-visivel],
.grade-linhas[data-visivel] {
  opacity: 1;
}

.grade-guias > span {
  background: rgba(255, 0, 255, 0.1);
  outline: 1px solid rgba(255, 0, 255, 0.35);
  outline-offset: -1px;
}

.grade-linhas > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid #ff00ff;
}

.grade-linhas > span[data-tipo='metade'] {
  border-top-style: dashed;
}

.grade-linhas > span[data-tipo='quarto'] {
  border-top-style: dotted;
  border-top-color: rgba(255, 0, 255, 0.6);
}

.grade-linhas > span[data-tipo='oitavo'] {
  border-top-style: dotted;
  border-top-color: rgba(255, 0, 255, 0.3);
}

.grade-linhas > span::after {
  content: attr(data-rotulo);
  position: absolute;
  right: 0.5rem;
  top: 0.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: #ff00ff;
}

@media (prefers-reduced-motion: reduce) {
  .grade-guias,
  .grade-linhas {
    transition: none;
  }
}