/* css/style.css — Ideas Consulting (clean, consistent) */



* { box-sizing: border-box; margin: 0; padding: 0; }



:root{

  --brand: #5d1010;

  --text: #222;

  --muted: #555;

  --line: #eee;

  --bg: #ffffff;

}



body{

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}



a{ color: inherit; }

img{ max-width: 100%; display: block; }



/* =========================

   HEADER / NAV

========================= */

.site-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding: 16px 32px;

  border-bottom: 1px solid var(--line);

}



.logo{

  display:flex;

  align-items:center;

  gap:10px;

}



.logo img{

  height:42px;

  width:auto;

}



.site-nav a{

  text-decoration:none;

  color: var(--muted);

  margin-left: 16px;

  font-size: 0.95rem;

}



.site-nav a:hover{ color: var(--brand); }



/* =========================

   LAYOUT GENERALE PAGINE

========================= */

.page{

  max-width: 1000px;

  margin: 0 auto;

  padding: 40px 20px 60px;

}



.page h1{

  color: var(--brand);

  font-size: 1.9rem;

  margin-bottom: 10px;

}



.page h2{

  color: var(--brand);

  font-size: 1.25rem;

  margin: 26px 0 8px;

}



.page p{ margin-bottom: 10px; color:#444; }

.page ul{ margin: 8px 0 12px 18px; }

.page li{ margin-bottom: 6px; }



/* =========================

   HOME HERO

========================= */

.hero-full{

  min-height: calc(100vh - 70px);

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding: 40px 20px;

}



.hero-inner{

  max-width: 980px; /* fondamentale per far stare loghi + ritratto + loghi */

  width:100%;

}



.hero-title{

  font-size: 2rem;

  color: var(--brand);

  margin-bottom: 8px;

}



.hero-subtitle{

  font-size: 1rem;

  color: var(--muted);

  margin-bottom: 20px;

}



/* Wrapper: loghi sx / ritratto / loghi dx */

.portrait-logos-wrapper{

  display:flex;

  justify-content:center;

  align-items:center;

  gap: 28px;

  margin-top: 24px;

  flex-wrap: nowrap; /* evita che vadano sopra su desktop */

}



/* Colonne loghi */

.side-logos{

  flex: 0 0 190px;

  display:flex;

  flex-direction:column;

  gap: 14px;

  align-items:center;

  opacity: 0.92;

}



/* Box loghi uniformi */

.logo-box{

  width: 190px;

  height: 48px;

  display:flex;

  align-items:center;

  justify-content:center;

}



.logo-box img{

  max-width: 85%;

  max-height: 85%;

  width: auto;

  height: auto;

  object-fit: contain;

}



/* Ritratto duale cliccabile */

.portrait-wrapper{

  position: relative;

  width: 640px;

  flex: 0 0 auto;

}



.portrait-wrapper img{

  width:100%;

  border-radius: 18px;

  box-shadow: 0 14px 35px rgba(0,0,0,0.15);

}



.portrait-zone{

  position:absolute;

  top:0; bottom:0;

  width:50%;

  cursor:pointer;

}



.portrait-zone.left{ left:0; }

.portrait-zone.right{ right:0; }



/* =========================

   FOOTER

========================= */

.site-footer{

  border-top: 1px solid var(--line);

  padding: 28px 20px;

  text-align:center;

  font-size: 14px;

  color: #777;

}



.site-footer a{

  text-decoration:none;

}



.site-footer a:hover{

  text-decoration:underline;

}



.footer-content{

  max-width: 1000px;

  margin: 0 auto;

  display: grid;

  gap: 14px;

}



.footer-contacts p,

.footer-legal p{ margin:0; }



/* =========================

   CONTATTI (FORM)

========================= */

.form{

  max-width: 720px;

  margin: 18px auto 0;

  text-align:left;

}



.form-group{ margin-bottom: 14px; }



label{

  display:block;

  font-size:0.9rem;

  color:#555;

  margin-bottom: 4px;

}



input[type="text"],

input[type="email"],

textarea{

  width:100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 10px;

  font-size: 0.95rem;

}



textarea{ min-height: 140px; resize: vertical; }



.btn{

  display:inline-block;

  padding: 10px 20px;

  background: var(--brand);

  color:#fff;

  border:none;

  border-radius: 999px;

  cursor:pointer;

  font-size: 0.95rem;

}



.btn:hover{ background:#791515; }



/* =========================

   RESPONSIVE

========================= */

@media (max-width: 900px){

  .portrait-logos-wrapper{

    gap: 18px;

  }

  .side-logos{ flex-basis: 160px; }

  .logo-box{ width: 160px; height: 44px; }

  .portrait-wrapper{ width: 300px; }

}



@media (max-width: 768px){

  .site-header{

    flex-direction:column;

    gap: 10px;

    padding: 14px 18px;

  }



  /* su mobile: loghi sotto al ritratto */

  .portrait-logos-wrapper{

    flex-direction:column;

    flex-wrap: wrap;

    gap: 18px;

  }



  .side-logos{

    width: 100%;

    flex: 0 0 auto;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content:center;

  }



  .logo-box{

    width: 140px;

    height: 42px;

  }

}



@media (max-width: 520px){

  .hero-title{ font-size: 1.55rem; }

  .portrait-wrapper{ width: 290px; }

}



/* CENTRA TUTTO IL BLOCCO HERO */

.hero-inner{

  max-width: 600px;   /* oppure 620/700 se vuoi più respiro */

  margin: 0 auto;     /* questa è la chiave */

}



/* CENTRA L’IMMAGINE DUALE */

.portrait-wrapper{

  margin: 0 auto;     /* chiave */

  display: block;

}



/* EXTRA: se qualche regola ti “sposta” l’immagine */

.portrait-wrapper img{

  margin: 0 auto;

}



/* FORZA IL CENTRAGGIO DELLA HERO */

.hero-full {

  text-align: center;

}



/* CENTRA IL CONTENITORE */

.hero-inner {

  margin-left: auto;

  margin-right: auto;

}



/* CENTRA ESPLICITAMENTE L’IMMAGINE */

.portrait-wrapper {

  margin-left: auto;

  margin-right: auto;

  display: block;

}



.bio-over-image .btn-bio,

.bio-over-image{

  margin-bottom: 6px;

}