/* ─────────────────────────────────────────────────────────────────────────
   portfolio.css — editorial case-study grid.
   Card = image on top (full width), text stacked below. No card chrome.
   Tweakable CSS custom properties at the top.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Palette — same warm neutral as the main site, but cards sit on bare page */
  --pf-bg-0:        #fbf7f1;           /* page */
  --pf-ink-0:       #1c150c;           /* headings */
  --pf-ink-1:       #2e2418;           /* body */
  --pf-ink-2:       #5a4b38;           /* muted */
  --pf-ink-3:       #8a7862;           /* captions */
  --pf-accent:      #f09a4e;           /* warm amber */
  --pf-accent-ink:  #c87832;
  --pf-rule:        rgba(28, 21, 12, 0.09);

  /* Typography */
  --pf-serif: 'Fraunces', Georgia, serif;
  --pf-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --pf-radius:      14px;
  --pf-row-gap:     96px;
  --pf-row-gap-m:   56px;
  --pf-page-pad-x:  clamp(24px, 5vw, 80px);
  --pf-text-pad-t:  22px;              /* space between image bottom and eyebrow */

  /* Hover timings — gentle ease-in-out for a smoother, less snappy feel */
  --pf-wide-hover-duration:   700ms;
  --pf-narrow-hover-duration: 550ms;
  --pf-ease: cubic-bezier(.33, .11, .2, 1);

  /* Widths */
  --pf-wide-default-width:  60%;
  --pf-wide-hover-width:    80%;
  --pf-narrow-default:      1fr 1fr;
  --pf-narrow-hover-a:      7fr 3fr;
  --pf-narrow-hover-b:      3fr 7fr;
  --pf-narrow-sibling-fade: 0.35;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--pf-bg-0);
  color: var(--pf-ink-1);
  font-family: var(--pf-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ─── Header ─── */
.pf-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--pf-page-pad-x);
  border-bottom: 1px solid var(--pf-rule);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pf-bg-0) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pf-logo {
  font-family: var(--pf-serif);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--pf-ink-0);
}
.pf-logo span { color: var(--pf-accent); }
.pf-back a {
  font-size: 0.86rem;
  color: var(--pf-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.pf-back a:hover { color: var(--pf-accent-ink); border-bottom-color: var(--pf-accent-ink); }

/* ─── Hero ─── */
.pf-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px var(--pf-page-pad-x) 48px;
  text-align: center;
}
.pf-page-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pf-accent-ink);
  margin-bottom: 20px;
}
.pf-hero h1 {
  font-family: var(--pf-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--pf-ink-0);
  margin: 0 0 18px;
}
.pf-hero h1 em { font-style: italic; color: var(--pf-accent-ink); }
.pf-lede {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--pf-ink-2);
  line-height: 1.6;
}

/* ─── Grid ─── */
.pf-grid {
  display: flex; flex-direction: column;
  gap: var(--pf-row-gap);
  padding: 48px var(--pf-page-pad-x) 120px;
  max-width: 1680px;
  margin: 0 auto;
}

/* Row containers use container queries so the montage height can be locked to
   the REST card width — letting the frame extend only horizontally on hover
   while the image inside zooms in. */

/* ─── Row: wide ─── Card sits at the HOVER width always (80% of row).
   The "hover zone" inside (category label + montage image) occupies 75% of
   the card at rest and expands to 100% when hovered. The text block below
   (name + tagline + bullets) is fixed at 75% of the card — hovering over
   the bullets NEVER triggers the expansion. */
.row-wide {
  display: flex;
  justify-content: center;
  container-type: inline-size;
}
.row-wide .pf-card {
  width: var(--pf-wide-hover-width);   /* 80% — fixed */
}
.row-wide .pf-hover-zone {
  width: calc(var(--pf-wide-default-width) / var(--pf-wide-hover-width) * 100%); /* 75% of card = 60% of row */
  margin-left: auto;
  margin-right: auto;
  transition: width var(--pf-wide-hover-duration) var(--pf-ease);
}
.row-wide .pf-hover-zone:hover {
  width: 100%;                         /* = 80% of row (the hover width) */
}
.row-wide .pf-text {
  width: calc(var(--pf-wide-default-width) / var(--pf-wide-hover-width) * 100%); /* 75% of card, fixed */
  margin-left: auto;
  margin-right: auto;
}

