:root{
  --ink:#101B20;
  --surface:#17262C;
  --surface-2:#1E323A;
  --parchment:#EDE6D6;
  --parchment-dim:#C9C2B2;
  --muted:#8FA3A1;
  --teal:#4FA9A2;
  --teal-dim:#3A7F7A;
  --amber:#E8A33D;
  --amber-dim:#B87B22;
  --red:#D9695A;
  --red-dim:#A64A3E;
  --line:#2A3B41;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);}
::selection{background:var(--amber); color:var(--ink);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* NAV */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(16,27,32,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:0.02em; color:var(--parchment); text-decoration:none;}
.logo span{color:var(--amber);}
nav.links{display:flex; gap:22px; align-items:center;}
nav.links a{
  color:var(--parchment-dim); text-decoration:none; font-size:14px; font-family:var(--font-mono);
  letter-spacing:0.03em;
}
nav.links a:hover{color:var(--amber);}
nav.links a.active{color:var(--amber);}
.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.03em;
  padding:9px 16px; border-radius:3px; text-decoration:none; border:1px solid var(--amber);
  color:var(--amber); white-space:nowrap; background:none; cursor:pointer;
}
.btn:hover{background:var(--amber); color:var(--ink);}
nav.links a.btn:hover{background:var(--amber); color:var(--ink);} /* specificità maggiore di "nav.links a:hover" per evitare testo arancione su sfondo arancione */
@media (max-width:900px){ nav.links a:not(.btn){display:none;} }

.lang-toggle{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em;
  background:none; border:1px solid var(--line); color:var(--parchment-dim);
  border-radius:3px; padding:8px 10px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:2px;
}
.lang-toggle .flag-svg{width:16px; height:11px; border-radius:1px; flex-shrink:0; vertical-align:middle;}
.lang-toggle:hover{border-color:var(--teal); color:var(--teal);}

.admin-toggle{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.05em;
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:3px; padding:8px 10px; cursor:pointer; white-space:nowrap;
}
.admin-toggle:hover{border-color:var(--red); color:var(--red);}
.admin-toggle.is-admin{border-color:var(--teal); color:var(--teal);}

section{padding:96px 0 0;}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em;
  color:var(--teal); text-transform:uppercase; margin:0 0 10px;
}
h1,h2,h3{font-family:var(--font-display); margin:0; color:var(--parchment); font-weight:600;}
h2{font-size:32px; margin-bottom:28px;}
p{color:var(--parchment-dim);}

.section-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:0;}
.section-head-row h2{margin-bottom:8px;}

/* HERO */
.hero{padding-top:64px;}
.hero-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;}
@media (max-width:820px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:52px; line-height:1.08; margin-bottom:14px;}
.hero .role{font-family:var(--font-mono); color:var(--amber); font-size:18px; margin-bottom:22px;}
.hero p.lede{font-size:17px; max-width:52ch; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn-solid{
  background:var(--amber); color:var(--ink); font-family:var(--font-mono); font-size:13px;
  padding:12px 20px; border-radius:3px; text-decoration:none; font-weight:600; letter-spacing:0.02em;
  border:none; cursor:pointer; display:inline-block;
}
.btn-solid:hover{background:#f4b45c;}
.btn-outline{
  border:1px solid var(--line); color:var(--parchment); font-family:var(--font-mono); font-size:13px;
  padding:12px 20px; border-radius:3px; text-decoration:none; letter-spacing:0.02em;
  background:none; cursor:pointer; display:inline-block;
}
.btn-outline:hover{border-color:var(--teal); color:var(--teal);}

/* STAT CARD */
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:24px;
}
.stat-card .sc-title{font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:18px;}
.stat-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px;}
.stat-row:last-child{border-bottom:none;}
.stat-row .k{font-family:var(--font-mono); color:var(--muted);}
.stat-row .v{color:var(--parchment); text-align:right; font-weight:500;}

