/* =========================
   VD · Portfolio (card grid stile Giammaria)
   ========================= */

.vd-portfolio-page {
  --vd-dark: #0c2931;
  --vd-dark-deep: #081c22;
  --vd-mid: #4a5f6a;
  --vd-light: #ededed;
  --vd-paper: #f6f5f3;
  --vd-soft: #b7c5cd;
  --vd-accent: #ff810a;
  --vd-border-light: rgba(237, 237, 237, 0.16);
  --vd-border-dark: rgba(12, 41, 49, 0.12);
  --vd-font-ui: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --vd-font-body: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --vd-wrap: var(--vd-template-wrap, 1240px);
  --vd-radius-pill: 9999px;
  --vd-duration: 0.32s;
  --vd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  background: var(--vd-paper);
  color: var(--vd-dark);
  font-family: var(--vd-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

.vd-portfolio-page *,
.vd-portfolio-page *::before,
.vd-portfolio-page *::after {
  box-sizing: border-box;
}

.vd-portfolio-page img {
  max-width: 100%;
}

.vd-portfolio-wrap {
  width: min(var(--vd-wrap), 92%);
  margin: 0 auto;
}

.vd-portfolio-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Hero ===== */

.vd-portfolio-hero {
  background: var(--vd-paper);
  color: var(--vd-dark);
  padding: clamp(120px, 18vw, 220px) 0 clamp(60px, 10vw, 140px);
}

.vd-portfolio-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  color: var(--vd-dark);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.vd-portfolio-eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: currentColor;
}

.vd-portfolio-eyebrow--on-dark {
  color: var(--vd-soft);
}

.vd-portfolio-display {
  margin: 0;
  font-family: var(--vd-font-ui);
  font-weight: 900;
  font-size: clamp(72px, 16vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--vd-dark);
  font-stretch: 75%;
  font-variation-settings: 'wdth' 75;
}

.vd-portfolio-lead {
  max-width: 64ch;
  margin: clamp(28px, 4vw, 48px) 0 0;
  color: var(--vd-dark);
  font-family: var(--vd-font-body);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.7;
}

.vd-portfolio-lead--secondary {
  margin-top: clamp(14px, 1.6vw, 20px);
}

.vd-portfolio-lead--on-dark {
  color: rgba(237, 237, 237, 0.78);
}

/* ===== Projects panel (full-bleed dark con rounded top) ===== */

.vd-portfolio-projects {
  position: relative;
  margin: 0 calc(50% - 50vw);
  padding: clamp(60px, 9vw, 130px) 0 clamp(80px, 12vw, 160px);
  background: var(--vd-dark);
  color: var(--vd-light);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
}

.vd-portfolio-empty {
  padding: 28px 0;
  border-top: 1px solid var(--vd-border-light);
  border-bottom: 1px solid var(--vd-border-light);
  color: rgba(237, 237, 237, 0.78);
  font-family: var(--vd-font-body);
}

/* ===== Grid ===== */

.vd-portfolio-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 36px);
}

.vd-portfolio-grid__item {
  position: relative;
}

/* ===== Card ===== */

.vd-portfolio-card {
  --vd-card-bg: #ece9e0;
  --vd-card-text: #0c2931;
  --vd-card-surface: #f6f5f3;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  aspect-ratio: 4 / 5.4;
  background: var(--vd-card-surface);
  color: var(--vd-dark);
  border-radius: clamp(18px, 1.6vw, 24px);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.45s var(--vd-ease), box-shadow 0.45s var(--vd-ease);
  box-shadow: 0 18px 40px -28px rgba(8, 28, 34, 0.5);
}

.vd-portfolio-card.is-linked {
  cursor: pointer;
}

.vd-portfolio-card.is-linked:hover,
.vd-portfolio-card.is-linked:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -32px rgba(8, 28, 34, 0.65);
}

.vd-portfolio-card.is-linked:focus-visible {
  outline: 2px solid var(--vd-accent);
  outline-offset: 6px;
}

/* Card head (banda colorata con palette del progetto) */

.vd-portfolio-card__head {
  position: relative;
  background: var(--vd-card-bg);
  color: var(--vd-card-text);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px) clamp(20px, 2.3vw, 28px);
  min-height: clamp(108px, 13.2vw, 144px);
}

