/* ==========================================================================
   Coleção Sobral — grade de produto
   Só entra em colecao.html e en/collection.html. Home, sobre e contato
   não carregam este arquivo.
   ========================================================================== */

.pagina-colecao {
  padding-bottom: 4.5rem;
}

/* O menu fixo da coluna esquerda não existe nesta página: a navegação
   mora no cabeçalho. O miolo fica centrado, ~1200px úteis. */
.pagina-colecao .conteudo,
.pagina-colecao .rodape {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

.pagina-colecao .rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
  padding-top: var(--esp-5);
  padding-bottom: var(--esp-4);
}

.pagina-colecao .rodape__contato,
.pagina-colecao .rodape__manifesto {
  margin: 0;
}

/* --- Nav: inline no desktop, hambúrguer no mobile ------------------------ */
.pagina-colecao .cabecalho__menu {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.35rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--cor-texto);
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
  letter-spacing: var(--tracking-nav);
}

.cabecalho__burger {
  width: 18px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

@media (max-width: 899.98px) {
  .pagina-colecao .cabecalho {
    align-items: center;
  }

  .pagina-colecao .cabecalho__menu {
    display: inline-flex;
  }

  .pagina-colecao .cabecalho__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    padding-bottom: var(--esp-2);
    border-top: 1px solid var(--cor-linha);
  }

  .pagina-colecao .cabecalho__nav[data-aberto="true"] {
    display: flex;
  }
}

/* --- Abertura: H1 + uma linha. O resto fica no disclosure. --------------- */
.colecao-intro {
  padding-top: clamp(1.75rem, 4vh, 3.25rem);
  padding-bottom: clamp(1.25rem, 3vh, 2rem);
  max-width: 42rem;
}

.colecao-intro h1 {
  font-weight: var(--peso-leve);
}

.colecao-intro__linha {
  margin-top: 0.65rem;
  max-width: 36em;
}

.sobre-colecao {
  margin-top: 0.35rem;
}

.sobre-colecao summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: var(--peso-normal);
  color: var(--cor-texto);
  list-style: none;
}

.sobre-colecao summary::-webkit-details-marker {
  display: none;
}

.sobre-colecao summary span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cor-link-linha);
  text-underline-offset: 0.25em;
}

.sobre-colecao summary::after {
  content: "▾";
  margin-left: 0.4em;
  color: var(--cor-texto-suave);
  font-size: 0.85em;
}

.sobre-colecao[open] summary::after {
  content: "▴";
}

.sobre-colecao p {
  max-width: var(--largura-prosa);
  margin-top: var(--esp-2);
}

.sobre-colecao small {
  display: block;
  margin-top: var(--esp-2);
}

/* --- Grade 1 col / 3×2 ---------------------------------------------------- */
.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 32px;
  }
}

.peca__abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.peca__foto {
  position: relative;
  display: block;
  /* Ficha enquadrada é 3:2. O quadro segue o arquivo, sem barra extra. */
  aspect-ratio: 3 / 2;
  background-color: #F7F6F7;
  overflow: hidden;
}

.peca__foto picture,
.peca__foto img {
  width: 100%;
  height: 100%;
}

.peca__foto img {
  object-fit: contain;
  background-color: #F7F6F7;
  transition: transform var(--dur-ui) var(--curva);
}

.peca__teaser {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.6rem 0.9rem 0.85rem;
  background: linear-gradient(to top, rgba(62, 30, 18, 0.42), rgba(62, 30, 18, 0));
  color: #fff;
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
  line-height: 1.35;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--curva);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .peca__abrir:hover .peca__teaser,
  .peca__abrir:focus-visible .peca__teaser {
    opacity: 1;
  }

  .peca__abrir:hover .peca__foto img,
  .peca__abrir:focus-visible .peca__foto img {
    transform: translateY(-3px);
  }
}

.peca__abrir:focus-visible .peca__teaser {
  opacity: 1;
}

.peca__meta {
  display: grid;
  gap: 0.12rem;
  padding-top: 0.75rem;
}

.peca__nome {
  font-size: var(--fs-corpo);
  font-weight: var(--peso-normal);
  letter-spacing: var(--tracking-corpo);
  color: var(--cor-texto);
}

.peca__dim {
  color: var(--cor-texto-suave);
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
}

.peca__mais {
  margin-top: 0.15rem;
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
  letter-spacing: var(--tracking-nav);
  color: var(--cor-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cor-link-linha);
  text-underline-offset: 0.25em;
}

/* --- Cuidados / disponibilidade, abaixo da grade -------------------------- */
.notas {
  display: grid;
  gap: var(--esp-5);
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  margin-bottom: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--cor-linha);
}

@media (min-width: 800px) {
  .notas {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-6);
    align-items: start;
  }
}

.notas h2 {
  font-weight: var(--peso-leve);
  font-size: var(--fs-h2);
}

.notas p {
  margin-top: var(--esp-2);
  max-width: 36em;
}

.notas .cta-ig {
  margin-top: var(--esp-3);
}

/* --- CTA Instagram -------------------------------------------------------- */
.cta-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.35rem;
  background: #20305E;
  color: #fff;
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  border: 1px solid #20305E;
  transition: background-color var(--dur-ui) var(--curva), color var(--dur-ui) var(--curva);
}

.cta-ig:hover,
.cta-ig:focus-visible {
  background: var(--cor-texto);
  border-color: var(--cor-texto);
  color: #fff;
}

/* --- Overlay -------------------------------------------------------------- */
.detalhe {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  color: var(--cor-texto);
}

.detalhe[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.detalhe::backdrop {
  background: rgba(62, 30, 18, 0.48);
}

.detalhe__painel {
  width: min(980px, calc(100% - 2rem));
  max-height: min(88vh, 840px);
  overflow: auto;
  background: #fff;
  padding: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem 1.75rem;
  align-items: start;
}

/* O corpo vira os próprios filhos da grade, para a foto ocupar a coluna
   esquerda e o texto + CTA a direita, sem o botão cair debaixo da foto. */
.detalhe__corpo {
  display: contents;
}

.detalhe__topo {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 800px) {
  .detalhe__painel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .detalhe__foto {
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .detalhe__topo { grid-column: 2; grid-row: 1; }
  .detalhe__texto { grid-column: 2; grid-row: 2; }
  .detalhe__acoes { grid-column: 2; grid-row: 3; }
  .detalhe__nota { grid-column: 2; grid-row: 4; }
}

.detalhe__fechar {
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.35rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--cor-texto);
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
  letter-spacing: var(--tracking-nav);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cor-link-linha);
  text-underline-offset: 0.25em;
}


.detalhe__foto {
  margin: 0;
  background: #F7F6F7;
  aspect-ratio: 3 / 2;
}

.detalhe__foto picture,
.detalhe__foto img {
  width: 100%;
  height: 100%;
}

.detalhe__foto img {
  object-fit: contain;
  background: #F7F6F7;
}


.detalhe__titulo {
  font-size: var(--fs-h2);
  font-weight: var(--peso-normal);
}

.detalhe__dim {
  margin-top: 0.35rem;
  color: var(--cor-texto-suave);
  font-weight: var(--peso-normal);
}

.detalhe__texto .ficha {
  margin-top: var(--esp-3);
}

.detalhe__desc {
  margin-top: var(--esp-3);
  max-width: 38em;
}

.detalhe__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.35rem;
}

.detalhe__nota {
  margin-top: var(--esp-2);
  color: var(--cor-texto-suave);
  font-size: var(--fs-nav);
}