/* Pagina "In abbonamento" — CSS scoped alla sola pagina campagna.
   Caricato unicamente da templates/in-abbonamento.html.twig.
   Tutto è sotto .abb / .abb-* per non collidere con Spectre o con il tema.
   L'header e il footer del sito restano quelli del tema: qui non si
   ridefinisce nulla di globale. */

.abb {
  --abb-cream: #F4F1EE;
  --abb-blue: #3085EE;
  --abb-blue-dark: #185FA5;
  --abb-dark: #2A2E35;
  --abb-muted: #6B7280;
  --abb-line: #E4DFD8;
  --abb-white: #FFFFFF;

  color: var(--abb-dark);
  background: var(--abb-white);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.abb *,
.abb *::before,
.abb *::after { box-sizing: border-box; }

.abb-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- hero ---------- */

.abb-hero {
  background: var(--abb-cream);
  padding: 48px 0 64px;
}

/* Variante con clip di sfondo: si attiva solo quando il template trova un
   video nel frontmatter. Il testo passa su fondo scuro, la card bianca dello
   spettro resta bianca — galleggia sul video, come nel mockup. */

.abb-hero--video {
  position: relative;
  overflow: hidden;
  background: var(--abb-dark);
}

.abb-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.abb-hero-overlay {
  position: absolute;
  inset: 0;
  /* Il mockup stava a 0.68: regge sul desktop, dove la clip verticale viene
     ritagliata sulla parte scura, ma non sul mobile, dove entrano in campo i
     rocchetti chiari proprio dietro al titolo. */
  background: rgba(42, 46, 53, 0.72);
  z-index: 1;
}

@media (max-width: 640px) {
  .abb-hero-overlay { background: rgba(42, 46, 53, 0.8); }
}

/* Ultimo aiuto alla leggibilita' dove lo sfondo resta mosso: un'ombra
   morbida, non un contorno — sul velo scuro non si vede, separa e basta. */
.abb-hero--video h1,
.abb-hero--video .abb-campaign p {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.abb-hero--video .abb-wrap { position: relative; z-index: 2; }
.abb-hero--video .abb-campaign p { color: #F4F1EE; }
.abb-hero--video .abb-eyebrow { color: #BFD8FA; }
/* `.abb h1` piu' in basso ha la stessa specificita' e vincerebbe per ordine:
   serve il selettore piu' lungo, non !important. */
.abb .abb-hero--video h1 { color: var(--abb-white); }
.abb-hero--video .abb-lead { color: #D7DBE2; }
.abb-hero--video .abb-spectrum-labels span { color: #C7CCD6; }

/* Chi ha chiesto meno animazioni si tiene il poster fermo. */
@media (prefers-reduced-motion: reduce) {
  .abb-hero-video { display: none; }
  .abb-hero--video {
    background: var(--abb-dark) center/cover no-repeat;
  }
}

.abb-campaign {
  border-left: 2px solid var(--abb-blue);
  padding-left: 18px;
  margin: 0 0 32px;
}

.abb-campaign p {
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--abb-dark);
  margin: 0 0 6px;
}

.abb-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--abb-blue-dark);
  margin: 0 0 14px;
}

.abb h1 {
  font-size: 32px;
  line-height: 1.28;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--abb-dark);
  letter-spacing: -0.01em;
}

.abb-lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--abb-muted);
  margin: 0 0 40px;
  max-width: 480px;
}

/* ---------- spettro Restituisci <-> Possiedi ---------- */

.abb-spectrum { margin-top: 8px; }

.abb-spectrum-track {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(to right, #DCE7F9 0%, #A9C7F2 30%, var(--abb-blue) 55%, #164E86 100%);
}

.abb-spectrum-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.abb-spectrum-labels span {
  font-size: 12px;
  color: var(--abb-muted);
  font-weight: 500;
}

.abb-spectrum-mid {
  position: relative;
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--abb-white);
  border: 1px solid var(--abb-line);
  border-radius: 10px;
}

.abb-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--abb-blue-dark);
  background: #E6F1FB;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.abb-spectrum-mid p {
  margin: 0;
  font-size: 14px;
  color: var(--abb-dark);
  line-height: 1.55;
}

/* ---------- sezioni ---------- */

.abb-section { padding: 56px 0; }
.abb-tinted { background: var(--abb-cream); }

.abb h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--abb-dark);
}

.abb-section-lead {
  font-size: 14.5px;
  color: var(--abb-muted);
  margin: 0 0 32px;
  max-width: 460px;
  line-height: 1.6;
}

