/* Carica i font direttamente da Google */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&family=Rubik:wght@400;700&display=swap');

/* Applica Rubik come font globale per il testo */
body, p, table, td, li, a {
  font-family: 'Rubik', sans-serif !important;
}

/* Applica Exo 2 per tutti i titoli generici */
h1, h2, h3, h4, h5, h6, .page-title, .block-title {
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 700;
  color: #2d1a8f !important; 
}

/* =======================================================
   GRIGLIA RESPONSIVE *ESCLUSIVA* PER LA PAGINA TUTORIAL
   ======================================================= */

/* 1. ATTIVA IL FLEXBOX SOLO SULLA VISTA TUTORIAL */
.view-id-tutorial .view-content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Spazio tra i blocchi */
  justify-content: flex-start;
  margin-top: 20px;
}

/* 2. COMPORTAMENTO SMARTPHONE (Default): 1 COLONNA */
.view-id-tutorial .view-content .views-row {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9; /* Sfondo leggero protettivo */
  border-radius: 8px;
}

/* Evita che le immagini superino la loro larghezza nativa */
.view-id-tutorial .view-content .views-row img {
  max-width: 100%;
  height: auto !important;
  display: inline-block;
}

/* 3. COMPORTAMENTO PC/DESKTOP (Schermi da 992px in su): 3 COLONNE */
@media (min-width: 992px) {
  .view-id-tutorial .view-content .views-row {
    /* Calcolo matematico per 3 colonne perfette considerando il gap */
    flex: 0 0 calc((100% - 60px) / 3) !important; 
    max-width: calc((100% - 60px) / 3) !important;
    background-color: transparent; /* Rimuove lo sfondo protettivo su PC */
    padding: 0;
  }
}

/* =======================================================
   FORZA IL COLORE DEI TITOLI IN ENTRAMBE LE VISTE (CON FIX SPAN)
   ======================================================= */
.view-id-tutorial h3,
.view-id-tutorial h3 a,
.view-id-tutorial h3 a span,
.view-id-frontpage h3,
.view-id-frontpage h3 a,
.view-id-frontpage h3 a span,
.view-id-frontpage .node__title a,
.view-id-frontpage .node__title a span {
  color: #2d1a8f !important;
  text-decoration: none !important;
}

/* Effetto al passaggio del mouse in entrambe le pagine */
.view-id-tutorial h3 a:hover,
.view-id-tutorial h3 a:hover span,
.view-id-frontpage h3 a:hover,
.view-id-frontpage h3 a:hover span {
  color: #1a0f5c !important;
  text-decoration: underline !important;
}

/* =======================================================
   SPOSTAMENTO SLOGAN SOTTO IL LOGO
   ======================================================= */

/* Forza i due contenitori a disporsi uno sotto l'altro anziché affiancati */
.branding-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centra logo e slogan; se li preferisci allineati a sinistra cambia in: flex-start */
  text-align: center;     /* Centra i testi internamente */
  gap: 10px;              /* Regola lo spazio verticale tra il logo e lo slogan */
}

/* Rimuove eventuali margini nativi che potrebbero disallineare lo slogan */
.site-slogan-outer {
  margin: 0;
  padding: 0;
}

/* Stile base dello slogan per schermi Grandi (PC/Desktop) */
.site-slogan {
  font-family: 'Rubik', sans-serif !important; /* Mantiene la coerenza dei tuoi font */
  font-size: 1.2rem;                           /* Dimensione su PC, puoi aumentarla o diminuirla */
  line-height: 1.4;
}

/* =======================================================
   OTTIMIZZAZIONE PER SMARTPHONE (Schermi fino a 768px)
   ======================================================= */
@media (max-width: 768px) {
  .site-slogan {
    font-size: 0.95rem !important; /* Rimpicciolisce il carattere su cellulare */
    line-height: 1.3;
    padding: 0 15px;               /* Evita che lo slogan tocchi i bordi dello schermo dello smartphone */
  }
}