.vd-portfolio-card__divider {
  display: block;
  width: clamp(22px, 2vw, 32px);
  height: 2px;
  background: var(--vd-card-text);
  margin-bottom: clamp(18px, 2.2vw, 30px);
  opacity: 0.85;
}

.vd-portfolio-card__year {
  position: absolute;
  top: clamp(16px, 1.9vw, 22px);
  right: clamp(16px, 1.9vw, 22px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 4vw, 50px);
  height: clamp(38px, 4vw, 50px);
  background: var(--vd-card-text);
  color: var(--vd-card-bg);
  border-radius: 9999px;
  font-size: clamp(11px, 1.05vw, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vd-portfolio-card__name {
  margin: 0;
  font-family: var(--vd-font-ui);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vd-card-text);
  font-stretch: 75%;
  font-variation-settings: 'wdth' 75;
  word-break: break-word;
}

.vd-portfolio-card__sector {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vd-card-text);
  opacity: 0.78;
}

/* Card media (immagine + overlay + tags) */

.vd-portfolio-card__media {
  position: relative;
  overflow: visible;
  background: var(--vd-card-surface);
}

.vd-portfolio-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s var(--vd-ease);
}

.vd-portfolio-card__image--placeholder {
  background:
    linear-gradient(135deg, rgba(12, 41, 49, 0.05), rgba(12, 41, 49, 0.02)),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(12, 41, 49, 0.04) 14px 15px);
}

.vd-portfolio-card.is-linked:hover .vd-portfolio-card__image,
.vd-portfolio-card.is-linked:focus-visible .vd-portfolio-card__image {
  transform: scale(1.04);
}

/* Service tag pill che escono dal bordo destro inferiore */

.vd-portfolio-card__tags {
  position: absolute;
  right: clamp(-14px, -1.4vw, -8px);
  bottom: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(8px, 1vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.vd-portfolio-card__tag {
  display: inline-block;
  padding: clamp(8px, 1vw, 12px) clamp(14px, 1.6vw, 20px);
  background: var(--vd-card-bg);
  color: var(--vd-card-text);
  border-radius: 9999px;
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px -10px rgba(8, 28, 34, 0.55);
}

/* ===== CTA finale (dentro panel dark, niente full-bleed extra) ===== */

.vd-portfolio-cta {
  background: var(--vd-dark);
  color: var(--vd-light);
  padding: 0 0 clamp(100px, 14vw, 180px);
  margin: 0 calc(50% - 50vw);
}

.vd-portfolio-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.vd-portfolio-h2 {
  margin: 0;
  font-family: var(--vd-font-ui);
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vd-light);
  font-stretch: 80%;
  font-variation-settings: 'wdth' 80;
}

.vd-portfolio-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: clamp(28px, 3.4vw, 40px);
  padding: 12px 28px;
  border: 1px solid currentColor;
  border-radius: var(--vd-radius-pill);
  background: transparent;
  color: inherit;
  font-family: var(--vd-font-ui);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color var(--vd-duration) ease, border-color var(--vd-duration) ease;
}

.vd-portfolio-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vd-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.46s var(--vd-ease);
}

.vd-portfolio-btn:hover,
.vd-portfolio-btn:focus-visible {
  border-color: var(--vd-accent);
  color: var(--vd-dark);
}

.vd-portfolio-btn:hover::before,
.vd-portfolio-btn:focus-visible::before {
  transform: scaleX(1);
}

/* ===== Reveal on scroll ===== */

.vd-portfolio-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--vd-ease), transform 0.7s var(--vd-ease);
  will-change: opacity, transform;
}

.vd-portfolio-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .vd-portfolio-reveal,
  .vd-portfolio-card,
  .vd-portfolio-card__image,
  .vd-portfolio-btn,
  .vd-portfolio-btn::before {
    transition: none;
    transform: none;
  }

  .vd-portfolio-reveal {
    opacity: 1;
  }
}

/* ===== Responsive ===== */

@media (max-width: 960px) {
  .vd-portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .vd-portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .vd-portfolio-card {
    aspect-ratio: 4 / 5;
  }

  .vd-portfolio-card__tags {
    right: -8px;
    bottom: 20px;
  }
}