/*
 * Hero — sistema unico per tutte le pagine.
 *
 * Nel sorgente Elementor ogni hero aveva la sua scala tipografica (36px qui,
 * 54px sulle pagine a blocco, 28px in home) e salti secchi ai breakpoint.
 * Qui c'e' una sola scala fluida: le misure crescono in modo continuo con la
 * larghezza della finestra e coincidono con quelle del sorgente a 1280px.
 *
 *            375px    768px   1024px   1280px   1920px   2560px
 *   titolo     20       27       31       36       46       46
 *   testo      14       16       17       18       21       24
 *   bottone    16       17       17       18       20       22
 *   freccia    40       44       47       50       57       64
 */

:root {
  /* max() tiene la hero utilizzabile anche su finestre molto basse (landscape). */
  --hero-min-height: max(480px, 85vh);
  --hero-title: clamp(20px, 1.75vw + 13.5px, 46px);
  --hero-title-lh: 1.25;
  --hero-text: clamp(14px, 0.45vw + 12.3px, 24px);
  --hero-btn: clamp(16px, 0.3vw + 14.2px, 24px);
  --hero-icon: clamp(40px, 1.1vw + 35.9px, 70px);
  --hero-pad-x: 8%;
  --hero-pad-bottom: 2.6%;
  /* Quota a cui inizia il testo: sempre la stessa frazione dell'hero,
     quindi la prima riga cade alla stessa altezza su tutte le pagine. */
  --hero-copy-top: calc(var(--hero-min-height) * 0.41);
  --hero-gap: 20px;
  /* Distanza minima fra il bottone e la freccia, anche quando lo spazio scarseggia. */
  --hero-scroll-gap: clamp(28px, 3.4vh, 48px);
  --hero-red: #b3100d;
}

@supports (height: 85svh) {
  :root {
    /* svh non cambia quando la barra del browser mobile si nasconde. */
    --hero-min-height: max(480px, 85svh);
  }
}

/* ---------- pagine native (about, news, brochure, lavora con noi) ---------- */

.sel-hero {
  display: flex;
  min-height: var(--hero-min-height);
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--hero-copy-top) var(--hero-pad-x) var(--hero-pad-bottom);
  background-position: center center;
  background-size: cover;
  color: #fff;
}

/* Velo sfumato da sinistra: il testo resta leggibile anche su foto chiare. */
.sel-hero--shade::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(3, 4, 5, 0.92) 0%, rgba(3, 4, 5, 0.72) 34%, rgba(3, 4, 5, 0.18) 62%, transparent 88%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12));
}

.sel-hero {
  position: relative;
}

.sel-hero > * {
  position: relative;
  z-index: 1;
}

.sel-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
}

.sel-hero__title {
  margin: 0;
  color: #fff;
  font-family: "Nexa Bold", Arial, sans-serif;
  font-size: var(--hero-title);
  font-weight: 700;
  line-height: var(--hero-title-lh);
}

.sel-hero__title span {
  color: var(--hero-red);
}

.sel-hero__text {
  margin: 0 0 0.8em;
  color: #fff;
  font-family: "NexaLight", Arial, sans-serif;
  font-size: var(--hero-text);
  font-weight: 300;
  line-height: 1.5;
}

/* Sottotitolo lungo (Lavora con noi): si stringe in em, quindi segue il font. */
.sel-hero__text--narrow {
  max-width: 32em;
}

.sel-hero__scroll {
  /* margin-top auto: la freccia resta appoggiata in basso su ogni pagina;
     il padding garantisce comunque uno stacco dal bottone. */
  margin: auto 0 0;
  padding-top: var(--hero-scroll-gap);
  line-height: 0;
  text-align: start;
}

.sel-hero__scroll a {
  display: inline-block;
}

.sel-hero__scroll svg {
  display: block;
  width: auto;
  height: var(--hero-icon);
  fill: #fff;
}

.sel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.67em 1.67em 0.5em;
  border: 0;
  border-radius: 10px;
  background: var(--hero-red);
  color: #fff;
  font-family: "NexaLight", Arial, sans-serif;
  font-size: var(--hero-btn);
  font-weight: 300;
  line-height: 0.78em;
  transition: background 0.3s, color 0.3s;
}

/* Variante chiara usata come CTA secondaria (Company Profile in About Us). */
.sel-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-gap);
}

/* Bottone chiaro: seconda azione della home. */
.sel-btn--light {
  background: #fff;
  color: #1c1c1c;
}

.sel-btn--light:hover,
.sel-btn--light:focus-visible {
  background: var(--hero-red);
  color: #fff;
}

.sel-btn--ghost {
  background: #fff;
  color: rgba(28, 28, 28, 0.52);
}

.sel-btn--ghost:hover,
.sel-btn--ghost:focus-visible {
  background: var(--hero-red);
  color: #fff;
}


/* Hero con video di sfondo (home) */
.sel-hero--video { background-color: #0a0a0a; }
.sel-hero .sel-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Il velo scuro deve stare SOPRA il video (ma sotto testo e pulsanti). */
.sel-hero--video.sel-hero--shade::before { z-index: 1; }