/* ################################################################### */
/* Stile per il logo Model Studio nella home */
/* ################################################################### */

/* Stile per il logo nella home */
#banner .logo img {
  height: 15em;
  width: 15em;
  border-radius: 100%;
}

/* Stile per il logo nell'header */
#header img {
  height: 2.2em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 1em;
}

/* ################################################################### */
/* Stili per il carosello orizzontale nella pagina home*/
/* ################################################################### */

.carousel-wrapper {
  position: relative;
  width: 100%;
  margin: 2em 0;
  padding: 0 10px; /* Spazio per i pulsanti */
}

.carousel-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  transition: transform 0.5s ease-in-out;
  gap: 2em;
  margin: 0 !important;
}

.carousel-track .carousel-item {
  flex: 0 0 calc(50% - 1em);
  min-width: 0;
  margin: 0 !important;
  width: auto !important;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  font-size: 1.6em;
  box-shadow: none;
}

.carousel-btn:hover {
  background: transparent;
  transform: translateY(-50%) scale(1.1);
  border: 0;
  outline: 0;
  box-shadow: none;
}

.carousel-btn:active {
  background: transparent;
  transform: translateY(-50%) scale(0.95);
  border: 0;
  outline: 0;
  box-shadow: none;
}

.carousel-btn:focus {
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.carousel-btn-left {
  left: -15%;
}

.carousel-btn-right {
  right: -15%;
}

.carousel-btn i {
  pointer-events: none;
}

/* Stili per le immagini degli articoli nel carosello e nella pagina blog */
.carousel-item .image,
.page-blog .features article .image {
  width: 100% !important;
  height: 22vw;
  overflow: hidden;
  position: relative;
  display: block;
  margin-bottom: 1.75em !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  border-radius: 5px 5px 0 0;
}

.carousel-item .image img,
.page-blog .features article .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 5px 5px 0 0;
}

/* Responsive: su schermi più piccoli mostra 2 o 1 articolo */
@media screen and (max-width: 980px) {
  .carousel-wrapper {
    padding: 0 40px;
  }

  .carousel-track .carousel-item {
    flex: 0 0 calc(50% - 1em);
  }

  .carousel-item .image,
  .page-blog .features article .image {
    height: 220px;
  }

  .carousel-btn-left {
    left: -12%;
  }

  .carousel-btn-right {
    right: -12%;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1em;
  }
}

@media screen and (max-width: 736px) {
  .carousel-wrapper {
    padding: 0 20px;
  }

  .carousel-track .carousel-item {
    flex: 0 0 100%;
  }

  .carousel-item .image,
  .page-blog .features article .image {
    height: 200px;
  }

  .carousel-btn-left {
    left: -10%;
  }

  .carousel-btn-right {
    right: -10%;
  }
}

/* ################################################################### */
/* Stili per modificare le immagini delle pagine secondarie nei banner */
/* ################################################################### */

/* Variabile CSS per il gradiente comune */
:root {
  --page-gradient: linear-gradient(
    to top,
    rgba(36, 0, 70, 0.8),
    rgba(36, 0, 70, 0.8)
  );
}

/* Regole comuni per tutte le pagine secondarie */
body[class*="page-"] {
  --page-bg-image: url("../../images/default.webp");
  background-image: var(--page-gradient), var(--page-bg-image);
}

/* Regole responsive comuni per tablet/desktop */
@media screen and (max-width: 1280px) {
  body[class*="page-"] #banner,
  body[class*="page-"] #wrapper > header,
  body[class*="page-"] #footer {
    background-image: var(--page-gradient), var(--page-bg-image);
  }
}

/* Regole responsive comuni per mobile */
@media screen and (max-width: 736px) {
  body[class*="page-"] #wrapper > header {
    background-size: auto, cover !important;
    background-position: center, center !important;
  }
}

/* Sovrascritture specifiche per le immagini di ogni pagina */
body.page-chi-siamo {
  --page-bg-image: url("../../images/cartamodello-sviluppo.webp");
}

