@charset "UTF-8";
/* COLOR VARIABLES
============================================= */
/* BASE */
/* GREY */
/* BLUE */
/* AZURE */
/* ORANGE */
/* YELLOW */
/* ============================================= */
/*$marginMenu: 150px;*/
/* COLORS
============================================= */
/* BG IMAGES
============================================= */
/* FLEXBOX
============================================= */
/* GRID
============================================= */
/* BOX SHADOW
============================================= */
/* OPACITY
============================================= */
/* TRANSITION
============================================= */
/* TRANSFORM
============================================= */
/* BORDER RADIUS
============================================= */
/* TEXT TRANSFORM
============================================= */
/* FONT
============================================= */
/* MANROPE
   =============================================
   font-display: optional e NON swap.

   Con "swap" il browser disegna subito col font di sistema e poi sostituisce
   Manrope quando arriva: la sostituzione e' per definizione un ricalcolo delle
   larghezze. Sul menu si vedeva come un guizzo — la riga di voci e' larga 18px
   in piu' col font vero, e avendo justify-content:center ogni voce si spostava
   di ~9px.

   Con "optional" il browser da al font ~100ms: se e' pronto lo usa da subito,
   se non lo e' tiene il fallback per QUESTA visita e non sostituisce piu'.
   In nessuno dei due casi il layout si muove.

   Perche' funziona bene qui: i woff2 sono self-hosted e pesano 14KB l'uno, e
   sono precaricati in _css.php (400, 500, 700), quindi la finestra dei 100ms
   la rispettano praticamente sempre.

   Il compromesso, da sapere: alla primissima visita con cache vuota e rete
   lenta la pagina puo' restare col font di sistema fino alla navigazione
   successiva. E' il prezzo di non avere spostamenti.
   ============================================= */
/* manrope-regular - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url("/library/fonts/manrope-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  src: url("/library/fonts/manrope-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  src: url("/library/fonts/manrope-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  src: url("/library/fonts/manrope-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-800 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  src: url("/library/fonts/manrope-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* SCROLLBAR
============================================= */
/* Barra di scroll sottile, aspetto simile a quella di macOS.
   Va dichiarata due volte: `scrollbar-width`/`scrollbar-color` e' lo standard
   (Firefox e Chromium 121+), i pseudo-elementi ::-webkit-scrollbar coprono
   Safari e i Chromium precedenti. Dove valgono entrambi vincono i pseudo.

   NON usarlo con un selettore universale: i ::-webkit-scrollbar hanno la
   precedenza su `scrollbar-width: none`, quindi farebbero ricomparire le barre
   nascoste di proposito (.filtri-shop, .menu-container, ecc.). */
.blog .page-header {
  margin-bottom: clamp(45px, 2.5vw, 80px);
}
.blog .page-header .container-large {
  grid-template-areas: "title" "breadcrumb";
  grid-template-columns: 100%;
  padding: clamp(20px, 1.5vw, 40px) 0;
}
.blog .page-header .container-large .breadcrumb {
  grid-area: breadcrumb;
}
.blog .page-header h1 {
  max-width: 100%;
  font-size: clamp(24px, 2.2vw, 36px);
}
.blog .utility {
  width: calc(100% - 2px);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  border: 1px solid #E0E1E3;
  height: 60px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  border-radius: 32px;
  padding-left: 20px;
}
.blog .utility ul {
  margin: 0;
  border: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 0 10px;
}
.blog .utility ul li.data {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
}
.blog h2 {
  font-size: clamp(24px, 2vw, 32px);
  line-height: calc(clamp(24px, 2vw, 32px) * 1.4);
}
.blog h3 {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: calc(clamp(18px, 1.5vw, 20px) * 1.8);
}

.star-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(20px, 1.5vw, 30px);
}
.star-container article {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  padding: clamp(24px, 2vw, 32px);
  overflow: hidden;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(30px, 2.5vw, 50px);
  width: 50%;
}
.star-container article.bg-orange {
  background-color: #EA7600;
}
.star-container article.bg-orange .section-label {
  gap: 10px;
}
.star-container article.bg-orange .section-label::before {
  background-color: #1D428A;
}
.star-container article.bg-blue {
  background-color: #1D428A;
}
.star-container article.bg-blue .section-label::before {
  background-color: #EA7600;
}
.star-container article h2, .star-container article h3, .star-container article h4, .star-container article h5, .star-container article p {
  color: #FFFFFF;
}
.star-container article .btn {
  background-color: #FFFFFF;
  color: #262626;
}
.star-container article .btn:hover {
  background-color: #E0E1E3;
}
.star-container article picture {
  width: 100%;
  height: 100%;
  display: block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.star-container article .stripe-txt {
  display: -moz-grid;
  display: -ms-grid;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-template-areas: "label" "titolo" "pretitolo" "sottotitolo" "testo" "btn";
  column-gap: clamp(20px, 1.5vw, 30px);
  /* & > *:not(:last-child) {
     margin-bottom: $gap30;
   }*/
}
.star-container article .stripe-txt h1, .star-container article .stripe-txt h2 {
  grid-area: titolo;
  margin-bottom: clamp(20px, 1.5vw, 30px);
}
.star-container article .stripe-txt h2 {
  margin-top: clamp(20px, 1.5vw, 30px);
}
.star-container article .stripe-txt h3 {
  grid-area: sottotitolo;
  margin-bottom: clamp(20px, 1.5vw, 30px);
}
.star-container article .stripe-txt h4 {
  grid-area: pretitolo;
}
.star-container article .stripe-txt .action {
  grid-area: btn;
  height: 50px;
  font-size: 16px;
  margin-bottom: clamp(20px, 1.5vw, 30px);
}
.star-container article .stripe-txt.title-center h1, .star-container article .stripe-txt.title-center h2 {
  text-align: center;
}
.star-container article .stripe-txt .text {
  grid-area: testo;
  margin-bottom: clamp(20px, 1.5vw, 30px);
}
.star-container article .text p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*
section.strip.side-side.blog-star {
  padding: $gap30;

  .stripe-txt {

    h2 {
      margin-top: $gap30;
    }
  }

  .text {

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}*/
.blog-list-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(45px, 4vw, 80px);
}

#lista_paginazione_blog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 2fr));
  grid-auto-rows: 10px;
  gap: clamp(20px, 1.5vw, 30px);
}

