/* ==========================================================================
   Pagina Portfolio e Case Study – navbar link attivo
   ========================================================================== */

.portfolio-page .nav-link,
.portfolio-page .mobile-nav-link,
[class*="case-study-"] .nav-link,
[class*="case-study-"] .mobile-nav-link {
  color: #ffffff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: none;
}

.portfolio-page .nav-link-home,
.portfolio-page .mobile-nav-link-home,
[class*="case-study-"] .nav-link-home,
[class*="case-study-"] .mobile-nav-link-home {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffffff;
  text-shadow: none;
}

.portfolio-page .nav-link-home::after,
[class*="case-study-"] .nav-link-home::after {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-accent),
    var(--color-secondary)
  );
}

/* Voce attiva: Portfolio */
.portfolio-page .nav-link-active,
.portfolio-page .mobile-nav-link-active,
[class*="case-study-"] .nav-link-active,
[class*="case-study-"] .mobile-nav-link-active {
  font-weight: 700;
  letter-spacing: 0.28em;
  font-size: 0.9rem;
  background: linear-gradient(
    120deg,
    var(--color-accent),
    var(--color-secondary),
    var(--color-magenta)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(59, 130, 246, 0.55);
}

.portfolio-page .nav-link-active::after,
.portfolio-page .mobile-nav-link-active::after,
[class*="case-study-"] .nav-link-active::after,
[class*="case-study-"] .mobile-nav-link-active::after {
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-accent),
    var(--color-secondary),
    var(--color-magenta)
  );
}

.portfolio-page .nav-link-active:hover,
.portfolio-page .nav-link-active:focus-visible,
.portfolio-page .mobile-nav-link-active:hover,
.portfolio-page .mobile-nav-link-active:focus-visible,
[class*="case-study-"] .nav-link-active:hover,
[class*="case-study-"] .nav-link-active:focus-visible,
[class*="case-study-"] .mobile-nav-link-active:hover,
[class*="case-study-"] .mobile-nav-link-active:focus-visible {
  color: transparent;
}

/* Desktop: centra la CTA finale */
.portfolio-page .portfolio-cta-inner {
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

/* Portfolio page: phone preview sizing (mobile) */
@media (max-width: 768px) {
  .portfolio-page .site-main {
    padding-top: 20px;
  }

  .portfolio-page .portfolio-phone-link {
    width: clamp(140px, 28vw, 200px);
    height: clamp(250px, 36vw, 315px);
  }

  /* Portfolio mobile: layout righe case study */
  .portfolio-page .portfolio-row,
  .portfolio-page .portfolio-row--reverse {
    display: grid;
    grid-template-columns: clamp(140px, 28vw, 200px) minmax(0, 1fr);
    gap: 0.9rem 1rem;
    align-items: start;
  }

  .portfolio-page .portfolio-row-media {
    grid-column: 1;
    grid-row: 1 / span 4;
    justify-content: flex-start;
    align-self: center;
  }

  /* Rendi i figli (titolo/subtitle/preview/link) grid items senza cambiare HTML */
  .portfolio-page .portfolio-row-content {
    display: contents;
  }

  .portfolio-page .portfolio-row-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .portfolio-page .portfolio-row-subtitle {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }

  .portfolio-page .portfolio-row-preview {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    align-self: center;
  }

  .portfolio-page .portfolio-row-link {
    grid-column: 2;
    grid-row: 4;
    margin: 0.25rem 0 0;
  }
}

/* ==========================================================================
   Portfolio hero sublinks
   ========================================================================== */
.portfolio-hero-sublinks {
  margin: -0.15rem 0 0;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(229, 231, 235, 0.9);
}

.portfolio-hero-sublinks a {
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
}

.portfolio-hero-sublinks a:hover,
.portfolio-hero-sublinks a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}