/* ==========================================================================
   Assinvest — pagine.css
   Identità visiva per tipo di pagina.

   La home mantiene l'hero scuro e drammatico. Le pagine interne usano un hero
   chiaro e più compatto, con un colore di accento diverso per area: così si
   capisce a colpo d'occhio in che sezione del sito ci si trova, senza uscire
   dalla famiglia cromatica del brand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLORE DI ACCENTO PER AREA
   Tinte profonde e sature: restano professionali, niente pastelli.
   -------------------------------------------------------------------------- */
:root { --accent: var(--oro-500); --accent-scuro: var(--oro-700); }

[data-tema="gare"]          { --accent: #f5a623; --accent-scuro: #b87a08; }  /* oro — pagina di punta */
[data-tema="soluzioni"]     { --accent: #2d2e83; --accent-scuro: #1a1b57; }  /* blu brand — hub */
[data-tema="aziende"]       { --accent: #1d71b8; --accent-scuro: #155a93; }  /* azzurro brand */
[data-tema="professionisti"]{ --accent: #5f4bb6; --accent-scuro: #43338a; }  /* indaco */
[data-tema="persone"]       { --accent: #0e8b8b; --accent-scuro: #0a6666; }  /* verde acqua */
[data-tema="risparmio"]     { --accent: #2e8b57; --accent-scuro: #1f6b41; }  /* verde */
[data-tema="motor"]         { --accent: #c05621; --accent-scuro: #8f3f18; }  /* terracotta */
[data-tema="agenzia"]       { --accent: #b8860b; --accent-scuro: #8a6508; }  /* ottone — storia */
[data-tema="contatti"]      { --accent: #1a6b8a; --accent-scuro: #12506a; }  /* petrolio */
[data-tema="legale"]        { --accent: #706f6f; --accent-scuro: #4a4a4a; }  /* grigio logo */

/* --------------------------------------------------------------------------
   2. HERO CHIARO — tutte le pagine interne tranne "gare pubbliche"
   -------------------------------------------------------------------------- */
.hero--chiaro {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 9%, #fff) 0%,
      color-mix(in srgb, var(--accent) 3%, #fff) 55%,
      var(--bg) 100%);
  color: var(--ink);
  padding-top: calc(var(--header-h) + var(--sp-7));
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--linea);
}

/* Filo di accento in cima, sotto l'header */
.hero--chiaro::after {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent));
}

/* La trama a griglia diventa scura e più discreta */
.hero--chiaro::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 15% 20%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 15% 20%, #000 10%, transparent 75%);
}

.hero--chiaro .hero__title { color: var(--blu-900); }
.hero--chiaro .hero__title em { color: var(--accent); }
.hero--chiaro .hero__eyebrow { color: var(--accent-scuro); }
.hero--chiaro .hero__eyebrow::before { background: var(--accent); }
.hero--chiaro .hero__lead { color: var(--muted); }

.hero--chiaro .hero__trust {
  border-top-color: var(--linea);
  color: var(--muted);
}
.hero--chiaro .hero__trust span::before { background: var(--accent); }

/* I bagliori si ritingono con l'accento della pagina */
.hero--chiaro .hero__glow--1 {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  width: 520px; height: 520px; top: -240px; right: -120px;
}
.hero--chiaro .hero__glow--2 {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  width: 380px; height: 380px; bottom: -180px; left: -100px;
}

/* Su fondo chiaro il bottone "fantasma chiaro" sarebbe invisibile */
.hero--chiaro .btn--ghost-light {
  background: #fff;
  color: var(--blu-900);
  border-color: var(--linea);
  box-shadow: var(--sh-sm);
}
.hero--chiaro .btn--ghost-light:hover {
  background: #fff;
  color: var(--accent-scuro);
  border-color: var(--accent);
}
.hero--chiaro .btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 34%, transparent);
}
.hero--chiaro .btn--primary:hover { background: var(--accent-scuro); color: #fff; }

/* --------------------------------------------------------------------------
   3. HEADER sopra un hero chiaro: testo scuro fin da subito
   -------------------------------------------------------------------------- */
body.hero-chiaro .site-header .nav__link,
body.hero-chiaro .site-header .header__tel { color: var(--blu-900); }
body.hero-chiaro .site-header .nav__link:hover,
body.hero-chiaro .site-header .header__tel:hover { color: var(--accent-scuro); }
body.hero-chiaro .site-header .nav-toggle__bar { background: var(--blu-900); }
body.hero-chiaro .logo__light { opacity: 0; }
body.hero-chiaro .logo__dark  { opacity: 1; }
body.hero-chiaro .nav__link::after { background: var(--accent); }

/* --------------------------------------------------------------------------
   4. HERO MINIMALE — pagine legali, poco contenuto e nessuna CTA
   -------------------------------------------------------------------------- */
.hero--minimo {
  background: var(--bg-alt);
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--linea);
}
.hero--minimo .hero__title { color: var(--blu-900); font-size: var(--fs-3xl); }
.hero--minimo .hero__title em { color: var(--muted); }
.hero--minimo .hero__eyebrow { color: var(--muted); }
.hero--minimo .hero__eyebrow::before { background: var(--grigio); }
.hero--minimo .hero__lead { color: var(--muted); font-size: var(--fs-lg); }
.hero--minimo::before, .hero--minimo::after { display: none; }
.hero--minimo .hero__glow { display: none; }

/* --------------------------------------------------------------------------
   5. HERO "GARE PUBBLICHE" — resta scuro, è la pagina di punta,
      ma con bagliore oro deciso e taglio diverso dalla home
   -------------------------------------------------------------------------- */
.hero--punta { padding-top: calc(var(--header-h) + var(--sp-8)); }
.hero--punta .hero__glow--1 {
  background: radial-gradient(circle, rgba(245,166,35,.42), transparent 70%);
  width: 540px; height: 540px; top: -200px; right: 6%;
}
.hero--punta .hero__glow--2 {
  background: radial-gradient(circle, rgba(29,113,184,.50), transparent 70%);
}
.hero--punta::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--oro-500), var(--blu-500), transparent);
}

/* --------------------------------------------------------------------------
   6. ELEMENTI DI PAGINA che seguono l'accento
   -------------------------------------------------------------------------- */
body.hero-chiaro .eyebrow { color: var(--accent-scuro); }
body.hero-chiaro .eyebrow::before { background: var(--accent); }
body.hero-chiaro .eyebrow--light { color: var(--accent); }

body.hero-chiaro .card__icon {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent-scuro);
}
body.hero-chiaro .card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
body.hero-chiaro .card::after {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
}

