/*
 * Public portfolio responsive layer.
 *
 * This file is intentionally loaded after site-theme.css. The visual configurator
 * writes inline theme tokens and site-theme.css consumes them; responsive geometry
 * must remain fluid even when those tokens contain desktop defaults.
 */

.portfolio-page {
  min-width: 0;
}

.portfolio-page :is(
  .panel-content,
  .project-card,
  .project-card > *,
  .project-body,
  .projects-tabs-wrap,
  .projects-tabs,
  .contact-inner,
  .facts-list div
) {
  min-width: 0;
}

.portfolio-page .projects-tabs-wrap {
  gap: 12px;
}

.portfolio-page .projects-tabs {
  flex: 1 1 auto;
  max-width: 100%;
}

.portfolio-page .projects-tabs button {
  flex: 0 0 auto;
  min-width: 44px;
}

.portfolio-page .projects-all-link {
  flex: 0 0 auto;
  min-height: 44px;
}

.portfolio-page .brand,
.portfolio-page .nav-desktop a,
.portfolio-page .skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.portfolio-page .project-body {
  overflow-wrap: anywhere;
}

.portfolio-page :is(.contact-copy-button, .contact-links a) {
  min-height: 44px;
}

.portfolio-page .contact-links {
  row-gap: 10px;
}

@media (max-width: 980px) {
  .portfolio-page .menu-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px 6px;
  }

  .portfolio-page .menu-toggle span {
    width: 32px;
  }

  .portfolio-page .hero {
    height: clamp(360px, 60vh, 620px);
    height: clamp(360px, 60svh, 620px);
  }

  .portfolio-page .hero-marquee {
    top: 48%;
  }

  .portfolio-page .hero-marquee-track span {
    font-size: clamp(84px, 22vw, 150px);
    line-height: 0.92;
  }

  .portfolio-page .hero-meta-right {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    font-size: clamp(28px, 9vw, 48px);
    line-height: 1.04;
    text-align: left;
  }

  .portfolio-page .hero-meta-left {
    left: 16px;
    bottom: 118px;
  }

  .portfolio-page .panel {
    min-height: auto;
    padding-top: clamp(32px, 8vw, 48px);
    padding-bottom: clamp(64px, 12vw, 120px);
  }

  .portfolio-page .panel-content,
  .portfolio-page #services .panel-content,
  .portfolio-page #principles .panel-content {
    max-width: none;
    padding-top: clamp(72px, 16vw, 120px);
    padding-right: 16px;
    padding-left: 16px;
  }

  .portfolio-page .display-lines {
    margin-bottom: clamp(48px, 10vw, 84px);
  }

  .portfolio-page .display-lines.compact {
    margin-bottom: clamp(40px, 8vw, 72px);
  }

  .portfolio-page .display-lines .line {
    font-size: clamp(44px, 10.5vw, 84px);
    line-height: 0.95;
  }

  .portfolio-page .copy-block,
  .portfolio-page .section-subtitle {
    max-width: 100%;
  }

  .portfolio-page .copy-block p,
  .portfolio-page .section-subtitle,
  .portfolio-page .service-item p,
  .portfolio-page .project-body p,
  .portfolio-page .project-body li {
    font-size: clamp(15px, 4.4vw, 19px);
    line-height: 1.55;
  }

  .portfolio-page .service-item {
    min-width: 0;
    min-height: 146px;
    max-height: 180px;
  }

  .portfolio-page .service-head h3 {
    font-size: clamp(17px, 3.4vw, 22px);
    line-height: 1.02;
  }

  .portfolio-page .service-more-toggle,
  .portfolio-page .about-more-toggle {
    min-height: 44px;
  }

  .portfolio-page #services .service-item.is-service-expanded {
    max-height: 420px;
  }

  .portfolio-page .project-card {
    min-height: auto;
    gap: clamp(24px, 6vw, 34px);
    padding: clamp(24px, 5.5vw, 42px) 16px;
  }

  .portfolio-page .project-preview {
    height: clamp(360px, 108vw, 420px);
  }

  .portfolio-page .project-body h3 {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.05;
  }

  .portfolio-page .projects-tabs-wrap {
    top: calc(var(--nav-h) + 20px);
    padding-right: 16px;
    padding-left: 16px;
  }

  .portfolio-page .facts-list div {
    grid-template-columns: clamp(96px, 30vw, 140px) minmax(0, 1fr);
    gap: clamp(12px, 3vw, 16px);
  }

  .portfolio-page .facts-list span,
  .portfolio-page .facts-list strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .portfolio-page .principle-card {
    min-width: 0;
  }

  .portfolio-page .principle-card h4 {
    font-size: clamp(17px, 3.4vw, 22px);
    line-height: 1.02;
  }

  .portfolio-page .contact-panel {
    min-height: clamp(520px, 100vh, 900px);
    min-height: clamp(520px, 100svh, 900px);
  }

  .portfolio-page .contact-inner {
    padding-right: 16px;
    padding-bottom: clamp(64px, 16vw, 110px);
    padding-left: 16px;
  }

  .portfolio-page .contact-inner h2 {
    max-width: 100%;
    margin-bottom: 8px;
    font-size: clamp(72px, 22vw, 160px);
    line-height: 0.72;
  }
}

@media (max-width: 420px) {
  .portfolio-page .projects-tabs-wrap {
    gap: 8px;
  }

  .portfolio-page .projects-tabs {
    gap: 10px;
  }

  .portfolio-page .projects-all-link {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 360px) {
  .portfolio-page .hero-meta-left {
    bottom: 88px;
  }

  .portfolio-page .projects-tabs-wrap {
    height: auto;
    min-height: var(--tabs-h);
    flex-wrap: wrap;
    align-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .portfolio-page .projects-tabs {
    flex: 1 0 100%;
    order: 1;
  }

  .portfolio-page .projects-all-link {
    order: 2;
    margin-left: auto;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .portfolio-page .contact-inner h2 {
    font-size: clamp(180px, 23vw, 300px);
  }

  .portfolio-page .principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}