/* ============================================================
   BODY (MOBILE-FIRST)
   - Sfondo uniforme
   - Font globale
   - Nessun margine predefinito
============================================================ */
body {
  background-color: rgb(228, 232, 220);
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
}

.header-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* ============================================================
   CONTENITORE PRINCIPALE (MOBILE-FIRST)
   - Colonna singola
   - Centrato
   - Spazio per l’header fisso
============================================================ */
.inspirationhub-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 150px 20px 40px; /* spazio per header + margini */
}

/* Logo */
.middle-section {
  flex: 0;                       /* non cresce né si restringe: mantiene la sua dimensione naturale */
  display: flex;                 /* attiva Flexbox per centrare il logo */
  justify-content: center;       /* centra orizzontalmente il logo */
}

.mauro_giannubilo {
  max-width: 100px; /* più piccolo su mobile */
  height: auto;
}

/* ============================================================
   SEZIONE BILINGUE (MOBILE-FIRST)
   - Una colonna su mobile
   - Due colonne su desktop
============================================================ */
.article-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* MOBILE: una colonna */
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* === INGLESE === */
.article-en {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 1;          
  margin-bottom: 6px;
  margin-top: 25px;
}

/* === TITOLO ARTICOLO === */
.article-title-en {
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 1;          
  margin-bottom: 6px;
  margin-top: 25px;
}
/* === TESTO ARTICOLO === */
.article-text-en {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 1;           
  margin-bottom: 6px;
  margin-top: 25px;
  text-align: justify;
  margin-bottom: 1rem;
}

/* === ITALIANO === */
.article-it {
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;     /* corsivo */
  opacity: 0.7;           /* stessa opacità del paragrafo italiano */
  margin-bottom: 6px;
  margin-top: 25px;
  color: darkslategray;
}

/* === TITOLO ARTICOLO === */
.article-title-it {
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;     /* corsivo */
  opacity: 0.7;           /* stessa opacità del paragrafo italiano */
  margin-bottom: 6px;
  margin-top: 25px;
  text-align: justify;
  color: darkslategray;
}
/* === TESTO ARTICOLO === */
.article-text-it {
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;     /* corsivo */
  opacity: 0.7;           /* stessa opacità del paragrafo italiano */
  margin-bottom: 6px;
  margin-top: 25px;
  text-align: justify;
  color: darkslategray;
  margin-bottom: 1rem;
}

/* Evidenziazione parole chiave */
span {
  font-weight: 800;
  color: darkslategray;
}

/* ============================================================
   IMMAGINI (MOBILE-FIRST)
   - Responsive
   - Ombra elegante
============================================================ */
.article-image {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 10px auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Testo sotto immagine */
.image-caption {
  font-size: 0.8rem;
  text-align: right;
  color: darkslategray;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.about {
  visibility: hidden;
}

.contact {
  visibility: hidden;
}

.portfolio {
  visibility: hidden;
}

/* === FOOTER === */
footer {
  text-align: center;
  padding: 20px;
  color: darkslategray;
  font-size: 0.9rem;
}

/* ============================================================
   BREAKPOINT TABLET / DESKTOP
   - Due colonne per la sezione bilingue
   - Header centrato con larghezza massima
============================================================ */
@media (min-width: 900px) {

  .header-container {
    max-width: 1100px;
    margin: 0 auto;
  }

  .mauro_giannubilo {
    max-width: 100px;
  }

  .article-wrapper {
    grid-template-columns: 1fr 1fr; /* due colonne */
    gap: 2rem;
  }

}