/* =====================================================
   AGNESE RAIMONDI PORTFOLIO – style.css
   Ordine: 1 Colori e misure · 2 Base · 3 Barra in alto
   4 Copertina · 5 Sezioni · 6 Work · 7 Pagina progetto
   8 Indice fisso · 9 Comparsa morbida · 10 Telefono
   ===================================================== */

/* ---------- 1. COLORI E MISURE (cambia qui) ---------- */
:root{
  --paper:#ffffff;                  /* sfondo */
  --ink:#333333;                    /* testo grigio scuro */
  --olive:#6f7c47;                  /* verde oliva */
  --mute:#9a9a9a;                   /* testi secondari */
  --soft:#efefef;                   /* riquadri senza foto */
  --pad:clamp(22px,5.5vw,80px);     /* margine dal bordo dello schermo */
  --gap:10px;                       /* spazio tra colonne e immagini */
  --col:38%;                        /* larghezza colonna sinistra */
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--olive)}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
img{display:block;max-width:100%}
.hero img,.ph img{width:100%;height:100%;object-fit:cover}

/* ---------- 3. BARRA IN ALTO ---------- */
.bar{
  position:sticky;top:0;z-index:10;
  display:grid;grid-template-columns:var(--col) 1fr auto;gap:var(--gap);
  align-items:baseline;
  padding:14px var(--pad);
  background:var(--paper);
  font-size:14px;
}
.bar .mark{font-weight:700;letter-spacing:-.01em}
.bar nav{display:flex;gap:22px}
.bar nav a{color:var(--mute)}
.bar nav a:hover{color:var(--ink)}
.bar nav a.on{color:var(--ink);font-weight:700}
.bar .cta{text-decoration:underline;text-underline-offset:3px}

/* ---------- 4. COPERTINA (titolo + video) ---------- */
.cover{
  min-height:100vh;min-height:100svh;       /* i Contents restano sotto la prima schermata */
  padding:var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
}
.cover-text{display:flex;flex-direction:column;gap:24px}

/* Titolo: tutto in verde oliva, grassetto */
.lead{
  font-size:clamp(26px,3.2vw,48px);         /* grandezza: minimo, ideale, massimo (prima 34px / 4.4vw / 70px) */
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
  color:var(--olive);
}
.lead .name,
.lead .rest{
  display:inline;                           /* nome e frase scorrono come un testo solo */
  color:var(--olive);
  font-size:1em;
  font-weight:800;
  letter-spacing:inherit;
  line-height:inherit;
  margin:0;
  max-width:none;
}

.hero{
  justify-self:end;
  height:min(60vh,585px);
  aspect-ratio:100/126.91;
  max-width:100%;
  background:var(--soft);
  overflow:hidden;
}
.hero iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 5. SEZIONI DELLA HOME ---------- */
section.blk{
  display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);
  padding:clamp(40px,7vw,96px) var(--pad) 0;
}
.blk>h2{
  font-size:clamp(22px,2.4vw,34px);
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;
}
.blk>h2 small{
  display:block;margin-bottom:.8em;
  font-size:.5em;font-weight:500;letter-spacing:.05em;color:var(--olive);
}
.body p{max-width:60ch;margin-bottom:1em;font-size:16px}
.body p:last-child{margin-bottom:0}
.body p a{text-decoration:underline;text-underline-offset:3px}

/* Contents */
.toc ol{list-style:none}
.toc li{
  font-size:clamp(22px,2.7vw,38px);
  font-weight:700;letter-spacing:-.02em;line-height:1.18;text-transform:uppercase;
}
.toc li span{display:inline-block;width:2.1em}

/* Workshops */
.list{list-style:none}
.list li{display:grid;grid-template-columns:5.5em 1fr;gap:12px;padding:10px 0}
.list span{color:var(--mute)}
.list b{font-weight:700}
.list small{display:block;font-size:13px;color:var(--mute)}
.list a{text-decoration:underline;text-underline-offset:3px}   /* link del workshop: sottolineato, perché su telefono non esiste l'hover */

/* Footer */
.foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:80px var(--pad) 90px;
  font-size:13px;color:var(--mute);
}

/* ---------- 6. WORK (anteprime nella home) ---------- */
.blk.wide{grid-template-columns:1fr}
.blk.wide>h2{margin-bottom:clamp(20px,3vw,40px)}
.wk{display:block;margin-bottom:clamp(40px,6vw,80px)}
.wk-h{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:12px;
  font-size:clamp(24px,3vw,44px);letter-spacing:-.04em;line-height:1;
}
.wk-h b{font-weight:400}
.wk-h span{font-size:14px;letter-spacing:0;color:var(--mute)}
.wk-r{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:var(--gap)}
.wk .ph{aspect-ratio:3/2;background:var(--soft);overflow:hidden}
.wk .ph img{transition:transform .5s}
@media (hover:hover){                           /* solo con il mouse: su touch l'hover resterebbe "bloccato" dopo il tocco */
  .wk:hover .ph img{transform:scale(1.03)}
  .wk:hover .wk-h{color:var(--olive)}
}

