@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap');



/* === Base typography & layout === */

:root{ --accent:#b08a59; }

*{box-sizing:border-box}

html{scrollbar-gutter:stable}

body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#222;line-height:1.55;background:#fff}

a{color:inherit;text-decoration:none}

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



/* === Containers === */

.container{max-width:1080px;margin:0 auto;padding:0 16px}



/* === Header / Nav === */

.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #eee}

.site-header .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}

.brand{font-weight:700;line-height:1.1}

.brand span{font-weight:600;color:#666}



/* Nav underline + active */

nav a{padding:10px 8px;border-radius:8px;color:#333;position:relative;text-decoration:none}

nav a:hover{ text-decoration: underline; text-underline-offset: 6px; }

nav a.active{color:var(--accent);font-weight:700}

nav a.active::after{

  content:""; position:absolute; left:8px; right:8px; bottom:6px;

  height:2px; background:var(--accent); border-radius:2px;

}



/* === Hero (home only) === */

.hero{min-height:46vh;display:flex;align-items:center;color:#fff;background:

  linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35)),

  var(--hero, url('../img/hero.jpg')) center center/cover no-repeat}

.hero .hero-inner{padding:48px 0}

.hero .btn{margin-right:10px}



/* === Buttons === */

.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;border:1px solid var(--accent)}

