/* ==========================================================================
   Lab 8 — Destaque com ligação (feature_link, forma side): "Peça em destaque",
   com o desenho da página atual.
   A peça é escolhida da coleção: título, ficha e inventário (por baixo da ficha, sem badge, chat 38) vêm
   da peça, como no lab 3.
   Imagem da peça na proporção real, sem recorte, com a largura da capa do
   destaque das publicações (vertical, quadrada ou horizontal: a largura é a
   mesma e a altura segue a imagem). Sem parallax: a peça mostra-se inteira e o
   deslocamento que cabia entre o título e o botão (48px) não se notava (lab 8). Ao lado: título,
   ficha, inventário e uma só ligação, "Ver peça", com a linha à frente
   (título da peça em texto escondido). Funciona como cartão: um clique na
   imagem ou no texto abre a peça (feature.js); no teclado e nos leitores
   de ecrã há só a ligação. Zoom da regra única (2.16).
   Desktop: o texto começa em cima e fica preso (sticky) até à base da
   imagem. Telemóvel: imagem → texto a 16px, como nos cartões.
   ========================================================================== */

.feature { display: grid; gap: var(--space-3); align-items: start; }
.feature__media { margin: 0; overflow: clip; }
.feature__media, .feature__text { cursor: pointer; }
.feature__media img { display: block; width: 100%; height: auto; }
.feature__text > * { max-width: var(--measure); }
.feature__title { margin: 0; font-family: var(--font-body); font-size: var(--text-body-xl); letter-spacing: var(--ls-body); }
.feature__details { margin: var(--space-4) 0 0; line-height: var(--lh-body); letter-spacing: var(--ls-body); }
/* Inventário por baixo da ficha, sem badge, a 14px, como no cartão da peça (chat 38) */
.feature__text > .feature__inventory { margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-text-muted); }

.feature__text .line-link { margin-top: var(--space-3); }

@media (min-width: 48em) {
  .feature { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .feature__media { grid-column: 1 / span 4; }
  .feature__text { grid-column: 5 / span 4; margin-left: var(--space-6); }
}
@media (min-width: 64em) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  /* Imagem nas colunas 5 a 8, encostada ao texto, com a largura da capa do destaque das
     publicações: metade de 3 colunas da grelha de 5 (48px entre colunas) menos 24px.
     A área das colunas 5 a 8 (100%) vale um terço do contentor menos 2 espaços da grelha.
     Simplificado: 90% + 0,6 × espaço da grelha − 0,2 × 48px − 0,5 × 24px. */
  .feature__media { grid-column: 5 / span 4; justify-self: end; width: calc(90% + 0.6 * var(--grid-gap) - 0.2 * var(--space-6) - 0.5 * var(--space-4)); }
  /* Texto a 72px da imagem (24 + 48); preso por baixo do cabeçalho fixo até à base da imagem */
  .feature__text { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); transition: top var(--duration-motion) var(--ease); }
}