/* PROJECTS TEASER (home) */
.teaser-card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:32px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.teaser-card p{margin:6px 0 0; max-width:52ch;}

/* PROJECTS */
.project{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:36px; margin-bottom:32px; position:relative;
  scroll-margin-top:100px;
}
.project-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:14px;}
.project h3{font-size:26px;}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.tag{
  font-family:var(--font-mono); font-size:11px; color:var(--teal); border:1px solid var(--teal-dim);
  padding:4px 10px; border-radius:3px; letter-spacing:0.03em;
}
.project-links a{font-family:var(--font-mono); font-size:13px; text-decoration:none; margin-left:16px;}
.project ul{margin:18px 0 0; padding-left:20px; color:var(--parchment-dim);}
.project li{margin-bottom:8px;}

.mech-flow{
  display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:20px;
}
.mech-box{flex:1; min-width:180px;}
.mech-box .ml{font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px;}
.mech-box .mv{color:var(--parchment); font-size:15px; font-weight:500;}
.mech-arrow{color:var(--amber); font-family:var(--font-mono); font-size:20px;}
@media (max-width:600px){ .mech-arrow{transform:rotate(90deg);} }

.placeholder-media{
  margin-top:22px; border:1px dashed var(--line); border-radius:6px; padding:26px;
  text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--muted);
}

/* SKILLS */
.skills-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:28px;}
.skill-group{position:relative;}
.skill-group .sg-title-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px;}
.skill-group .sg-title{font-family:var(--font-mono); font-size:12px; color:var(--amber); letter-spacing:0.1em; text-transform:uppercase;}
.skill-item{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:14px; gap:8px;}
.skill-name{color:var(--parchment-dim);}
.skill-bar{font-family:var(--font-mono); font-size:13px; letter-spacing:2px; white-space:nowrap;}
.fill{color:var(--teal);}
.empty{color:var(--line);}

/* EDUCATION TIMELINE */
.timeline{border-left:1px solid var(--line); padding-left:24px; margin-left:4px;}
.tl-item{position:relative; margin-bottom:28px;}
.tl-item::before{
  content:''; position:absolute; left:-29px; top:4px; width:10px; height:10px;
  border-radius:50%; background:var(--ink); border:2px solid var(--amber);
}
.tl-item h4{font-family:var(--font-display); font-size:17px; color:var(--parchment); margin:0 0 4px;}
.tl-item .tl-sub{font-family:var(--font-mono); font-size:12px; color:var(--muted);}
.tl-item-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}

/* CONTACT */
.contact{
  margin:96px 0 0; padding:64px 32px; background:var(--surface); border-top:1px solid var(--line);
}
.contact-inner{max-width:var(--maxw); margin:0 auto; text-align:center;}
.contact h2{margin-bottom:12px;}
.contact p{max-width:52ch; margin:0 auto 30px;}
.contact-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
footer{
  text-align:center; padding:28px; font-family:var(--font-mono); font-size:12px; color:var(--muted);
}

section#footer-space{padding-bottom:0;}

/* JUMP TO PROJECT */
.jump-row{display:flex; align-items:center; gap:12px; margin:20px 0 32px; flex-wrap:wrap;}
.jump-row label{
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  letter-spacing:0.06em; text-transform:uppercase;
}
.jump-select{
  background:var(--surface); border:1px solid var(--line); color:var(--parchment);
  font-family:var(--font-mono); font-size:13px; padding:9px 12px; border-radius:4px;
  min-width:240px; max-width:100%;
}
.jump-select:focus{outline:none; border-color:var(--teal);}

