/* Vista ultra wide (monitor 21:9 come 3440x1440). Si somma a desktop.css e vale solo da 2400px in su
   con mouse o trackpad: sotto quella larghezza la vista PC resta identica. Per toglierla basta togliere il <link> da index.html.
   Lavora insieme a ultrawide.js, che tiene la colonna della scheda sempre aperta (con un riquadro d'attesa
   quando nessun luogo è selezionato), così l'elenco dei luoghi e la scheda si vedono sempre insieme. */

@media (width >= 2400px) and (hover: hover) and (pointer: fine) {

  /* ---------- Tre colonne fisse: elenco | mappa | scheda ---------- */
  .sidebar { width: 460px; }
  .detail-panel, .uw-attesa { width: 540px; }

  /* ---------- Pannello Esplora: più grande e leggibile ---------- */
  .brand-header { padding: 24px 26px 18px; }
  .brand-header h1 { font-size: 38px; }
  .brand-header p { font-size: 11px; letter-spacing: .4px; }
  .search-field { margin-left: 20px; margin-right: 20px; min-height: 48px; }
  .search-field input { font-size: 15px; }
  .sidebar-tabs { padding: 0 24px; }
  .sidebar-tabs button { font-size: 14px; padding: 16px 0; gap: 9px; }
  .sidebar-content { padding: 22px 24px; }
  .filter-controls select, .filter-controls label { font-size: 13px; }
  .place-result { font-size: 16px; padding-top: 12px; padding-bottom: 12px; gap: 14px; }
  .place-result small { font-size: 12px; }
  .place-result > svg:first-child { width: 20px; height: 20px; }
  .sidebar-footer { padding-left: 24px; padding-right: 24px; }

  /* ---------- Barra in alto: tutte le funzioni con il nome, pulsanti più comodi ---------- */
  .map-topbar { top: 22px; left: 26px; right: 26px; }
  .map-actions { gap: 8px; }
  .map-topbar .button, .map-topbar .icon-button { min-height: 46px; }
  .map-actions .button { padding: 11px 16px; font-size: 13px; gap: 8px; border-radius: 12px; }
  .map-actions .button > svg { width: 17px; height: 17px; }
  .map-actions .icon-button { width: 46px; min-width: 46px; }
  /* Con tre colonne c'è comunque spazio: niente pulsanti ridotti a sola icona */
  .map-actions .button > span:not([hidden]) { display: inline !important; }
  .map-actions [data-dk-sec], .map-actions .button:not(.icon-button) { width: auto !important; min-width: 0 !important; padding: 11px 16px !important; }
  .map-actions .button > em:not([hidden]) { display: inline !important; }
  .map-actions [data-dk-tip]::after { display: none; }

  /* ---------- Scheda del luogo: larga, testo e foto grandi ---------- */
  .detail-panel .panel-heading { padding-left: 30px; padding-right: 22px; }
  .detail-scroll { padding-left: 30px !important; padding-right: 30px !important; }
  .detail-panel .place-title h2 { font-size: 34px; line-height: 1.1; }
  .detail-panel .description { font-size: 16px; line-height: 1.65; }
  .detail-panel .place-meta { font-size: 14px; }
  .detail-panel .place-meta > div { padding: 3px 0; }
  .detail-panel .tags { font-size: 13px; }
  .detail-panel textarea, .detail-panel select, .detail-panel input { font-size: 14px; }
  .detail-panel .tp-presets .button { min-height: 38px; font-size: 13px; }

  /* ---------- Avviso "Scarico le foto per l'uso offline" (foto-offline.js) ----------
     Non più in basso a sinistra sopra Impostazioni: in basso al centro della mappa, in tinta */
  .fo-chip {
    left: calc(460px + (100vw - 1000px) / 2) !important; bottom: 26px !important; top: auto !important;
    transform: translateX(-50%); z-index: 650 !important;
    padding: 9px 18px !important; font: 600 13px/1.3 Montserrat, Inter, system-ui, sans-serif !important;
    background: rgba(14, 10, 26, .88) !important; border: 1px solid rgba(255, 80, 197, .5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 18px rgba(255, 80, 197, .18);
  }
  body:has(.sidebar[data-open=false]) .fo-chip { left: calc((100vw - 540px) / 2) !important; }

  /* ---------- Riquadro d'attesa al posto della scheda (nessun luogo selezionato) ---------- */
  .uw-attesa {
    order: 99; flex-shrink: 0; display: flex; flex-direction: column; z-index: 600;
    background: var(--glass-bg, var(--surface)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--border); box-shadow: var(--glass-shadow);
    color: #fff; font-family: Montserrat, Inter, system-ui, sans-serif;
  }
  .detail-panel { order: 100; }
  .atlas-app:has(.detail-panel) .uw-attesa { display: none; }
  .uw-attesa header { box-sizing: border-box; min-height: 78px; padding: 33px 30px 20px; border-bottom: 1px solid var(--border); }
  .uw-attesa header span { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
  .uw-attesa .uw-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px 46px; gap: 16px; }
  .uw-attesa .uw-icona {
    width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 80, 197, .14); border: 1px solid rgba(255, 80, 197, .5); color: var(--accent);
    box-shadow: 0 0 40px rgba(255, 80, 197, .25);
  }
  .uw-attesa h2 { margin: 6px 0 0; font: 800 30px/1.1 Montserrat, Oswald, sans-serif; letter-spacing: -.5px; }
  .uw-attesa p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 380px; }
  .uw-attesa ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 400px; text-align: left; }
  .uw-attesa li {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; font-size: 14px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85);
  }
  .uw-attesa kbd {
    min-width: 30px; padding: 4px 8px; border-radius: 7px; text-align: center; font: 700 12px/1.2 Inter, system-ui, sans-serif;
    background: rgba(255, 80, 197, .18); border: 1px solid rgba(255, 80, 197, .45); color: #fff;
  }
}

/* Il riquadro d'attesa non esiste fuori dalla vista ultra wide */
@media not ((width >= 2400px) and (hover: hover) and (pointer: fine)) {
  .uw-attesa { display: none !important; }
}
