/**
 * SPIDER / EDITH — layout responsive (telefono · tablet · desktop)
 * Includere dopo spider-theme.css dove presente.
 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* Topbar e navigazione */
.spider-topbar {
  flex-wrap: wrap;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
}
.spider-topbar a,
.spider-topbar button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spider-status-bar {
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  font-size: clamp(0.5rem, 2.2vw, 0.58rem);
}

/* Griglie e card */
.projects-grid,
.hub-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 3vw, 24px);
  padding: clamp(12px, 3vw, 30px);
}

/* Pulsanti touch-friendly */
a.btn,
button.btn,
.spider-btn,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
}

/* Telefono */
@media (max-width: 640px) {
  .hub-time {
    position: static !important;
    margin-top: 8px;
    text-align: center;
    width: 100%;
  }
  .hub-header {
    padding: 28px 16px 20px;
  }
  .sos-global {
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
  }
  .btn-sos-global {
    width: 44px;
    height: 44px;
  }
  .quick-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 56px;
  }
  .quick-actions .spider-btn {
    width: 100%;
    text-align: center;
  }
  .spider-topbar .title {
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
  .card-port {
    font-size: 0.52rem;
    word-break: break-all;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Landscape telefono — app immersive (dance, blind, social) */
@media (max-height: 500px) and (orientation: landscape) {
  #styleEmoji { font-size: 2.8rem !important; }
  #beatCounter { font-size: 3rem !important; min-height: 3.5rem !important; }
  #bpmDisplay { font-size: 2rem !important; }
  #instructionText { font-size: clamp(1.1rem, 4vw, 1.6rem) !important; }
  #adviceText { font-size: clamp(0.95rem, 3.5vw, 1.3rem) !important; }
}

/* Desktop ampio */
@media (min-width: 1200px) {
  .projects-grid {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
}