/* =========================================================
   BASE GENERALE
   ========================================================= */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
  text-align: center;
  line-height: 1.4;
}
html { font-size: 15px; }

h1 {
  font-size: 28px;
  margin-bottom: 20px;
}
h2 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #555;
}

.container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
}

.hero {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  margin-bottom: 30px;
}

/* =========================================================
   PAGINA LUOGHI: immagini e bottoni
   ========================================================= */
.images-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px auto;
  flex-wrap: wrap; /* su schermi piccoli vanno sotto */
}
.side-img {
  max-width: 45%;
  height: auto;
  border: none;
  box-shadow: none;
}

/* Bottoni generici (es: indietro, torna alla home) */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  background: #e6f2ff;
  color: #333;
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}
.btn:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.btn.danger { background: #ffe6e6; }

/* Selettore data */
.date-picker {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}
.date-picker input[type="date"] {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #333;
}

/* =========================================================
   HOME PAGE: layout 2–2–2 attorno al logo
   ========================================================= */
.home {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 20px;
  align-items: end;
  justify-items: center;
  margin-top: 10px;
}
.home .side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.home .center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home .center .bottom {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Pulsanti (stile base, se servono) */
.home button {
  min-width: 200px;
  height: 50px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  color: #333;
  background: #e6f2ff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: transform .15s, box-shadow .15s;
}
.home button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.home button:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,0.15); }

/* =========================================================
   CARD BOX nella home (ispirato al tuo esempio)
   ========================================================= */
.box {
  background-color: #f8f9fa;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  width: 180px;
  min-height: 90px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  box-sizing: border-box;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 20px rgba(0,0,0,.12);
}
.box::before { pointer-events: none; }
.box:hover::before { opacity: 1; }

/* Titolo dentro al box */
.title {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* spazio icona-testo */
  font-size: 15px;
  font-weight: 700;
  color: #2c3e50;
}
.title:hover { color: #8e44ad; }

/* Icone nei box */
.box i { font-size: 1.2em; }
.icon-via-beneventano { color: #007BFF; }   /* blu */
.icon-largo-taverna   { color: #CC8400; }   /* giallo ocra */
.icon-mercato         { color: #E74C3C; }   /* rosso */
.icon-municipio       { color: #27AE60; }   /* verde */
.icon-masseria        { color: #20B2AA; }   /* acquamarina */

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Mobile-first (già base sopra) */

/* Tablet */
@media (min-width: 768px) {
  html { font-size: 16px; }
  .container { max-width: 720px; margin: 28px auto; padding: 0 14px; }
  h1 { font-size: 22px; margin-bottom: 10px; }

  .images-row { gap: 12px; margin: 12px auto; }
  .side-img { max-width: 48%; }

  .btn, .buttons button { width: auto; }
  .home .side { max-width: 240px; }
  .home .center .bottom button { width: auto; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 960px; margin: 40px auto; padding: 0 16px; }
  .images-row { gap: 16px; margin: 16px auto; }
  .side-img { max-width: 45%; }

  .home {
    grid-template-columns: 220px 1fr 220px;
    gap: 20px;
    align-items: end;
  }
  .home .side { width: 100%; }
  .home .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .bottom button { width: auto; }
}

/* Mobile: i box vanno tutti sotto al logo */
@media (max-width: 768px) {
  .home {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-items: center;
  }
  .home .center { order: 1; }
  .home .side.left, .home .side.right { order: 2; }

  .home .side,
  .home .center .bottom {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .box { width: 240px; }
  .home .center .bottom { flex-direction: column; }
}

/* Safe area iPhone */
@supports (padding: max(0px)) {
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}