body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

/* Contenitore centrale con margini laterali */
  .page-container {
  /*  max-width: 1400px; */
    margin: 2rem;
      margin-top: 0;
      margin-bottom: auto;
    padding: 0.5rem;
  }

/* Header sticky */
/* ---------- HEADER PULITO: logo a sinistra, nav subito dopo ---------- */
header {
  display: flex;
  justify-content: flex-start;
  padding: 0.3rem;
  margin-bottom: 1rem;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* mantenere compatibilità con eventuali regole precedenti */
header h1,
header nav a {
  margin: 0;
  text-decoration: none;
  color: black;
}

/* regola principale dell'header */
.site-header {
  position: sticky;
  top: 0;
  margin: 0;
    margin-top: 1rem;
    margin-left: 2rem;
    margin-bottom: 1rem;
  z-index: 100;
  display: flex;
  justify-content: space-between; /* tutto a sinistra */
  align-items: flex-end;
  gap: 1rem;                    /* spazio tra logo e nav */
  height: 100px;
  transition: height 0.4s ease, background 0.3s ease;
  padding: 0 1rem;              /* padding orizzontale */
  box-sizing: border-box;
  overflow: visible;
}

/* stato shrink (quando lo script aggiunge la classe) 
.site-header.shrink {
  height: 40px;
}*/

/* wrapper cliccabile del logo: non deve diventare flex:1 */
.logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  padding: 0;
}

/* contenitore interno del logo */
#logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

/* video del logo: limita altezza e mantieni proporzioni */
#logo-container video {
  display: block;
  height: 80%;               /* scala proporzionalmente all'header */
  max-height: 200p10;          /* limita l'altezza massima */
  width: auto;
  object-fit: contain;
  transition: height 0.35s ease;
}




/* NAV: niente absolute, rimane vicino al logo e si può stilare */
.site-header nav {
  position: static;          /* rimuove absolute/right */
  display: flex;     
  align-self: flex-end; /* forza il nav in basso anche se cambia il logo */
  gap: 1.5rem;
  align-items: center;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

/* stile link nav */
.site-header nav a {
  font-family: 'Basteleur Moonlight', sans-serif;
  font-weight: 400;
  text-decoration: none;
  color: black;
  font-size: 16pt;
  margin: 0;                 /* rimuovi margin-right che spinge */
}

/* se vuoi un piccolo spazio tra logo e primo link (opzionale) */
.site-header .logo-link + nav {
  margin-left: 4rem;
}


/* Hero */
.hero {
  margin: 3rem 0;
  text-align: center;
margin-bottom: 4rem;
}

  .hero video {
    width: 100%;
    border-radius: 0rem; /* opzionale */
    display: block;
  }

/* Layout Masonry */

/* ---------- MASONRY / CARDS (no transition sul layout) ---------- */
.masonry {
  position: relative;
}

/* Important: nessuna transizione che riguarda transform/posizioni qui */
.masonry .card {
  position: absolute;
  border-radius: 5px;
  overflow: hidden;
  /* rimuovi transition che animano il riposizionamento */
  transition: none;
}

.card.featured {
  border: 0px solid gold;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  display: block;
}

.masonry-item.featured {
  grid-column: span 2; /* se usi grid */
  width: 100%; /* se usi columns */
}


/* 🔹 Layout Pinterest */
.grid {
  column-count: 7;       /* 5 colonne su desktop */
  column-gap: 0rem;      /* spazio tra le colonne */
  padding: 0rem;
}

@media (max-width: 1400px) {
  .grid { column-count: 4; }
}

@media (max-width: 1000px) {
  .grid { column-count: 3; }
}

@media (max-width: 700px) {
  .grid { column-count: 2; }
}

@media (max-width: 500px) {
  .grid { column-count: 1; }
}

.card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 0px;
  break-inside: avoid;
  border-radius: 0px;
  overflow: hidden;
  cursor: pointer;
    transition: transform 0.4s ease; /* animazione */
}

.card img {
  width: 100%;
  height: auto;
  display: block;
    transition: transform 0.2s ease;
}
.card img,
.card video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
     transition: transform 0.6s ease;
}

/* overlay invisibile di default */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.1s ease;
    
}

.overlay h2 {
  font-size: 1.2rem;
  text-align: center;
  margin: 0;
  padding: 0 1rem;
}

/* visibile solo all'hover */
.card:hover .overlay {
  opacity: 1;
}
.card:hover {
      transform: scale(0.1); /* circa +0.5rem se lo spazio è 1rem */
  z-index: 2;             /* così non viene coperta dalle vicine */
}
.card:hover img {
  transform: scale(1.05);       /* l’immagine cresce dentro */
}
.card:hover video {
  transform: scale(1.05);       /* l’immagine cresce dentro */
}
.card.empty-slot {
  pointer-events: none; /* nessun click o hover */
  user-select: none;
}

