/* ==========================================================================
   Landing Rental — modulo dedicato
   Mockup: Asset/mockup/PS mockup/Landing Rental.dc.html

   Tutto è sotto .ps-rental e usa variabili con prefisso --psr-: la landing non
   deve dipendere dallo stato globale di Oxygen né influenzarlo. Nessuna classe
   qui vive nello store dei selettori di Oxygen, quindi due persone possono
   lavorare in parallelo senza sovrascriversi.

   Il mockup non ha una versione mobile: i breakpoint sono dedotti dalla scala
   della styleguide (contenuti a 782px, single column sotto).
   ========================================================================== */

.ps-rental {
  /* Colori — dal CSS del mockup, coerenti con la styleguide */
  --psr-ink:         #0c0c12;
  --psr-black:       #0b0b13;
  --psr-black-deep:  #08080f;
  --psr-muted:       #5a5a66;
  --psr-muted-2:     #8b8b97;
  --psr-muted-3:     #d2d2dc;
  --psr-hairline:    #e8e8ee;
  --psr-surface:     #ffffff;
  --psr-desk:        #f7f7f3;
  --psr-desk-2:      #e9e9e4;

  --psr-blu:         #3d18f0;
  --psr-viola-soft:  #a98cff;
  --psr-g1:          #2418f2;
  --psr-g2:          #8000ff;
  --psr-g3:          #ff0083;
  --psr-gradient:    linear-gradient(93deg, var(--psr-g1), var(--psr-g2) 52%, var(--psr-g3));

  /* Spazio — scala della styleguide */
  --psr-s1: 8px;  --psr-s2: 12px; --psr-s3: 16px; --psr-s4: 24px;
  --psr-s5: 44px; --psr-s6: 64px; --psr-s7: 92px;

  --psr-radius-control: 14px;
  --psr-radius-card:    22px;
  --psr-radius-block:   30px;

  --psr-max: 1440px;

  color: var(--psr-ink);
  line-height: 1.55;
  font-size: 16.5px;
}

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

.ps-rental__wrap {
  max-width: var(--psr-max);
  margin: 0 auto;
  padding-left: var(--psr-s4);
  padding-right: var(--psr-s4);
}

.ps-rental__section { padding: var(--psr-s7) 0; }

/* --- tipografia ----------------------------------------------------------- */

.ps-rental__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--psr-muted-2);
  margin: 0 0 var(--psr-s3);
}

.ps-rental h2.ps-rental__h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--psr-ink);
  text-wrap: balance;
}

/* Il colore va dichiarato sull'elemento, non ereditato dalla sezione: Oxygen
   ha una regola `h1,h2,...{color:var(--bde-headings-color)}` e una regola
   diretta batte sempre l'ereditarieta', per bassa che sia la sua specificita'.
   Senza questo, i titoli sulle sezioni scure restano quasi invisibili. */
.ps-rental__hero .ps-rental__h1,
.ps-rental__hero .ps-rental__price,
.ps-rental__hero .ps-rental__badge,
.ps-rental__cta h2,
.ps-rental__cta .ps-rental__badge { color: #fff; }

.ps-rental__hero .ps-rental__grad-text,
.ps-rental__price.ps-rental__grad-text { color: transparent; }

.ps-rental__lede {
  color: var(--psr-muted);
  margin: 0;
  max-width: 46ch;
}

/* Testata di sezione: titolo a sinistra, occhiello sopra, lede a destra */
.ps-rental__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--psr-s4) var(--psr-s6);
  align-items: end;
  margin-bottom: var(--psr-s6);
}

/* --- bottoni -------------------------------------------------------------- */

.ps-rental__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--psr-s1);
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}
.ps-rental__btn:hover { transform: translateY(-1px); }
.ps-rental__btn:focus-visible { outline: 2px solid var(--psr-g2); outline-offset: 3px; }

.ps-rental__btn--grad  { background: var(--psr-gradient); color: #fff; }
.ps-rental__btn--light { background: var(--psr-surface); color: var(--psr-ink); }
.ps-rental__btn--ghost { background: transparent; color: var(--psr-ink); border-color: var(--psr-hairline); }
.ps-rental__btn--on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}

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

.ps-rental__hero {
  position: relative;
  background: var(--psr-black);
  color: #fff;
  overflow: hidden;
  padding: var(--psr-s7) 0 0;
}

/* Alone gradiente, molto tenue: la styleguide vieta il gradiente come sfondo
   diffuso dietro il testo, quindi resta confinato in alto a destra. */
.ps-rental__hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 70% 30%, rgba(128, 0, 255, .34), transparent 62%);
  pointer-events: none;
}

.ps-rental__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--psr-s6);
  align-items: start;
  padding-bottom: var(--psr-s7);
}