/* ---------- come funziona ---------- */

.abb-steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.abb-step { display: flex; gap: 16px; }

.abb-num {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--abb-blue);
  color: var(--abb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.abb-step h3 {
  font-size: 15.5px;
  margin: 4px 0 4px;
  color: var(--abb-dark);
}

.abb-step p {
  font-size: 14px;
  color: var(--abb-muted);
  margin: 0;
  line-height: 1.55;
}

/* ---------- esempio concreto ---------- */

.abb-example-card {
  border: 1px solid var(--abb-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--abb-white);
}

.abb-photo {
  aspect-ratio: 4/3;
  background: var(--abb-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.abb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.abb-example-body { padding: 20px 22px 22px; }

.abb-example-body h3 { font-size: 17px; margin: 0 0 4px; }

/* Nota "Esempio, prezzi non definitivi": deve restare leggibile.
   Volutamente non ridotta a grigio tenue come le altre note. */
.abb-disclaimer {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--abb-blue-dark);
  background: #E6F1FB;
  padding: 4px 10px;
  border-radius: 20px;
  margin: 0 0 16px;
}

.abb-example-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--abb-line);
}

.abb-example-row:first-of-type { border-top: none; }

.abb-k { font-size: 13.5px; color: var(--abb-muted); }
.abb-v { font-size: 13.5px; font-weight: 700; color: var(--abb-dark); }

/* ---------- la caparra in tre mosse ---------- */

.abb-paths {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.abb-path {
  border: 1px solid var(--abb-line);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--abb-white);
}

.abb-ph {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.abb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--abb-blue);
  flex: none;
}

.abb-path h3 { font-size: 14.5px; margin: 0; color: var(--abb-dark); }

.abb-path p {
  font-size: 13.5px;
  color: var(--abb-muted);
  margin: 0 0 0 18px;
  line-height: 1.55;
}

/* ---------- perché non è un noleggio qualsiasi ---------- */

.abb-diff {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.abb-diff-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.abb-mark {
  color: var(--abb-blue);
  font-size: 18px;
  line-height: 1.4;
  flex: none;
}

.abb-diff-item h3 { font-size: 15px; margin: 0 0 3px; color: var(--abb-dark); }

.abb-diff-item p {
  font-size: 13.5px;
  color: var(--abb-muted);
  margin: 0;
  line-height: 1.55;
}

.abb-source {
  margin-top: 4px !important;
  font-size: 11.5px;
  color: #9A9FA8;
}

/* ---------- corpo markdown opzionale ---------- */

.abb-body-copy p {
  font-size: 14.5px;
  color: var(--abb-muted);
  line-height: 1.6;
}

/* ---------- CTA finale ---------- */

.abb-cta {
  background: var(--abb-dark);
  padding: 48px 0 40px;
  text-align: center;
}

.abb-cta h2 {
  color: var(--abb-white);
  font-size: 21px;
  margin: 0 0 10px;
}

.abb-cta p {
  color: #A8AEBB;
  font-size: 13.5px;
  margin: 0 0 24px;
}

.abb-button {
  display: inline-block;
  background: var(--abb-blue);
  color: var(--abb-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 8px;
}

.abb-button:hover,
.abb-button:focus {
  background: var(--abb-blue-dark);
  color: var(--abb-white);
  text-decoration: none;
}

.abb-addr {
  margin-top: 22px;
  font-size: 12px;
  color: #7A8090;
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  .abb h1 { font-size: 27px; }
  .abb-campaign p { font-size: 16.5px; }
  .abb-hero { padding: 36px 0 48px; }
  .abb-section { padding: 44px 0; }
}

/* ---------- compensazione header fisso ---------- */

/* Il tema applica `body.header-fixed #body-wrapper { padding-top: 4rem }`
   per liberare l'header fisso. Qui #body-wrapper non esiste (si sovrascrive
   `block body` per avere le fasce a tutta larghezza), quindi la
   compensazione va rimessa a mano — sulla fascia hero e non su .abb, così
   lo sfondo crema continua anche dietro l'header invece di lasciare una
   striscia bianca. Senza questa regola la prima riga della campagna finisce
   sotto la barra di navigazione. */

body.header-fixed .abb-hero { padding-top: calc(48px + 4rem); }

@media (max-width: 640px) {
  body.header-fixed .abb-hero { padding-top: calc(36px + 4rem); }
}