/* ==========================================================================
   Base: reset, tipografia e utilitários de layout
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  hyphens: none;
  -webkit-hyphens: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem - 60px); /* âncoras descem 60px além do cabeçalho */
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  font-weight: 400;
  text-wrap: balance;
}
h1, h2, .display { font-family: var(--font-display); letter-spacing: 0.01em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: 700; }
h4 { font-size: var(--text-md); font-weight: 700; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-link); text-underline-offset: 0.2em; }
a:hover { color: var(--green-900); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }
small { font-size: var(--text-sm); }   /* o padrão do navegador (13,33px) não é par */

/* Acessibilidade */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  padding: var(--space-2) var(--space-4); background: var(--green-700); color: var(--white);
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); color: var(--white); }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) / 2); }
.section--cream { background: var(--cream); }
.section--green { background: var(--green-700); color: var(--white); }
.section--green h2, .section--green h3 { color: var(--white); }

.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.text-center { text-align: center; }
.lead { font-size: var(--text-md); color: var(--color-muted); }

/* Imagens: containers com proporção fixa + object-fit garantem alinhamento. */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--gray-100); }
.media > img, .media > picture > img { width: 100%; height: 100%; object-fit: cover; }
.media--contain > img { object-fit: contain; background: transparent; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-1x1 { aspect-ratio: 1; }
.ratio-3x1 { aspect-ratio: 3 / 1; }

/* Revelação suave ao rolar (ativada por assets/js/site.js) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Texto corrido justificado, SEM hifenização (palavra nunca é partida). No celular a coluna é estreita demais:
   fica à esquerda. Cartões, botões, rodapé e o admin não entram na regra. */
@media (min-width: 768px) {
  main .lead, main .prose, main .rich-text, main .product__desc, main .faq__answer,
  main .legal-page__body, main .history-story__text, main .visit-rules__text, main .blog-article__content {
    text-align: justify;
    hyphens: none;            /* nenhuma palavra é hifenizada */
    -webkit-hyphens: none;
  }
}

/* Texto com quebras de linha vindas de formulários (helper multiline()): linhas juntas, blocos com folga curta */
.ml { display: block; line-height: 1.4; }
.ml + .ml { margin-top: 0.5em; }