/**
 * Hularmonia Feature Mosaic (brief 05).
 * Card grande in grid a cella singola al posto degli `absolute` del
 * modello, colori di hover dei link come custom property, focus e
 * reduced motion.
 */

.hularmonia-feature-mosaic {
  --hfm-feature-link: #fff;
  --hfm-card-link: var(--hula-ink);
  --hfm-link-hover: var(--hula-gold);
}

.hularmonia-feature-mosaic .hularmonia-feature-mosaic__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 600px;
}

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

.hularmonia-feature-mosaic__feature-media {
  contain: size;
  min-height: 0;
  overflow: hidden;
}

.hularmonia-feature-mosaic .hularmonia-feature-mosaic__feature-image {
  max-width: none;
}

/* Lo zoom in hover porta l'immagine su un livello sopra gli altri item
   della grid (A-59): velatura e testo restano davanti. */
.hularmonia-feature-mosaic__feature-overlay {
  z-index: 1;
}

.hularmonia-feature-mosaic__feature-content {
  z-index: 2;
  align-self: end;
  justify-self: start;
}

.hularmonia-feature-mosaic .hularmonia-feature-mosaic__card {
  height: 290px;
}

/* Grande: il modello colora l'etichetta solo con l'hover sull'etichetta
   (hover:), le piccole con l'hover sulla card (group-hover:). */
.hularmonia-feature-mosaic .hularmonia-feature-mosaic__feature-link {
  color: var(--hfm-feature-link);
}

.hularmonia-feature-mosaic .hularmonia-feature-mosaic__feature-link:hover,
.hularmonia-feature-mosaic .hularmonia-feature-mosaic__feature:focus-visible .hularmonia-feature-mosaic__feature-link {
  color: var(--hfm-link-hover);
}

.hularmonia-feature-mosaic .hularmonia-feature-mosaic__card-link {
  color: var(--hfm-card-link);
}

.hularmonia-feature-mosaic .hularmonia-feature-mosaic__card:hover .hularmonia-feature-mosaic__card-link,
.hularmonia-feature-mosaic .hularmonia-feature-mosaic__card:focus-visible .hularmonia-feature-mosaic__card-link {
  color: var(--hfm-link-hover);
}

.hularmonia-feature-mosaic .hularmonia-feature-mosaic__feature:focus-visible,
.hularmonia-feature-mosaic .hularmonia-feature-mosaic__card:focus-visible {
  outline: 2px solid var(--hula-gold);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hularmonia-scope .hularmonia-feature-mosaic__feature-image,
  .hularmonia-scope .hularmonia-feature-mosaic__feature-link,
  .hularmonia-scope .hularmonia-feature-mosaic__card-link {
    transition: none;
  }
}