/* ============================================================
   Stili dei CASI STUDIO (CPT "caso").
   Template: single-caso.php e archive-caso.php
   ============================================================ */

.caso_hero {
   padding: 10.569vw 6.944vw 6vw 6.944vw;
   display: flex;
   flex-direction: row;
   gap: 8.681vw;
   align-items: center;
}

.caso_hero_testo {
   display: flex;
   flex-direction: column;
   gap: 2.292vw;
}

.caso_hero_testo_title {
   display: flex;
   flex-direction: column;
   gap: 1.181vw;
}

.caso_hero_img>img {
   width: 35.069vw !important;
   height: auto !important;
}

.caso_corpo {
   display: flex;
   flex-direction: row;
   gap: 8.75vw;
   margin: 0 6.944vw;
   border-top: 1px solid var(--grigio-chiaro-2);
   padding: 3.75vw 0 8vw 0;
}

.caso_corpo_indice {
   border-left: 1px solid var(--giallo, #F9B417);
   display: flex;
   flex-direction: column;
   gap: 1.597vw;
   padding-left: 1.389vw;
   width: 26%;
   height: fit-content;
   /* Resta fisso mentre si scorre il caso; si sblocca a fine .caso_corpo. */
   position: sticky;
   top: 8vw;
}

.caso_testo {
   width: 64%;
}

.caso_indice_lista {
   display: flex;
   flex-direction: column;
   gap: 0.833vw;
}

.caso_testo h3:nth-child(1) {
   padding-top: 0;
}

.caso_testo h3 {
   color: var(--nero, #363636);
   font-family: var(--font-sora);
   font-size: 2.153vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
   padding-top: 2vw;
}

.caso_testo p,
.caso_testo ol,
.caso_testo ul {
   color: #6E6E6E;
   font-family: var(--font-instrument);
   font-size: 1.111vw;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}

.caso_archive {
   padding: 5vw 6.944vw 9.306vw 6.944vw;
   gap: 2.222vw;
   display: flex;
   flex-direction: column;
}

.caso_list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-row-gap: 1.389vw;
   grid-column-gap: 4.167vw;
}

.caso_citazione {
   display: flex;
   flex-direction: column;
   gap: 2.778vw;
   padding: 3.333vw;
   border-radius: 16px;
   background: var(--grigio-chiaro, #F3F3F3);
   margin-top: 4.861vw;
}

.citazione_user {
   display: flex;
   flex-direction: row;
   gap: 0.833vw;
   align-items: center;
}

.caso_citazione_img>img {
   width: 2.222vw;
}

.casoButton {
   margin-top: 70px;
}

.caso_archive {
   padding: 15.069vw 28.958vw 5.208vw 28.958vw;
   align-items: center;
   text-align: center;
   gap: 1.319vw;
   display: flex;
   flex-direction: column;
}

.caso_lista {
   display: flex;
   flex-direction: column;
   gap: 1.667vw;
   padding: 0 14.236vw 12.153vw 14.236vw;
}

.caso_card {
   display: flex;
   flex-direction: row;
   row-gap: 2.778vw;
   padding: 1.111vw;
   border-radius: 24px;
   border: 1px solid var(--grigio-chiaro-2, #E5E5E5);
}

.caso_archive_card_img {
   width: 41%;
}

.caso_archive_card_img>img {
   width: 100%;
}

.caso_card_testo {
   display: flex;
   flex-direction: column;
   gap: 1.181vw;
   padding: 3.333vw 1.667vw 3.333vw 3.333vw;
   width: 59%;
   justify-content: center;
}

.caso_card button {
   margin-top: 8px;
}

@media screen and (max-width: 750px) {

   .caso_hero {
      flex-direction: column;
      gap: 10.256vw;
      padding: 37.692vw 6.154vw 8.974vw 6.154vw;
   }

   .caso_hero_testo_title {
      gap: 4.359vw;
   }

   .caso_hero_img>img {
      width: 100% !important;
   }

   .caso_corpo {
      border-top: 0;
      padding: 0 6.154vw 24.821vw 6.154vw;
      margin: 0;
      flex-direction: column;
      gap: 15.385vw;
   }

   .caso_corpo_indice {
      gap: 5.897vw;
      padding-left: 5.128vw;
      width: auto;
	   position: static !important;
   }

   .caso_testo p,
   .caso_testo ol,
   .caso_testo ul  {
      font-size: 3.333vw;
      width: auto;
   }

   .caso_testo {
      width: auto;
   }

   .caso_citazione {
      margin-top: 60px;
      padding: 6.154vw;
      gap: 10.256vw;
   }

   .caso_testo h3 {
      font-size: 6.154vw;
      padding-top: 8.205vw;
   }

   .caso_archive {
      padding: 12.821vw 6.154vw 36.667vw 6.154vw;
      gap: 6.154vw;
   }

   .caso_list {
      display: flex;
      flex-direction: row;
      gap: 9.231vw;
   }

   .citazione_user {
      gap: 3.077vw;
   }

   .caso_citazione_img>img {
      width: 8.205vw;
   }

   .casoButton {
      margin-top: 60px;
   }

   .caso_archive {
      padding: 33.077vw 6.154vw 15.385vw 6.154vw;
      gap: 4.359vw;
   }

   .caso_lista {
      padding: 0 6.154vw 25.641vw 6.154vw;
      gap: 6.154vw;
   }

   .caso_card {
      flex-direction: column;
      gap: 4.103vw;
      padding: 4.103vw;
   }

   .caso_card_testo {
      width: 100%;
      gap: 4.359vw;
   }

   .caso_archive_card_img {
      width: 100%;
   }

}