/* ============================================================
   COMPONENTI — hero, servizi, banner, lavori, about, contatti, CV
   + animazioni di rivelazione e hover
   ============================================================ */

/* ---------- Animazioni: reveal allo scroll ---------- */
.reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--delay, 0ms); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--left { transform: translateX(calc(var(--reveal-distance) * -1)); }
.reveal--right { transform: translateX(var(--reveal-distance)); }
.reveal--scale { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Griglie card ---------- */
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
}
.card:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.card--featured { background: linear-gradient(180deg, var(--surface), var(--accent-soft)); }
.card__icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.card__icon svg { width: 1.4rem; height: 1.4rem; }
.card h3 { margin: 0; }
.card p { color: var(--ink-soft); font-size: var(--fs-sm); }
.card .tags { margin-top: auto; padding-top: var(--space-2); }

/* ---------- Banner stampa 3D ---------- */
.banner { position: relative; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(120deg, #1f2433 0%, #2a3350 55%, #4a2f6b 100%); box-shadow: var(--shadow-lg); }
.banner__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: clamp(1.5rem, 3vw, 3rem); }
.banner .kicker { color: var(--accent-3); }
.banner h2 { color: #fff; margin-top: var(--space-2); }
.banner p { color: rgb(255 255 255 / 0.82); }
.banner__bullets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.banner__bullets li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.12); font-size: var(--fs-xs); font-weight: 600; }
.banner__bullets li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent-3); }
.banner__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: rgb(255 255 255 / 0.08); }
.banner__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.banner:hover .banner__media img { transform: scale(1.05) rotate(-0.5deg); }
.banner .btn--primary { background: var(--accent-3); color: #1c1f26; }
.banner .btn--primary:hover { background: #ffa066; }
.banner__glow { position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 138 61 / 0.35), transparent 65%); filter: blur(40px); pointer-events: none; }
@media (max-width: 800px) { .banner__grid { grid-template-columns: 1fr; } .banner__media { aspect-ratio: 16 / 9; } }

/* ---------- Lavori selezionati ---------- */
.work { display: flex; flex-direction: column; gap: var(--space-3); color: inherit; text-decoration: none; }
.work:hover { text-decoration: none; }
.work__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, var(--bg-soft), var(--accent-soft)); border: 1px solid var(--line); }
.work__media img, .work__media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow); }
.work:hover .work__media img { transform: scale(1.05); }
.work__media .play { position: absolute; inset: 0; display: grid; place-items: center; }
.work__media .play span { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--ink); box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease-out), background-color var(--dur); }
.work:hover .play span { transform: scale(1.1); background: var(--accent); color: #fff; }
.work__media .play svg { width: 1.3rem; height: 1.3rem; margin-left: 2px; }
.work__meta { font-size: var(--fs-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.work h3 { margin: 0; transition: color var(--dur-fast); }
.work:hover h3 { color: var(--accent); }
.work p { color: var(--ink-soft); font-size: var(--fs-sm); }
.grid--work { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-6) var(--space-5); }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.facts { display: grid; gap: var(--space-3); }
.fact { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.fact dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); font-weight: 600; }
.fact dd { margin: 0.2rem 0 0; font-weight: 600; }
@media (max-width: 800px) { .about__grid { grid-template-columns: 1fr; } }

/* ---------- Contatti ---------- */
.contact { text-align: center; }
.contact .container { max-width: var(--container-narrow); }
.contact .btn { margin-top: var(--space-4); }
.contact .social { margin-top: var(--space-6); }

/* ---------- CV ---------- */
.cv-hero { padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-6); }
.cv-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); color: var(--ink-muted); font-size: var(--fs-sm); }
.cv-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.cv-toc { position: sticky; top: 5.5rem; display: grid; gap: 0.15rem; max-height: calc(100dvh - 6.5rem); overflow: auto; padding-right: var(--space-2); }
.cv-toc a { display: block; padding: 0.45rem 0.8rem; border-left: 2px solid var(--line); color: var(--ink-soft); font-size: var(--fs-sm); text-decoration: none; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); }
.cv-toc a:hover { color: var(--accent); background: var(--accent-soft); }
.cv-toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.cv-section { padding-block: var(--space-6); border-top: 1px solid var(--line); scroll-margin-top: 5.5rem; }
.cv-section:first-child { border-top: 0; padding-top: 0; }
.cv-section > h2 { margin-bottom: var(--space-5); }
@media (max-width: 900px) {
  .cv-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .cv-toc { position: sticky; top: 4.25rem; z-index: 10; display: flex; gap: var(--space-2); max-height: none; overflow-x: auto; padding: var(--space-2) 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scrollbar-width: none; }
  .cv-toc::-webkit-scrollbar { display: none; }
  .cv-toc a { flex: none; border-left: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); padding: 0.4rem 0.85rem; white-space: nowrap; }
  .cv-toc a.is-active { border-color: var(--accent); background: var(--accent-soft); }
  .cv-section { scroll-margin-top: 8rem; }
}