.ps-rental__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--psr-s1);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: var(--psr-s4);
}

.ps-rental h1.ps-rental__h1 {
  font-size: clamp(40px, 4.2vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.033em;
  margin: 0 0 var(--psr-s4);
  text-wrap: balance;
}

/* Un solo accento gradiente per schermata: qui, sul prezzo nel titolo. */
.ps-rental__grad-text {
  background: var(--psr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ps-rental__hero-lede {
  color: var(--psr-muted-3);
  max-width: 52ch;
  margin: 0 0 var(--psr-s5);
}

.ps-rental__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--psr-s2);
  margin-bottom: var(--psr-s4);
}

.ps-rental__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--psr-s2) var(--psr-s5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--psr-muted-3);
}
.ps-rental__ticks li { display: flex; align-items: center; gap: var(--psr-s1); }

/* Card prezzo, bordo gradiente ottenuto con un layer sotto */
.ps-rental__price-card {
  position: relative;
  border-radius: var(--psr-radius-block);
  padding: 1px;
  background: var(--psr-gradient);
}
.ps-rental__price-inner {
  border-radius: calc(var(--psr-radius-block) - 1px);
  background: linear-gradient(180deg, #16101f, var(--psr-black-deep));
  padding: var(--psr-s5);
}
.ps-rental__price-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--psr-muted-2);
  margin: 0 0 var(--psr-s3);
}
.ps-rental__price-row { display: flex; align-items: baseline; gap: var(--psr-s2); }
.ps-rental__price {
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.ps-rental__price-unit { color: var(--psr-muted-3); font-size: 15px; }
.ps-rental__price-note { color: var(--psr-muted-2); font-size: 13.5px; margin: var(--psr-s2) 0 0; }

.ps-rental__price-list {
  list-style: none;
  margin: var(--psr-s4) 0 var(--psr-s5);
  padding: var(--psr-s4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
}
.ps-rental__price-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--psr-s2);
  padding: var(--psr-s2) 0;
  font-size: 14.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ps-rental__price-list li:last-child { border-bottom: 0; }
.ps-rental__check { color: var(--psr-viola-soft); flex: none; margin-top: 2px; }

.ps-rental__price-card .ps-rental__btn { width: 100%; }

/* Onda decorativa sotto l'hero */
.ps-rental__wave { display: block; width: 100%; height: auto; }
.ps-rental__wave-wrap { background: var(--psr-black); line-height: 0; }

/* --- card generiche ------------------------------------------------------- */

.ps-rental__grid {
  display: grid;
  gap: var(--psr-s4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ps-rental__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ps-rental__card {
  border: 1px solid var(--psr-hairline);
  border-radius: var(--psr-radius-card);
  padding: var(--psr-s5) var(--psr-s4);
  background: var(--psr-surface);
}
.ps-rental__card--soft { background: var(--psr-desk); border-color: transparent; }

.ps-rental__card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 var(--psr-s2);
}
.ps-rental__card p { margin: 0; color: var(--psr-muted); font-size: 14.5px; }

.ps-rental__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--psr-pastel, #efebfb);
  color: var(--psr-blu);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--psr-s4);
}

/* --- passi ---------------------------------------------------------------- */

.ps-rental__step-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--psr-blu);
  letter-spacing: .08em;
  margin: 0 0 var(--psr-s2);
}
.ps-rental__step-when {
  margin: var(--psr-s4) 0 0;
  padding-top: var(--psr-s3);
  border-top: 1px solid var(--psr-hairline);
  font-size: 13px;
  font-weight: 600;
  color: var(--psr-blu);
}
.ps-rental__section--soft { background: var(--psr-desk); }

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

.ps-rental__cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--psr-radius-block);
  background: var(--psr-black);
  color: #fff;
  padding: var(--psr-s7) var(--psr-s6);
}
.ps-rental__cta::before {
  content: "";
  position: absolute;
  inset: auto -5% -45% 20%;
  height: 90%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 0, 131, .3), transparent 65%);
  pointer-events: none;
}
.ps-rental__cta > * { position: relative; }
.ps-rental__cta h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -.028em; margin: var(--psr-s4) 0 var(--psr-s3); max-width: 22ch; }
.ps-rental__cta p { color: var(--psr-muted-3); max-width: 58ch; margin: 0 0 var(--psr-s5); }

/* --- form ----------------------------------------------------------------- */