body.page-cosa-facciamo {
  --page-bg-image: url("../../images/strumenti-per-sartoria-modellista-abbigliamento.webp");
}

body.page-come-operiamo {
  --page-bg-image: url("../../images/banco-modellista-abbigliamento-manichino.webp");
}

body.page-software-modelstudio {
  --page-bg-image: url("../../images/blog-model-studio-thumbnail.webp");
}

body.page-blog {
  --page-bg-image: url("../../images/home-header.webp");
}

body.page-blog-art-1 {
  --page-bg-image: url("../../images/blog-model-studio-thumbnail.webp");
}

body.page-blog-art-2 {
  --page-bg-image: url("../../images/blog-creazione-cartamodello-modelista-abbigliamento.webp");
}

body.page-blog-art-3 {
  --page-bg-image: url("../../images/blog-piazzati-modelleria-abbigliamento.webp");
}

body.page-blog-art-4 {
  --page-bg-image: url("../../images/blog-swatches-tessuti-modellesta-abbiglaimento.webp");
}

body.page-blog-art-5 {
  --page-bg-image: url("../../images/blog-industriallizzazione-abbiglaimento-modelleria.webp");
}

/* ################################################################### */
/* Stili per la sezione collaborazioni in chi-siamo.html */
/* ################################################################### */

.collaborazioni-logos-container {
  display: flex;
  gap: 2em;
  justify-content: center;
  align-items: center;
  margin: 2em 0;
}

.logo-box {
  background: #fff;
  border-radius: 12px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.logo-box img {
  height: 85px;
  width: auto;
  display: block;
}

@media screen and (max-width: 736px) {
  .collaborazioni-logos-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1.5em;
    justify-content: center;
    align-items: center;
  }

  .logo-box {
    flex: 1 1 40%;
    max-width: 47%;
    min-width: 120px;
    box-sizing: border-box;
    padding: 0.75em;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-box img {
    height: 60px;
    width: auto;
    display: block;
  }
}

/* ################################################################### */
/* Stili per il video nella pagina software-modelstudio */
/* ################################################################### */

.video-container {
  width: 100%;
  max-width: 40vw;
  margin: 2em auto 0;
  padding: 0 2em;
}

@media screen and (max-width: 980px) {
  .video-container {
    max-width: 80vw;
    padding: 0 1.5em;
  }
}

@media screen and (max-width: 736px) {
  .video-container {
    max-width: 100%;
    padding: 0 1em;
  }
}

/* ################################################################### */
/* Stili per la classe secondary del wrapper */
/* ################################################################### */

/* Gradiente uniforme: più chiaro in alto (#5a0fa0) -> più scuro in basso (#1d0438) */
.wrapper.secondary {
  background: linear-gradient(
    to bottom,
    #5a0fa0 0%,
    #3c096c 50%,
    #1d0438 100%
  ) !important;
}

/* :before - parte alta: gradiente da chiaro a medio per continuità */
.wrapper.secondary:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0' y1='0' x2='0' y2='100'%3E%3Cstop offset='0%25' stop-color='%235a0fa0'/%3E%3Cstop offset='100%25' stop-color='%233c096c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,100 100,0 100,100' fill='url(%23grad1)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 0 #3c096c, 0 0 0 0 #3c096c !important;
}

/* :after - parte bassa: gradiente invertito (perché l'elemento è capovolto con scaleY(-1)) */
/* Il gradiente nell'SVG va da scuro a medio, così quando capovolto visivamente va da medio a scuro */
.wrapper.secondary:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='grad2' x1='0' y1='0' x2='0' y2='100'%3E%3Cstop offset='0%25' stop-color='%231d0438'/%3E%3Cstop offset='100%25' stop-color='%233c096c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,100 100,0 100,100' fill='url(%23grad2)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 0 #1d0438, 0 0 0 0 #1d0438 !important;
}