/* =========================
   Van4Opportunity (v4o) - RESPONSIVE / OVERRIDES
   ========================= */

@media (max-width: 900px){
  .v4o-cards-grid{ grid-template-columns:1fr; }
  .v4o-hero{ padding:110px 16px 70px; }
}

/* === v4o: full width breakout (hero + sezioni) === */
.v4o-hero,
.v4o-punch,
.v4o-cards,
.v4o-test-section{
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* evita che WP applichi max-width al contenuto interno */
body.page .entry-content .v4o-hero,
body.page .entry-content .v4o-punch,
body.page .entry-content .v4o-cards,
body.page .entry-content .v4o-test-section{
  max-width:none !important;
  padding-left:0;
  padding-right:0;
}

.v4o-hero-inner,
.v4o-test-inner{
  padding-left:16px;
  padding-right:16px;
}

/* Mobile specific */
@media (max-width: 600px) {
  .v4o-choices { flex-direction: column; align-items: center; }
  .choice-btn { width: 100%; max-width: 280px; }
}

/* schermi molto bassi (notebook piccoli / split screen) */
@media (max-height: 720px){
  .v4o-hero{
    min-height: 620px;
    padding: 90px 16px 60px;
  }
}

/* mobile */
@media (max-width: 768px){
  .v4o-hero{
    min-height: 640px;
    padding: 90px 16px 60px;
  }
  .v4o-hero-bg{
    background-position: center 35%;
  }
}

/* FIX: mobile hero v4o (deve stare in fondo al file) */
@media (max-width: 768px){
  .v4o-hero{
    min-height: 78svh;              /* iOS/Android più stabile di vh */
    padding: 90px 16px 60px;        /* ripristina mobile */
  }
  .v4o-hero-bg{
    background-position: center 35%;
    background-repeat: no-repeat;
  }
}

/* FIX: v4o hero - mobile verticale (portrait) */
@media (max-width: 768px) and (orientation: portrait){
  .v4o-hero{
    /* in verticale meglio meno altezza “forzata” */
    min-height: clamp(520px, 72svh, 720px);
    align-items: center;              /* non più tutto in fondo */
    padding: 80px 16px 55px;          /* più compatto */
  }

  .v4o-hero-bg{
    /* rialza il soggetto (van) */
    background-position: center 20%;
    transform: scale(1.00);           /* evita zoom eccessivo in verticale */
  }
}

/* =========================================================
   v4o: HERO - IMMAGINE DEDICATA PER MOBILE VERTICALE
   (messa per ultima così non viene sovrascritta da altri @media)
   ========================================================= */
@media (max-width: 768px) and (orientation: portrait){
  .v4o-hero-bg{
    background-image: url('/assets/van4opportunity-hero-vert.png') !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    transform: none;
  }
}

/* =========================================================
   v4o: TESTI HERO (posizione + dimensioni + bottone)
   ========================================================= */

/* DESKTOP: alza di ~1 riga rispetto a prima */
.v4o-hero-inner{
  transform: translateY(82px); /* prima 122px */
}

/* Abbassa la sezione "Per un piccolo Extra..." un po' più in basso (desktop) */
@media (min-width: 901px){
  .v4o-punch{
    margin-top: 0;
  }
}

/* titolo meno grande (almeno ~2px in meno rispetto a prima) */
.v4o-title{
  font-size: clamp(28px, 3.2vw, 48px);
}

/* MOBILE GENERICO (orizzontale incluso) */
@media (max-width: 768px){
  .v4o-hero-inner{
    transform: translateY(0px); /* azzeriamo completamente */
  }

  .v4o-title{
    font-size: clamp(24px, 6vw, 34px);
  }

}

/* MOBILE VERTICALE */
@media (max-width: 768px) and (orientation: portrait){
  .v4o-hero-inner{
    transform: translateY(150px); /* resta perfetto */
  }
}

/* MOBILE ORIZZONTALE */
@media (max-width: 1024px) and (orientation: landscape){
  .v4o-hero-inner{
    transform: translateY(-40px);
  }
}

/* =========================
   v4o: CARDS typography refine
   ========================= */

.v4o-card h3{
  font-size: 15px;
  letter-spacing: .5px;
  font-weight: 600;
}

.v4o-card p{
  font-size: 14px;
  opacity: .75;
  line-height: 1.5;
}

/* =========================
   v4o: PUNCH / PROOF FRAME
   ========================= */

.v4o-punch{
  padding: 70px 16px;
  background: #000000;
}

.v4o-punch-inner{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.v4o-punch-line{
  height: 2px;
  width: min(720px, 92%);
  margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, rgba(242,154,26,.9), transparent);
  opacity: .65;
}

.v4o-punch-top{
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
  margin: 0 0 44px;
  color: rgba(255,255,255,.92);
}

.v4o-punch-bottom{
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.45;
  margin: 0;
  color: rgba(255,255,255,.78);
}

.v4o-hi{
  color: #f29a1a;
  font-weight: 800;
}

.v4o-hi2{
  color: #f29a1a;
  font-weight: 700;
}

.v4o-strong{
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

@media (max-width: 768px){
  .v4o-punch{ padding: 56px 16px; }
  .v4o-punch-top{ margin-bottom: 34px; }
}

.v4o-claim{
  display:block;
  margin-top:20px;
  font-style:italic;
  opacity:.7;
  font-size:16px;
}