/* ==========================================================
   STUDIO DAMIANI – Event Production
   Foglio di stile principale

   TRE FASCE:
   • Desktop (da 1024 px): layout a 1280 px. --u vale 1px a 1280 px
     e scala in proporzione: più piccolo sotto i 1280, più grande
     sopra (fino a 1,5px = schermi da 1920 px).
     Esempio: calc(48 * var(--u)) = 48 px a 1280 px.
   • Tablet (768–1023 px): layout desktop ridotto, con caratteri minimi.
   • Smartphone (fino a 767 px): layout mobile a 390 px.
   ========================================================== */

:root {
  --u: min(1.5px, calc(100vw / 1280));
  --black: #000;
  --white: #fff;
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fade: 600ms;                        /* dissolvenze (da prototipo) */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Sfondo visibile quando si scorre oltre i bordi (effetto elastico su iPhone):
   bianco in cima, nero in fondo sotto il footer (classe impostata da main.js) */
html { background: var(--white); }
html.at-bottom { background: var(--black); }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* Crenatura -3 su TUTTI i testi, in ogni formato.
   Applicata a ogni elemento perché l'"em" deve riferirsi
   alla dimensione del testo di quell'elemento. */
body, body * { letter-spacing: -0.03em; }

/* pulsanti e campi del modulo non ereditano il carattere da soli */
button, input, textarea, select { font-family: inherit; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }

.br-m { display: none; }                /* a capo solo su smartphone */
.read-more { display: none; }           /* "Read more" solo su smartphone */

/* ---------- TITOLI GRANDI: Montserrat Bold 48 ---------- */
.title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: max(28px, calc(48 * var(--u)));
  line-height: 1.2;
}

/* ---------- LINEA: 1 px nera, margini 57 px ---------- */
.divider {
  border: 0;
  border-top: 1px solid var(--black);
  margin: 0 auto;
  width: calc(100% - 2 * 57 * var(--u));
}

/* ---------- HEADER: 117 px, logo 178 × 27 ---------- */
.site-header {
  height: calc(117 * var(--u));
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.logo img {
  width: max(140px, calc(178 * var(--u)));
  height: auto;
}

/* ---------- SELETTORE LINGUA EN | IT ---------- */
.site-header { position: relative; }
.lang-switch {
  position: absolute;
  top: 50%;
  right: calc(57 * var(--u));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: max(11px, calc(12 * var(--u)));
  line-height: 1;
}
.lang-switch a { opacity: .35; transition: opacity .2s ease; }
.lang-switch a:hover,
.lang-switch a[aria-current="page"] { opacity: 1; }

/* ---------- HERO: 1280 × 722, dissolvenza ---------- */
.hero {
  position: relative;
  height: calc(722 * var(--u));
  overflow: hidden;
  background: #111;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--fade) ease-in-out;
}
.hero__img.is-active { opacity: 1; }

/* ---------- THE ART OF CREATING ---------- */
.about {
  padding: calc(175 * var(--u)) calc(57 * var(--u)) calc(140 * var(--u));
}
.about__text {
  margin: calc(64 * var(--u)) auto 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;                  /* a capo come da grafica */
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1.25;
}
.about__text p { margin: 0 0 1.25em; }
.about__text p:last-child { margin-bottom: 0; }

/* ---------- SERVICES ---------- */
.services { padding: calc(140 * var(--u)) 20px 0; }
.services__list {
  margin-top: calc(52 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  justify-content: center;
  column-gap: calc(132 * var(--u));     /* spazio tra le due colonne */
  row-gap: calc(14 * var(--u));
}
.services__list li {
  display: flex;
  align-items: baseline;
  gap: calc(9 * var(--u));              /* spazio tra numero e testo */
  text-transform: uppercase;
  font-size: max(11px, calc(16 * var(--u)));
  line-height: 1.2;
}
.services__list .num {
  flex: 0 0 auto;
  width: 2.3em;
  text-align: right;
  font-size: max(20px, calc(32 * var(--u)));
}

/* ---------- GALLERIA: foto 358 × 249, spazio 30 ---------- */
.gallery { padding: calc(245 * var(--u)) calc(73 * var(--u)) 0; }
.gallery__pages { display: grid; }
.gallery__page {
  grid-area: 1 / 1;                     /* pagine sovrapposte per la dissolvenza */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(30 * var(--u));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease-in-out, visibility 0s linear var(--fade);
}
.gallery__page.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fade) ease-in-out, visibility 0s;
}
.gallery__pages a {
  display: block;
  aspect-ratio: 358 / 249;
  overflow: hidden;
  background: #eee;
  cursor: zoom-in;
}
.gallery__pages img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.gallery__pages a:hover img { transform: scale(1.04); }

