/* ==========================================================================
   Lab 8 — page_header forma hp (página inicial), como a página atual.
   Cabeça de Buda ao centro e, à direita, H1 com o nome do museu (A11Y-12)
   e texto de entrada com o propósito do site (A11Y-97).
   O topo ocupa o resto do primeiro ecrã (100svh menos o cabeçalho, medido
   pelo main.js em --header-height): a cabeça encolhe para caber e, em
   telemóvel, a cabeça, o título e o texto aparecem sempre sem scroll.
   Sem migalhas. Larguras em colunas da grelha.
   ========================================================================== */

.page-header--hp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: var(--grid-gap);
  row-gap: var(--space-4);
  min-height: calc(100svh - var(--header-height, 0px));
  padding-bottom: var(--space-4);
}
/* Desktop: a cabeça vai até ao fundo do ecrã */
@media (min-width: 64em) { .page-header--hp { padding-bottom: 0; } }
/* A imagem ocupa a altura que sobra, sem empurrar a grelha, e encolhe por inteiro (contain) */
.hero__media { position: relative; grid-column: 1 / -1; min-height: var(--space-9); margin: 0; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero__text { grid-column: 1 / -1; }
.page-header--hp .page-header__title { margin: 0; max-width: none; font-size: var(--text-h1); text-transform: none; }
.hero__lead { margin: var(--space-heading) 0 0; }

/* A partir de 768px: imagem e texto lado a lado, o texto ao centro da altura */
@media (min-width: 48em) {
  .page-header--hp { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: center; }
  .hero__media { grid-column: 1 / span 4; align-self: stretch; }
  .hero__text { grid-column: 5 / span 4; }
}
@media (min-width: 64em) {
  .page-header--hp { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__media { grid-column: 5 / span 4; }
  /* Título nas colunas 9 a 12; texto de entrada só com 3 colunas de largura */
  .hero__text { grid-column: 9 / span 4; }
  .hero__lead { max-width: calc((100% - 3 * var(--grid-gap)) / 4 * 3 + 2 * var(--grid-gap)); margin-top: var(--space-6); }
}