.stileOrizzontale {
  /*grid-row: span 18;*/
  grid-row: span 10;
}

.stileQuadrato {
  /*grid-row: span 26;*/
  grid-row: span 15;
}

.stileVerticale {
  /*grid-row: span 34;*/
  grid-row: span 20;
}

#lista_paginazione_blog {
  /*columns: 4;
  column-gap: $gap50;*/
  width: 100%;
}
#lista_paginazione_blog article {
  break-inside: avoid;
  padding: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  background-color: #F7F7F7;
}
#lista_paginazione_blog article h3 {
  font-size: 18px;
  line-height: 120%;
  margin: 16px 0 clamp(24px, 2vw, 32px) 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 45px;
}
#lista_paginazione_blog article .section-label {
  gap: 10px;
  width: 100%;
  color: #262626;
  font-size: 14px;
}
#lista_paginazione_blog article picture {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  height: calc(100% - 100px);
  display: block;
  width: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  filter: grayscale(100%);
  -webkit-transition: filter 0.5s ease 0s;
  -moz-transition: filter 0.5s ease 0s;
  -ms-transition: filter 0.5s ease 0s;
  -o-transition: filter 0.5s ease 0s;
  transition: filter 0.5s ease 0s;
}
#lista_paginazione_blog article:hover picture {
  filter: grayscale(0%);
}
#lista_paginazione_blog article a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------------------------------- */
/* DETAIL ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
.blog-article {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: clamp(30px, 2.5vw, 50px);
  padding-bottom: clamp(70px, 8vw, 130px);
  /* Il genitore (.page-side-menu) e' un flex a colonna con align-items:
     flex-start, che sull'asse orizzontale lascia l'item dimensionarsi sul
     proprio contenuto invece di stirarlo. Senza questo width, quando il
     contenuto ha un min-content piu' largo dello spazio disponibile (es. l'ul
     di .utility, che ha white-space: nowrap) l'articolo sfora e allarga la
     pagina, e lo scroll interno dell'ul non si attiva mai. */
  width: 100%;
}
.blog-article .blog-gallery {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
}
.blog-article h3 {
  margin-top: clamp(20px, 1.5vw, 40px);
  margin-bottom: 20px;
}
.blog-article img {
  -webkit-border-radius: clamp(12px, 2vw, 20px);
  -moz-border-radius: clamp(12px, 2vw, 20px);
  border-radius: clamp(12px, 2vw, 20px);
}
.blog-article .tags img {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.blog-article .avatar img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.blog-article cite {
  font-size: clamp(18px, 1.5vw, 20px) !important;
  padding: 3% 5%;
  margin-top: clamp(20px, 1.5vw, 40px);
  border-left: 2px solid #E0E1E3;
  font-style: italic;
}
.blog-article cite strong {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(18px, 1.5vw, 20px) !important;
  border-bottom: 0;
  display: inline;
  padding-bottom: unset;
  font-style: italic;
}
.blog-article .gallery {
  width: 100%;
}
.blog-article picture {
  width: 100%;
  /*aspect-ratio: 2/1;*/
  aspect-ratio: 3/2;
}
.blog-article picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------------------------------- */
/* MEDIA QUERY ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
@media all and (max-width: 1100px) {
  .star-container article {
    flex-direction: column;
  }
  .star-container article .five, .star-container article .seven {
    width: 100%;
  }
  .star-container article picture {
    aspect-ratio: 2/1;
  }
  .star-container article h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 52px;
  }
  .star-container article .text p {
    display: none;
  }
}
@media all and (max-width: 1100px) {
  #lista_paginazione_blog {
    grid-template-columns: repeat(auto-fill, minmax(33%, 2fr));
  }
}
@media all and (max-width: 568px) {
  .star-container {
    flex-direction: column;
  }
  .star-container article {
    width: 100%;
  }
  .star-container article h2 {
    height: auto;
  }
}
@media all and (max-width: 568px) {
  #lista_paginazione_blog {
    grid-template-columns: repeat(auto-fill, minmax(100%, 2fr));
  }
}

/*# sourceMappingURL=blog.css.map */