/**
 * Hularmonia Feature Link (brief 05).
 * Grid a cella singola al posto degli `absolute inset-0` del modello,
 * sfondo della CTA come custom property (stato hover della card) e focus.
 */

/* Immagine, due velature e contenuto in grid-area 1 / 1, dipinti
   nell'ordine del DOM (nessun z-index). */
.hularmonia-feature-link .hularmonia-feature-link__card {
  --hfl-cta-bg: rgb(250 248 245 / 0.95);
  --hfl-cta-bg-hover: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

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

/* L'immagine non allunga la riga con la sua altezza intrinseca: la
   card è alta quanto il contenuto o la min-height (control). */
.hularmonia-feature-link__media {
  contain: size;
  min-height: 0;
  overflow: hidden;
}

/* Con lo zoom all'hover l'immagine trasformata verrebbe dipinta sopra
   velature e testo: gli item della grid accettano z-index senza position. */
.hularmonia-feature-link__overlay {
  z-index: 1;
}

.hularmonia-feature-link__content {
  z-index: 2;
}

.hularmonia-feature-link .hularmonia-feature-link__image {
  max-width: none;
}

/* Icona della CTA in riga (come il glifo <i> di Remix del modello): il
   box prende l'interlinea di text-lg (28px), non i 18px dell'SVG. */
.hularmonia-feature-link .hularmonia-feature-link__cta-icon svg {
  display: inline-block;
  vertical-align: middle;
}

.hularmonia-feature-link .hularmonia-feature-link__cta {
  background-color: var(--hfl-cta-bg);
}

.hularmonia-feature-link .hularmonia-feature-link__card:hover .hularmonia-feature-link__cta,
.hularmonia-feature-link .hularmonia-feature-link__card:focus-visible .hularmonia-feature-link__cta {
  background-color: var(--hfl-cta-bg-hover);
}

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

@media (prefers-reduced-motion: reduce) {
  .hularmonia-scope .hularmonia-feature-link__image,
  .hularmonia-scope .hularmonia-feature-link__cta,
  .hularmonia-scope .hularmonia-feature-link__cta-icon {
    transition: none;
  }
}