.ps-rental__form { max-width: 720px; }
.ps-rental__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--psr-s2);
  margin-bottom: var(--psr-s2);
}
.ps-rental__form input[type="text"],
.ps-rental__form input[type="email"],
.ps-rental__form input[type="tel"],
.ps-rental__form textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: var(--psr-radius-control);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font: inherit;
  font-size: 15px;
}
/* CF7 stampa cols="40" sulla textarea: senza una larghezza esplicita che lo
   batta, la textarea resta più stretta della riga di input sopra e si vede
   uno scalino. Il selettore ha due classi apposta, per stare sopra il
   `size`/`cols` e sulle regole form di Breakdance.                          */
.ps-rental .ps-rental__form textarea,
.ps-rental .ps-rental__form input[type="text"],
.ps-rental .ps-rental__form input[type="email"],
.ps-rental .ps-rental__form input[type="tel"] {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.ps-rental__form textarea { min-height: 118px; resize: vertical; }
.ps-rental__form ::placeholder { color: var(--psr-muted-2); }
.ps-rental__form input:focus-visible,
.ps-rental__form textarea:focus-visible {
  outline: none;
  border-color: var(--psr-viola-soft);
}
.ps-rental__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--psr-s2);
  margin: var(--psr-s4) 0;
  font-size: 13.5px;
  color: var(--psr-muted-3);
}

/* --- Contact Form 7 -------------------------------------------------------
   CF7 avvolge ogni campo in uno span .wpcf7-form-control-wrap che di default
   e' inline: senza questo i campi non riempiono la colonna del grid.        */

.ps-rental__form .wpcf7-form-control-wrap { display: block; width: 100%; }
.ps-rental__form p { margin: 0; }

/* CF7 avvolge i campi in <p> generati automaticamente, che diventerebbero
   l'unico figlio del grid e lo ridurrebbero a una colonna sola.
   `display: contents` toglie di mezzo il <p> lasciando gli span come figli
   diretti, così le due colonne del mockup tornano.                          */
.ps-rental__form-grid > p { display: contents; }

/* CF7 separa i campi con dei <br />: promossi a figli del grid da
   `display: contents`, occuperebbero una cella ciascuno e rimanderebbero
   ogni campo a capo. Dentro il grid l'a capo lo fa il grid stesso.          */
.ps-rental__form-grid br { display: none; }

/* La textarea sta nel grid e occupa entrambe le colonne: cosi' la sua
   larghezza e' quella della riga di input sopra per costruzione, senza
   dipendere dal cols="40" che CF7 stampa e che altrimenti la lascia piu'
   stretta creando uno scalino.                                              */
.ps-rental__form-grid .wpcf7-form-control-wrap[data-name="obiettivo"],
.ps-rental__form-grid .wpcf7-form-control-wrap:has(textarea) { grid-column: 1 / -1; }
.ps-rental__form-grid textarea { width: 100%; }

.ps-rental__form .wpcf7-list-item { margin: 0; }
.ps-rental__privacy .wpcf7-list-item-label { color: var(--psr-muted-3); }
.ps-rental__privacy input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--psr-g2);
  flex: none;
}

.ps-rental__form .wpcf7-submit { width: auto; }

/* Messaggi di CF7: leggibili sul fondo scuro, senza il bordo di default */
.ps-rental__form .wpcf7-response-output {
  margin: var(--psr-s4) 0 0;
  padding: var(--psr-s2) var(--psr-s3);
  border: 0;
  border-radius: var(--psr-radius-control);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 14px;
}
.ps-rental__form .wpcf7-not-valid-tip {
  color: #ff8ec0;
  font-size: 12.5px;
  margin-top: 6px;
}
.ps-rental__form .wpcf7-spinner { filter: invert(1); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .ps-rental__hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--psr-s5); }
  .ps-rental__grid,
  .ps-rental__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-rental__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 781px) {
  .ps-rental { font-size: 16px; }
  .ps-rental__section { padding: var(--psr-s5) 0; }
  .ps-rental__wrap { padding-left: var(--psr-s3); padding-right: var(--psr-s3); }
  .ps-rental h2.ps-rental__h2 { font-size: clamp(28px, 7.4vw, 36px); }
  .ps-rental h1.ps-rental__h1 { font-size: clamp(32px, 8.6vw, 44px); }
  .ps-rental__grid,
  .ps-rental__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ps-rental__form-grid { grid-template-columns: minmax(0, 1fr); }
  .ps-rental__cta { padding: var(--psr-s5) var(--psr-s4); border-radius: var(--psr-radius-card); }
  .ps-rental__price-inner { padding: var(--psr-s4); }
  .ps-rental__price { font-size: 52px; }
  .ps-rental__btn { width: 100%; }
  .ps-rental__ticks { gap: var(--psr-s1) var(--psr-s4); }
}

@media (prefers-reduced-motion: reduce) {
  .ps-rental__btn { transition: none; }
  .ps-rental__btn:hover { transform: none; }
}