/* ==================================================
   BENITO STIRPE — STILE UNIFORME AETOS
================================================== */

@import url("../../style.css");


/* ==================================================
   CORREZIONI SPECIFICHE DELLA PAGINA
================================================== */

body.project-detail{
  padding-top:0;
}


/* ==================================================
   SLIDESHOW DELLA COPERTINA
================================================== */

.project-hero{
  position:relative;
  overflow:hidden;
  background:#061831;
}

.project-hero .hero-slide{
  position:absolute;
  inset:0;
  z-index:0;

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  opacity:0;
  transform:scale(1.07);

  transition:
    opacity 1.4s ease,
    transform 7s ease;
}

.project-hero .hero-slide.active{
  opacity:1;
  transform:scale(1);
}

.project-hero .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:linear-gradient(
    180deg,
    rgba(6,24,49,.12),
    rgba(6,24,49,.95)
  );
}

.project-hero-content{
  position:relative;
  z-index:2;

  max-width:1100px;
}

.hero-description{
  max-width:900px;

  color:#eef5fa;

  font-size:21px;
}


/* ==================================================
   PULSANTI DELLA COPERTINA
================================================== */

.project-hero-buttons{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;

  gap:18px;

  margin-top:35px;
}

.project-hero-buttons .btn{
  min-width:190px;

  text-align:center;
}


/* ==================================================
   DATI PRINCIPALI
================================================== */

.project-info{
  grid-template-columns:repeat(3,1fr);
}


/* ==================================================
   NUMERI DEL PROGETTO
================================================== */

.numbers{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:20px;

  margin-top:42px;
  padding:0;

  background:transparent;
}

.numbers article{
  padding:28px;

  background:#f3f6f9;

  border-radius:14px;

  text-align:center;
}

.numbers strong{
  display:block;

  margin-bottom:9px;

  color:#075f8f;

  font-size:31px;
  line-height:1.15;
}

.numbers span{
  color:#657286;

  font-weight:700;
}


/* ==================================================
   COLONNE TECNICHE
================================================== */

.project-columns article{
  padding:28px;

  background:rgba(255,255,255,.07);

  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
}

.project-columns article h3{
  margin-bottom:12px;

  color:#8fd3ff;

  font-size:23px;
}

.project-columns article p{
  color:#d8e3ef;
}


/* ==================================================
   ANALISI E VERIFICHE
================================================== */

.analysis{
  max-width:1100px;

  margin-top:40px;
}

.analysis article{
  display:grid;
  grid-template-columns:70px 1fr;

  gap:20px;

  padding:25px 0;

  border-bottom:1px solid #d8dfe5;
}

.analysis > article > span{
  color:#075f8f;

  font-size:28px;
  font-weight:900;
}

.analysis h3{
  margin-bottom:5px;

  color:#061831;

  font-size:23px;
}

.analysis p{
  color:#657286;
}


/* ==================================================
   GALLERIA
================================================== */

.gallery-section{
  background:#f4f6f8;
}

.gallery figure.technical-image img{
  object-fit:contain;

  padding:25px;

  background:#ffffff;
}


/* ==================================================
   RISULTATO
================================================== */

.result{
  color:#ffffff;

  background:linear-gradient(
    135deg,
    #075f8f,
    #061831
  );
}

.result h2{
  color:#ffffff;
}

.result > p{
  color:#e2ebf0;
}


/* ==================================================
   ANIMAZIONI
================================================== */

.reveal{
  opacity:0;

  transform:translateY(35px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.visible{
  opacity:1;

  transform:none;
}


/* ==================================================
   TABLET
================================================== */

@media(max-width:900px){

  .project-info{
    grid-template-columns:repeat(2,1fr);
  }

  .numbers{
    grid-template-columns:repeat(2,1fr);
  }

}


/* ==================================================
   TELEFONO
================================================== */

@media(max-width:600px){

  .project-info,
  .numbers{
    grid-template-columns:1fr;
  }

  .analysis article{
    grid-template-columns:50px 1fr;

    gap:14px;
  }

  .project-hero-buttons{
    flex-direction:column;
    align-items:stretch;

    width:100%;
  }

  .project-hero-buttons .btn{
    width:100%;
    min-width:0;
  }

}