/* ==========================================================================
   Spazio — stili delle pagine lavori (case study)
   Da caricare dopo assets/css/style.css
   ========================================================================== */

/* ---------- Hero del caso ---------- */
.case-hero { background: var(--ink); color: var(--paper); padding: 143px var(--pad) 0; }
.case-hero__bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,241,236,.7);
}
.case-hero__back { display: inline-flex; align-items: center; gap: 9px; }
.case-hero__year { color: var(--accent-lift); }
.case-hero h1 {
  margin: 0;
  font-size: clamp(42px,7vw,112px);
  line-height: .98;
  letter-spacing: -.042em;
  font-weight: 500;
}
.case-hero h1.case-hero__h1--tall { font-size: clamp(42px,7.4vw,116px); line-height: .96; letter-spacing: -.045em; }
.case-hero__intro {
  margin: 0;
  max-width: 52ch;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(243,241,236,.74);
  animation-delay: .45s;
}

/* Scheda dati */
.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1px;
  background: var(--hair-d);
  border-top: 1px solid var(--hair-d);
  margin-top: 18px;
}
.case-meta__cell {
  background: var(--ink);
  padding: 26px 22px 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-meta__val { font-size: 19px; letter-spacing: -.015em; }
.case-meta__val .ext { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Cover ---------- */
.case-cover-sec { padding: 0 var(--pad); }
.case-cover {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}
.case-cover img { width: 100%; height: 100%; object-fit: cover; }

@keyframes coverWipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes coverIn { from { transform: scale(1.12); opacity: .35; } to { transform: scale(1); opacity: 1; } }
@keyframes coverFade { from { opacity: .25; } to { opacity: 1; } }
[data-cover] { animation: coverWipe 1.15s cubic-bezier(.76,0,.24,1) .25s both; }
[data-cover] > img { animation: coverIn 1.8s cubic-bezier(.16,1,.3,1) .25s both; }

@supports (animation-timeline: view()) {
  @keyframes sectionRise { from { opacity: .001; transform: translateY(34px); } to { opacity: 1; transform: none; } }
  @keyframes fadeOnlyRise { from { opacity: .001; } to { opacity: 1; } }
  @keyframes coverDrift { from { transform: scale(1.14) translateY(-2.4%); } to { transform: scale(1.14) translateY(2.4%); } }
  @keyframes imgWipe { from { clip-path: inset(0 0 24% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

  .case-text [data-reveal-row] {
    animation: sectionRise linear forwards;
    animation-timeline: view();
    animation-range: entry 5% entry 70%;
  }
  [data-rise] {
    animation: fadeOnlyRise linear forwards;
    animation-timeline: view();
    animation-range: entry 5% entry 60%;
  }
  [data-cover] > img {
    animation: coverFade 1.2s cubic-bezier(.16,1,.3,1) .25s both, coverDrift linear forwards;
    animation-timeline: auto, view();
    animation-range: normal, cover 0% cover 100%;
  }
  .gallery [data-reveal-row] { animation: none; opacity: 1; }
  .gallery [data-reveal-row] > .g-media {
    animation: imgWipe linear forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 18%;
  }
  [data-scrub-line] {
    transform-origin: left;
    animation: lineGrow linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-cover], [data-cover] > img, [data-rise], [data-scrub-line],
  .gallery [data-reveal-row] > .g-media { animation: none !important; }
}

/* ---------- Testo del progetto ---------- */
.case-body { padding: 110px var(--pad) 0; }
.case-body__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 70px 60px;
  align-items: start;
}
.case-body__aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.case-body__aside h2 {
  margin: 0;
  font-size: clamp(30px,3.6vw,54px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 500;
}
.case-text {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.66;
  color: rgba(11,11,11,.78);
  text-wrap: pretty;
}
.case-text p { margin: 0; }
.case-text .chip-row { padding-top: 6px; }

/* ---------- Galleria ---------- */
.gallery-sec { padding: 100px var(--pad) 0; }
.gallery {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 28px;
}
.g { display: flex; flex-direction: column; gap: 12px; }
.g--1 { grid-column: span 1; }
.g--2 { grid-column: span 2; }
.g--3 { grid-column: span 3; }
.g--4 { grid-column: span 4; }
.g--6 { grid-column: span 6; }
.g-media { position: relative; overflow: hidden; background: #EDEEF0; }
.g-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.g-media--contain { display: flex; align-items: center; justify-content: center; background: #FDFAF4; }
.g-media--contain img { position: static; width: 100%; height: 100%; object-fit: contain; }
.g-media--fill img { position: static; }
.g-media--flex { flex: 1; min-height: 0; }

/* posizione del soggetto */
.op-45 { object-position: center 45%; }
.op-62 { object-position: center 62%; }
.op-top { object-position: center top; }

/* fondi specifici delle immagini */
.bg-cream { background: #FDFAF4; }
.bg-stone { background: #EDEEF0; }
.bg-sand { background: #E4E1DA; }
.bg-paper { background: #F7F5F0; }
.bg-paper-2 { background: #EDEBE6; }
.bg-paper-3 { background: #E9E7E1; }
.bg-ink { background: var(--ink); }
.bg-accent { background: var(--accent); }
.bg-blush { background: #F7DCDA; }
.bg-brown { background: #241A13; }
.bg-night { background: #0F1218; }
.bg-dark { background: #141414; }
.bg-roman { background: #1A1512; }

/* ---------- CTA finale ---------- */
.case-cta { padding: 110px var(--pad); background: var(--paper); }
.case-cta__row {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 40px;
  align-items: center;
  padding-top: 56px;
  position: relative;
  border-top: 1px solid var(--hair-l);
}
.case-cta__row--scrub { border-top: 0; }
.case-cta__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(11,11,11,.3); }
.case-cta__col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ---------- Prossimo progetto ---------- */
.next-sec { background: var(--ink); color: var(--paper); padding: 80px var(--pad); }
.next {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 40px;
  align-items: center;
}
.next__body { display: flex; flex-direction: column; gap: 16px; }
.next__body h2 { margin: 0; font-size: clamp(34px,5vw,76px); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.next__tags { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-lift); }
.next__arrow { display: flex; justify-content: flex-end; }
.next:hover .arrow--86 { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .case-hero h1, .case-hero h1.case-hero__h1--tall { font-size: clamp(38px,11vw,72px); }
  .case-hero { padding-top: 127px; }
  .case-body { padding-top: 70px; }
  .case-body__grid { grid-template-columns: 1fr; gap: 40px; }
  .case-body__aside { position: static; }
  .case-body__aside h2 { font-size: clamp(28px,8vw,44px); }
  .case-cover { aspect-ratio: 4/3; }
  .case-cover img { object-fit: cover; }

  .gallery-sec { padding-top: 70px; }
  .gallery { grid-template-columns: 1fr; gap: 22px; }
  .g { grid-column: auto; }
  .g-media--contain { aspect-ratio: auto; }
  .g-media--contain img { position: static; height: auto; width: 100%; object-fit: contain; }

  .case-cta { padding: 80px var(--pad) 40px; }
  .next-sec { padding: 60px var(--pad) 30px; }
}