/* ==========================================================================
   OPELOGY — Portfolio Page Styles
   Loaded via the `extra_css` block in templates/pages/portfolio.html.
   Builds on the design tokens and primitives in style.css (page-hero,
   section heads, cards, badges, CTA banner).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Compact page hero
   Page-specific override of the shared .page-hero (style.css, 12b).
   Drastically tightens vertical spacing so the 6-card grid starts high on
   the page. Top padding keeps clearing the fixed site header; the bottom
   is ~15px as requested.
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: calc(var(--nav-height) + 30px) 15px;
}

.page-hero-title {
  font-size: clamp(2rem, 3vw, 2.25rem);
  margin: 0 auto var(--space-2);
}

/* Close the gap between the hero subtitle and the first card row */
#work { padding-top: var(--space-8); }

/* --------------------------------------------------------------------------
   2. Portfolio grid
   Strictly 3 columns per row on desktop (2 rows = 6 cards), 2 columns on
   tablet, single column on mobile.
   -------------------------------------------------------------------------- */
.portfolio-grid { grid-template-columns: 1fr; }

@media (min-width: 48rem) {      /* >= 768px — tablet */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {      /* >= 1024px — desktop */
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   3. Portfolio card
   -------------------------------------------------------------------------- */
.portfolio-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Slightly stronger hover glow than the default card */
.portfolio-card:hover {
  box-shadow: var(--shadow-card), 0 0 30px var(--accent-glow);
}

/* --- Thumbnail with hover zoom --- */
.card-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
  background: #031124;
}

.thumb-cover {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.25);
  transition: transform 0.5s ease;
  will-change: transform;
}

.portfolio-card:hover .thumb-cover { transform: scale(1.08); }

/* Gradient covers — swap for real <img> previews when available */
.cover--1 { background: linear-gradient(135deg, #00d2ff, #0e7490); }
.cover--2 { background: linear-gradient(135deg, #06b6d4, #7c3aed); }
.cover--3 { background: linear-gradient(135deg, #0891b2, #1d4ed8); }
.cover--4 { background: linear-gradient(135deg, #3b82f6, #6d28d9); }
.cover--5 { background: linear-gradient(135deg, #14b8a6, #2563eb); }
.cover--6 { background: linear-gradient(135deg, #0ea5e9, #0f172a); }

/* Real uploaded thumbnails fit the media area without cropping, and zoom on hover */
.card-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain !important;
  object-position: center;
  padding: 6px;
  transition: transform 0.5s ease;
  will-change: transform;
}
.portfolio-card:hover .card-thumb img { transform: scale(1.08); }

/* --- Card body --- */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
}

.card-body h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}

/* Two-line clamp so every description stays perfectly uniform */
.card-desc {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

/* --- Action button pinned to the card bottom --- */
.card-link {
  margin-top: auto;
  align-self: flex-start;
}

/* External-link arrow icon */
.card-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition);
}
.card-link:hover svg { transform: translate(2px, -2px); }