/* Telefono e tablet (fino a 900px) — 20/10/2026.
   Testata delle pagine come su lumion.com: prima l'immagine a tutta larghezza con il bordo
   sinistro curvo, poi il testo su fondo blu. Caricato dopo il CSS della pagina. */
@media (max-width: 900px) {
  /* home, Lumion Pro, Requisiti e pagine di settore: .hero > .hero-media + .hero-inner */
  .hero:has(> .hero-media) { flex-direction: column; align-items: stretch; min-height: 0 !important; }
  .hero > .hero-media {
    position: relative !important; inset: auto !important; left: auto !important; top: auto !important;
    width: 100% !important; height: min(56vh, 460px) !important; aspect-ratio: auto !important;
    clip-path: none !important; border-top-left-radius: 26% 100%; overflow: hidden; flex: none;
  }
  .hero > .hero-media .hero-slide,
  .hero > .hero-media .hero-video { animation: none; }
  .hero-color-panel, .hero-mask-bulge, .hero > .hero-mask { display: none !important; }
  .hero:has(> .hero-media) > .hero-inner { padding: 36px 20px 56px !important; }
  .hero h1 { white-space: normal; }

  /* Lumion Cloud e Lumion AI: .hero-inner > .hero-text + .hero-visual */
  .hero-inner:has(> .hero-visual) { display: flex !important; flex-direction: column; min-height: 0 !important; }
  .hero-inner > .hero-visual {
    order: -1; position: relative !important; inset: auto !important; left: 0 !important;
    width: 100%; height: min(56vh, 460px) !important; min-height: 0 !important;
    border-top-left-radius: 26% 100%; overflow: hidden;
  }
  .hero-inner > .hero-text { padding: 36px 20px 56px !important; }

  /* pulsanti della testata uno sotto l'altro, a tutta larghezza come su lumion.com */
  .hero .cta-row, .hero .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .cta-row .btn, .hero .hero-actions .btn { width: 100%; }
}