/**
 * Widget hularmonia-page-hero (brief 04).
 *
 * Solo ciò che le utility non coprono: grid a cella singola al posto
 * degli `absolute inset-0` del modello, altezze in svh, colori di stato
 * dei bottoni (custom property) e area di tocco del link testuale.
 */

/* Grid a cella singola: media, overlay, decorazione e contenuto si
   sovrappongono in grid-area 1 / 1 e vengono dipinti nell'ordine del DOM
   (nessun z-index). */
.hularmonia-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Con l'altezza fissa (70vh) la riga resta quella della sezione anche
     se il contenuto è più alto: media e overlay non si allungano. */
  grid-template-rows: minmax(0, 1fr);
}

.hularmonia-page-hero > .hularmonia-page-hero__media,
.hularmonia-page-hero > .hularmonia-page-hero__overlay,
.hularmonia-page-hero > .hularmonia-page-hero__decoration,
.hularmonia-page-hero > .hularmonia-page-hero__inner {
  grid-area: 1 / 1;
}

/* Altezze del modello: min-h-screen, h-[70vh], min-h-[65vh]. svh con
   fallback vh: l'altezza non salta quando la barra di iOS si chiude. */
.hularmonia-page-hero--h-screen {
  min-height: 100vh;
  min-height: 100svh;
}

.hularmonia-page-hero--h-70 {
  height: 70vh;
  height: 70svh;
}

.hularmonia-page-hero--h-65 {
  min-height: 65vh;
  min-height: 65svh;
}

/* Media e decorazione non devono allargare la riga della grid con la
   loro altezza intrinseca (nel modello sono absolute): contain: size le
   azzera, poi riempiono la cella. */
.hularmonia-page-hero__media,
.hularmonia-page-hero__decoration {
  contain: size;
  min-height: 0;
}

/* Immagine della Media Library: gli attributi width/height di
   wp_get_attachment_image() danno un aspect-ratio che contain: size non
   azzera, e l'altezza seguirebbe il rapporto del file (brief 06, A-68). */
.hularmonia-page-hero__media {
  aspect-ratio: auto;
}

.hularmonia-page-hero .hularmonia-page-hero__media {
  max-width: none;
}

/* Contenuto centrato. `safe`: se il contenuto è più alto dell'area
   (altezza fissa 70vh a 390px) parte dall'alto invece di uscire sotto
   l'header. */
.hularmonia-page-hero__inner {
  display: flex;
  align-items: safe center;
  justify-content: center;
}

.hularmonia-page-hero--align-left .hularmonia-page-hero__inner {
  flex-direction: column;
  align-items: stretch;
  justify-content: safe center;
}

/* split (home): da lg testo su 2/5 e immagine su 3/5, come
   lg:w-2/5 + absolute w-3/5 del modello. */
@media (min-width: 1024px) {
  .hularmonia-page-hero--split {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hularmonia-page-hero--split > .hularmonia-page-hero__inner {
    grid-area: 1 / 1 / 2 / 3;
  }

  .hularmonia-page-hero--split > .hularmonia-page-hero__media,
  .hularmonia-page-hero--split > .hularmonia-page-hero__overlay {
    grid-area: 1 / 3 / 2 / 6;
  }
}

/* Bottoni: colori di stato come custom property (CLAUDE.md, contratto
   punto 2). Specificità (0,2,0): batte `a:visited` del reset (0,1,1). */
.hularmonia-page-hero .hularmonia-page-hero__button {
  --hph-button-bg: transparent;
  --hph-button-color: var(--hula-ink);
  --hph-button-bg-hover: transparent;
  --hph-button-color-hover: var(--hula-gold);
  background-color: var(--hph-button-bg);
  color: var(--hph-button-color);
}

.hularmonia-page-hero .hularmonia-page-hero__button--solid {
  --hph-button-bg: #fff;
  --hph-button-bg-hover: var(--hula-gold);
  --hph-button-color-hover: #fff;
}

.hularmonia-page-hero .hularmonia-page-hero__button:is(:hover, :focus-visible) {
  background-color: var(--hph-button-bg-hover);
  color: var(--hph-button-color-hover);
}

/* Link testuale (home, "Explore ↓"): nel modello è alto 16px. Area di
   tocco a 44px con padding e margine negativo: ingombro invariato. */
.hularmonia-page-hero .hularmonia-page-hero__button--link {
  padding-block: 14px;
  margin-block: -14px;
}

@media (prefers-reduced-motion: reduce) {
  .hularmonia-scope .hularmonia-page-hero__button {
    transition: none;
  }
}