/* Rettangoli 45 × 6 */
.gallery__dots {
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--u));
  margin-top: calc(46 * var(--u));
}
.gallery__dots button {
  position: relative;
  width: calc(45 * var(--u));
  height: 6px;
  padding: 0;
  border: 1px solid var(--black);
  border-radius: 3px;
  background: var(--white);
  cursor: pointer;
  transition: background var(--fade) ease;
}
.gallery__dots button::after { content: ""; position: absolute; inset: -14px -3px; } /* area di tocco più ampia */
.gallery__dots button[aria-selected="true"] { background: var(--black); }
.gallery__dots button:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* ---------- PARTNER: loghi max 40 px, 35 px tra le righe ---------- */
.partners { padding: calc(198 * var(--u)) 20px calc(105 * var(--u)); }
.partners__logos {
  margin-top: calc(70 * var(--u));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(35 * var(--u)) calc(60 * var(--u));
}
.partners__logos .d-break { flex-basis: 100%; height: 0; margin-top: calc(-35 * var(--u)); }
.partners__logos img {
  /* altezza di ogni logo in index.html (style="--h:..."), max 40 */
  height: calc(var(--h, 30) * var(--u));
  width: auto;
}

/* ---------- CONTATTI ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  /* stesso margine (175 a 1280 px) a sinistra dei testi e a destra del pulsante */
  padding: calc(105 * var(--u)) calc(175 * var(--u)) calc(120 * var(--u));
}
.contact__info {
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1.25;
}
.contact__info a:hover { text-decoration: underline; }

/* Pulsante: Montserrat Bold 29 (ridotto da 36) */
.btn {
  justify-self: end;
  display: inline-block;
  padding: calc(14 * var(--u)) calc(13 * var(--u));
  border: 1.5px solid var(--black);
  font-size: max(18px, calc(29 * var(--u)));
  line-height: 1.2;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--black); color: var(--white); }

/* ---------- FOOTER: 145 px, nero ---------- */
.site-footer {
  min-height: calc(145 * var(--u));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 24px calc(57 * var(--u));
  background: var(--black);
  color: var(--white);
  font-size: max(9px, calc(12 * var(--u)));
  line-height: 1.3;
}
.site-footer p { margin: 0; }
.site-footer__right { justify-self: end; text-align: right; }
.site-footer__right p { margin-bottom: 8px; }
.site-footer a:hover { text-decoration: underline; }
.social { display: inline-flex; }
.social svg { width: max(12px, calc(16 * var(--u))); height: max(12px, calc(16 * var(--u))); }
.social:hover { opacity: .7; }

/* ---------- MODULO CONTATTI ---------- */
.contact-modal {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: clamp(28px, 5vw, 56px);
  border: 1.5px solid var(--black);
  background: var(--white);
  color: var(--black);
  overflow: auto;
}
.contact-modal[open] { animation: fadeIn var(--fade) ease; }
.contact-modal::backdrop { background: rgba(0, 0, 0, .6); }
.contact-modal__close {
  position: absolute;
  top: 10px;
  right: 16px;
  border: 0;
  background: none;
  font: 700 36px/1 var(--font);
  cursor: pointer;
}
.contact-form .title { margin-bottom: clamp(24px, 4vw, 40px); font-size: clamp(26px, 4vw, 40px); }
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.contact-form__grid .full { grid-column: 1 / -1; }
.contact-form label { display: block; font-size: 13px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--black);
  border-radius: 0;
  background: transparent;
  font: 500 16px/1.4 var(--font);       /* 16px: evita lo zoom automatico su iPhone */
  color: var(--black);
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.contact-form [aria-invalid="true"] { border-bottom-color: #c00; }
.contact-form__privacy {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 11px !important;
  line-height: 1.4;
}
.contact-form__privacy input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--black); }
.contact-form__privacy a { text-decoration: underline; }
.contact-form__status { min-height: 1.4em; margin: 18px 0 0; font-size: 13px; }
.contact-form__status.is-error { color: #c00; }
.contact-form .contact-form__submit { margin-top: 12px; padding: 10px 14px; font-size: 20px; font-weight: 600; cursor: pointer; background: var(--white); color: var(--black); font-family: var(--font); }
.contact-form .contact-form__submit:hover,
.contact-form .contact-form__submit:focus-visible { background: var(--black); color: var(--white); }
.contact-form .contact-form__submit[disabled] { opacity: .5; cursor: wait; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 680px) {
  .contact-form__grid { grid-template-columns: 1fr; }
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  background: rgba(0, 0, 0, .92);
  animation: fadeIn .3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: min(1200px, 100%); max-height: 100%; object-fit: contain; }
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--white);
  font-family: var(--font);
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.lightbox button:hover { opacity: 1; }
.lightbox__close { top: 14px; right: 20px; font-size: 40px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 56px; padding: 10px; }
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================
   TABLET (768–1023 px)
   ========================================================== */
@media (max-width: 1023px) {
  .about { padding-top: 80px; padding-bottom: 70px; }
  .about__text { white-space: normal; max-width: 640px; margin-top: 36px; }
  .about__text .br-d { display: none; }
  .services { padding-top: 70px; }
  .services__list { margin-top: 36px; column-gap: 40px; row-gap: 12px; }
  .gallery { padding-top: 90px; }
  .gallery__page { gap: 16px; }
  .gallery__dots { gap: 8px; margin-top: 28px; }
  .gallery__dots button { width: 45px; }
  .partners { padding-top: 90px; padding-bottom: 60px; }
  .partners__logos { margin-top: 40px; gap: 26px 40px; }
  .partners__logos .d-break { margin-top: -26px; }
  .partners__logos img { height: calc(var(--h, 30) * .8px); }
  .contact { padding-top: 60px; padding-bottom: 70px; }
  .btn { padding: 11px 13px; }
}