/* ---------- 6b. EDUCATION (tendine Master e BA, dentro Work) ---------- */
.blk.wide>.lab{
  margin:clamp(40px,6vw,80px) 0 12px;
  font-size:clamp(16px,1.6vw,22px);          /* più grande (prima 11px) */
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;   /* stesso stile dei titoli di sezione */
  color:var(--ink);                          /* grigio scuro invece del grigio chiaro */
}

.master{border-top:1px solid #d8d8d8}                  /* linea sottile: separa le righe */
.master:last-child{border-bottom:1px solid #d8d8d8}

/* La parte SEMPRE visibile (summary): titolo a sinistra, frase breve + "Read more" a destra */
.master summary{
  display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);
  padding:22px 0;cursor:pointer;
  list-style:none;                                      /* toglie il triangolino standard... */
}
.master summary::-webkit-details-marker{display:none}   /* ...anche su Safari */
.master summary>*{grid-column:2}                        /* tutto a destra, tranne il titolo */
.master summary h3{
  grid-column:1;grid-row:1/span 2;
  font-size:clamp(24px,3vw,44px);font-weight:400;letter-spacing:-.04em;line-height:1;
  transition:color .2s;
}
.master summary h3 small{display:block;margin-top:10px;font-size:14px;letter-spacing:0;color:var(--mute)}
.master summary:hover h3,.master summary:hover .more{color:var(--olive)}

.m-short{max-width:60ch;font-size:16px}
.more{
  justify-self:start;margin-top:10px;
  font-size:14px;text-decoration:underline;text-underline-offset:3px;
}
.o-open{display:none}                                   /* testo del bottone: "Close" appare solo da aperta */
.master[open] .o-closed{display:none}
.master[open] .o-open{display:inline}
.master[open] .m-short{display:none}                     /* da aperta la frase breve lascia posto al testo completo */

/* La parte che si apre */
.m-open{padding-bottom:clamp(20px,3vw,40px);animation:unfold .45s ease}
@keyframes unfold{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.m-text{display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap)}
.m-text .body{grid-column:2}
.m-open .lab{margin:clamp(30px,5vw,60px) 0 16px}

/* Progetto selezionato: colonna di testo + due foto affiancate */
.mp{
  display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);
  align-items:start;margin-bottom:clamp(40px,6vw,80px);
}
.mp-text h4{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.mp-text span{display:block;margin:6px 0 14px;font-size:13px;color:var(--mute)}
.mp-text p{max-width:42ch}
.mp-text p+p{margin-top:1em}
.mp-text a{text-decoration:underline;text-underline-offset:3px}   /* link esterni: sottolineati come "Get in touch" */
.mp-ph{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.mp .ph{aspect-ratio:4/5;background:var(--soft);overflow:hidden}   /* forma delle foto: cambia qui */

/* "flip": inverte i lati (testo a destra). order:2 sposta il testo dopo le foto */
.mp.flip{grid-template-columns:1fr var(--col)}
.mp.flip .mp-text{order:2}

/* ---------- 6c. RIGA BA (sotto il Master) ---------- */
/* Stessa impostazione del Master (titolo a sinistra, testo a destra), ma senza tendina */
.edu-note{
  display:grid;grid-template-columns:var(--col) 1fr;gap:var(--gap);
  padding:22px 0;
}
.edu-note h3{font-size:clamp(24px,3vw,44px);font-weight:400;letter-spacing:-.04em;line-height:1}
.edu-note h3 small{display:block;margin-top:10px;font-size:14px;letter-spacing:0;color:var(--mute)}
.edu-note p{max-width:60ch;font-size:16px}
.edu-note a{text-decoration:underline;text-underline-offset:3px}

/* ---------- 6d. PAGINA CONTACTS (contact.html) ---------- */
.c-block{margin-bottom:clamp(32px,4.5vw,56px)}
.c-block:last-child{margin-bottom:0}
.c-block .lab{margin-bottom:12px}                      /* etichette piccole e grigie sopra ogni gruppo */

.body .c-lead{                                         /* frase di apertura */
  max-width:36ch;
  font-size:clamp(20px,2vw,28px);font-weight:400;letter-spacing:-.03em;line-height:1.15;
  margin-bottom:0;
}
.body .c-big{                                          /* "Berlin, Rome and Barcelona" e social */
  max-width:none;
  font-size:clamp(16px,1.5vw,20px);font-weight:400;letter-spacing:-.01em;line-height:1.3;
  margin-bottom:0;
}
.c-soc{display:flex;flex-wrap:wrap;gap:6px 28px}
.c-big a{text-decoration:underline;text-underline-offset:4px}   /* email e social: sottolineati, così si capisce che si toccano */
.c-lead+.c-big{margin-top:20px}                        /* spazio tra il messaggio e l'email */

/* Footer in fondo alla pagina Contacts: il body diventa una colonna alta almeno quanto lo schermo,
   il contenuto (main) si prende lo spazio libero e spinge il footer verso il basso */
.contact-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.contact-page main{flex:1}


/* ---------- 7. PAGINA PROGETTO ---------- */
.back{display:block;margin-bottom:14px;font-size:30px;font-weight:200;line-height:1;color:var(--mute)}
.phead{
  display:grid;grid-template-columns:var(--col) 18.5% 1fr;gap:var(--gap);
  padding:clamp(40px,8vw,110px) var(--pad) 28px;
}
.phead h1{font-size:clamp(40px,4.6vw,76px);font-weight:400;letter-spacing:-.045em;line-height:.95;overflow-wrap:break-word}
.lab{margin-bottom:8px;font-size:11px;color:var(--mute)}
.meta p,.desc p{font-size:12.5px;line-height:1.32}
.meta div+div{margin-top:30px}
.desc p+p{margin-top:1.4em}
.desc a{text-decoration:underline;text-underline-offset:3px}   /* link dentro la descrizione */

.rows{padding:0 var(--pad)}
.row{
  --h:clamp(220px,32vw,500px);                  /* altezza delle foto: cambia qui */
  display:grid;gap:var(--gap);margin-bottom:12px;align-items:start;
}
.row.a{grid-template-columns:1fr 1.6fr}         /* stretta | larga */
.row.b{grid-template-columns:1.6fr 1fr}         /* larga | stretta */
.row .ph{height:var(--h);background:var(--soft);overflow:hidden}
.row figcaption{margin:6px 0 18px;font-size:16px;font-weight:300;color:var(--mute)}


/* ---------- 8. INDICE FISSO (compare dopo i Contents) ---------- */
.idx{
  position:fixed;left:50%;bottom:16px;z-index:20;
  display:flex;gap:16px;
  max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;
  padding:9px 16px;
  background:var(--paper);
  box-shadow:0 2px 16px rgba(0,0,0,.12);
  border-radius:99px;
  font-size:13px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transform:translate(-50%,20px);
  transition:opacity .25s,transform .25s;
}
.idx.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.idx a{color:var(--mute)}
.idx a:hover{color:var(--ink)}
.idx a.on{color:var(--ink);font-weight:700}

/* ---------- 9. COMPARSA MORBIDA (su e giù) ---------- */
.js .reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s ease,transform .9s ease;   /* durata: cambia .9s */
}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .m-open{animation:none}
}

