/* ===============================
   BODY
   - Imposto il font generale
   - max-width: 100% → il body occupa sempre tutta la larghezza disponibile
   - margin: 0 auto → azzera margini verticali, centra orizzontalmente (anche se con width:100% non ha effetto visibile)
   - padding-top: 170px → lascia spazio per l’header fisso
   - box-sizing: border-box → padding e border inclusi nelle dimensioni dichiarate
=============================== */
body {
  font-family: 'Poppins', sans-serif;
  max-width: 100%; 
  margin: 0 auto;
  padding-top: 150px;
  box-sizing: border-box;
}

/* ===============================
   MAIN INSPIRATIONHUB
   - Contenitore principale dei blocchi (righe testo+immagine)
   - max-width: 1155px → larghezza massima leggibile
   - margin: 0 auto → centrato nella pagina
   - padding: 5px 15px → respiro interno
   - display: flex + flex-direction: column → impila le righe verticalmente
   - gap: 30px → spazio verticale uniforme tra una riga e l’altra
=============================== */
.main_inspirationhub {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ===============================
   IMMAGINI GENERALI
   - max-width: 100% → non superano mai il contenitore
   - height: auto → mantengono proporzioni originali
   - display: block → elimina spazi indesiderati sotto le immagini inline
=============================== */
.main_inspirationhub img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   TESTO GENERALE (h3, h4, p)
   - margin-top: 0 → elimina margine superiore di default dei titoli
   - line-height: 1.3 → migliora leggibilità
   - word-wrap: break-word → evita overflow di parole troppo lunghe
=============================== */
.main_inspirationhub h3,
.main_inspirationhub h4,
.main_inspirationhub p {
  margin-top: 0;
  line-height: 1.3;
  word-wrap: break-word;
}

/* ===============================
   TITOLO INTRODUTTIVO
   - h4 centrato, colore sobrio, in corsivo
   - font-weight: normal → non troppo pesante
=============================== */
.title_inspirationhub h4 {
  font-weight: 400;
  font-size: 14px;
  text-align: right;
  color: darkslategray;
}

.english_text {
  padding-top: 10px;
  max-width: 810px;
  margin-left: auto;
  text-align: right;
  padding-right: 5px;
}

.italian_text {
  font-style: italic;
  padding-top: 10px;
  max-width: 800px;
  margin-left: auto;
  text-align: right;
  padding-right: 5px;
}

.underline {
  display: block;              /* diventa un blocco a sé */
  width: 150px;                /* lunghezza della linea */
  border-bottom: 2px solid orange; /* linea */
  margin: 15px 0 15px 0;       /* spazio sopra e sotto */
}

/* ===============================
   RIGHE DISPARI (1,3,5,7)
   - display: flex → affianca testo e immagine
   - flex-direction: row → testo a sinistra, immagine a destra
   - align-items: flex-start → allinea in alto
   - flex-wrap: wrap → su schermi stretti vanno a capo
   - gap: 30px → spazio tra testo e immagine
=============================== */
.inspirationhub_1,
.inspirationhub_3,
.inspirationhub_5,
.inspirationhub_7 {
  display: flex;
  flex-direction: row;
  align-items:flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

/* ===============================
   RIGHE PARI (2,4,6)
   - Stesse regole delle dispari
   - flex-direction: row-reverse → immagine a sinistra, testo a destra
=============================== */
.inspirationhub_2,
.inspirationhub_4,
.inspirationhub_6 {
  display: flex;
  flex-direction: row-reverse;
  align-items:flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

/* ===============================
   BLOCCO TESTO
   - flex: 1 → occupa lo spazio rimanente
   - text-align: justify → testo giustificato
   - colore coerente con palette
=============================== */
.inspirationhub_text {
  font-weight: 400;
  font-size: 14px;
  color: darkslategray;
  flex: 1;
  text-align: justify;
}

.inspirationhub_text h4 {
  font-weight: 600;
  font-size: 15px;
  color: darkslategray;
  flex: 1;
  text-align: justify;
}

/* ===============================
   BLOCCO IMMAGINE
   - flex: 1 1 400px → base 400px, ma flessibile
   - width: 800px → larghezza preferita (ma può ridursi grazie a flex)
   - aspect-ratio: 16/9 → tutte le immagini hanno la stessa proporzione
   - border-radius: 8px → angoli arrotondati
   - margin-top: 20px → rimosso, sostituito da gap
=============================== */
.inspirationhub_img {
  flex: 1 1 400px;
  width: 800px;
  aspect-ratio: 16/9;
  border-radius: 8px;
  /* margin-top: 20px; */
}

/* ===============================
   LINK "READ MORE"
   - testo allineato a destra
   - grassetto per evidenziare
=============================== */
.read_more {
  text-align: right;
  font-weight: 600;
}

/* ===============================
   STILE LINK "READ MORE"
   - nessuna sottolineatura
   - colore coerente con palette
=============================== */
.read_more_style {
  text-decoration: none;
  color: darkslategray;
}