/* Portfolio page specific styles */

/* Active nav highlight for current page */
.page-portfolio .main-menu a[href="/portfolio/"] {
  color: var(--color-primary);
}

/* Hero */
.portfolio-hero { padding-top: clamp(var(--space-8), 6vw, var(--space-11)); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: center; }
.hero-copy p { color: var(--color-text-muted); }
.hero-cta { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* Sections */
.section-header { margin-bottom: var(--space-6); }
.section-header p { color: var(--color-text-muted); }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.filter-btn {
  border: 1px solid var(--color-border);
  background: var(--color-elevated);
  color: var(--color-text);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-normal) var(--easing-standard), color var(--duration-normal) var(--easing-standard), border-color var(--duration-normal) var(--easing-standard);
}
.filter-btn:hover { background: #23282f; }
.filter-btn.is-active, .filter-btn[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Projects grid */
.projects-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.project-card { grid-column: span 6; display: flex; flex-direction: column; }
.project-media img { width: 100%; height: 220px; object-fit: cover; }
.project-meta { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.project-actions { margin-top: auto; }
@media (max-width: 1000px) { .project-card { grid-column: span 12; } }

/* Case studies */
.case-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.case { grid-column: span 4; }
.case h4 { color: var(--color-silver); font-size: var(--text-lg); margin-top: var(--space-3); }
@media (max-width: 1100px) { .case { grid-column: span 6; } }
@media (max-width: 700px) { .case { grid-column: span 12; } }

/* Testimonials */
.testimonials-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.testimonial { grid-column: span 4; font-style: italic; }
.testimonial cite { display: block; margin-top: var(--space-3); color: var(--color-text-muted); font-style: normal; }
@media (max-width: 1100px) { .testimonial { grid-column: span 6; } }
@media (max-width: 700px) { .testimonial { grid-column: span 12; } }

/* Services */
.services-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.service-item { grid-column: span 4; }
.service-item ul { margin-top: var(--space-3); }
.services-cta { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 1100px) { .service-item { grid-column: span 6; } }
@media (max-width: 700px) { .service-item { grid-column: span 12; } }

/* Awards */
.awards-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
.awards-list > li { grid-column: span 4; }
@media (max-width: 1100px) { .awards-list > li { grid-column: span 6; } }
@media (max-width: 700px) { .awards-list > li { grid-column: span 12; } }

/* Clients */
.clients-wrap { padding: var(--space-6); }
.clients-list { columns: 2; column-gap: var(--space-8); list-style: none; padding: 0; margin: 0; }
.clients-list li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
@media (max-width: 800px) { .clients-list { columns: 1; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.contact-grid .card { grid-column: span 6; }
.contact-cta { margin-top: var(--space-5); display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 900px) { .contact-grid .card { grid-column: span 12; } }