/*
 * KW Hospitality — Area Riservata
 * Rifiniture mobile/responsive condivise (landing, portfolio investitori, admin).
 * Caricato da:
 *   - /area-riservata/index.php
 *   - /area-riservata/private/index.php
 *   - /area-riservata/admin/_header.php
 *
 * NB: i blocchi @media specifici delle singole pagine restano inline nei
 * rispettivi file. Qui solo regole condivise o rifiniture trasversali.
 */

/* ============================================================
 * 1. iOS — evita lo zoom forzato al focus su input < 16px
 * Safari iOS zooma quando focus va su input con font-size < 16px.
 * Le pagine admin lo già fanno, ma landing e portfolio no.
 * ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================================
 * 2. Touch targets ≥ 44×44px (Apple HIG / WCAG 2.5.5)
 * Solo su device touch e schermi piccoli, per non ingrossare il desktop.
 * ============================================================ */
@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  /* Landing pubblica */
  .nav-links a.nav-item { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
  .mobile-toggle { min-width: 44px; min-height: 44px; }
  .login-accordion summary { min-height: 48px; }
  .login-form-card button[type="submit"] { min-height: 48px; }

  /* Portfolio investitori */
  .filters-toggle { min-height: 48px; }
  .filter-input, .filter-select { min-height: 44px; }
  .teaser-cta a { min-height: 48px; }
  .modal-close { min-width: 44px; min-height: 44px; }
  .modal-btn { min-height: 44px; }
  .private-header button.logout-btn,
  .private-header a.admin-link { min-height: 40px; display: inline-flex; align-items: center; }

  /* Empty/reset */
  .empty-reset-btn { min-height: 44px; }
}

/* ============================================================
 * 3. iPhone safe-area (notch + home indicator)
 * ============================================================ */
@supports (padding: max(0px)) {
  .modal-overlay {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
  .modal-body {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
  .sticky-actions {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  footer.site-footer {
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
 * 4. Prefers-reduced-motion
 * Disattiva reveal animations e transforms per chi lo richiede.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .loc-card:hover img { transform: none !important; }
  .teaser-card:hover { transform: none !important; }
}

/* ============================================================
 * 5. Landing — hero compression su mobile portrait
 * Su iPhone in portrait la hero attuale (pt-40 pb-28) occupa
 * tutto il viewport prima del fold. Compressione mirata.
 * ============================================================ */
@media (max-width: 640px) {
  #hero-login.hero-bg { padding-top: 110px !important; padding-bottom: 56px !important; }
  #hero-login h1 { font-size: 2.3rem !important; line-height: 1.1 !important; }
  #hero-login p { font-size: .95rem !important; margin-bottom: 28px !important; }
  #hero-login .login-accordion summary,
  #hero-login a[href="#richiedi-accesso"] { min-width: 100% !important; padding: 14px 22px !important; }
  .login-form-card { padding: 22px !important; max-width: 100% !important; }
  .preview-card { max-width: 100%; }
}

/* ============================================================
 * 6. Landing — sezioni: padding ridotti
 * ============================================================ */
@media (max-width: 640px) {
  main > section.py-20 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .trust-strip { padding: 24px 0 !important; }
  .trust-strip .grid-trust { gap: 18px !important; }
}

/* ============================================================
 * 7. Portfolio — header sticky + filter bar offset
 * Su mobile l'header diventa flex-direction:column → cambia altezza.
 * Il filter-bar è sticky a top:64px hardcoded → si sovrappone.
 * ============================================================ */
@media (max-width: 720px) {
  .private-header .top-row { padding: 12px 0 14px; gap: 10px; }
  .private-header .badge { font-size: .58rem; padding: 4px 10px; }
  .private-header .user-info {
    font-size: .7rem; max-width: 60vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .private-header a.admin-link { font-size: .65rem; padding: 5px 10px; }
  .private-header img { height: 28px !important; }
  /* Compatta header column-mode: badge inline con logo */
  .private-header .top-row > div:first-child { flex: 1; }

  /* Teaser card density */
  .teaser-body { padding: 18px 18px 20px; }
  .teaser-title { font-size: 1.15rem !important; }
  .teaser-price-value { font-size: 1.45rem !important; }
}

/* ============================================================
 * 8. Portfolio — Modal full-screen su mobile
 * Stacked nav arrows in fondo invece che ai lati per evitare overlap.
 * ============================================================ */
@media (max-width: 720px) {
  .modal-overlay { padding: 16px 8px; }
  .modal-card { max-width: 100%; }
  .modal-img { aspect-ratio: 4/3; }
  .modal-body { padding: 22px 18px 26px; }
  .modal-section + .modal-section { margin-top: 22px; padding-top: 18px; }
  .modal-fields-grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .modal-cta-row .modal-btn { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
  .modal-fields-grid { grid-template-columns: 1fr; }
  .modal-nav { width: 38px; height: 38px; }
}

/* ============================================================
 * 9. Footer compatto su mobile
 * ============================================================ */
@media (max-width: 720px) {
  footer.site-footer { padding-top: 48px; padding-bottom: 24px; }
  footer.site-footer .footer-bottom { padding-top: 18px; }
  footer.site-footer .footer-bottom p { font-size: .7rem !important; }
}

/* ============================================================
 * 10. Tap highlight color — coerente con brand, non blu sistema
 * ============================================================ */
@media (max-width: 900px) {
  a, button, summary, [role="button"], .teaser-card {
    -webkit-tap-highlight-color: rgba(180, 1, 1, 0.15);
  }
}

/* ============================================================
 * 11. Scroll lock body quando modal portfolio aperta
 * (Il JS toggle '.active' sulla .modal-overlay è già presente.)
 * ============================================================ */
body:has(.modal-overlay.active) { overflow: hidden; }

/* ============================================================
 * 12. Print — nascondi nav/footer non utili in stampa
 * ============================================================ */
@media print {
  header.site-header, header.admin-topbar, .private-header,
  footer.site-footer, .filters-bar, .mobile-toggle,
  .modal-overlay, .sticky-actions { display: none !important; }
  body { background: #fff !important; opacity: 1 !important; }
  .teaser-card { break-inside: avoid; border: 1px solid #DDD; }
}