/* Timeline */
.timeline { display: grid; gap: var(--space-4); }
.tl-item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-4); position: relative; padding: var(--space-4); border-radius: var(--radius-md); transition: background-color var(--dur-fast); }
.tl-item:hover { background: var(--surface); box-shadow: var(--shadow-sm); }
.tl-item__years { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); padding-top: 0.15rem; }
.tl-item__years::after { content: ""; position: absolute; left: 7.9rem; top: 1.35rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-item__body h3 { margin-bottom: 0.2rem; }
.tl-item__org { color: var(--ink-soft); font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.tl-item__body p { color: var(--ink-soft); font-size: var(--fs-sm); }
.tl-item__body .tags { margin-top: var(--space-3); }
.bullets { display: grid; gap: 0.35rem; margin-top: var(--space-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.bullets li { padding-left: 1.1rem; position: relative; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); opacity: 0.6; }
.tl-item__link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: 600; }
.tl-item__link svg { width: 1em; height: 1em; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.tl-item__link:hover svg { transform: translateX(3px); }
.ph { opacity: 0.55; padding: var(--space-4); text-align: center; }
@media (max-width: 640px) {
  .tl-item { grid-template-columns: 1fr; gap: var(--space-1); padding-left: var(--space-5); }
  .tl-item__years::after { left: 0.35rem; top: 1.45rem; }
}

/* Lista compatta */
.list { display: grid; gap: var(--space-2); }
.list-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.list-item:hover { background: var(--surface); border-color: var(--line); }
.list-item__years { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.list-item h3 { font-size: var(--fs-md); margin-bottom: 0.1rem; }
.list-item .org { color: var(--ink-soft); font-size: var(--fs-sm); }
.list-item p { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--space-2); }
@media (max-width: 640px) { .list-item { grid-template-columns: 1fr; gap: 0.15rem; } }

/* Cards CV (premi, ricerca) */
.cv-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cv-card { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.cv-card:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cv-card__years { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); letter-spacing: 0.06em; }
.cv-card h3 { font-size: var(--fs-md); margin: 0; }
.cv-card .org { color: var(--ink-muted); font-size: var(--fs-xs); }
.cv-card p { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* Skills */
.skills { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.skill { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.skill h3 { font-size: var(--fs-md); }
.skill p { color: var(--ink-soft); font-size: var(--fs-sm); }
.skill .tags { margin-top: var(--space-3); }

/* Placeholder immagini mancanti */
.ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-muted); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Ricerca: tesi ---------- */
.theses { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.thesis { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.thesis:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.thesis .work__media { display: block; }
.thesis:hover .work__media img { transform: scale(1.04); }
.thesis__body h3 { margin: var(--space-2) 0 0.2rem; }
.thesis__body p { color: var(--ink-soft); font-size: var(--fs-sm); margin-top: var(--space-2); }
.thesis__body .tags { margin-top: var(--space-3); }
@media (max-width: 760px) { .thesis { grid-template-columns: 1fr; } }

/* ---------- Pagina Ricerca: stile neumorfico (soft UI) ---------- */
body[data-page="research"] { --glow-opacity: 0.35;
  --neu-bg: #eef0f6;
  --neu-light: rgb(255 255 255 / 0.95);
  --neu-dark: rgb(163 171 195 / 0.45);
  --neu-out: -8px -8px 18px var(--neu-light), 8px 8px 18px var(--neu-dark);
  --neu-out-sm: -4px -4px 10px var(--neu-light), 4px 4px 10px var(--neu-dark);
  --neu-in: inset -4px -4px 10px var(--neu-light), inset 4px 4px 10px var(--neu-dark);
  background: var(--neu-bg);
}
body[data-page="research"] .site-header { background: color-mix(in srgb, var(--neu-bg) 85%, transparent); }
body[data-page="research"] .section--soft { background: transparent; }
body[data-page="research"] .thesis,
body[data-page="research"] .list-item,
body[data-page="research"] .cv-card,
body[data-page="research"] .tl-item {
  background: var(--neu-bg); border: 0; box-shadow: var(--neu-out); border-radius: 22px;
}
body[data-page="research"] .list-item { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
body[data-page="research"] .list { gap: var(--space-4); }
body[data-page="research"] .thesis:hover,
body[data-page="research"] .list-item:hover,
body[data-page="research"] .cv-card:hover,
body[data-page="research"] .tl-item:hover { background: var(--neu-bg); box-shadow: -10px -10px 22px var(--neu-light), 12px 12px 24px var(--neu-dark); border: 0; }
body[data-page="research"] .thesis .work__media { border: 0; box-shadow: var(--neu-in); background: var(--neu-bg); padding: 8px; }
body[data-page="research"] .thesis .work__media img { border-radius: 12px; }
body[data-page="research"] .thesis .work__media .ph { border-radius: 12px; }
body[data-page="research"] .tag { background: var(--neu-bg); box-shadow: var(--neu-out-sm); color: var(--ink-soft); }
body[data-page="research"] .cv-hero .tag { color: var(--accent); }
body[data-page="research"] .social a { background: var(--neu-bg); border: 0; box-shadow: var(--neu-out); }
body[data-page="research"] .social a:hover { box-shadow: var(--neu-in); transform: none; }
body[data-page="research"] .btn--ghost { background: var(--neu-bg); border: 0; box-shadow: var(--neu-out-sm); }
body[data-page="research"] .btn--ghost:hover { box-shadow: var(--neu-in); }
body[data-page="research"] .tl-item__link { padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--neu-bg); box-shadow: var(--neu-out-sm); }
body[data-page="research"] .tl-item__link:hover { box-shadow: var(--neu-in); text-decoration: none; }
body[data-page="research"] .tl-item__link svg { width: 0.9em; height: 0.9em; }
body[data-page="research"] .list-item__years { display: inline-grid; justify-self: start; place-items: center; align-self: start; padding: 0.3rem 0.6rem; border-radius: 999px; box-shadow: var(--neu-in); font-size: var(--fs-xs); }
body[data-page="research"] .cv-section, body[data-page="research"] .site-footer { border-color: rgb(163 171 195 / 0.35); }
body[data-page="research"] .list-item__years { white-space: nowrap; font-size: 0.7rem; }
body[data-page="research"] .list-item { grid-template-columns: 7.5rem minmax(0, 1fr); }
body[data-page="research"] .section { padding-block: var(--space-7); }
@media (max-width: 640px) { body[data-page="research"] .list-item { grid-template-columns: 1fr; } body[data-page="research"] .list-item__years { justify-self: start; } }

/* Titoli: rivelazione più corta (evita che il titolo scivoli sopra la card sotto) */
h1.reveal, h2.reveal, .section__head.reveal { --reveal-distance: 10px; }
body[data-page="research"] .section > .container > h2 { margin-bottom: var(--space-5); }

/* ---------- Colonne scelte dall'editor ---------- */
.cols-1 .timeline, .cols-1 .list, .cols-1 .cv-cards, .cols-1 .skills, .grid.cols-1 { grid-template-columns: 1fr; }
.cols-2 .timeline, .cols-2 .list, .cols-2 .cv-cards, .cols-2 .skills, .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 .timeline, .cols-3 .list, .cols-3 .cv-cards, .cols-3 .skills, .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-2 .timeline, .cols-3 .timeline, .cols-2 .list, .cols-3 .list { gap: var(--space-4); align-items: start; }
.cols-2 .tl-item, .cols-3 .tl-item, .cols-2 .list-item, .cols-3 .list-item { grid-template-columns: 1fr; gap: var(--space-1); padding-left: var(--space-5); background: var(--surface); border: 1px solid var(--line); }
.cols-2 .tl-item__years::after, .cols-3 .tl-item__years::after { left: 0.35rem; top: 1.45rem; }
.cols-2 .list-item, .cols-3 .list-item { padding-left: var(--space-4); }
@media (max-width: 960px) { .cols-3 .timeline, .cols-3 .list, .cols-3 .cv-cards, .cols-3 .skills, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols-2 .timeline, .cols-3 .timeline, .cols-2 .list, .cols-3 .list, .cols-2 .cv-cards, .cols-3 .cv-cards, .cols-2 .skills, .cols-3 .skills, .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }
.cols-4 .cv-cards, .cols-4 .skills, .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cols-4 .cv-cards, .cols-4 .skills, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols-4 .cv-cards, .cols-4 .skills, .grid.cols-4 { grid-template-columns: 1fr; } }
body[data-page="research"] .list-item__years { justify-self: start; text-align: center; min-width: 4.5rem; }

/* Nota piccola e grigia sotto la data (opzionale) */
.date-note { display: block; margin-top: 0.25rem; font-size: 0.72rem; font-weight: 500; line-height: 1.35; color: var(--ink-muted); letter-spacing: 0; text-transform: none; }
.date-note--inline { display: inline; margin: 0; }
.list-item__years-wrap { display: grid; gap: 0; align-content: start; }
body[data-page="research"] .list-item__years-wrap .date-note { margin-top: 0.4rem; }
@media (max-width: 640px) { .date-note { display: inline; margin: 0 0 0 0.5rem; } }

/* ============================================================
   NEUMORFISMO GLOBALE — card, chip, bottoni, media
   ============================================================ */
.card, .cv-card, .skill, .fact, .thesis, .tl-item, .list-item, .work__media, .banner__media, .hero__media {
  background: var(--surface); border: 0; box-shadow: var(--neu-out); border-radius: 22px;
}
.card--featured { background: var(--surface); }
.card--featured .card__icon { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: var(--neu-out-sm); }
.card__icon { background: var(--surface); box-shadow: var(--neu-in); }
.card:hover, .cv-card:hover, .skill:hover, .thesis:hover, .fact:hover { background: var(--surface); border: 0; box-shadow: var(--neu-out-lg); }
.tl-item, .list-item { box-shadow: none; }
.tl-item:hover, .list-item:hover { background: var(--surface); border: 0; box-shadow: var(--neu-out); }
.cols-2 .tl-item, .cols-3 .tl-item, .cols-2 .list-item, .cols-3 .list-item { border: 0; box-shadow: var(--neu-out); }
.work__media { box-shadow: var(--neu-out); padding: 6px; }
.work__media img, .work__media iframe { border-radius: 16px; }
.work__media .ph { border-radius: 16px; }
.work__media .play span { box-shadow: var(--neu-out-sm); }
.tag { background: var(--surface); box-shadow: var(--neu-out-sm); color: var(--ink-soft); }
.kicker + h2 + .lead ~ .grid .tag, .hero__roles .tag, .cv-hero .tag { color: var(--accent); }
.social a, .btn--ghost, .btn--light, .lang-switch, .nav__toggle { background: var(--surface); border: 0; box-shadow: var(--neu-out-sm); }
.social a:hover, .btn--ghost:hover, .btn--light:hover { box-shadow: var(--neu-in); transform: none; background: var(--surface); border: 0; }
.btn--primary { box-shadow: var(--neu-out-sm), 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.tl-item__link { padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--surface); box-shadow: var(--neu-out-sm); }
.tl-item__link:hover { box-shadow: var(--neu-in); text-decoration: none; }
.tl-item__link svg { width: 0.9em; height: 0.9em; }
.cv-toc a { border-left: 0; }
.cv-toc a.is-active { box-shadow: var(--neu-in); border-radius: 12px; }
.banner { box-shadow: var(--neu-out-lg), 0 24px 50px -24px rgb(20 24 40 / 0.45); }
.banner__media { padding: 6px; background: rgb(255 255 255 / 0.08); box-shadow: inset -3px -3px 8px rgb(255 255 255 / 0.12), inset 3px 3px 8px rgb(0 0 0 / 0.35); }
.banner__media img { border-radius: 12px; }
.cv-section, .site-footer { border-color: rgb(163 171 195 / 0.35); }
.site-header { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.site-header.is-scrolled { border-bottom: 0; box-shadow: 0 8px 18px -12px var(--neu-dark); }
@media (max-width: 760px) { .nav__links { border: 0; box-shadow: var(--neu-out-lg); background: var(--surface); } }
.banner .btn { box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.5); }
.banner .banner__bullets li { box-shadow: none; }
#print { padding-top: var(--space-7); }
/* card: altezza naturale, niente allungamenti per riempire la riga */
.grid { align-items: start; }
.card .tags { margin-top: var(--space-1); }
.card { padding: var(--space-5) var(--space-5) var(--space-5); }
.card h3 { font-size: 1.05rem; text-wrap: balance; }

/* ============================================================
   HOME — stile della vecchia home di Alessia (CSS suo, adattato)
   ============================================================ */
:root {
  --shadow_inside: inset -2px -2px 4px rgba(0, 0, 0, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.1);
  --fly_box_shadow: 16px 6px 74px rgba(1, 6, 10, 0.3), -1px -1px 2px rgba(255, 255, 255, 0.3), inset -1px -3px 1px rgba(255, 255, 255, 0.1);
  --long_card: 16px 6px 24px rgba(1, 6, 10, 0.2), -1px -1px 20px rgba(255, 255, 255, 1), inset -1px -3px 10px rgba(255, 255, 255, 1);
  --mini_card: 10px 6px 8px rgba(1, 6, 10, 0.1), -1px -1px 10px rgba(255, 255, 255, 1), inset -1px -3px 5px rgba(255, 255, 255, 1);
  --home-grey: Gainsboro;     /* fasce chiare */
  --home-dark: #3a3a3a;       /* fasce scure */
  --home-card: WhiteSmoke;    /* fondo card */
  --home-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);   /* aria tra le card */
}
body[data-page="home"] { background: #fff; }
body[data-page="home"]::before, body[data-page="home"]::after { display: none; }   /* niente glow in home */
body[data-page="home"] .site-header { background: #fff; border-bottom: 1px solid #eee; }
body[data-page="home"] .section { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* foto grande: larghezza piena, altezza naturale */
.bleed { width: 100%; overflow: clip; background: var(--home-grey); }
.bleed img { width: 100%; height: auto; display: block; }
.bleed--empty { aspect-ratio: 1980 / 813; }

/* fasce */
.band--dark { background: var(--home-dark); color: #fff; }
.band--dark .sec-title, .band--dark h2 { color: #fff; }
.band--grey { background: var(--home-grey); }
.band__inner { text-align: center; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: grid; justify-items: center; gap: var(--space-5); }
.band__inner p { max-width: 42rem; color: #fff; }
.statement { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); font-weight: 700; color: #fff; margin: 0; max-width: 36rem; line-height: 1.4; }
.statement__sub { margin: 0; color: rgb(255 255 255 / 0.7); font-size: var(--fs-sm); letter-spacing: 0.04em; }
.sec-title { text-align: center; text-transform: uppercase; font-size: 24px; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 var(--space-7); color: #333; }
.band--grey .sec-title { color: #333; }

/* bottone LinkedIn (dal suo CSS): blu, radius 20, ombra "fly", hover incavato */
.pill { display: inline-flex; align-items: center; justify-content: center; height: 43px; min-width: 150px; max-width: 195px; padding: 0 28px; border-radius: 20px; background: #0073cf; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; box-shadow: var(--fly_box_shadow); transition: box-shadow var(--dur-fast), opacity var(--dur-fast); }
.pill:hover { text-decoration: none; opacity: 0.9; box-shadow: var(--shadow_inside); }
.pill--light { background: #fff; color: var(--accent); }

/* MAIN PROJECTS — card 450×230, immagine 200, testo 180 (dal suo CSS) */
.pcards { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--home-gap); }
.pcard { display: flex; align-items: flex-start; width: 450px; max-width: 100%; height: 230px; background: var(--home-card); border-radius: 20px; box-shadow: var(--long_card); color: inherit; text-decoration: none; transition: transform var(--dur) var(--ease-out); }
.pcard:hover { transform: scale(1.05); text-decoration: none; }
.pcard__img { position: relative; flex: none; width: 200px; height: 200px; margin: 15px; border-radius: 15px; overflow: hidden; background: #e6e6e6; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__img .ph { font-size: 0.6rem; padding: 0.75rem; }
.pcard__play { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: #333; box-shadow: var(--mini_card); }
.pcard__play svg { width: 16px; height: 16px; margin-left: 1px; }
.pcard__text { display: grid; grid-template-rows: 1fr auto auto; margin: 15px 15px 15px 0; height: 200px; width: 180px; }
.pcard__text h3 { font-size: 1.4em; line-height: 1.15; color: DimGray; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__text p { font-size: 0.9em; color: DarkGray; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__text h4 { font-size: 1em; color: DarkGray; margin: 0 0 4px; font-weight: 700; }
@media (max-width: 480px) {
  .pcard { height: auto; align-items: center; }
  .pcard__img { width: 130px; height: 130px; margin: 12px; }
  .pcard__text { height: auto; width: auto; flex: 1; grid-template-rows: auto auto auto; gap: 4px; margin: 12px 12px 12px 0; }
  .pcard__text h3 { font-size: 1.1em; }
}

/* EXHIBIT — card 100×100 con immagine 80, testo a destra fuori dalla card (dal suo CSS) */
.ecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--home-gap) var(--space-6); justify-items: start; }
.ecard { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.ecard__box { flex: none; width: 100px; height: 100px; background: var(--home-card); border-radius: 20px; box-shadow: var(--mini_card); display: grid; place-items: center; }
.ecard__box img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; }
.ecard__box .ph { width: 80px; height: 80px; border-radius: 10px; font-size: 0.5rem; padding: 0.3rem; }
.ecard__text { padding-top: 2px; min-width: 0; }
.ecard__text h3 { font-size: 1em; color: #404040; margin: 0 0 4px; line-height: 1.25; }
.ecard__text p { font-size: 0.8em; color: #909090; margin: 0 0 4px; }
.ecard__text h4 { font-size: 0.8em; color: #888; margin: 0; font-weight: 700; }
@media (max-width: 400px) { .ecards { grid-template-columns: 1fr; } }

/* AWARDS — tabella anno | titolo | ente su fascia scura, due colonne */
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); max-width: 1110px; margin-inline: auto; }
.awards__row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0.1rem 1rem; padding: 0.6em 0 1.4em; font-size: 0.9em; }
.awards__year { font-weight: 700; color: #fff; grid-row: span 2; }
.awards__title { font-weight: 700; color: #fff; }
.awards__org { color: #bbb; }
@media (max-width: 760px) { .awards { grid-template-columns: 1fr; } }
.more { text-align: center; margin-top: var(--space-6); font-size: var(--fs-sm); font-weight: 600; }
.more a { display: inline-flex; align-items: center; gap: 0.3rem; }
.more svg { width: 1em; height: 1em; }
.band--dark .more a { color: #fff; }

/* THESIS — foto con angoli 20px + testo + bottoni bianchi con ombra "fly" */
.thesis-home { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--home-gap); }
.thesis-home__img { flex: 0 1 320px; border-radius: 20px; overflow: hidden; box-shadow: var(--long_card); }
.thesis-home__img img { width: 100%; height: auto; display: block; }
.thesis-home__text { flex: 1 1 280px; max-width: 630px; }
.thesis-home__text p { color: DimGray; margin-bottom: 40px; }
.thesis-home__btns { display: flex; flex-wrap: wrap; gap: 20px; }
.wbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; max-width: 260px; padding: 12px 24px; border-radius: 20px; background: #fff; color: #333; font-weight: 600; text-decoration: none; box-shadow: var(--fly_box_shadow); transition: box-shadow var(--dur-fast), opacity var(--dur-fast); }
.wbtn:hover { text-decoration: none; opacity: 0.9; box-shadow: var(--shadow_inside); }

/* SERVIZI in home: card WhiteSmoke come le sue, con aria */
body[data-page="home"] #services .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--home-gap); align-items: stretch; }
body[data-page="home"] #services .card { background: var(--home-card); box-shadow: var(--long_card); border-radius: 20px; padding: 24px; gap: 10px; }
body[data-page="home"] #services .card:hover { box-shadow: var(--long_card); transform: scale(1.03); }
body[data-page="home"] #services .card__icon { background: #fff; box-shadow: var(--mini_card); color: #0073cf; }
body[data-page="home"] #services .card h3 { color: DimGray; font-size: 1.15rem; }
body[data-page="home"] #services .card p { color: #707070; }
body[data-page="home"] #services .tag { background: #fff; box-shadow: var(--mini_card); color: #666; }

/* Banner stampa 3D in home: fascia scura semplice */
body[data-page="home"] .banner { background: var(--home-dark); }
body[data-page="home"] .banner .btn--primary { background: #0073cf; border-radius: 20px; box-shadow: var(--fly_box_shadow); }
body[data-page="home"] .banner .btn--primary:hover { box-shadow: var(--shadow_inside); opacity: 0.9; transform: none; }

/* CONTATTI in home: bianco, DimGray */
body[data-page="home"] .contact { background: #fff; }
body[data-page="home"] .contact .sec-title { color: DimGray; }
.contact__mail { font-size: 1.4em; color: DimGray; margin-bottom: var(--space-5); }
.contact__mail a { color: DimGray; }
body[data-page="home"] .social a { background: #fff; box-shadow: var(--mini_card); border: 0; }
body[data-page="home"] .social a:hover { box-shadow: var(--shadow_inside); transform: none; }

/* Banner stampa 3D: fascia scura a tutta larghezza, niente gradienti/glow */
.banner { border-radius: 0; box-shadow: none; background: var(--home-dark, #3a3a3a); }
.banner__glow { display: none; }
.banner .banner__grid { padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
#print { padding: 0; }
.banner .kicker { color: #9fc0ff; }
.banner__bullets li { background: rgb(255 255 255 / 0.1); }
.banner__bullets li::before { background: #9fc0ff; }
.banner__media { background: rgb(255 255 255 / 0.06); box-shadow: none; padding: 0; border-radius: 16px; }
.banner__media img { border-radius: 16px; }
.banner .btn--primary svg { display: none; }

/* Nastrino immagine in alto alle card dei servizi: basso e largo quanto la card */
body[data-page="home"] #services .card { padding-top: 0; overflow: hidden; }
.card__ribbon { height: 56px; margin: 0 -24px 14px; background: linear-gradient(90deg, #e3e6ee, #f4f5f8 50%, #dfe3ec); }
.card__ribbon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__ribbon .ph { display: none; }
body[data-page="home"] #services .card__icon { margin-top: -34px; position: relative; z-index: 1; }

/* Riflesso olografico che segue il mouse: bianco/grigio, iridescenza appena accennata */
.holo { position: relative; isolation: isolate; --mx: 50%; --my: 50%; }
.holo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 22%, transparent 55%),
    conic-gradient(from calc(var(--mx) * 3.6) at var(--mx) var(--my),
      rgb(255 214 232 / 0.16), rgb(214 236 255 / 0.16), rgb(222 255 236 / 0.16), rgb(255 246 214 / 0.16), rgb(236 220 255 / 0.16), rgb(255 214 232 / 0.16));
  mix-blend-mode: soft-light;
}
.holo:hover::after { opacity: 1; }
@media (hover: none) { .holo::after { display: none; } }
#work .container, #videos .container, #exhibitions .container, #services .container { max-width: 1500px; }

/* Glow iridescente che segue il mouse sulle fasce scure (banner): azzurro, verde-acqua, rosa, giallo tenui */
.holo--dark::after {
  mix-blend-mode: screen; opacity: 0.55;
  background:
    radial-gradient(38% 60% at var(--mx) var(--my), rgb(120 200 255 / 0.35), transparent 70%),
    radial-gradient(30% 50% at calc(var(--mx) + 12%) calc(var(--my) - 10%), rgb(150 240 210 / 0.22), transparent 70%),
    radial-gradient(30% 50% at calc(var(--mx) - 12%) calc(var(--my) + 12%), rgb(255 170 210 / 0.22), transparent 70%),
    radial-gradient(26% 44% at calc(var(--mx) + 4%) calc(var(--my) + 18%), rgb(255 235 160 / 0.18), transparent 70%);
  transition: opacity 0.5s var(--ease-out);
}
.holo--dark:hover::after { opacity: 1; }
.holo--dark { --mx: 70%; --my: 40%; }
.holo--dark::after { display: block !important; }
/* 3 card per riga su desktop, aria costante */
.pcard { width: 420px; }
.pcard__text { width: 160px; }
.pcards { gap: 40px; }
.ecards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 44px 32px; }
/* EXHIBIT: proporzioni come la vecchia home (testo più grande accanto alla card 100px) */
.ecards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 48px 40px; }
.ecard { gap: 18px; align-items: flex-start; }
.ecard__text { padding-top: 6px; }
.ecard__text h3 { font-size: 1.25rem; line-height: 1.2; color: #404040; margin-bottom: 6px; letter-spacing: -0.01em; }
.ecard__text p { font-size: 0.95rem; color: #909090; margin-bottom: 2px; }
.ecard__text h4 { font-size: 0.95rem; color: #888; }
.pcard__text h3 { font-size: 1.5rem; }
.pcard__text p, .pcard__text h4 { font-size: 1rem; }
/* Fasce scure: "torcia" che rivela le linee di layer di una stampa 3D + lieve iridescenza olografica.
   L'overlay sta SOTTO il testo (z-index 0) quindi non tocca la leggibilità. */
.holo--dark > * { position: relative; z-index: 1; }
.holo--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  mix-blend-mode: normal; opacity: 0; transition: opacity 0.6s var(--ease-out);
  background:
    /* linee di layer (FDM): sottili, ogni 6px, leggermente inclinate */
    repeating-linear-gradient(178deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 6px),
    /* iridescenza tenue su tutta la fascia */
    linear-gradient(115deg, rgb(140 200 255 / 0.10), rgb(150 240 210 / 0.10) 30%, rgb(255 180 215 / 0.10) 60%, rgb(255 235 160 / 0.10) 85%, rgb(140 200 255 / 0.10));
  /* la torcia: visibile solo intorno al mouse, con bordo morbido */
  -webkit-mask-image: radial-gradient(38% 55% at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.6) 40%, transparent 100%);
  mask-image: radial-gradient(38% 55% at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.6) 40%, transparent 100%);
}
.holo--dark:hover::after { opacity: 1; }
.holo--dark { --mx: 50%; --my: 50%; }

/* Card chiare: stessa idea ma con i "grafismi" delle card olografiche (bande diagonali),
   grigio/bianco, appena accennato, sempre sotto il testo */
.holo > * { position: relative; z-index: 1; }
.holo::after {
  mix-blend-mode: normal; z-index: 0;
  background:
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.55) 0 2px, transparent 2px 9px),
    linear-gradient(115deg, rgb(160 210 255 / 0.18), rgb(170 245 220 / 0.18) 30%, rgb(255 190 220 / 0.18) 60%, rgb(255 238 170 / 0.18) 85%, rgb(160 210 255 / 0.18));
  -webkit-mask-image: radial-gradient(45% 65% at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(45% 65% at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
}
.pcard__img, .ecard__box img, .card__ribbon { z-index: 1; }
/* (specificità più alta: le regole della fascia scura vincono su quelle generiche .holo) */
.holo.holo--dark::after {
  background:
    repeating-linear-gradient(178deg, rgb(255 255 255 / 0.14) 0 1px, transparent 1px 6px),
    linear-gradient(115deg, rgb(140 200 255 / 0.10), rgb(150 240 210 / 0.10) 30%, rgb(255 180 215 / 0.10) 60%, rgb(255 235 160 / 0.10) 85%, rgb(140 200 255 / 0.10));
  -webkit-mask-image: radial-gradient(26% 42% at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 100%);
  mask-image: radial-gradient(26% 42% at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 100%);
}

/* Link in fondo alle card servizi (es. verifica certificato) e link secondario nel banner */
.card__links { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgb(0 0 0 / 0.06); }
.card__links a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: #0073cf; }
.card__links a svg { width: 0.9em; height: 0.9em; }
.banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.banner__link { color: #9fc0ff; font-weight: 600; font-size: var(--fs-sm); }

/* Certificati nelle card servizi: logo dell'ente + "Certificato" (apre il PDF) */
.card__links { display: grid; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgb(0 0 0 / 0.07); }
.cred { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 6px 8px; margin: -6px -8px; border-radius: 12px; transition: background-color var(--dur-fast); }
.cred:hover { text-decoration: none; background: rgb(255 255 255 / 0.7); }
.cred__logo { height: 20px; width: auto; flex: none; object-fit: contain; }
.cred__txt { display: grid; line-height: 1.25; min-width: 0; }
.cred__txt strong { font-size: 0.82rem; font-weight: 700; color: #0073cf; }
.cred__txt small { font-size: 0.7rem; color: #8a8f9c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred__logo { height: 18px; max-width: 104px; }
.cred__txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#services .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { #services .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { #services .grid.cols-3 { grid-template-columns: 1fr; } }

/* ============================================================
   PAGINA PROGETTO
   ============================================================ */
.crumbs { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--space-2); }
.crumbs span { margin: 0 0.4rem; }
.project .cv-hero .tags { margin-top: var(--space-4); }
.project__hero { border-radius: 22px; overflow: hidden; box-shadow: var(--neu-out); background: var(--surface); padding: 10px; }
.project__video { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg); }
.project__video img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.project__video:hover img { transform: scale(1.03); }
.project__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--ink); box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease-out), background-color var(--dur); }
.project__video:hover .project__play { transform: scale(1.08); background: var(--accent); color: #fff; }
.project__play svg { width: 28px; height: 28px; margin-left: 3px; }
.project__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
.project__body h2 { font-size: var(--fs-lg); margin-top: var(--space-6); }
.project__body > div:first-child h2 { margin-top: 0; }
.project__body p { color: var(--ink-soft); }
.project__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.project__links svg { width: 1em; height: 1em; }
.project__facts .fact { border: 0; box-shadow: var(--neu-out); background: var(--surface); border-radius: 18px; }
.project__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); }
.shot { margin: 0; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--neu-out); padding: 8px; }
.shot img { width: 100%; height: auto; border-radius: 12px; display: block; }
.shot figcaption { padding: 10px 4px 2px; font-size: var(--fs-xs); color: var(--ink-muted); }
@media (max-width: 860px) { .project__grid { grid-template-columns: 1fr; } }

/* Progetti di formazione (stage) */
.tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--home-gap); align-items: stretch; }
.tcards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .tcards.cols-2 { grid-template-columns: 1fr; } }
.tcard { display: grid; grid-template-rows: auto 1fr; background: var(--home-card, WhiteSmoke); border-radius: 20px; box-shadow: var(--long_card); overflow: hidden; }
.tcard__img { aspect-ratio: 16 / 7; background: #e8e8e8; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; }
.tcard__body { padding: 22px 24px 24px; }
.tcard__year { font-size: 0.85rem; font-weight: 700; color: #0073cf; margin-bottom: 4px; }
.tcard h3 { font-size: 1.15rem; color: DimGray; margin: 0 0 4px; }
.tcard__meta { font-size: 0.85rem; color: DarkGray; margin-bottom: 10px; }
.tcard p { font-size: 0.92rem; color: #6b6f78; margin: 0; }

/* Avviso "sito in lavorazione" in fondo alla home */
.notice { background: #f1f2f6; border-top: 1px solid rgb(0 0 0 / 0.06); }
.notice .container { padding-block: 18px; }
.notice p { margin: 0; font-size: 0.82rem; line-height: 1.6; color: #8a8f9c; text-align: center; max-width: 62rem; margin-inline: auto; }
.notice a { color: #0073cf; font-weight: 600; }

/* Immagini nelle voci del CV */
.tl-item--img { grid-template-columns: 6.5rem 7.5rem minmax(0, 1fr); }
.tl-item__img { width: 6.5rem; height: 6.5rem; border-radius: 16px; overflow: hidden; background: var(--bg); box-shadow: var(--neu-in); padding: 5px; }
.tl-item__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.tl-item__img .ph { font-size: 0.5rem; }
.tl-item--img .tl-item__years::after { display: none; }
.list-item--img { grid-template-columns: 4.5rem 6.5rem minmax(0, 1fr); align-items: start; }
.list-item__img { width: 4.5rem; height: 4.5rem; border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: var(--neu-in); padding: 4px; }
.list-item__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.cv-card__img { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; margin: -6px -6px 10px; background: var(--bg); }
.cv-card__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .tl-item--img { grid-template-columns: 5rem minmax(0, 1fr); }
  .tl-item--img .tl-item__img { grid-row: span 2; width: 5rem; height: 5rem; }
  .list-item--img { grid-template-columns: 4rem minmax(0, 1fr); }
  .list-item--img .list-item__img { grid-row: span 2; }
}

/* ---- crediti immagine / note piccole ---- */
.credit { font-size: 0.68rem; line-height: 1.35; color: #9aa2ab; margin: 0.4rem 0 0; letter-spacing: 0.01em; }
.pcard__text .credit { margin-top: 0.3rem; }
.thesis__body .credit, .thesis-home__text .credit { margin-top: 0.6rem; }

/* ---- correzione: la card con immagine tiene le tre colonne anche su Ricerca ---- */
body[data-page="research"] .list-item--img,
body[data-page="cv"] .list-item--img { grid-template-columns: 5.5rem 7.5rem minmax(0, 1fr); }
@media (max-width: 700px) {
  body[data-page="research"] .list-item--img,
  body[data-page="cv"] .list-item--img { grid-template-columns: 4.5rem minmax(0, 1fr); }
  body[data-page="research"] .list-item--img .docstack,
  body[data-page="research"] .list-item--img .list-item__img { grid-row: span 2; }
}

/* ---- pila di fogli: copertina del documento su fogli sfalsati ---- */
.docstack { position: relative; width: 4.6rem; height: 6rem; align-self: start; }
.docstack__sheet,
.docstack__page {
  position: absolute; inset: 0; border-radius: 6px; background: #fdfdfe;
  box-shadow: 3px 4px 10px rgb(1 6 10 / 0.16), -1px -1px 6px rgb(255 255 255 / 0.9);
}
.docstack__sheet--3 { transform: rotate(-5.5deg) translate(-4px, 4px); background: #f1f2f6; }
.docstack__sheet--2 { transform: rotate(2.5deg) translate(3px, 2px); background: #f7f8fb; }
.docstack__page { overflow: hidden; padding: 3px; transition: transform var(--dur) var(--ease-out); }
.docstack__page img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 4px; display: block; }
.docstack__page .ph { font-size: 0.5rem; padding: 0.3rem; }
.list-item:hover .docstack__page { transform: translate(-2px, -3px) rotate(-1deg); }
@media (prefers-reduced-motion: reduce) { .list-item:hover .docstack__page { transform: none; } }

/* ---- banner per scaricare il CV Resume in cima alla pagina CV ---- */
.cvdl {
  display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5);
  padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--surface);
  box-shadow: var(--neu-out); color: inherit; text-decoration: none; max-width: 30rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cvdl:hover { transform: translateY(-2px); box-shadow: var(--neu-out-lg); }
.cvdl__shot { flex: none; width: 3.2rem; height: 4.4rem; border-radius: 8px; overflow: hidden; box-shadow: 3px 4px 10px rgb(1 6 10 / 0.16); background: #fff; }
.cvdl__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cvdl__text { display: grid; gap: 2px; }
.cvdl__text strong { font-size: var(--fs-sm); }
.cvdl__text small { color: var(--ink-soft); font-size: var(--fs-xs); }
.cvdl__arrow { margin-left: auto; color: var(--accent); display: grid; place-items: center; }
.cvdl__arrow svg { width: 1rem; height: 1rem; }
@media (max-width: 520px) { .cvdl { max-width: 100%; } }

/* ---- logo dell'ente quando non c'è una foto: piccolo e centrato, mai tagliato ---- */
.list-item__img--logo, .cv-card__img--logo, .tl-item__img--logo {
  display: grid; place-items: center; background: #fbfbfd; box-shadow: var(--neu-in); padding: 10px;
}
.list-item__img--logo img, .cv-card__img--logo img, .tl-item__img--logo img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 0;
}
.cv-card__img--logo { aspect-ratio: 16 / 9; }