/* ==========================================================================
   VOGEL DIGITAL · PORTFOLIO · v3.0 (01/set/2026)
   Depende de tokens.css e site.css. Reaproveita .shot da home.

   🔴 REGRA DESTA PAGINA: a prova e o trabalho mostrado, nunca o numero
   somado da carteira. Nao existe contador agregado em fonte grande aqui.
   Escopo por projeto em lista tecnica discreta e permitido e e informativo.
   ========================================================================== */

/* ---------- abertura ---------- */
.pf-hero { padding-top: clamp(130px, 16vw, 190px); padding-bottom: clamp(48px, 6vw, 76px); }
.pf-hero h1 { font-size: var(--vd-text-display); max-width: 15ch; }
.pf-hero .lead { margin-top: 28px; }

/* ---------- bloco de caso ---------- */
.case {
  padding-block: clamp(56px, 7.5vw, 104px);
  border-top: 1px solid var(--vd-border);
  scroll-margin-top: 92px;
}
.case__in {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(34px, 4.6vw, 72px); align-items: start;
}
@media (max-width: 1000px) { .case__in { grid-template-columns: 1fr; } }
@media (min-width: 1001px) { .case--flip .case__info { order: -1; } }

.case__head { margin-bottom: 22px; }
.case__seg {
  font-family: var(--vd-font-mono); font-size: var(--vd-text-2xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--vd-accent);
}
.case h2 { margin-top: 14px; font-size: clamp(1.5rem, 2.9vw, 2.125rem); }
.case__where {
  margin-top: 10px; font-family: var(--vd-font-mono); font-size: var(--vd-text-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--vd-text-subtle);
}
.case__desc { margin-top: 22px; color: var(--vd-text-muted); font-size: var(--vd-text-sm); line-height: 1.72; max-width: 46ch; }
.case__desc + .case__desc { margin-top: 13px; }
.case__desc strong { color: var(--vd-text); font-weight: var(--vd-weight-bold); }

.case__link { margin-top: 26px; }

/* ---------- tira de pecas reais ---------- */
.strip { overflow: hidden; border-block: 1px solid var(--vd-border); padding-block: clamp(26px, 3vw, 40px); }
.strip__track { display: flex; gap: 16px; width: max-content; animation: stripmove 68s linear infinite; }
.strip--rev .strip__track { animation-direction: reverse; }
.strip__track img {
  width: clamp(150px, 17vw, 210px); height: auto; border-radius: var(--vd-radius-md);
  border: 1px solid var(--vd-border); flex: none;
}
@keyframes stripmove { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

.covers { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; margin-top: 30px; }
.covers img { width: 100%; border-radius: var(--vd-radius-full); border: 1px solid var(--vd-border); }
@media (max-width: 900px) { .covers { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 520px) { .covers { grid-template-columns: repeat(4, 1fr); } }

/* ---------- nota de honestidade ---------- */
.note {
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--vd-border); border-left: 2px solid var(--vd-accent);
  border-radius: 0 var(--vd-radius-lg) var(--vd-radius-lg) 0;
  max-width: 74ch;
}
.note__k { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .17em; text-transform: uppercase; color: var(--vd-accent); }
.note p { margin-top: 13px; color: var(--vd-text-muted); font-size: var(--vd-text-sm); line-height: 1.72; }
.note p + p { margin-top: 11px; }
.note strong { color: var(--vd-text); font-weight: var(--vd-weight-bold); }

/* na pagina de portfolio o mockup ocupa mais area */
.case .shot { padding-bottom: 0; }
.case .shot__win { height: clamp(230px, 30vw, 400px); }
.case .shot__phone { width: clamp(96px, 12vw, 148px); }