/**
 * Hularmonia Pathways (brief 05).
 * Pannello in grid a cella singola al posto degli `absolute` del modello:
 * immagine e velatura riempiono la cella, il testo sta in basso a sinistra
 * (come `absolute bottom-0 left-0`). Altezza dal control `height`.
 */

.hularmonia-pathways .hularmonia-pathways__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 70vh;
}

.hularmonia-pathways__panel > * {
  grid-area: 1 / 1;
}

/* Con lo zoom all'hover l'immagine trasformata verrebbe dipinta sopra
   velatura e testo (che nel modello sono absolute): gli item della grid
   accettano z-index anche senza position. */
.hularmonia-pathways__overlay {
  z-index: 1;
}

.hularmonia-pathways__content {
  z-index: 2;
}

.hularmonia-pathways .hularmonia-pathways__image {
  max-width: none;
  min-height: 0;
}

.hularmonia-pathways__content {
  align-self: end;
  justify-self: start;
}

.hularmonia-pathways .hularmonia-pathways__panel:focus-visible {
  outline: 2px solid var(--hula-gold);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .hularmonia-scope .hularmonia-pathways__image,
  .hularmonia-scope .hularmonia-pathways__cta {
    transition: none;
  }
}