/* =================================================================
   PORTFOLIO SHOWCASE — ziben.fr-style spatial layout
   Turns the 2-col card grid into a cinematic vertical showcase:
   large alternating rows (media <-> text), giant outlined index numbers,
   per-project accent colour, depth shadows, 3D tilt + parallax (JS),
   masked image reveal (from site-fx). Coming-soon projects collapse into
   a compact "workshop" grid at the end.
   Loaded AFTER the inline portfolio <style> so it wins the cascade.
   ================================================================= */

.portfolio-section .portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(3.5rem, 7vw, 7rem) var(--sp-lg);
  counter-reset: pfnum;
  align-items: start;
}

/* ---------- LIVE PROJECT ROWS (full-bleed, alternating) ---------- */
.portfolio-section .portfolio-card:not(.portfolio-card--soon) {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;     /* the row itself never lifts; its media does */
  padding: 0;
}
/* the featured AMDG card uses an inner wrapper — flatten it into the row */
.portfolio-section .portfolio-card--featured { border-top: 0 !important; }
.portfolio-section .portfolio-card--featured .portfolio-card-inner {
  display: contents;              /* hoist thumb + body up as direct grid items */
}

/* alternate the media to the right on every 2nd live row (JS adds .pf-rev) */
.portfolio-section .portfolio-card.pf-rev .portfolio-card-thumb,
.portfolio-section .portfolio-card.pf-rev .portfolio-card-ba { order: 2; }

/* ---------- MEDIA BLOCK (the image / before-after) ---------- */
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-thumb,
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-ba {
  position: relative;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.65);
  transform: translateZ(0);
  transition: box-shadow .5s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
/* accent ring + deeper shadow on hover */
.portfolio-section .portfolio-card:not(.portfolio-card--soon):hover .portfolio-card-thumb,
.portfolio-section .portfolio-card:not(.portfolio-card--soon):hover .portfolio-card-ba {
  box-shadow: 0 44px 90px -28px color-mix(in srgb, var(--card-accent) 40%, rgba(0,0,0,.55)),
              0 0 0 1px color-mix(in srgb, var(--card-accent) 55%, transparent);
}
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
/* before/after: let the two halves fill the full 3:2 media height (no gap) */
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-ba-side {
  aspect-ratio: auto; height: 100%;
}
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-ba-side img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
/* soft accent glow puddle behind the media for spatial depth */
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-thumb::after,
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-ba::after {
  content: ''; position: absolute; inset: auto -12% -22% -12%; height: 55%;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--card-accent) 28%, transparent), transparent 72%);
  filter: blur(26px); z-index: -1; opacity: 0; transition: opacity .5s;
  pointer-events: none;
}
.portfolio-section .portfolio-card:not(.portfolio-card--soon):hover .portfolio-card-thumb::after,
.portfolio-section .portfolio-card:not(.portfolio-card--soon):hover .portfolio-card-ba::after { opacity: 1; }

/* ---------- TEXT COLUMN ---------- */
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-body {
  padding: 0 !important;
  display: flex; flex-direction: column; justify-content: center;
}
/* giant outlined index numeral, injected by JS as .pf-num */
.portfolio-section .pf-num {
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-weight: 600; line-height: .9;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--card-accent) 70%, transparent);
  letter-spacing: -.02em; margin-bottom: .5rem; display: block;
}
.portfolio-section .pf-kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Outfit', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--card-accent); margin-bottom: .7rem;
}
.portfolio-section .pf-kicker::before {
  content: ''; width: 26px; height: 1px; background: var(--card-accent);
}
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-body h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem) !important;
  line-height: 1.06; margin-bottom: .9rem; letter-spacing: -.01em;
}
.portfolio-section .portfolio-card:not(.portfolio-card--soon):hover .portfolio-card-body h3 {
  color: var(--card-accent); transition: color .4s;
}
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-body > p {
  font-size: var(--fs-md); line-height: 1.65; max-width: 46ch;
}
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-link {
  color: var(--card-accent); font-size: var(--fs-md); margin-top: var(--sp-md);
}

/* the colour-pop tags inherit the accent on these rows */
.portfolio-section .portfolio-card:not(.portfolio-card--soon) .portfolio-card-tag {
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 9%, transparent);
}

/* ---------- "IN THE WORKSHOP" DIVIDER ---------- */
.pf-soon-head {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--sp-md);
  margin-top: var(--sp-md);
}
.pf-soon-head::before, .pf-soon-head::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.pf-soon-head span {
  font-family: 'Outfit', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- COMING-SOON COMPACT GRID (3 across) ---------- */
.portfolio-section .portfolio-card--soon {
  grid-column: span 2;
  margin: 0; align-self: stretch;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 920px) {
  .portfolio-section .portfolio-card:not(.portfolio-card--soon) {
    grid-template-columns: 1fr; gap: var(--sp-md);
  }
  /* media always on top on narrow screens, regardless of alternation */
  .portfolio-section .portfolio-card.pf-rev .portfolio-card-thumb,
  .portfolio-section .portfolio-card.pf-rev .portfolio-card-ba { order: 0; }
  .portfolio-section .portfolio-card--soon { grid-column: span 3; }
}
@media (max-width: 560px) {
  .portfolio-section .portfolio-card--soon { grid-column: 1 / -1; }
}

/* ---------- REDUCED MOTION: kill tilt/parallax transforms ---------- */
@media (prefers-reduced-motion: reduce) {
  .portfolio-section .portfolio-card-thumb,
  .portfolio-section .portfolio-card-ba { transform: none !important; }
}