/* ==========================================================================
   Lab 8 — Slider ("Em destaque"), com o desenho da página atual.
   Gestão como na intranet: tipo de conteúdo Slider com os painéis e a ordem;
   o bloco só escolhe qual mostra. Sem rotação automática.
   Painel: imagem à largura do contentor, recortada, com parallax por dentro
   da moldura (deriva ao dobro, como a faixa de imagem); por cima, em baixo
   à esquerda, o título numa caixa clara, a data noutra caixa clara com a
   mesma largura e o botão "Saiba mais" (a única ligação).
   Exceção aceite: o título do painel é em Lora.
   Data: só quando o conteúdo de destino a tem, no formato desse conteúdo
   (atividade: a data da atividade; artigo de blog: a data de publicação,
   DD . MM . AAAA). Páginas, peças e ligações externas não têm data.
   Altura: 480px em telemóvel → 700px a 1440px (pedido no lab 8).
   Anterior e seguinte por baixo da imagem, ao centro, só com 2 ou mais
   painéis. O painel novo entra de lado (da direita no seguinte, da esquerda
   no anterior) e o antigo sai para o lado oposto; com movimento reduzido a
   troca é imediata. Sem JS, os painéis ficam empilhados e os botões escondidos.
   ========================================================================== */

/* Painéis numa lista (ul > li, sem role: ASI #51, CMRA #54), sem marcador nem recuo */
.slider__track { display: grid; row-gap: var(--space-block); margin: 0; padding: 0; list-style: none; }
.slider.is-ready .slider__track { row-gap: 0; }
.slider__slide { position: relative; }
.slider__slide[hidden] { display: none; }
/* Com JS: os painéis ocupam a mesma célula e a pista corta o que sai de lado */
.slider.is-ready .slider__track { overflow: clip; }
.slider.is-ready .slider__slide { grid-area: 1 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .slider__slide.is-in-next { animation: slider-in-next calc(var(--duration-hover) / 2) var(--ease-hover); }
  .slider__slide.is-in-prev { animation: slider-in-prev calc(var(--duration-hover) / 2) var(--ease-hover); }
  .slider__slide.is-out-next { animation: slider-out-next calc(var(--duration-hover) / 2) var(--ease-hover) forwards; }
  .slider__slide.is-out-prev { animation: slider-out-prev calc(var(--duration-hover) / 2) var(--ease-hover) forwards; }
}
@keyframes slider-in-next { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slider-in-prev { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slider-out-next { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes slider-out-prev { from { transform: none; } to { transform: translateX(100%); } }

/* Imagem recortada, 480 → 700px */
.slider { --slider-height: clamp(30rem, 24.895rem + 20.952vw, 43.75rem); }
.slider__media { position: relative; height: var(--slider-height); margin: 0; overflow: clip; background: var(--color-surface); }
.slider__drift { position: absolute; inset: calc(-2 * var(--parallax-drift)) 0; --drift: 2; }
/* Alinhamento vertical do painel (chat 38): 50% por omissão; o painel escreve --slider-focus só quando muda */
.slider__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--slider-focus, 50%); }

/* Caixas por cima da imagem (tema claro fixo: caixa branca, botão preto) */
.slider__overlay {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  justify-items: stretch;
  color: var(--color-text);
}
.slider__overlay .button-row { justify-self: start; }
.slider__title, .slider__date { margin: 0; padding: var(--space-2) var(--space-4); background: var(--color-bg); }
.slider__title { font-size: var(--text-slider); }
.slider__date { margin-top: var(--space-3); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.slider__overlay .button-row { margin-top: var(--space-4); }
@media (min-width: 64em) {
  /* Caixas com 4 colunas de largura */
  .slider__overlay { right: auto; width: calc((100% - 11 * var(--grid-gap)) / 3 + 3 * var(--grid-gap)); }
  .slider__title { padding-inline-end: var(--space-6); }
  .slider__date { padding-inline-end: var(--space-6); }
  .slider__overlay .button-row { margin-top: var(--space-6); }
}

/* Botões anterior e seguinte: por baixo da imagem, ao centro */
.slider__controls { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.slider__controls[hidden] { display: none; }