/* ============================================
   PORTFOLIO.CSS — Portfolio Page Styles
   Nelson Medina Portfolio
   Import after layout.css
============================================ */

/* ==========================================
   PORTFOLIO HERO
=========================================== */

.portfolio-hero__eyebrow {
  margin-bottom: var(--space-4);
}

.portfolio-hero__heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.portfolio-hero__sub {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
  max-width: var(--max-width-narrow);
  margin-bottom: var(--space-8);
}

.portfolio-overview {
  max-width: var(--max-width-text);
  padding-top: var(--space-8);
  border-top: var(--border-thin);
}

.portfolio-overview p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
}

/* ==========================================
   PORTFOLIO WORK SECTION
=========================================== */

.portfolio-work__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-thin);
}

.portfolio-work__company {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ==========================================
   RESPONSIVE — PORTFOLIO
=========================================== */

@media (max-width: 900px) {
  .portfolio-hero__heading {
    font-size: var(--text-3xl);
  }

  .portfolio-work__header {
    flex-direction: column;
    gap: var(--space-2);
  }
}

@media (max-width: 600px) {
  .portfolio-hero__heading {
    font-size: var(--text-2xl);
  }
}