/* ─── Row: narrow (2 clients 50/50, 70/30 on hover) ─── */
.row-narrow {
  display: grid;
  grid-template-columns: var(--pf-narrow-default);
  gap: 40px;
  container-type: inline-size;
  transition: grid-template-columns var(--pf-narrow-hover-duration) var(--pf-ease);
}
.row-narrow .pf-card {
  opacity: 1;
  transition: opacity var(--pf-narrow-hover-duration) var(--pf-ease);
}
.row-narrow:has(.pf-card:nth-child(1):hover) {
  grid-template-columns: var(--pf-narrow-hover-a);
}
.row-narrow:has(.pf-card:nth-child(1):hover) .pf-card:nth-child(2) {
  opacity: var(--pf-narrow-sibling-fade);
}
.row-narrow:has(.pf-card:nth-child(2):hover) {
  grid-template-columns: var(--pf-narrow-hover-b);
}
.row-narrow:has(.pf-card:nth-child(2):hover) .pf-card:nth-child(1) {
  opacity: var(--pf-narrow-sibling-fade);
}

/* Trailing solo narrow — centered at 50% */
.row-narrow-solo {
  grid-template-columns: 1fr;
  justify-items: center;
}
.row-narrow-solo .pf-card { width: 50%; }

/* ─── Card (no chrome: just image + text stacked) ─── */
.pf-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  /* NO overflow:hidden / border-radius on the card itself — that was clipping
     the category label at the top-left corner. Cropping happens on the
     .pf-montage-frame only. */
  cursor: default;
}

/* Visual — the montage image occupies the full card width at its natural aspect */
.pf-visual { position: relative; }

.pf-montage-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--pf-radius);
  background: #e9e1d0;
  width: 100%;
}

/* ─ Wide rows: image is physically wider than the frame at rest ─
   The image is positioned absolutely at a fixed 100cqi width (= hover-state
   frame width), centered. At rest the frame is only 80cqi wide, so 10cqi of
   image overflow hidden on each side. Hover widens the frame to 100cqi →
   the hidden sides reveal. Image does not move or scale — only the frame
   window grows. No zoom. */
.row-wide .pf-montage-frame { height: 34cqi; }
.row-wide .pf-montage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);     /* center only — NO scale */
  width: 80cqi;                          /* = hover frame width (80% of row) */
  height: auto;                          /* preserves 21:9 aspect */
  max-width: none;
  display: block;
  object-fit: unset;
}
/* No hover transform change. Rest frame 60cqi shows the central 60/80 = 75% of
   the image (10cqi each side hidden). On hover the frame widens to 80cqi,
   revealing the full image — no image scaling, no zoom perception. */

/* ─ Narrow rows: image physically wider than frame, centered absolutely.
   Image dimensions stay FIXED (30cqi tall × 70cqi wide, matching hover-state
   frame). When card compresses to 30%, only the frame window narrows — image
   height never changes. No vertical squeeze. ─ */
.row-narrow .pf-montage-frame,
.row-narrow-solo .pf-montage-frame { height: 30cqi; }
.row-narrow .pf-montage,
.row-narrow-solo .pf-montage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);   /* no scale — narrow rows untouched */
  height: 100%;        /* 30cqi — fixed */
  width: auto;          /* preserves 21:9 aspect → 70cqi wide, fits hover frame */
  max-width: none;
  display: block;
  object-fit: unset;
}

/* Anchor wrapping the montage image — fills the frame, click opens the
   client's website. No visual change at rest; outline on focus for a11y. */
.pf-montage-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  outline: none;
}
.pf-montage-link:focus-visible {
  outline: 2px solid var(--card-accent, var(--pf-accent));
  outline-offset: 2px;
  border-radius: var(--pf-radius);
}

/* Pending placeholder */
.pf-montage-pending { display: grid; place-items: center; background: #eae2d1; }
.pf-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--pf-ink-3);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pf-placeholder-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  opacity: 0.85;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--card-accent, var(--pf-accent)) 25%, transparent);
  animation: pf-pulse 2.2s ease-in-out infinite;
}
@keyframes pf-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.3);  opacity: 1; }
}

/* ─── Text stack (below the image) ─── */
.pf-text {
  padding: var(--pf-text-pad-t) 4px 0;
}

/* Category label above the montage, left-aligned */
.pf-above-cat {
  font-family: var(--pf-sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--card-accent, var(--pf-accent-ink));
  margin: 0 0 12px 2px;
  text-align: left;
}

/* Client name below the montage, above the tagline */
.pf-eyebrow {
  font-family: var(--pf-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pf-ink-0);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.pf-tagline {
  font-family: var(--pf-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.5vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pf-ink-0);
  margin: 0 0 20px;
  max-width: 36ch;
}

.pf-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 92ch;
}
.pf-bullets li {
  position: relative;
  padding-left: 14px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pf-ink-1);
  break-inside: avoid;              /* for multicolumn in wide rows */
}
.pf-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 1.2px;
  background: var(--card-accent, var(--pf-accent));
  border-radius: 2px;
  opacity: 0.8;
}
.pf-bullets strong {
  font-weight: 600;
  color: var(--pf-ink-0);
}