/* ---------- 9b. IPAD E SCHERMI MEDI ---------- */
@media (min-width:761px) and (max-width:1100px){
  .meta p,.desc p{font-size:13.5px}             /* testi della pagina progetto un po' più leggibili */
}

/* ---------- 9c. DISPOSITIVI TOUCH (iPad e telefono) ---------- */
@media (pointer:coarse){
  .idx{gap:4px;padding:4px 10px}
  .idx a{padding:13px 8px}                      /* area di tocco più comoda (~44px di altezza) */
  .bar .cta{padding:8px 0}
}

/* ---------- 10. TELEFONO (sempre in fondo) ---------- */
@media (max-width:760px){
  :root{--col:100%}
  .bar{grid-template-columns:1fr auto}
  .bar nav{display:none}
  .cover{grid-template-columns:1fr;gap:28px}
  .hero{height:auto;width:100%;justify-self:stretch}
  section.blk,.phead,.row.a,.row.b{grid-template-columns:1fr}
  .phead{gap:26px}
  .meta div+div{margin-top:18px}
  .row.b .l{order:-1}
  .wk-r{grid-template-columns:1fr 1fr}
  .wk-r .ph:nth-child(n+3){display:none}
  .meta p,.desc p{font-size:14px}       /* 12.5px è troppo piccolo su un telefono */
  .idx .t{display:none}                 /* indice progetti: sul telefono solo i numeri... */
  .idx a.on .t{display:inline}          /* ...e il titolo del progetto aperto */
  .master summary,.m-text,.mp,.mp.flip,.edu-note{grid-template-columns:1fr}
  .master summary>*,.master summary h3{grid-column:1;grid-row:auto}
  .master summary h3{margin-bottom:10px}
  .edu-note h3{margin-bottom:10px}
  .m-text .body{grid-column:1}
  .mp.flip .mp-text{order:0}
}