.card.empty-slot .overlay {
  display: none;
}

/* ---------- Helper: disabilita transizioni durante resize ---------- */
/* Questo viene attivato dinamicamente via JS (body.disable-transitions) */
body.disable-transitions * {
  transition: none !important;
  animation: none !important;
}

/* 🔹 Terminal Grotesque (solo Regular, usata per titoli) */
@font-face {
  font-family: 'Terminal Grotesque';
  src: url('/fonts/terminal-grotesque-webfont.woff2') format('woff2'),
       url('/fonts/terminal-grotesque-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 🔹 Basteleur (solo Regular, usata per titoli) */
@font-face {
  font-family: 'Basteleur Moonlight';
  src: url('/fonts/Basteleur-Moonlight.woff2') format('woff2'),
       url('/fonts/Basteleur-Moonlight.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 🔹 Karrik Regular */
@font-face {
  font-family: 'Karrik';
  src: url('/fonts/Karrik-Regular.woff2') format('woff2'),
       url('/fonts/Karrik-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 🔹 Karrik Italic */
@font-face {
  font-family: 'Karrik';
  src: url('/fonts/Karrik-Italic.woff2') format('woff2'),
       url('/fonts/Karrik-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* inter-tight-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-tight-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* 🌐 Applicazioni */
body {
  font-family: 'Inter Tight', sans-serif; /* corpo testo */
}

h1, h2, h3, .big-text {
  font-family: 'Basteleur Moonlight', sans-serif; /* titoli */
}

/* Progetti */ 

.project .grid {
   /* max-width: 1400px; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
 margin-left: 2rem;
  margin-right: 2rem;

}

.project .col-span-1 {
  grid-column: span 1;
}
.project .col-span-2 {
  grid-column: span 2;
}
.project .col-span-3 {
  grid-column: span 3;
}

.project .col-span-4 {
  grid-column: span 4;
}
.project .col-span-5 {
  grid-column: span 5;
}

.project .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0rem;
}

.project iframe,
.project video {
  width: 100%;
  height: auto;
  display: block;
}

.project .video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.project .video-wrapper iframe,
.project .video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.project h1 {
    display: flex;
    justify-content: left;
    align-items: center;
  margin: 2rem;
    font-size: 54pt;

}

.project p {
  font-size: 18pt; /* testo normale */
  line-height: 1.1;
}

/* assicurati sia in style.css importato dalla Layout */
.gallery-grid { width:100%; max-width:100%; }
.gallery-item {
  position: relative;
  overflow: hidden;
  min-height: 0; /* importante per alcuni casi di overflow in grid */
  height: 0;
  padding-bottom: 66.6667%; /* default aspect ratio 3:2 — cambialo se vuoi (es. 56.25% per 16:9) */
  display: block;
}

/* contenuto assoluto dentro il wrapper per adattarsi sempre */
.gallery-item img,
.gallery-item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* se vuoi che alcuni span abbiano ratio diverso, puoi aggiungere classi specifiche */
.gallery-item.aspect-16-9 { padding-bottom: 56.25%; } /* 16:9 */
.gallery-item.aspect-9-16 { padding-bottom: 177.7%; } /* 9:16 */
.gallery-item.aspect-4-3  { padding-bottom: 75%; }    /* 4:3 */
.gallery-item.aspect-1-1  { padding-bottom: 100%; }    /* 1:1 */


.project .media-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
}

.project .media-wrapper::before {
  content: "";
  display: block;
  padding-bottom: 66.66%; /* default 3:2 ratio */
}

.project .media-wrapper.aspect-16-9::before {
  padding-bottom: 56.25%;
}

.project .media-wrapper.aspect-9-16::before {
  padding-bottom: 177.7%;
}

.project .media-wrapper.aspect-4-3::before {
  padding-bottom: 75%;
}
.project .media-wrapper.aspect-1-1::before {
  padding-bottom: 100%;
}

.project .media-wrapper iframe,
.project .media-wrapper video,
.project .media-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  display: block;
}

.project .grid {
  margin-top: 2rem; /* o la distanza che vuoi */
}

.site-footer {
  padding: 2rem 1.5rem; /* margini interni (verticale orizzontale) */
  max-width: 1200px;    /* o la stessa larghezza del contenuto */
  margin: 0 auto;       /* lo centra orizzontalmente */
  text-align: center;   /* opzionale, per centrare il testo */
  color: #333;
  font-size: 0.9rem;
}