/* Peça: ritmo, título, imagem principal, ficha e colunas de leitura */
/* ---------- Ritmo vertical ----------
   Dentro do topo: migalhas → título 24. O inventário fica na ficha (chat 38).
   Entre blocos (topo, imagem, cada bloco): --space-section, sempre. */
.piece__head { padding-top: 0; }
.piece > .container > * + * { margin-top: var(--space-section); }

/* ---------- Imagem principal e ficha técnica ---------- */
.piece__hero { display: grid; gap: var(--space-4); }
.piece__media { margin: 0; }
.piece__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.piece__open { overflow: clip; }
.piece__open img { width: 100%; height: auto; }
/* Indicação visível de que a imagem amplia: não depende do hover */
.piece__zoom, .media-open__zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--media-control);
  height: var(--media-control);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-round);
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  transition: background-color var(--duration-fade) var(--ease), border-color var(--duration-fade) var(--ease);
}
.piece__open:hover .piece__zoom, .media-open:hover .media-open__zoom, .gallery__open:hover .media-open__zoom { background: var(--button-primary-bg-hover); border-color: var(--button-primary-text); }
.piece__details { margin: 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text-muted); }
/* Inventário por baixo da ficha, sem badge, a 14px; o mesmo espaço do cartão (chat 38) */
.piece__info > .piece__inventory { margin: 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }
.piece__info > .piece__details + .piece__inventory { margin-top: var(--space-2); }


/* ---------- Colunas de leitura: narrativas e áudio começam na coluna 5 ---------- */
.page__block--measure { max-width: var(--measure); }

@media (min-width: 64em) {
  .piece__hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .piece__media { grid-column: 5 / span 4; }
  /* A ficha acompanha a imagem enquanto ela está no ecrã */
  .piece__info { grid-column: 9 / span 3; align-self: start; position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); margin-top: var(--space-7); transition: top var(--duration-motion) var(--ease); }
  .page__block--measure {
    max-width: none;
    padding-inline-start: calc((100% - 11 * var(--grid-gap)) / 12 * 4 + 4 * var(--grid-gap));
    padding-inline-end: calc((100% - 11 * var(--grid-gap)) / 12 * 3 + 3 * var(--grid-gap));
  }
}