/* Wide-row bullets: 2-column layout to reduce vertical length */
.row-wide .pf-bullets {
  columns: 2;
  column-gap: 56px;
  display: block;                   /* columns overrides flex */
  max-width: 100%;
}
.row-wide .pf-bullets li {
  margin-bottom: 10px;              /* replaces flex gap inside columns */
}

/* Narrow-row bullets: show only first 3 at rest; reveal all on hover */
.row-narrow .pf-bullets li:nth-child(n+4) {
  display: none;
}
.row-narrow .pf-card:hover .pf-bullets li:nth-child(n+4) {
  display: list-item;
  animation: pf-bullet-in 400ms var(--pf-ease) both;
}
@keyframes pf-bullet-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile carousel is only visible on small viewports */
.pf-mobile-stage { display: none; }

/* ─── Mobile (<768px) ─── */
@media (max-width: 768px) {
  .pf-grid { gap: var(--pf-row-gap-m); padding-bottom: 72px; }
  .row-wide, .row-narrow {
    grid-template-columns: 1fr;
    display: block;
  }
  .row-wide .pf-card, .row-narrow .pf-card, .row-narrow-solo .pf-card {
    width: 100%;
    margin-bottom: var(--pf-row-gap-m);
  }
  .pf-tagline { font-size: 1.3rem; }
  /* .pf-bullets li inherits the 1rem desktop size on mobile too */

  /* Mobile: every card shows only the first 3 bullets, single column */
  .pf-bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .row-wide .pf-bullets { columns: auto; }   /* cancel the 2-column desktop layout */
  .pf-bullets li:nth-child(n+4) { display: none; }
  .row-narrow .pf-card:hover .pf-bullets li:nth-child(n+4) {
    display: none;   /* no hover-reveal on mobile — keep it capped at 3 */
  }

  /* Hide the static montage; swap in the swipeable carousel */
  .pf-montage-frame { display: none; }
  .pf-mobile-stage {
    display: block;
    position: relative;
    border-radius: var(--pf-radius);
    overflow: hidden;
    height: 360px;
    isolation: isolate;
  }
  .pf-mobile-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 120% 80% at 50% 30%, color-mix(in srgb, var(--card-accent, var(--pf-accent)) 22%, transparent), transparent 65%),
      linear-gradient(180deg, #efe7d9, #f5efe5);
    z-index: 0;
  }
  .pf-mobile-track {
    position: relative; z-index: 1;
    display: flex;
    height: 100%;
    transition: transform 400ms var(--pf-ease);
    will-change: transform;
    touch-action: pan-y;
  }
  .pf-mobile-slide {
    flex: 0 0 100%;
    height: 100%;
    display: grid; place-items: center;
    padding: 18px;
  }
  .pf-device-frame {
    background: #0d0a07;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(28, 21, 12, 0.28);
    overflow: hidden;
  }
  .pf-device-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pf-device-desktop {
    width: 86%; aspect-ratio: 16 / 10; border-radius: 10px;
    border: 4px solid #0d0a07;
  }
  .pf-device-mobile {
    width: 42%; aspect-ratio: 9 / 19; border-radius: 28px;
    border: 6px solid #0d0a07;
  }
  .pf-mobile-dots {
    position: absolute; bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
    z-index: 2;
  }
  .pf-mobile-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: color-mix(in srgb, var(--pf-ink-0) 30%, transparent);
    border: none; padding: 0;
    transition: background 0.25s, transform 0.25s;
  }
  .pf-mobile-dot.is-active {
    background: var(--card-accent, var(--pf-accent));
    transform: scale(1.4);
  }
  .pf-mobile-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.85);
    color: var(--pf-ink-0); font-size: 1.3rem;
    border: 1px solid var(--pf-rule);
    display: grid; place-items: center;
    cursor: pointer; z-index: 3;
  }
  .pf-mobile-prev { left: 8px; }
  .pf-mobile-next { right: 8px; }
}

/* ─── Footer ─── */
.pf-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap;
  padding: 28px var(--pf-page-pad-x) 40px;
  border-top: 1px solid var(--pf-rule);
  font-size: 0.86rem;
  color: var(--pf-ink-3);
}
.pf-foot a {
  color: var(--pf-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.pf-foot a:hover { color: var(--pf-accent-ink); border-bottom-color: var(--pf-accent-ink); }

/* Scroll-reveal (JS adds .is-visible) */
.pf-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--pf-ease),
              transform 700ms var(--pf-ease),
              width var(--pf-wide-hover-duration) var(--pf-ease),
              opacity var(--pf-narrow-hover-duration) var(--pf-ease);
}
.pf-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .pf-card { opacity: 1; transform: none; }
}