/* =========================================================
   francescobarbic.com
   Colori, font e misure principali sono qui sotto come variabili.
   Le misure ricalcano il tema del vecchio sito su Adobe Portfolio.
   ========================================================= */

@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/jost-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #ffffff;
  --text: #454545;        /* testi dei progetti */
  --title: #2a2a2a;       /* titoli delle pagine */
  --nav: #505050;         /* menu */
  --muted: #999999;
  --icon: #aaaaaa;

  --font: "futura-pt", "Jost", "Futura", "Century Gothic", sans-serif;
  --font-hero: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --content-max: 1080px;  /* larghezza massima di immagini e video nei progetti */
  --text-max: 880px;      /* larghezza massima dei testi */
  --radius: 8px;          /* angoli arrotondati delle copertine in home */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
body.menu-open { overflow: hidden; }
.text-center { text-align: center; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 3% 18px calc(1% + 36px);
  background: var(--bg);
}
.logo { display: block; line-height: 0; }
.logo img { height: 26px; width: auto; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav li { padding-left: 32px; padding-right: 10px; }
.nav li:last-child { padding-right: 0; }
.nav a {
  color: var(--nav);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-decoration: none;
  text-transform: uppercase;
}
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { font-weight: 500; }

.menu-toggle {
  display: none;
  width: 24px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; margin-bottom: 4px; background: #000; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle span:last-child { margin-bottom: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 50px 5% 0;
  background: #fff;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.mobile-menu li { padding-bottom: 30px; }
.mobile-menu a { color: var(--nav); font-size: 22px; line-height: 32px; font-weight: 400; text-transform: uppercase; text-decoration: none; }

@media (max-width: 932px) {
  .site-header { padding: 40px 5%; }
  .nav { display: none; }
  .menu-toggle { display: block; }
}
@media (max-width: 540px) {
  .site-header { padding-top: 30px; padding-bottom: 30px; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  height: 70vh;
  margin-bottom: 4px;
  padding-left: 8%;
  overflow: hidden;
  background: #f5f5f5;
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: relative; z-index: 1; }
.hero-title {
  margin: 400px 0 25px;
  color: #e3e3e3;
  font-family: var(--font-hero);
  font-size: 56px;
  font-weight: 400;
  line-height: 12px;
}
.hero-subtitle { margin: 0; color: #c7c7c7; font-size: 28px; font-weight: 300; line-height: 38px; }
@media (max-width: 932px) {
  .hero { margin-bottom: 5px; padding-right: 5%; }
  .hero-title { margin: 120px 0 15px; font-size: 27px; line-height: 6px; }
  .hero-subtitle { font-size: 16px; line-height: 22px; }
}
@media (max-width: 540px) {
  /* correzione: su telefono nome e qualifica stanno in basso, così non coprono il prodotto nel video */
  .hero { align-items: flex-end; padding-bottom: 28px; }
  .hero-text { text-shadow: 0 1px 10px rgba(0, 0, 0, .25); }
  .hero-title { margin: 0 0 14px; font-size: 24px; line-height: 5px; }
  .hero-subtitle { font-size: 14px; line-height: 19px; }
}

/* ---------- Griglia progetti (home) ---------- */
.project-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 1%;
  padding-top: 50px;
}
.project-cover { position: relative; display: block; width: 33.3333%; text-decoration: none; }
.cover-media {
  position: relative;
  width: 96%;
  margin: 0 auto 4%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .03);
}
.cover-media picture, .cover-media img { width: 100%; height: 100%; }
.cover-media img { object-fit: cover; }
.cover-media::after {
  content: ""; position: absolute; inset: 0;
  background: #191919; opacity: .02;
  transition: background-color .2s ease, opacity .2s ease;
}
.cover-details {
  position: absolute;
  top: 0; left: 2%; right: 2%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 8% 7%;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.cover-title { color: #ebebeb; font-size: 28px; font-weight: 300; line-height: 34px; }
.cover-category { color: #b4b4b4; font-size: 22px; font-weight: 300; line-height: 30px; }
@media (hover: hover) {
  .project-cover:hover .cover-media::after,
  .project-cover:focus-visible .cover-media::after { background: #000; opacity: .55; }
  .project-cover:hover .cover-details,
  .project-cover:focus-visible .cover-details { opacity: 1; }
}
@media (max-width: 932px) {
  .project-grid { margin: 0; padding-top: 24px; }
  .project-cover { width: 50%; }
  .cover-media { margin-bottom: 5%; }
  .cover-title { font-size: 19px; line-height: 23px; }
  .cover-category { display: none; }
}
@media (max-width: 540px) {
  .project-grid { padding-top: 21px; }
  .project-cover { width: 100%; }
  .cover-title { font-size: 16px; line-height: 19px; }
}
/* Correzione rispetto al vecchio sito: su telefono e tablet (dove non c'è il passaggio del mouse)
   il titolo del progetto è sempre visibile, sotto la copertina. */
@media (hover: none) {
  .cover-media { margin-bottom: 0; }
  .cover-details {
    position: static; aspect-ratio: auto; opacity: 1;
    width: 96%; margin: 0 auto 6%; padding: 10px 2px 0;
  }
  .cover-title { color: var(--title); font-size: 17px; line-height: 22px; font-weight: 400; }
  .cover-category { display: block; color: var(--muted); font-size: 14px; line-height: 20px; }
}

/* ---------- Titolo delle pagine ---------- */
.page-header { margin: 0 auto; text-align: center; }
.page-title {
  margin: 0;
  padding: 60px 5% 40px;
  color: var(--title);
  font-size: 64px;
  font-weight: 700;
  line-height: 70px;
}
@media (max-width: 932px) { .page-title { padding: 28px 5% 20px; font-size: 37px; line-height: 40px; } }
@media (max-width: 540px) { .page-title { padding: 25px 5% 18px; font-size: 30px; line-height: 33px; } }

/* ---------- Contenuto di progetti e pagine ---------- */
.prose {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-bottom: 40px;
  font-size: 20px;
  line-height: 28px;
}
.page-portfolio .prose { --content-max: 1280px; }
.prose :where(p, h2, h3, ul, ol, blockquote) {
  width: 96%;
  max-width: var(--text-max);
  margin: 0 auto 20px;
}
.prose h2 { margin-top: 36px; margin-bottom: 8px; color: var(--text); font-size: 28px; font-weight: 400; line-height: 34px; }
.prose h3 { margin-top: 28px; margin-bottom: 8px; font-size: 22px; font-weight: 400; line-height: 28px; }
.prose > h2:first-child, .prose > .text-center:first-child h2 { margin-top: 0; }
.prose a { color: var(--muted); text-decoration: underline; }
.prose .text-center :where(p, h2) { text-align: center; }

/* immagini e video: a tutta larghezza del contenuto, uno sotto l'altro */
.prose > p:has(> picture:only-child, > img:only-child) { width: 100%; max-width: none; margin: 0 0 12px; }
.prose > p > picture, .prose > p > picture img, .prose > p > img { width: 100%; }
.media { margin: 0 0 12px; }
.media-video video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.media-embed { position: relative; width: 100%; margin-bottom: 24px; background: #000; }
.media-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose > p + .media-embed, .prose > h2 + .media-embed { margin-top: 12px; }

/* griglie di immagini: righe giustificate come su Adobe Portfolio */
.media-grid { display: flex; flex-wrap: wrap; gap: var(--gap, 12px); margin: 0 0 12px; }
.media-grid__item { flex: calc(var(--r) * 260) 1 calc(var(--r) * 260px); min-width: 0; }
.media-grid--cols .media-grid__item { flex: var(--r) 1 calc((100% - (var(--cols) - 1) * var(--gap, 12px)) / var(--cols)); }
.media-grid__item picture, .media-grid__item img { width: 100%; height: auto; }
.media-grid__item .media { margin: 0; height: 100%; }

@media (max-width: 932px) {
  .prose { font-size: 18px; line-height: 26px; }
  .prose h2 { font-size: 24px; line-height: 30px; }
}
@media (max-width: 540px) {
  .prose { font-size: 17px; line-height: 24px; }
  .prose :where(p, h2, h3, ul, ol, blockquote) { width: 90%; }
  .prose h2 { font-size: 22px; line-height: 28px; }
}

/* ---------- "See more" in fondo ai progetti ---------- */
.see-more { padding: 0 1% 20px; }
.see-more-title { margin: 40px 0; text-align: center; color: #323232; font-size: 30px; font-weight: 700; line-height: 30px; }
.see-more .project-grid { margin: 0; padding: 0; gap: 0 .5%; }
.see-more .project-cover { width: 24.625%; }
.see-more .cover-media { width: 100%; margin: 0; border-radius: 0; }
.see-more .cover-details { left: 0; right: 0; padding: 0 8% 6%; }
.see-more .cover-title { color: #fff; font-size: 20px; font-weight: 700; line-height: 30px; }
.see-more .cover-category { color: #fff; font-size: 16px; font-weight: 400; line-height: 20px; }
@media (hover: hover) {
  .see-more .project-cover:hover .cover-media::after { opacity: .5; }
}
@media (max-width: 932px) {
  .see-more-title { margin: 20px 0; font-size: 22px; line-height: 22px; }
  .see-more .project-grid { gap: 12px 2%; }
  .see-more .project-cover { width: 49%; }
}
@media (hover: none) {
  .see-more .cover-details { width: 100%; padding: 8px 2px 0; }
  .see-more .cover-title { color: var(--title); font-size: 16px; font-weight: 400; line-height: 20px; }
  .see-more .cover-category { color: var(--muted); font-size: 13px; }
}

/* ---------- About ---------- */
.page-about .prose p { line-height: 32px; }
.page-about .prose h2 { font-size: 32px; line-height: 38px; font-weight: 300; margin-top: 60px; }

/* ---------- Clients ---------- */
.page-clients .prose { --content-max: 900px; width: 90%; }
.page-clients .prose h2 {
  width: 100%; margin: 20px auto 40px;
  text-align: center; font-size: 42px; font-weight: 300; line-height: 44px; color: #111;
}
.page-clients .prose h2:not(:first-child) { margin-top: 60px; }
@media (max-width: 932px) { .page-clients .prose h2 { font-size: 28px; line-height: 30px; } }
@media (max-width: 540px) { .page-clients .prose h2 { font-size: 23px; line-height: 26px; } }

/* ---------- Showreel ---------- */
.page-showreel .media-embed { max-width: 1080px; margin: 0 auto; }

/* ---------- Contact ---------- */
.contact-form { max-width: 600px; width: 90%; margin: 0 auto; display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 400; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 10px 12px;
  font: inherit; font-size: 16px; font-weight: 300; color: var(--text);
  border: 1px solid #ddd; border-radius: 0; background: #fff; outline: none;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: #999; }
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form button {
  justify-self: center; margin-top: 6px; padding: 10px 38px;
  font: inherit; font-size: 15px; font-weight: 400; color: #fff;
  background: #505050; border: 1px solid #505050; border-radius: 999px; cursor: pointer;
}
.contact-form button:hover { background: #222; border-color: #222; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { max-width: 600px; width: 90%; margin: 0 auto 24px; text-align: center; font-size: 18px; }
.contact-info { margin: 50px auto 0; text-align: center; font-style: normal; font-size: 20px; line-height: 30px; color: var(--text); }
.contact-info .vat { font-size: 18px; }

.contact-email { margin: 10px auto 0; text-align: center; font-size: 26px; font-weight: 300; line-height: 34px; }
.contact-email a { color: var(--title); text-decoration: none; border-bottom: 1px solid #ccc; }
.contact-email a:hover { border-color: var(--title); }

/* ---------- Footer ---------- */
.site-footer { padding: 60px 0 30px; text-align: center; }
.social { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 15px; }
.social a { display: block; color: var(--icon); }
.social a:hover { color: var(--nav); }
.social svg { width: 30px; height: 30px; }
@media (max-width: 932px) { .site-footer { padding: 28px 5% 24px; } }
@media (max-width: 540px) { .site-footer { padding: 25px 5% 20px; } }