:root {
  --clr-bg: #23386a;
  --clr-accent: #6acaf1;
  --clr-accent-light: #a2e0ff;
  --clr-gold: #f7dc6f;
  --clr-text: #ffffff;
  --clr-text-light: rgba(255,255,255,0.8);
  --clr-border: #5173a3;
  --shadow: rgba(0,0,0,0.1);
}

.vg-container, .vg-search { font-family:'Segoe UI',sans-serif; box-sizing:border-box; color:var(--clr-text); }

.vg-search { max-width:1200px; margin:0 auto 40px; padding:0 20px; text-align:center; }
.vg-search input#vg-search {
  width:100%;max-width:500px;padding:16px 24px;font-size:16px;
  border:2px solid var(--clr-border);border-radius:50px;background:var(--clr-bg);color:var(--clr-text);
  box-shadow:0 4px 20px var(--shadow);transition:0.3s;outline:none;display:inline-block;
}
.vg-search input#vg-search:focus {
  border-color:var(--clr-accent);
  box-shadow:0 4px 25px rgba(106,202,241,0.25);
  transform:translateY(-2px);
}
.vg-search input#vg-search::placeholder { color:var(--clr-text-light); }

/* Select regione */
.vg-filter-region { text-align:center; margin:20px 0; }
#vg-region-select {
  padding:8px 12px; font-size:14px; border:2px solid var(--clr-border); border-radius:6px;
  background:var(--clr-bg); color:var(--clr-text); box-shadow:0 2px 6px var(--shadow); outline:none;
}
#vg-region-select:focus { border-color:var(--clr-accent); }

/* Container principale */
.vg-container {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px; max-width:1200px; margin:0 auto; padding:0 20px; justify-items:center;
}

/* Card */
.vg-card {
  background:var(--clr-bg); border:1px solid var(--clr-border); border-radius:20px;
  overflow:hidden; box-shadow:0 8px 32px var(--shadow); transition:0.4s; position:relative;
  width:100%; max-width:400px;
}
.vg-card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 16px 48px rgba(0,0,0,0.15);
}

/* Immagine quadrata */
.vg-image-wrapper, .vg-image-placeholder {
  width:100%; aspect-ratio:1/1;
  background:linear-gradient(135deg,var(--clr-accent-light)0%,var(--clr-accent)100%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.vg-card img {
  width:100%; height:100%; object-fit:contain; transition:transform 0.6s;
}
.vg-card:hover img { transform:scale(1.1); }

/* Corpo card */
.vg-card-body { padding:30px 25px; background:var(--clr-bg); text-align:center; }
.vg-card-body h3 {
  font-size:24px; font-weight:700; margin:0 0 20px; color:var(--clr-text)!important;
}

/* Descrizione */
.vg-description {
  font-size:14px; font-style:italic; color:var(--clr-text-light); margin:0 0 20px;
}

/* Associazione & Regione */
.vg-associazione { margin:10px 0; font-size:14px; color:var(--clr-text-light); }
.vg-associazione strong { color:#D6A10E!important; }
.vg-regione { margin:5px 0; font-size:14px; color:#D6A10E!important; }
.vg-regione strong { color:#D6A10E!important; }

/* Bottone "Leggi di più" */
.vg-btn {
  display:inline-block; margin-top:10px; padding:8px 16px;
  background:var(--clr-accent); color:#000000; border:none; border-radius:4px;
  cursor:pointer; font-weight:600; text-decoration:none;
}
.vg-btn:hover {
  background:var(--clr-accent-light);
  color:#000000;
}

/* Badge */
.vg-card::before {
  content:''; position:absolute; top:20px; right:20px; width:40px; height:40px;
  background:var(--clr-gold); border-radius:50%; box-shadow:0 4px 15px rgba(247,220,111,0.4); z-index:2;
}
.vg-card::after {
  content:'★'; position:absolute; top:30px; right:30px; color:var(--clr-bg);
  font-size:18px; font-weight:bold; z-index:3;
}

/* Nessun risultato */
.vg-card[style*="display:none"] { display:none!important; }
.vg-no-guides, .vg-no-results {
  grid-column:1/-1; text-align:center; color:var(--clr-text-light); padding:60px 20px;
}
.vg-no-guides i, .vg-no-results i {
  font-size:48px; color:var(--clr-accent-light); margin-bottom:20px;
}
.vg-no-guides h3, .vg-no-results h3 {
  font-size:24px; color:var(--clr-text); margin-bottom:10px;
}
.vg-no-guides p, .vg-no-results p { font-size:16px; }

/* Animazione */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
.vg-card { animation:fadeInUp 0.6s ease forwards; }
.vg-card:nth-child(1){animation-delay:.1s;} .vg-card:nth-child(2){animation-delay:.2s;}
.vg-card:nth-child(3){animation-delay:.3s;} .vg-card:nth-child(4){animation-delay:.4s;}
.vg-card:nth-child(5){animation-delay:.5s;} .vg-card:nth-child(6){animation-delay:.6s;}

/* Responsive & stampa */
@media(max-width:768px){
  .vg-container{grid-template-columns:1fr;gap:25px;padding:0 15px;}
  .vg-search{padding:0 15px;margin-bottom:30px;}
  .vg-search input#vg-search{padding:14px 20px;font-size:15px;}
  .vg-card-body{padding:25px 20px;}
  .vg-card-body h3{font-size:22px;}
  .vg-image-wrapper,.vg-image-placeholder{aspect-ratio:1/1;}
}
@media(max-width:480px){
  .vg-search input#vg-search{padding:12px 18px;font-size:14px;}
  .vg-card-body h3{font-size:20px;}
  .vg-description{font-size:13px;}
  .vg-details p, .vg-contact-item{padding:10px 14px;font-size:14px;}
  .vg-image-wrapper,.vg-image-placeholder{aspect-ratio:1/1;}
}
@media print{
  .vg-search{display:none;}
  .vg-card{break-inside:avoid;box-shadow:none;border:1px solid var(--clr-border);}
  .vg-card a, .vg-btn{text-decoration:underline;}
}