/* MEDIA GALLERY (visualizzazione pubblica sulla card progetto) */
.media-gallery{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:22px;
}
@media (max-width:820px){ .media-gallery{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:520px){ .media-gallery{grid-template-columns:1fr;} }

.media-item{
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  grid-column:span 2; /* dimensione "media" di default */
}
.media-item img, .media-item video{
  width:100%; height:140px; object-fit:contain; display:block; background:var(--ink);
}
.media-item img{cursor:zoom-in;}
.media-item iframe{width:100%; height:140px; display:block; border:0;}
.media-item audio{width:100%; display:block; margin:16px 12px; max-width:calc(100% - 24px);}
.media-caption{
  font-family:var(--font-mono); font-size:11px; color:var(--muted); padding:8px 10px; line-height:1.4;
}
.media-manage-btn{margin-top:18px;}

/* Dimensione (larghezza, in colonne su una griglia di 4) */
.media-size-small{grid-column:span 1;}
.media-size-medium{grid-column:span 2;}
.media-size-large{grid-column:span 3;}
.media-size-full{grid-column:1 / -1;}
@media (max-width:820px){
  .media-size-small, .media-size-medium, .media-size-large{grid-column:span 1;}
}
@media (max-width:520px){
  .media-size-small, .media-size-medium, .media-size-large, .media-size-full{grid-column:1 / -1;}
}

/* Altezza */
.media-h-compact img, .media-h-compact video, .media-h-compact iframe{height:100px;}
.media-h-medium img, .media-h-medium video, .media-h-medium iframe{height:160px;}
.media-h-tall img, .media-h-tall video, .media-h-tall iframe{height:260px;}

/* Posizione (rilevante quando l'elemento non occupa tutta la riga) */
.media-align-start{justify-self:start; width:100%;}
.media-align-center{justify-self:center; width:100%;}
.media-align-end{justify-self:end; width:100%;}

/* MEDIA MANAGER (pannello admin) */
.media-manage-item{
  display:flex; gap:12px; align-items:center; border:1px solid var(--line);
  border-radius:6px; padding:10px; margin-bottom:10px;
}
.media-manage-item .mm-thumb{
  width:72px; height:52px; object-fit:cover; border-radius:4px; background:#000; flex-shrink:0;
}
.media-manage-item .mm-info{flex:1; font-size:12px; color:var(--parchment-dim); min-width:0;}
.media-manage-item .mm-caption{font-size:11px; color:var(--muted); margin-top:2px;}
.media-manage-item .item-actions{flex-wrap:wrap; justify-content:flex-end;}
.media-manage-item .icon-btn:disabled{opacity:0.3; cursor:not-allowed;}
.media-manage-item .icon-btn:disabled:hover{border-color:var(--line); color:var(--parchment-dim);}

/* Blocco di testo libero nella galleria pubblica */
.media-item.media-text{
  background:none; border:none; padding:4px 0; display:flex; align-items:center; width:100%;
}
.media-text-content{
  color:var(--parchment-dim); font-size:15px; line-height:1.7; width:100%;
}
.media-text-content p{margin:0 0 12px; white-space:pre-wrap;}
.media-text-content p:last-child{margin-bottom:0;}
.media-text-content strong{color:var(--parchment); font-weight:600;}
.media-text-content em{font-style:italic; color:var(--parchment);}
.media-text-content ul{margin:0 0 12px; padding-left:20px;}
.media-text-content ul:last-child{margin-bottom:0;}
.media-text-content li{margin-bottom:6px;}

/* Pulsante di download nella galleria pubblica */
.media-item.media-download{
  background:none; border:none; padding:4px 0; display:flex; align-items:center; width:100%;
}
.media-download-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--teal-dim); color:var(--teal); background:none;
  font-family:var(--font-mono); font-size:13px; padding:11px 18px; border-radius:4px;
  text-decoration:none; letter-spacing:0.02em;
}
.media-download-btn:hover{background:var(--teal); color:var(--ink); border-color:var(--teal);}

/* Mini-toolbar di formattazione nel form admin (grassetto / corsivo / elenco) */
.text-toolbar{display:flex; gap:6px; margin-bottom:6px;}
.tb-btn{
  border:1px solid var(--line); background:var(--surface-2); color:var(--parchment-dim);
  font-family:var(--font-body); font-size:13px; border-radius:3px; padding:4px 10px; cursor:pointer;
  min-width:30px;
}
.tb-btn:hover{border-color:var(--teal); color:var(--teal);}

