/* ═══════════════════════════════════════
   PORTFOLIO.CSS — Out Shine Web Design
   Project cards pinned to the sheet with blush tape.
   (Card component .hero-work-card* is shared from index.css.)
═══════════════════════════════════════ */

/* ── HERO ── (ruled sheet comes from main.css) */
.portfolio-hero { padding: 5rem 5rem 4.5rem 6rem; }
.portfolio-hero h1 { margin-bottom: 1.25rem; font-size: clamp(2.6rem, 4.8vw, 4.4rem); }
.portfolio-hero .lead { font-size: 1.12rem; }

/* 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(--tint);
  padding: var(--section-pad);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 1rem;
}
.portfolio-grid .hero-work-card { position: relative; overflow: visible; }
.portfolio-grid .hero-work-card-image { border-radius: 6px 6px 0 0; }
.portfolio-grid .hero-work-card:nth-child(odd) { transform: rotate(-1deg); }
.portfolio-grid .hero-work-card:nth-child(even) { transform: rotate(1deg); }
.portfolio-grid .hero-work-card:hover { transform: rotate(0) translateY(-6px); }
.portfolio-grid .hero-work-card::before {
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  z-index: 2;
  width: 90px; height: 24px;
  margin-left: -45px;
  background: rgba(var(--blush-rgb), .85);
  transform: rotate(-2deg);
}

@media (max-width: 1100px) {
  .portfolio-hero { padding: 4rem 3rem 4rem 4rem; }
}
@media (max-width: 768px) {
  .portfolio-hero { padding: 2.5rem 1.25rem 3rem 2rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 2.75rem; }
}