@charset "UTF-8";

/* ---------------------------------------------------------------------------

   IMPORTA IL FOGLIO STILE PRINCIPALE DEL SITO

   ---------------------------------------------------------------------------

   In questo modo il blog eredita tutte le utility Bootstrap/Agency già usate

   nel resto del sito (grid, container, btn, footer ecc.).

*/

@import url("../../css/styles.css");



/* ---------------------------------------------------------------------------

   REGOLAZIONI SPECIFICHE PER I POST DEL BLOG

   --------------------------------------------------------------------------- */



/* -----------------------------------------------

   NAVBAR  – pulsante "Torna alla Home"

   ----------------------------------------------- */

.back-home{

  /* posizionamento */

  position: absolute;          /* fuori dal flusso flex della navbar */

  right: 1.5rem;               /* distacco dal bordo destro */

  top: 50%;                    /* centro verticale */

  transform: translateY(-50%); /* correzione centratura */



  /* aspetto sempre visibile */

  display: inline-block;

  padding: .375rem 1rem;       /* dimensioni simili alle btn Bootstrap */

  background: #212529;         /* grigio-scuro (visibile su sfondo chiaro) */

  color: #fff;                 /* testo bianco */

  border: 2px solid #212529;   /* stesso colore del fondo */

  border-radius: .25rem;

  font-weight: 500;

  text-decoration: none;



  /* animazioni */

  transition: background .3s ease, color .3s ease, transform .2s ease;

}



/* hover / focus */

.back-home:hover,

.back-home:focus{

  background: #fff;            /* riempie di bianco */

  color: #212529;              /* testo scuro per contrasto */

  border-color: #212529;

  transform: translateY(-50%) translateY(-2px); /* leggero “lift” */

}



.text-center-blog{

	text-align: center;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 15px;

	padding-bottom: 15px;

}



.text-center-blog-top{

	text-align: center;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 100px;

	padding-bottom: 15px;

}



/* -------------------------------------------------

   PARAGRAFI   – dimensione maggiore solo su desktop

   ------------------------------------------------- */

/* -------------------------------------------------

   DESKTOP TYPO – paragrafi più grandi e colonna più stretta

   ------------------------------------------------- */

@media (min-width: 992px){          /* breakpoint “lg” ≈ laptop/desktop */

  

  /* SOLO i paragrafi del blog */

  p.text-center-blog{

    font-size: 1.5rem;             /* ~19 px: più leggibile su schermi grandi  */

    line-height: 1.6;              /* mantieni un buon respiro verticale       */

    

    /* Colonna stretta come su mobile */

    max-width: 60ch;               /* ~60 caratteri, simile alla larghezza phone */

    margin-left: auto;             /* centra la colonna all’interno della pagina */

    margin-right: auto;

  }



  /* (niente regole per h2: restano a 2 rem, valore standard Bootstrap) */

}



/* -------------------------------------------------

   BLOG – ingrandisci le immagini solo su desktop

   ------------------------------------------------- */

@media (min-width: 992px) {          /* breakpoint “lg” di Bootstrap */

  .img-fluid{                        /* riguarda solo le immagini del post */

    width: 450px;                    /* da 256 → 384 px (o regola a piacere) */

    max-width: 100%;                 /* evita di uscire dai bordi */

    height: auto;                    /* mantiene il rapporto d’aspetto */

  }

}