/* Imagem e imagem e texto */
:root {
  --media-band-height: clamp(30rem, 27.214rem + 11.429vw, 37.5rem);   /* 480 → 600px */
}

/* ---------- Faixa de imagem: recortada, parallax por dentro, abre na lightbox ---------- */
.media-band { margin: 0; }
.media-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: clip;
  color: inherit;
  background: var(--color-surface);
  cursor: zoom-in;
}
.media-band__open { height: var(--media-band-height); }
/* A imagem é mais alta que a faixa pela deriva do parallax, em cima e em baixo */
/* Deriva ao dobro da galeria (96px para cada lado): o parallax tem de se notar */
.media-band__drift { position: absolute; inset: calc(-2 * var(--parallax-drift)) 0; --drift: 2; }
.media-band__img { width: 100%; height: 100%; object-fit: cover; }
.media-open:focus-visible { outline-offset: var(--focus-offset); }

/* ---------- Imagem solta (lab 10): proporção real, largura do sítio onde está ---------- */
.image-block { margin: 0; }
.image-block img { width: 100%; height: auto; }

/* ---------- Imagem e texto ---------- */
.image-text { display: grid; gap: var(--space-block); align-items: var(--image-text-align, center); }
.image-text__media { margin: 0; }
/* Proporção da imagem (campo da intranet, chat 27): 3:2 por omissão (lab 6); original sem corte;
   altura fixa com a largura da coluna */
.image-text__media img { width: 100%; aspect-ratio: var(--image-text-ratio, 3 / 2); object-fit: cover; }
.image-text--original .image-text__media img { aspect-ratio: auto; height: auto; }
.image-text--fixed .image-text__media img { aspect-ratio: auto; height: var(--image-text-height); }
/* Título do texto (intranet): texto, não cabeçalho; com o tamanho do texto maior */
.image-text__title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-body-xl); line-height: var(--lh-heading); }
.image-text__text > * { max-width: var(--measure); }
@media (min-width: 64em) {
  .image-text { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  /* Imagem e texto lado a lado: sempre 72px entre os dois (24px da grelha + 48px), como na
     peça em destaque (revisto no lab 9; antes o texto começava na coluna 8, a 138px).
     A largura do texto continua limitada por --measure (cerca de 80 caracteres). */
  .image-text__media { grid-column: 1 / span 6; }
  .image-text__text { grid-column: 7 / span 6; margin-left: var(--space-6); }
  /* Invertido: texto à esquerda, imagem à direita. No HTML a imagem vem sempre primeiro */
  .image-text--reverse .image-text__media { grid-column: 7 / span 6; grid-row: 1; }
  .image-text--reverse .image-text__text { grid-column: 1 / span 6; grid-row: 1; margin-left: 0; margin-right: var(--space-6); }
}

/* ---------- Imagem e texto, forma da página inicial (lab 8, "O colecionador") ----------
   Título por cima da imagem; imagem na proporção real (--ar), com parallax por dentro
   da moldura; ao lado, filete por cima do texto e botão em baixo, alinhado com o fundo
   da imagem. Telemóvel: tudo empilhado. */
.image-text--titled { align-items: stretch; row-gap: var(--space-heading); }
.image-text--titled .block-title { margin: 0; }
.image-text__media--drift { position: relative; aspect-ratio: var(--ar); overflow: clip; }
.image-text__drift { position: absolute; inset: calc(-1 * var(--parallax-drift)) 0; --drift: 1; }
.image-text__media--drift img { height: 100%; aspect-ratio: auto; }
.image-text--titled .image-text__text { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--space-block); border-top: var(--border-width) solid var(--color-border); }
.image-text--titled .image-text__text > * { max-width: var(--measure); }
.image-text--titled .button-row { margin-top: var(--space-block); }
@media (min-width: 64em) {
  .image-text--titled .block-title { grid-column: 1 / span 7; grid-row: 1; }
  .image-text--titled .image-text__media { grid-column: 1 / span 7; grid-row: 2; }
  .image-text--titled .image-text__text { grid-column: 8 / span 5; grid-row: 2; margin-left: var(--space-6); }
  .image-text--titled .button-row { margin-top: auto; }
}


/* ---------- Tema (chat 24): casos dos campos que os labs não mostram ---------- */
/* Imagem com a proporção escolhida no bloco (1:1, 4:5, 3:2, 16:9), recortada */
.image-block--ratio img { aspect-ratio: var(--ratio); object-fit: cover; }
/* Faixa de imagem sem lightbox: a mesma moldura, sem botão */
.media-band__frame { position: relative; display: block; overflow: clip; background: var(--color-surface); }
/* Imagem e texto com título e lightbox: o botão ocupa a moldura */
.image-text__media--drift > .media-open { position: absolute; inset: 0; }