/* ==========================================================================
   Lab 7 — Publicações (publications): um destaque e uma grelha de cartões,
   todos com ligação para a loja online.
   Cartão: uma só ligação, no título, alargada ao cartão inteiro (A11Y-47,
   A11Y-58); imagem decorativa na proporção real; zoom da regra única de
   main.css; "Loja online" visível por baixo, dentro do nome da ligação.
   Grelha: 5 colunas a partir de 1024px, 3 entre 768 e 1023px, 2 em telemóvel.
   ========================================================================== */

.publications__grid {
  display: grid;
  grid-template-columns: repeat(var(--listing-columns), minmax(0, 1fr));
  column-gap: var(--listing-column-gap);
  row-gap: var(--listing-row-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada cartão ocupa duas linhas da grelha (imagem e texto) em subgrid: em cada
   linha, as imagens alinham pela base e os textos começam todos à mesma altura */
.publication-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
}
/* O texto vem primeiro no HTML (título primeiro); a imagem aparece por cima */
.publication-card__text { grid-column: 1; grid-row: 2; align-self: start; display: grid; justify-items: start; }
.publication-card__media { grid-column: 1; grid-row: 1; align-self: end; margin: 0; overflow: hidden; }
.publication-card__media img { display: block; width: 100%; height: auto; }
.publication-card__title { margin: var(--space-3) 0 0; font-family: var(--font-body); letter-spacing: var(--ls-body); font-size: var(--text-body-xl); }
.publication-card__link { color: var(--color-link); text-decoration-line: none; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--duration-fade) var(--ease); }
.publication-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.publication-card__link:focus-visible { outline: none; box-shadow: none; }
.publication-card__link:focus-visible::after { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.publication-card:hover .publication-card__link, .publication-card__link:focus-visible { color: var(--color-link-hover); text-decoration-line: underline; }
[data-theme="light"] .publication-card__link:focus-visible { color: var(--color-link); }
.publication-card .publication-card__subtitle { margin: var(--space-2) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }
/* "Loja online": ligação com linha (main.css), decorativa: a ligação é o título */
.publication-card .publication-card__shop { margin: var(--space-2) 0 0; }

/* Destaque e disposição, como no site atual (revisto no lab 7):
   grelha de 5 colunas a partir de 1024px. O destaque ocupa as colunas 1 a 3,
   com a imagem na primeira metade e o texto logo ao lado, ao centro.
   Os dois cartões seguintes ficam nas colunas 4 e 5, com as capas alinhadas
   pela base com a do destaque; os
   restantes seguem na linha seguinte, a partir da coluna 1. */
@media (min-width: 64em) {
  .publications__grid { --listing-columns: 5; }
  .publication-card--featured { grid-column: 1 / span 3; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .publication-card--featured .publication-card__text { grid-column: 2; grid-row: 1; align-self: center; }
  .publication-card--featured .publication-card__title { margin-top: 0; }
}
/* Entre 768 e 1023px o destaque ocupa a linha inteira, com o texto ao lado */
@media (min-width: 48em) and (max-width: 63.99em) {
  .publication-card--featured { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--listing-column-gap); }
  .publication-card--featured .publication-card__text { grid-column: 2 / span 2; grid-row: 1; align-self: center; }
  .publication-card--featured .publication-card__title { margin-top: 0; }
}
/* Telemóvel: o destaque ocupa a linha inteira, empilhado */
@media (max-width: 47.99em) { .publication-card--featured { grid-column: 1 / -1; } }