.btn.ghost{background:#fff;color:#333;border-color:#ddd}

.btn:hover{opacity:.92}



/* === Footer === */

.site-footer{border-top:1px solid #eee;background:#fafafa;margin-top:40px}

.footer-grid{display:flex;gap:16px;justify-content:space-between;align-items:center;min-height:70px;flex-wrap:wrap}

.fineprint{color:#666;font-size:.95rem}



/* === Generic sections === */

main.container{padding:28px 0 44px}

h1{font-size:2rem;margin:.3rem 0 1rem}

h2{font-size:1.4rem;margin:1.6rem 0 .8rem}

p{margin:.6rem 0}



/* === Callout (Opere) === */

.callout{ background:#f7f6f4;border:1px solid #e8e3dc; padding:22px;border-radius:12px;text-align:center;margin:30px 0 }



/* === Grid used in OPERE === */

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}

@media (max-width:560px){.gallery{grid-template-columns:1fr}}

.gallery figure{margin:0}

.gallery img{border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08)}

.gallery figcaption{font-size:14px;color:#6b6b6b;margin-top:6px;line-height:1.35}

.gallery figcaption strong{color:#333}



/* === Masonry used in GALLERIA === */

.masonry { column-count: 4; column-gap: 14px; }

@media (max-width:1200px){ .masonry{ column-count:3 } }

@media (max-width:900px){ .masonry{ column-count:2 } }

@media (max-width: 560px){

  .masonry{

    column-count: 2;

    column-gap: 10px;

  }

  .masonry figure{

    margin: 0 0 10px;

  }

}



.masonry figure { break-inside: avoid; margin: 0 0 14px; }

.masonry img{ border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.masonry figcaption{ font-size:14px; color:#6b6b6b; margin-top:6px; line-height:1.35 }

.masonry figcaption strong{ color:#333 }



/* Masonry section headings */

.masonry .gallery-section{

  column-span: all; break-inside: avoid; text-align: center;

  font-weight: 600; font-size: 1.4rem; margin: 2.5rem 0 1.5rem;

  color: #444; letter-spacing: 0.02em; border-bottom: 1px solid #ddd;

  display: block; padding-bottom: 0.3rem;

}

@supports not (column-span: all) {

  .masonry .gallery-section{

    width: 100%; display: block; break-before: column; break-after: avoid;

  }

}



/* Filters */

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px}

.filters button{border:1px solid #ddd;background:#fff;padding:6px 10px;border-radius:20px;cursor:pointer}

.filters button.active{border-color:var(--accent);color:var(--accent);font-weight:600}



/* === Revert tema soft (look bianco, come prima) === */

body{ background:#fff !important; }

main.container{ background:transparent !important; border:none !important; box-shadow:none !important; }

.site-footer{ background:#fafafa !important; }

/* Tipografia per testi lunghi (Critica) */

.text-flow p{ margin:.85rem 0; }

.text-flow h2{ margin:1.8rem 0 .8rem; font-size:1.4rem; }

.text-flow h3{ margin:1.4rem 0 .6rem; font-size:1.15rem; color:#444; }

.text-flow blockquote{

  margin:1rem 0; padding:.7rem 1rem;

  border-left:3px solid #e0e0e0; background:#fafafa;

  border-radius:8px; color:#333;

}

/* === Cards della Home (3 riquadri in linea) === */

.cards3{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:16px;

  margin:22px 0 8px;

}

@media (max-width:900px){ .cards3{ grid-template-columns:repeat(2,1fr) } }

@media (max-width:560px){ .cards3{ grid-template-columns:1fr } }



.card{

  border:1px solid #eee;

  border-radius:12px;

  background:#fff;

  padding:14px;

  box-shadow:0 2px 12px rgba(0,0,0,.06);

}

.card h3{ margin:.2rem 0 .5rem; font-size:1.15rem; }

.card p{ margin:.35rem 0; color:#555; }



/* Thumbnails nella pagina Opere (3 categorie) */

.opere-thumbs{

  display:flex;

  gap:8px;

  margin-bottom:10px;

}



.opere-thumbs img{

  width:50%;

  height:190px;      /* puoi alzare/abbassare questa misura a gusto */

  object-fit:cover;  /* niente deformazioni, solo leggero ritaglio */

  border-radius:8px;

  box-shadow:0 2px 10px rgba(0,0,0,.06);

}







/* Link normali nelle card (NON i bottoni) */

.card a:not(.btn){

  color:var(--accent);

  text-decoration:underline;

  text-underline-offset:3px;

}



/* === Footer centrato e coerente con le altre pagine === */

.site-footer .container{

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  gap:12px;

  min-height:70px;

  flex-wrap:wrap;

}



/* REVERT footer globale (lascia lavorare .footer-grid delle altre pagine) */

.site-footer .container{ display:block !important; text-align:left !important; }

/* === Layout orizzontale del footer === */

.footer-grid {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 20px;

  font-size: 0.95rem;

  padding: 18px 0;

}



.footer-grid > div {

  text-align: center;

}



.footer-grid > div:first-child {

  text-align: left;

}



.footer-grid > div:last-child {

  text-align: right;

}



.footer-grid a {

  color: inherit;

  text-decoration: none;

}



.footer-grid a:hover {

  text-decoration: underline;

}



.fineprint {

  font-size: 0.9rem;

  color: #666;

}



/* Adattamento mobile */

@media (max-width: 700px) {

  .footer-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .footer-grid > div {

    text-align: center !important;

  }

}

/* === Footer: due colonne pulite, responsive === */

.footer-grid {

  display: grid;

  grid-template-columns: 1fr 1fr; /* 2 colonne */

  align-items: center;

  gap: 20px;

  font-size: 0.95rem;

  padding: 18px 0;

}

.footer-grid > div:first-child { text-align: left; }

.footer-grid > div:last-child  { text-align: right; }



.fineprint { font-size: 0.9rem; color: #666; }

.gallery-intro { margin: 10px 0 18px; }

.gallery-intro h2 { font-size: 1.3rem; margin: 0 0 .4rem; }

.gallery-intro p  { color:#555; margin:0; }



/* Mobile: una sotto l'altra */

@media (max-width: 700px) {

  .footer-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .footer-grid > div { text-align: center !important; }

}

/* Teaser “Ricerca in studio” – mosaico */

.studio-teaser{

  margin:26px 0 6px;

}



.teaser-card{

  display:grid;

  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);

  gap:18px;

  align-items:stretch;

  border:1px solid #eee;

  border-radius:16px;

  overflow:hidden;

  text-decoration:none;

  background:#fff;

  box-shadow:0 4px 18px rgba(0,0,0,.06);

}



.mosaic-wrap{

  display:grid;

  grid-template-columns: 2fr 1fr;

  grid-template-rows: 1fr 1fr;

  gap:8px;

  padding:8px;

  background:#f6f6f6;

  min-height:260px;           /* <-- dà altezza al mosaico */

}



/* tutte e tre le celle del mosaico */

.mosaic-wrap div{

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  border-radius:12px;

}



/* IMMAGINI – attenzione al percorso: siamo in /css/, quindi ../img/... */

.m1{

  grid-row:1 / span 2;

  grid-column:1;

  background-image:

    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.12)),

    url('../img/galleria/studio/scultura01.jpg');

}



.m2{

  background-image:

    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.12)),

    url('../img/galleria/studio/panoramica.terracotte_donne_01.jpg');

}



.m3{

  background-image:

    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.12)),

    url('../img/galleria/studio/unicorno_bronzo_01.jpg');

}



/* Testo a destra */

.teaser-text{

  padding:18px 18px 18px 0;

  display:flex;

  flex-direction:column;

  justify-content:center;

}

.teaser-text h2{

  margin:.2rem 0 .4rem;

  font-size:1.5rem;

}

.teaser-text p{

  margin:0 0 .8rem;

  color:#555;

}

.teaser-text .btn{

  align-self:flex-start;

}



/* Responsivo */

@media (max-width:900px){

  .teaser-card{

    grid-template-columns: 1fr;

  }

  .teaser-text{

    padding:14px;

  }

}



/* Header più ordinato su mobile */

@media (max-width: 768px){

  .site-header .nav{

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

  }

  .site-header nav{

    display: flex;

    flex-wrap: wrap;

    gap: 8px 14px;

    font-size: 0.9rem;

  }

  .site-header nav a{

    padding: 2px 0;

  }

}



/* --- VIDEO GRID --- */

.video-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 18px;

  margin-top: 20px;

}



/* Normalizzazione thumbnails video */

.video-item img {

  width: 100%;

  aspect-ratio: 1 / 1;      /* più “quadro”: elegante, meno wide */

  object-fit: cover;        /* taglio intelligente */

  object-position: center;  /* centra sempre il soggetto */

  border-radius: 12px;

  display: block;

  height: auto;

  max-height: 220px;        /* leggermente più alta per dare respiro */

  box-shadow: 0 4px 16px rgba(0,0,0,.12);

}



.video-item figcaption {

  margin-top: 6px;

  font-size: 0.9rem;

  color: #555;

}



.video-item strong {

  font-size: 0.98rem;

  color: #222;

}



/* === Language switch in header === */

.lang-switch{

  font-size:0.9rem;

  color:#666;

  margin-left:8px;

}

.lang-switch a{

  text-decoration:underline;

  text-underline-offset:3px;

}

.lang-switch .current{

  font-weight:600;

  color:#222;

}



/* Mobile: metti lo switch sotto il menu */

@media (max-width:768px){

  .lang-switch{

    margin-top:4px;

  }

}

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

   RESTYLING LEGGERO 2025

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



/* Tipografia più elegante */

body{

  font-size:16px;

  letter-spacing:0.01em;

}



h1, h2, h3,

.brand span{

  font-family:"Playfair Display", Georgia, "Times New Roman", serif;

}



/* Logo / brand più curato */

.brand{

  font-size:1.05rem;

}

.brand span{

  font-size:0.9rem;

  text-transform:uppercase;

  letter-spacing:0.08em;

}



/* Header più leggero e “alto di gamma” */

.site-header{

  box-shadow:0 2px 14px rgba(0,0,0,.04);

}

.site-header .nav{

  min-height:58px;

  padding:6px 0;

}



/* Nav desktop: più raffinato */

.site-header nav a{

  font-size:0.9rem;

  letter-spacing:0.05em;

  text-transform:uppercase;

}



/* Lang switch (IT | EN) più discreto ma elegante */

.lang-switch{

  font-size:0.8rem;

  letter-spacing:0.12em;

  text-transform:uppercase;

  color:#777;

}

.lang-switch .current{

  font-weight:600;

  color:#222;

}

.lang-switch a{

  text-decoration:none;

}

.lang-switch a:hover{

  text-decoration:underline;

}



/* Hero: testo più raccolto, meno “blocco” */

.hero .hero-inner{

  max-width:620px;

}



/* Card un filo più “premium” */

.card{

  box-shadow:0 6px 24px rgba(0,0,0,.06);

  border-color:#e9e4dc;

}



/* Spaziatura contenuti su mobile un filo più compatta */

@media (max-width:560px){

  main.container{

    padding-top:22px;

    padding-bottom:34px;

  }

}



/* MENU MOBILE: più compatto, scorrevole in orizzontale */

@media (max-width:768px){

  .site-header .nav{

    flex-direction:row;

    align-items:center;

    gap:12px;

    flex-wrap:nowrap;

  }



  .brand{

    white-space:nowrap;

  }



  .site-header nav{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

    padding-bottom:4px;

  }



  .site-header nav a{

    display:inline-block;

    padding:4px 10px;

    margin-right:6px;

    border-radius:999px;

    border:1px solid transparent;

    background:transparent;

    font-size:0.8rem;

  }



  .site-header nav a.active{

    background:rgba(176,138,89,.10);

    border-color:rgba(176,138,89,.7);

    color:#000;

  }

}

/* ========== Logo refinement — Variante B+ (bronzo deciso + inciso) ========== */

.brand {

  font-weight: 600;

  color: #2f2f2f; /* sobrio, professionale */

}



.brand span {

  display: block;

  font-weight: 700;

  font-size: 1.1em;

  margin-top: 2px;

  color: #b57a42; /* bronzo più ricco */

  letter-spacing: 0.6px;



  /* Effetto inciso: estremamente leggero */

  text-shadow: 0.6px 0.6px 0.8px rgba(0, 0, 0, 0.08);

}

/* === MENU MOBILE A SCOMPARSA (HAMBURGER) === */



.menu-toggle{

  display:none; /* nascosto su desktop */

}



/* Solo schermi piccoli */

@media (max-width: 768px){



  .site-header .nav{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    position:relative;

  }



  .menu-toggle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 10px;

    border-radius:999px;

    border:1px solid #ddd;

    background:#fff;

    font-size:1.1rem;

    cursor:pointer;

  }



  /* Nasconde il menu per default */

  .site-header nav{

    position:absolute;

    left:0;

    right:0;

    top:100%;

    background:#fff;

    border-bottom:1px solid #eee;

    box-shadow:0 8px 24px rgba(0,0,0,.12);

    padding:8px 16px 10px;

    display:none;

    z-index:20;

  }



  /* Quando il menu è aperto */

  .site-header.menu-open nav{

    display:block;

  }



  /* Link verticali, uno sotto l’altro */

  .site-header nav a{

    display:block;

    padding:6px 0;

    margin:0;

    border-radius:0;

    border:none;

    font-size:0.9rem;

  }

}

/* Home: su mobile nascondi teaser con mosaico */

/* Home: su mobile MOSTRA il teaser con mosaico, ma più compatto */

@media (max-width: 768px){

  .studio-teaser{

    display:block;

    margin:18px 0 4px;

  }



  .teaser-card{

    grid-template-columns: 1fr;   /* una colonna */

    gap:10px;

    border-radius:14px;

    box-shadow:0 4px 18px rgba(0,0,0,.08);

  }



  .mosaic-wrap{

    min-height:210px;             /* un po’ più bassa che su desktop */

    padding:6px;

  }



  .teaser-text{

    padding:10px 12px 14px;

  }



  .teaser-text h2{

    font-size:1.3rem;

    margin-bottom:0.25rem;

  }



  .teaser-text p{

    font-size:0.95rem;

    margin-bottom:0.6rem;

  }



  .teaser-text .btn{

    font-size:0.9rem;

    padding:8px 14px;

    border-radius:999px;

  }

}







/* Home mobile: hero un po' più “importante”, ma resto snello */

@media (max-width: 768px){



  .hero{

    min-height: 55vh;          /* più alto: immagine e titolo respirano di più */

  }



  .hero .hero-inner{

    padding: 40px 0;           /* un filo più spazio intorno al testo */

  }



  main.container{

    padding-top: 18px;

  }



  .cards3{

    margin: 16px 0 8px;

  }



  .card{

    padding: 10px 12px;

  }

}



/* === Galleria: overview a 3 categorie === */ .gallery-categories{

  display:grid;

  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));

  gap:20px;

  margin:24px 0 8px;

}



.gallery-teaser{

  border:1px solid #eee;

  border-radius:14px;

  background:#fff;

  padding:14px;

  box-shadow:0 2px 12px rgba(0,0,0,.06);

  display:flex;

  flex-direction:column;

  gap:10px;

}



.gallery-teaser-images{

  display:grid;

  grid-template-columns:repeat(2, minmax(0, 1fr));

  gap:8px;

}



.gallery-teaser-images img{

  border-radius:10px;

  box-shadow:0 2px 10px rgba(0,0,0,.08); }



.gallery-teaser-text h2{

  margin:.2rem 0 .4rem;

  font-size:1.25rem;

}



.gallery-teaser-text p{

  margin:.3rem 0;

  color:#555;

}

@media (max-width: 768px){

  .video-item img{

    aspect-ratio: 9 / 16;   /* più alto che largo, tipo Reel */

    max-height: none;       /* lasciamo che cresca in altezza */

  }

}

/* Video: 2 colonne anche su mobile */

@media (max-width: 768px) {

  .video-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

  }



  .video-item {

    margin: 0;          /* nel caso ci fossero margini particolari */

  }



  .video-item img {

    width: 100%;

    height: auto;

    display: block;

  }

}

/* Video: 2 colonne su mobile, immagini intere */

@media (max-width: 768px) {

  .video-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

  }



  .video-item {

    margin: 0;

    height: auto !important;    /* azzera eventuali altezze fisse */

    overflow: visible;          /* evitiamo ritagli */

  }



  .video-item img {

    width: 100%;

    height: auto !important;    /* niente altezza fissa */

    object-fit: contain;        /* mostra l’immagine intera */

    display: block;

  }

}