/* ═══════════════════════════════════════
   PORTFOLIO.CSS — Out Shine Web Design
═══════════════════════════════════════ */

.portfolio-hero {
  background: var(--teal);
  padding: calc(var(--nav-height) + 5rem) 5rem 5rem;
  text-align: center;
  color: var(--cream);
}
.portfolio-hero .eyebrow { color: var(--cream); }
.portfolio-hero h1 { color: var(--cream); margin-bottom: 1rem; }
.portfolio-hero .lead {
  color: var(--cream);
  margin: 0 auto;
  text-align: center;
}

/* Show "Click" on mouse/trackpad devices, "Tap" on touch devices */
.click-text { display: inline; }
.tap-text { display: none; }
@media (hover: none), (pointer: coarse) {
  .click-text { display: none; }
  .tap-text { display: inline; }
}

/* ── GRID ── */
.portfolio-section {
  background: var(--bg);
  padding: var(--section-pad);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .portfolio-hero { padding: calc(var(--nav-height) + 3.5rem) 3rem 3.5rem; }
}
@media (max-width: 768px) {
  .portfolio-hero { padding: calc(var(--nav-height) + 2.5rem) 1.5rem 3rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 2rem; }
}