/* LIGHTBOX */
.lightbox-overlay{
  display:none; position:fixed; inset:0; background:rgba(10,16,19,0.92); z-index:300;
  align-items:center; justify-content:center; padding:40px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:100%; max-height:100%; border-radius:6px; display:block;}
.lightbox-close{
  position:absolute; top:20px; right:28px; background:none; border:none;
  color:var(--parchment); font-size:32px; cursor:pointer; line-height:1;
}
.lightbox-close:hover{color:var(--amber);}

/* PAGINA "LAVORI" — sezioni per categoria */
.work-category{margin-bottom:44px;}
.work-category-title{
  font-family:var(--font-mono); font-size:14px; color:var(--amber);
  letter-spacing:0.08em; text-transform:uppercase; margin:0;
}
.work-category .section-head-row{margin-bottom:20px; align-items:center;}
.skill-work .item-actions{position:absolute; top:20px; right:20px;}

/* ===== ADMIN CONTROLS ===== */
.item-actions{display:flex; gap:8px; flex-shrink:0;}
.icon-btn{
  border:1px solid var(--line); background:var(--surface-2); color:var(--parchment-dim);
  font-family:var(--font-mono); font-size:12px; border-radius:3px; padding:6px 10px; cursor:pointer;
}
.icon-btn:hover{border-color:var(--teal); color:var(--teal);}
.icon-btn.danger:hover{border-color:var(--red); color:var(--red);}

.add-btn{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; color:var(--teal);
  border:1px dashed var(--teal-dim); background:none; border-radius:4px; padding:8px 14px; cursor:pointer;
}
.add-btn:hover{border-style:solid; background:rgba(79,169,162,0.08);}
.add-project-wrap{margin-bottom:28px;}

.skill-item-actions{display:flex; gap:6px;}
.skill-item-actions .icon-btn{padding:2px 6px; font-size:11px;}
.add-skill-row{margin-top:8px;}

/* MODAL */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(10,16,19,0.75); z-index:200;
  align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  max-width:560px; width:100%; padding:32px; margin-bottom:40px;
}
.modal h3{font-size:20px; margin-bottom:20px;}
.modal-close{
  float:right; background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1;
}
.modal-close:hover{color:var(--amber);}
.field{margin-bottom:16px;}
.field label{
  display:block; font-family:var(--font-mono); font-size:11px; color:var(--muted);
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px;
}
.field input[type=text], .field input[type=password], .field input[type=number], .field textarea, .field select{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--parchment);
  font-family:var(--font-body); font-size:14px; padding:10px 12px; border-radius:4px;
}
.field textarea{min-height:70px; resize:vertical; font-family:var(--font-mono); font-size:13px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }
.field-hint{font-size:12px; color:var(--muted); margin-top:4px;}
.modal-actions{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap;}
.modal-actions-right{display:flex; gap:10px;}
.lang-tab-note{font-family:var(--font-mono); font-size:11px; color:var(--amber); letter-spacing:0.06em; text-transform:uppercase; margin:22px 0 10px; border-top:1px solid var(--line); padding-top:16px;}

.admin-bar{
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px;
  padding:16px 20px; margin-bottom:28px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.admin-bar .abtxt{font-family:var(--font-mono); font-size:12px; color:var(--teal);}
.admin-bar .abtools{display:flex; gap:10px; flex-wrap:wrap;}

/* Regole di occultamento admin: DEVONO restare le ultime del file per vincere
   sulla cascata CSS rispetto a .item-actions / .skill-item-actions / ecc. */
.admin-only{display:none;}
.admin-only-inline{display:none;}
.admin-only-flex{display:none;}
body.is-admin .admin-only{display:block;}
body.is-admin .admin-only-inline{display:inline-flex;}
body.is-admin .admin-only-flex{display:flex;}