/* ===========================================================================
   goEnergy · Realizzazioni (page-specific)
   =========================================================================== */

/* === CONFRONTO VS ===
   Schemi impilati a tutta larghezza per la massima leggibilità dei componenti,
   con il "VS" centrato tra i due schemi. */
.compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-16);
}
.compare__caption {
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.compare__caption--brand { color: var(--color-primary); }
.compare__caption--std   { color: var(--color-text-muted); }

.compare__media {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compare__media img { width: 100%; height: auto; display: block; }

.compare__vs {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin-block: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extra);
  color: var(--color-primary-dark);
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
}

/* Componenti che fanno la differenza (popup esplicativi) */
.compare__keys { margin-top: var(--space-12); text-align: center; }
.compare__keys h3 { font-size: var(--text-lg); color: var(--color-primary-dark); }

/* === BLOCCO "PERCHÉ DIVERSI" === */
.why__image {
  margin-top: var(--space-12);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.why__image img { width: 100%; height: auto; display: block; }
.why__tagline {
  max-width: var(--max-width-text);
  margin: var(--space-16) auto 0;
  text-align: center;
}
.why__tagline h2 { font-size: var(--text-2xl); }
.why__cta { display: flex; justify-content: center; margin-top: var(--space-8); }

/* === FEATURE LIST (griglia 2 colonne, specifica di questa pagina) === */
.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-10);
}

/* === PROGETTI · ALCUNI ESEMPI (banda scura) ===
   Titolo centrato verticalmente tra il bordo superiore della banda e le caselle. */
.projects {
  color: var(--color-text-inverted);
  background-image: var(--gradient-hero);
  padding-block: var(--section-y);
}
.projects .section-head { margin-bottom: var(--space-16); }
.projects .section-head h2 { color: var(--color-text-inverted); }
.projects__viewport { padding-bottom: var(--space-2); }
.projects__viewport > .project-card { flex: 0 0 calc((100% - 2 * var(--space-6)) / 3); }

.project-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.project-card img { width: 100%; height: 100%; object-fit: cover; }
.project-card__overlay {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  color: var(--color-text-inverted);
  background-image: linear-gradient(180deg, rgba(9, 60, 98, 0.85) 0%, rgba(9, 60, 98, 0) 100%);
}
/* Overlay (logo/titolo/località) nascosto: le card mostrano solo l'immagine di sfondo (da Instagram).
   Per riattivarlo basta rimuovere questa regola. */
.project-card__overlay { display: none; }
.project-card__logo { height: 26px; width: auto; margin-bottom: var(--space-2); }
.project-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.project-card__meta { font-size: var(--text-sm); color: var(--color-accent); }

.projects__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.projects .carousel__btn {
  color: var(--color-text-inverted);
  border-color: rgba(255, 255, 255, 0.4);
}
.projects .carousel__btn:hover { color: var(--color-primary-dark); background-color: var(--color-accent); }
.projects .carousel__btn:disabled:hover { color: var(--color-text-inverted); background-color: transparent; }

/* === FAQ BAND === */
.faq-band { text-align: center; padding-top: var(--section-y); }

/* ===========================================================================
   RESPONSIVE - realizzazioni
   =========================================================================== */
@media (max-width: 1024px) {
  .projects__viewport > .project-card { flex: 0 0 calc((100% - var(--space-6)) / 2); }
}

@media (max-width: 768px) {
  .features__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .projects__viewport > .project-card { flex: 0 0 85%; }
  .compare__vs { width: 64px; height: 64px; }
}