/* ==========================================================
   SMARTPHONE (fino a 767 px) – misure dal layout a 390 px
   ========================================================== */
@media (max-width: 767px) {
  .br-m { display: inline; }
  .br-d { display: none; }

  .title { font-size: 42px; line-height: 1.03; }

  /* Header 124 px, logo 178 × 27 a y 59 */
  .site-header { height: 124px; align-items: flex-start; padding-top: 59px; }
  .logo img { width: 178px; }
  .lang-switch { top: 72.5px; right: 27px; font-size: 12px; }   /* centrato sul logo */

  /* Immagine 390 × 390 */
  .hero { height: auto; aspect-ratio: 1 / 1; }

  /* The art of creating */
  .about { padding: 40px 36px 70px 27px; }
  .about .title { text-align: left; }
  .about__text {
    max-width: none;
    margin: 28px 0 0 5px;
    text-align: left;
    white-space: normal;
    font-size: 16px;
    line-height: 1.22;
  }
  .about__text p { margin-bottom: 1.22em; }
  .about:not(.is-expanded) .more { display: none; }
  .about:not(.is-expanded) .about__text p { margin-bottom: 0; }

  /* Read more: Montserrat Medium 12 */
  .read-more {
    display: inline-block;
    margin: 20px 0 0 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--black);
    font: 500 12px/1.2 var(--font);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  /* Linee: margini 27 px */
  .divider { width: calc(100% - 54px); }

  /* Services */
  .services { padding: 70px 20px 0 33px; }
  .services .title { text-align: left; }
  .services__list {
    margin-top: 47px;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    justify-content: start;
    row-gap: 14px;
  }
  .services__list li { align-items: center; gap: 22px; font-size: 16px; }
  .services__list .num { width: 45px; text-align: left; font-size: 28px; line-height: 1; }
  .services__list li > span:not(.num) { font-weight: 600; }   /* testi in SemiBold, numeri restano Bold */

  /* Galleria: foto 156 × 156, spazio 20, 4 per pagina */
  .gallery { padding: 130px 29px 0; }
  .gallery__page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .gallery__pages a { aspect-ratio: 1 / 1; }
  .gallery__dots { gap: 6px; margin-top: 28px; }
  .gallery__dots button { width: 38px; }

  /* Partner: 2 loghi per riga, ultima riga 3 */
  .partners { padding: 130px 20px 65px; }
  .partners__logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 300px;
    margin: 60px auto 0;
    gap: 40px 0;
    justify-items: center;
  }
  .partners__logos .d-break { display: none; }
  .partners__logos .m-half { grid-column: span 3; }
  .partners__logos .m-third { grid-column: span 2; }
  .partners__logos img { height: calc(var(--h, 30) * .9px); max-width: 100%; }

  /* Contatti: testi 10, pulsante 24, allineati a x 57 */
  .contact {
    grid-template-columns: 1fr;
    justify-content: start;
    justify-items: start;                /* pulsante a filo dei testi a sinistra */
    gap: 23px;
    padding: 65px 20px 80px 57px;
  }
  .contact__info { font-size: 10px; }
  .btn { justify-self: start; font-size: 24px; padding: 8px 9px; }   /* misure mobile originali */

  /* Footer 187 px, logo 174 × 27, testi 8, icona 11 */
  .site-footer {
    min-height: 187px;
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: center;
    gap: 16px;
    padding: 30px 20px 26px;
    text-align: center;
    font-size: 8px;
  }
  .logo--footer { order: -1; margin-bottom: 28px; }   /* testi sotto il logo più in basso */
  .logo--footer img { width: 174px; }
  .site-footer__right {
    justify-self: center;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
  }
  /* icona Instagram centrata in altezza sul testo della policy */
  .site-footer__right p { margin: 0; line-height: 11px; }
  .social svg { display: block; width: 11px; height: 11px; }
}

/* ---------- PAGINE LEGALI / 404 ---------- */
.legal .title { font-size: clamp(26px, 4vw, 40px); margin-bottom: 1em; }
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 100px) 20px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
}
.legal h2, .legal h3 { font-size: 16px; font-weight: 700; margin: 2em 0 .5em; text-transform: uppercase; }
.legal a:not(.btn) { text-decoration: underline; }
.legal__note { color: #6b6b6b; font-style: italic; text-align: center; }
.btn--small { font-size: 14px; padding: 10px 16px; margin-top: 2em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

.legal ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.legal__updated { font-weight: 700; }
.legal h2#cookie { font-size: 22px; margin-top: 2.5em; padding-top: 1.2em; border-top: 1px solid var(--black); }