/* Layout: largura útil, cabeçalho, introdução, barra de filtros, grade e rodapé, com os pontos de quebra. */

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

@media (min-width: 600px) {
  :root {
    --gutter: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-8);
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter: var(--space-10);
  }
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-md);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Cabeçalho fixo. A linha de baixo é sombra, e não borda, para a altura ficar exata e a barra de filtros encostar nele. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-paper);
  box-shadow: 0 1px 0 var(--color-line);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'brand search counter contact';
  align-items: center;
  column-gap: var(--space-6);
  min-height: var(--header-height);
}

.site-header__brand {
  grid-area: brand;
}

.site-header__search {
  grid-area: search;
  max-width: 32.5rem;
}

.site-header__counter {
  grid-area: counter;
}

.site-header__contact {
  grid-area: contact;
}

/* Abaixo de 900 px, o campo de busca não teria largura para o texto de ajuda inteiro: logo, contador e contato ficam
   numa linha, e a busca ganha a linha dela. No celular, o botão de contato fica só com o ícone (components.css). */
@media (max-width: 899px) {
  /* Duas linhas de controles mais os respiros: é essa altura que a barra de filtros fixa precisa conhecer. */
  :root {
    --header-height: calc(
      var(--space-2) + var(--control-height) + var(--space-2) + var(--control-height) + var(--space-3)
    );
  }

  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'brand counter contact'
      'search search search';
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding-block: var(--space-2) var(--space-3);
  }

  .site-header__counter {
    justify-self: end;
  }

  .site-header__search {
    max-width: none;
  }
}

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

.intro__title {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.intro__text {
  margin-top: var(--space-3);
  max-width: 38rem;
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
}

/* Barra de filtros: tema à esquerda, o menu de segmento ao lado e "Ordenar" fixo à direita (D-42). */
.filters {
  background: var(--color-paper);
  box-shadow: 0 1px 0 var(--color-line);
}

.filters__inner {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  grid-template-areas: 'theme divider segment end';
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-3);
}

.filters__theme {
  grid-area: theme;
}

.filters__divider {
  grid-area: divider;
  width: 1px;
  height: var(--space-6);
  background: var(--color-line-strong);
}

.filters__segment {
  grid-area: segment;
}

.filters__end {
  grid-area: end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Fixa embaixo do cabeçalho só a partir de 720 px: no celular, cabeçalho e filtros fixos ocupariam um terço da tela. */
@media (min-width: 720px) {
  .filters {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
  }
}

/* Abaixo de 1100 px: o tema numa linha e os dois menus na de baixo. */
@media (max-width: 1099px) {
  .filters__inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'theme theme'
      'segment end';
  }

  .filters__divider {
    display: none;
  }
}

/* No celular, tudo empilhado e o menu de segmento na largura toda, para o toque. */
@media (max-width: 559px) {
  .filters__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'theme'
      'segment'
      'end';
  }

  .filters__segment,
  .filters__segment .select__control,
  .filters__segment .select__input {
    width: 100%;
  }

  .filters__segment .select__control {
    flex: 1;
  }

  .filters__end {
    justify-self: stretch;
    justify-content: space-between;
  }
}

/* Grade: 1 → 2 → 3 → 4 colunas em 600, 900 e 1500 px, como na galeria de referência. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-16);
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

@media (min-width: 1500px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Rodapé claro: a logo para fundo escuro não é necessária (D-16). */
.site-footer {
  border-top: 1px solid var(--color-line);
  font-size: var(--text-md);
  color: var(--color-ink-muted);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-8);
}

.site-footer__legal {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

@media (max-width: 899px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 559px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-10) var(--space-6);
  }
}