body.hero-chiaro .point__num {
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  color: var(--accent-scuro);
}

body.hero-chiaro .pill:hover { border-color: var(--accent); }

body.hero-chiaro .section--dark {
  background: linear-gradient(150deg,
    var(--blu-900) 0%,
    color-mix(in srgb, var(--accent) 34%, var(--blu-900)) 100%);
}
body.hero-chiaro .section--dark .eyebrow--light { color: color-mix(in srgb, var(--accent) 55%, #fff); }
body.hero-chiaro .stat__value { color: color-mix(in srgb, var(--accent) 50%, #fff); }

body.hero-chiaro .cta-band {
  background: linear-gradient(140deg,
    var(--blu-900) 0%,
    color-mix(in srgb, var(--accent) 40%, var(--blu-900)) 100%);
}
body.hero-chiaro .cta-band .btn--primary { background: var(--oro-500); color: var(--blu-900); }
body.hero-chiaro .cta-band::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 68%);
}

body.hero-chiaro .breadcrumb [aria-current="page"] { color: var(--accent-scuro); }
body.hero-chiaro .to-top { background: var(--accent); }
body.hero-chiaro .to-top:hover { background: var(--accent-scuro); }
body.hero-chiaro .faq__icon { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent-scuro); }
body.hero-chiaro .faq__item.is-open .faq__icon { color: var(--accent); }

/* Il filo della barra di avanzamento prende l'accento della pagina */
body.hero-chiaro .scroll-progress {
  background: linear-gradient(90deg, var(--blu-700), var(--accent));
}

/* ==========================================================================
   7. FOTOGRAFIE
   Nell'hero la foto sta sotto a tutto, molto trasparente: dà profondità
   senza rubare leggibilità al testo. Nelle sezioni è invece a piena opacità.
   ========================================================================== */

/* --- Foto di sfondo dell'hero --- */
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -3;                 /* sotto ai bagliori (-1) e alla griglia */
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Hero scuri: la foto emerge appena dal blu.
   La maschera tiene pulita tutta la meta sinistra, dove sta il testo:
   la foto vive solo nella parte destra, vuota. */
.hero .hero__foto {
  opacity: .15;
  mix-blend-mode: luminosity;  /* toglie il colore proprio della foto */
  mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, #000 68%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, #000 68%, #000 100%);
}

/* Hero chiari: ancora più leggera, altrimenti il testo scuro non regge */
.hero--chiaro .hero__foto {
  opacity: .11;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(105deg, transparent 0%, transparent 32%, #000 72%, #000 100%);
  -webkit-mask-image: linear-gradient(105deg, transparent 0%, transparent 32%, #000 72%, #000 100%);
}

/* Velo di sicurezza sugli hero SCURI: garantisce il contrasto del testo
   qualunque foto ci sia sotto. Sta sopra la foto (-3) ma sotto i bagliori.
   Escluso dagli hero chiari, dove ::after disegna gia il filo di accento. */
.hero:not(.hero--chiaro):not(.hero--minimo)::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(95deg,
    var(--blu-900) 0%,
    color-mix(in srgb, var(--blu-900) 72%, transparent) 36%,
    transparent 64%);
}

/* Lo stesso velo, in chiaro, per le pagine interne */
.hero--chiaro .hero__foto {
  /* la maschera fa gia il lavoro: qui basta tenere la foto sotto a tutto */
  z-index: -3;
}

/* Le pagine legali restano pulite: nessuna foto */
.hero--minimo .hero__foto { display: none; }



/* --- Foto dentro le sezioni --- */
.figura {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--bg-alt);
}
.figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 11 / 8;
  transition: transform var(--t-slow);
}
.figura:hover img { transform: scale(1.04); }

/* Filo di accento sul bordo inferiore, lega la foto al tema della pagina */
.figura::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .figura:hover img { transform: none; }
}