/* ============================================================
   site.css — stili custom caricati DOPO il CSS Webflow.
   Nav fedele alla live: barra #1a1a1a, Montserrat 500,
   letter-spacing .5px, riga rossa #e20303 (2px), bandierine
   simmetriche ai bordi e STUDIO sempre al centro esatto.
   ============================================================ */

:root { --mp-red: #e20303; --mp-bar: #1a1a1a; --mp-bar2: #161616; }

/* Header (logo + barre) tutto sullo stesso grigio della live, sopra all'hero. */
.site-nav { position: relative; z-index: 50; background: var(--mp-bar); }
.site-nav .navigation { background: var(--mp-bar); }

/* --- barra principale: [🇬🇧]  PROGETTI  STUDIO  PRESS  [🇮🇹] ---
   Colonne esterne (bandiere) di larghezza uguale -> l'area link è centrata
   sulla pagina; dentro, griglia 1fr|auto|1fr -> STUDIO è SEMPRE al centro. */
.mp-main {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  background: var(--mp-bar);
  padding: 4px 14px;
}
.mp-main__links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colonne UGUALI -> STUDIO sempre al centro,
                                         spaziatura indipendente dalla lingua */
  align-items: center;
  min-width: 0;
}
.mp-main__links > a { justify-self: center; } /* testo di ogni voce centrato nella sua colonna */
.mp-main__link {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 22px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.mp-main__link:hover { color: var(--mp-red); }
.mp-main__link.is-active { border-bottom-color: var(--mp-red); }

/* --- bandierine lingua (colonne esterne, allineate ai bordi) --- */
.mp-lang {
  display: inline-flex;
  align-items: center;
  opacity: .45;
  transition: opacity .15s ease;
}
.mp-lang--left { justify-self: start; }
.mp-lang--right { justify-self: end; }
.mp-lang.is-active { opacity: 1; }
.mp-lang:hover { opacity: 1; }
.mp-lang img { width: 30px; height: 20px; object-fit: cover; display: block; }

/* --- barra categorie: OUTDOOR HOUSES FLATS … VIDEOS --- */
.mp-cats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 4px;
  background: var(--mp-bar2);
}
.mp-cats__link {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 13px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.mp-cats__link:hover { color: var(--mp-red); }
.mp-cats__link.is-active { border-bottom-color: var(--mp-red); }

/* --- HERO della home: slider a flusso normale, SOTTO la nav --- */
.mp-hero { position: relative; height: 76vh; margin-top: 0; overflow: hidden; }
/* slide a tutto schermo (cover), niente bande nere ai lati
   (l'export Webflow imposta .slide-15 a background-size:contain) */
.mp-hero .slide-15 { background-size: cover !important; background-position: center !important; }

/* --- icone social del footer (Font Awesome Brands). L'export Webflow non
   include il @font-face né i glifi: li ripristiniamo qui. --- */
@font-face {
  font-family: 'Fa brands 400';
  src: url('/fonts/fa-brands-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.div-block-17 .link-4 { font-family: 'Fa brands 400', sans-serif; text-decoration: none; }
.div-block-17 .link-4::before { font-family: 'Fa brands 400'; font-size: 28px; }
.div-block-17 .link-4:nth-child(1)::before { content: '\f082'; } /* Facebook */
.div-block-17 .link-4:nth-child(2)::before { content: '\f16d'; } /* Instagram */
.div-block-17 .link-4:nth-child(3)::before { content: '\f167'; } /* YouTube */
.div-block-17 .link-4:nth-child(4)::before { content: '\f08c'; } /* LinkedIn */
.div-block-17 .link-4:nth-child(5)::before { content: '\f27c'; } /* Houzz */

/* --- SLIDER dettaglio: foto INTERA su sfondo scuro del sito (come richiesto).
   Le foto verticali non vengono più tagliate (contain invece di cover). --- */
.main-slider .w-slide.mp-slide {
  background-color: #0f0f0f;       /* sfondo del sito dietro le verticali */
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- HERO home: foto verticali mostrate INTERE (contain) su sfondo scuro;
   le orizzontali restano a tutto schermo (cover, regola .mp-hero .slide-15). --- */
.mp-hero .w-slide.mp-hero-vert {
  background-color: #0f0f0f;
  background-size: contain !important;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- navigazione slider: pallini tondi (non numeri), niente accavallamento
   con le frecce anche con 15+ foto --- */
.mp-slidenav { padding: 8px 0; }
.mp-slidenav .w-slider-dot {
  width: 9px; height: 9px; margin: 0 5px;
  background: rgba(255,255,255,.45); border-radius: 50%;
}
.mp-slidenav .w-slider-dot.w-active { background: #fff; }

/* --- FORM contatti: responsive + textarea non rompibile --- */
/* la sezione "messaggio" (5° campo) occupa tutta la larghezza */
.contact-form-grid > div:nth-child(5) { grid-column: 1 / -1; }
/* textarea: si allarga al contenitore, resize solo verticale, niente overflow */
.textarea, .contact-form-grid textarea {
  width: 100%;
  max-width: 100%;
  min-height: 120px;
  resize: vertical;     /* l'utente può solo allungarla in verticale, non romperla */
  box-sizing: border-box;
}
.contact-form-grid input { box-sizing: border-box; width: 100%; }
/* su schermi stretti: una sola colonna (niente quadratini a destra) */
@media screen and (max-width: 767px) {
  .contact-form-grid { grid-template-columns: 1fr !important; }
  .contact-form-grid > div:nth-child(5) { grid-column: auto; }
}

/* --- mobile: 3 voci SEMPRE su una riga, STUDIO centrato, niente a capo --- */
@media screen and (max-width: 767px) {
  .mp-main { grid-template-columns: 38px 1fr 38px; padding: 4px 6px; }
  .mp-main__link { padding: 9px 8px; font-size: 13px; letter-spacing: .3px; }
  .mp-lang img { width: 28px; height: 19px; }
  .mp-cats {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mp-cats::-webkit-scrollbar { display: none; }
  .mp-hero { height: 60vh; }
}
@media screen and (max-width: 400px) {
  .mp-main { grid-template-columns: 32px 1fr 32px; }
  .mp-main__link { padding: 9px 5px; font-size: 12px; letter-spacing: 0; }
  .mp-lang img { width: 24px; height: 16px; }
}