/* Civis Passport — page-specific (form + premio). Reuses shared.css + index.css + property.css. */

/* IL PREMIO — banda scura, il momento eroe della pagina.
   Il fondo lo dà .cv-section--ink (shared), il titolo è .cv-display--lg. */
.pp-premio__inner { padding-block: clamp(80px, 14vh, 176px); }
.pp-premio__big { margin: clamp(14px, 1.8vw, 22px) 0 0; }
.pp-premio__p {
  margin-top: clamp(20px, 2.6vw, 32px); max-width: 56ch;
  color: var(--ash-1); font-size: var(--text-lg); line-height: 1.6;
}
.pp-premio__cta { margin-top: clamp(26px, 3.2vw, 44px); }

/* COME FUNZIONA — i numeri di capitolo salgono di scala, in tono cenere */
.pp-steps .cv-tour__num {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  letter-spacing: -0.03em;
  color: var(--ash-2);
  font-variant-numeric: tabular-nums;
  display: block;
}
.pp-steps .cv-tour__step-h { margin-top: 12px; }

/* VANTAGGI — split asimmetrico: lista a sinistra, titolo a destra
   (alterna con la sezione iscrizione, che ha il video a destra) */
.pp-vantaggi {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.pp-vantaggi__head { order: 2; margin-bottom: 0; }
.pp-vantaggi .pp-benefits { order: 1; grid-template-columns: 1fr; margin-top: 0; }
@media (max-width: 820px) {
  .pp-vantaggi { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 28px); }
  .pp-vantaggi__head { order: 0; }
}

.pp-benefits { list-style: none; padding: 0; margin: clamp(20px,2.4vw,32px) 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.pp-benefit { border-top: 1px solid var(--line); padding-top: 14px; }
.pp-benefit__h { font: 650 var(--text-md)/1.2 var(--sans); color: var(--ink); letter-spacing: -0.01em; }
.pp-benefit__p { margin-top: 5px; font-size: var(--text-sm); color: var(--ash-1); line-height: 1.5; }

/* signup: form left, rounded video right to balance the empty half (desktop) */
.pp-signup {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 44px);
}
.pp-signup__main { min-width: 0; }
.pp-signup__media {
  position: sticky;
  top: clamp(96px, 12vh, 128px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in oklch, var(--ink) 6%, var(--paper));
}
.pp-signup__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* mobile: form is full-width, no empty half to balance — drop the video (and its 2.9MB) */
@media (max-width: 860px) {
  .pp-signup { grid-template-columns: 1fr; }
  .pp-signup__media { display: none; }
}

/* form */
.pp-form { max-width: 640px; margin-top: clamp(20px,2.4vw,32px); display: grid; gap: clamp(16px,2vw,22px); }
.pp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.6vw,20px); }
.pp-form__group { display: grid; gap: 8px; }
.pp-form__label { color: var(--ash-1); }
.pp-form__input {
  font: 400 var(--text-md)/1.3 var(--sans); color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; width: 100%;
}
.pp-form__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pp-form__input::placeholder { color: var(--ash-2); }
.pp-tappe { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-tappe__chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 11px 16px; min-height: 44px; font: 600 var(--text-sm)/1 var(--sans); color: var(--ink);
  transition: border-color .15s, background .15s;
}
.pp-tappe__chip input { accent-color: var(--ink); width: 15px; height: 15px; }
.pp-tappe__chip:has(input:checked) { border-color: var(--ink); }
.pp-form__input[aria-invalid="true"] { border-color: oklch(55% 0.16 25); }
.pp-form__msg { margin-top: 12px; font-size: var(--text-sm); color: var(--ink); min-height: 1.2em; }
.pp-form__msg:empty { margin-top: 0; }

.pp-form__consent {
  display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 18px;
  font-size: var(--text-xs); line-height: 1.5; color: var(--ash-1); cursor: pointer;
}
.pp-form__consent input { margin-top: 0.18em; accent-color: var(--ink); flex: 0 0 auto; }
.pp-form__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.pp-note { margin-top: clamp(18px,2vw,26px); max-width: 60ch; font-size: var(--text-xs); color: var(--ash-2); line-height: 1.5; }

@media (max-width: 620px) {
  .pp-form__row { grid-template-columns: 1fr; }
  .pp-benefits { grid-template-columns: 1fr; }
}