/* ============================================================
   LACMOO — layout.css
   Containers, grid, seções, estrutura base do layout
   ============================================================ */

/* ----------------------------------------------------------
   CONTAINER — largura máxima centralizada
---------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--2xl { max-width: var(--container-2xl); }

/* ----------------------------------------------------------
   SEÇÕES — estrutura base de cada bloco de conteúdo
---------------------------------------------------------- */

.section {
  width: 100%;
  padding-block: var(--space-20);
}

.section--sm  { padding-block: var(--space-12); }
.section--lg  { padding-block: var(--space-32); }

/* Seção de fundo creme (cards, loja) */
.section--light {
  background-color: var(--color-bg-white);
}

/* Seção de fundo rosa secundário (alternado) */
.section--rose {
  background-color: var(--color-bg-secondary);
}

/* Seção de fundo escuro */
.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

/* Seção de imagem pronta — ocupa largura total sem padding lateral */
.section--full-art {
  padding: 0;
  width: 100%;
  line-height: 0; /* remove espaço fantasma abaixo da imagem */
}

/* ----------------------------------------------------------
   CABEÇALHO DE SEÇÃO — título + subtítulo centralizados
---------------------------------------------------------- */

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header__eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--space-4);
}

.section-header__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  max-width: 560px;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

/* Cabeçalho alinhado à esquerda */
.section-header--left {
  text-align: left;
}

.section-header--left .section-header__subtitle {
  margin-inline: 0;
}

/* ----------------------------------------------------------
   DIVISOR DECORATIVO — linha com cor da marca
---------------------------------------------------------- */

.divider {
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  margin-block: var(--space-4);
}

.divider--center { margin-inline: auto; }
.divider--wide   { width: 100px; }

/* ----------------------------------------------------------
   GRID — sistema genérico de colunas
---------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-6);
}

.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-fill para cards de produto */
.grid--auto-fill {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Grid auto-fill menor (produtos menores) */
.grid--auto-fill-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* ----------------------------------------------------------
   FLEX HELPERS
---------------------------------------------------------- */

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.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); }

/* ----------------------------------------------------------
   IMAGEM FULLWIDTH — banners e artes prontas
---------------------------------------------------------- */

.img-fullwidth {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Imagem com proporção fixa (16:9) */
.img-ratio-16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ----------------------------------------------------------
   ESPAÇADORES UTILITÁRIOS
---------------------------------------------------------- */

.mt-auto { margin-top: auto; }
.mb-4    { margin-bottom: var(--space-4); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }
.mt-4    { margin-top: var(--space-4); }
.mt-6    { margin-top: var(--space-6); }
.mt-8    { margin-top: var(--space-8); }

/* ----------------------------------------------------------
   VISIBILIDADE / ACESSIBILIDADE
---------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   ESPAÇO PARA NAVBAR FIXA
   Evita que o conteúdo fique escondido atrás da navbar
---------------------------------------------------------- */

.navbar-offset {
  padding-top: var(--navbar-height);
}

/* ----------------------------------------------------------
   OVERLAY — fundo escurecido (carrinho, modal)
---------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(2, 8, 12, 0.5);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------
   RESPONSIVIDADE BASE
   Ajustes globais de layout em telas menores
---------------------------------------------------------- */

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

@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-12);
  }

  .section-header__title {
    font-size: var(--text-2xl);
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-3);
  }

  .section {
    padding-block: var(--space-10);
  }

  .section-header__title {
    font-size: var(--text-xl);
  }
}