/* ══════════════════════════════════════════════════════
   PROJECT — project-detail pages (projects/*.html)
   Loads alongside home.css so the sidebar styles are shared.

   Layers below (do not redeclare):
     tokens.css   → all CSS custom properties
     base.css     → reset, fonts, global a styles
     components.css → .btn, .btn-outline.btn-taupe, .hero-tag, etc.
     pages/home.css → sidebar + main-panel scroll layout

   Tokens used: --c-*, --sp-*, --r-*, --fs-*, --lh-*, --ls-*
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   1. PAGE WRAPPER — content inside .main
══════════════════════════════════════════════════════ */

.project-page {
  padding: var(--sp-12) var(--sp-16) var(--sp-20); /* 48 64 80 */
  max-width: 920px;
}

/* Full-width variant — removes the 920px content cap so the page
   uses the entire width of the .main panel. Useful for templates
   and case studies with wide image grids that benefit from extra
   breathing room. Also lifts the prose-width cap on .overview-desc
   so the lead paragraph stretches to the container width too. */
.project-page.full-width {
  max-width: none;
}
.project-page.full-width .overview-desc,
.project-page.full-width .project-body,
.project-page.full-width .feature-body {
  max-width: none;
}

/* Sticky top bar — only on full-width pages.
   The .main panel is the scroll container, so position:sticky
   anchors the topbar to its top edge while page content scrolls
   underneath. Full-bleed via negative horizontal margins; glassy
   white + backdrop blur for a navigation-bar feel. */
.project-page.full-width .project-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  /* Pull up to .main's top edge, full-bleed horizontally */
  margin-top: calc(-1 * var(--sp-12));
  margin-left: calc(-1 * var(--sp-16));
  margin-right: calc(-1 * var(--sp-16));
  /* Re-add the page padding inside the bar so content stays aligned */
  padding: var(--sp-4) var(--sp-16);
}

@media (max-width: 900px) {
  .project-page.full-width .project-topbar {
    margin-top: calc(-1 * var(--sp-10));
    margin-left: calc(-1 * var(--sp-8));
    margin-right: calc(-1 * var(--sp-8));
    padding: var(--sp-3) var(--sp-8);
  }
}

@media (max-width: 640px) {
  .project-page.full-width .project-topbar {
    margin-top: calc(-1 * var(--sp-8));
    margin-left: calc(-1 * var(--sp-5));
    margin-right: calc(-1 * var(--sp-5));
    padding: var(--sp-3) var(--sp-5);
  }
}

/* ══════════════════════════════════════════════════════
   2. TOP BAR — Back button + breadcrumbs on one line
══════════════════════════════════════════════════════ */

.project-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);                  /* 12px between Back and crumbs */
  margin-bottom: var(--sp-10);       /* 40px gap before hero */
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════
   3. BREADCRUMBS
══════════════════════════════════════════════════════ */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);                  /* 8px */
  font-family: var(--font-body);
  font-size: var(--fs-xs);           /* 0.75rem */
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  flex-wrap: wrap;
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.breadcrumb-link:hover { color: var(--text-primary); }

.breadcrumb-sep {
  color: var(--text-tertiary);
  font-weight: 400;
  user-select: none;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════
   4. PROJECT HERO — icon + title + lead description
══════════════════════════════════════════════════════ */

.project-hero {
  margin-bottom: var(--sp-12);       /* 48px */
}

.project-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);                  /* 16px */
  margin-bottom: var(--sp-6);        /* 24px */
}

.project-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--r-lg);        /* 16px */
  overflow: hidden;
  flex-shrink: 0;
}
.project-hero-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--h-weight);      /* 500 */
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-tight);      /* 1.15 */
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.project-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-xs);           /* 0.75rem */
  font-weight: 700;
  letter-spacing: var(--ls-wider);   /* 0.06em */
  text-transform: uppercase;
  color: var(--c-taupe);
}

.project-lead {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: var(--p-weight);      /* 300 */
  line-height: var(--lh-loose);      /* 1.8 */
  color: var(--text-secondary);
  max-width: var(--container-prose); /* 720px */
}

/* ══════════════════════════════════════════════════════
   5. HERO IMAGE — full-bleed preview
══════════════════════════════════════════════════════ */

.project-image {
  margin-bottom: var(--sp-12);       /* 48px */
  border-radius: var(--r-xl);        /* 20px */
  overflow: hidden;
}
.project-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Portrait variant — phone-screenshot mockups centered on a Sand
   background so a tall image doesn't dominate the page. */
.project-image-portrait {
  background: var(--c-sand);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-8) 0;
}
.project-image-portrait img {
  width: auto;
  max-width: 320px;
  max-height: 640px;
  height: auto;
}

/* ══════════════════════════════════════════════════════
   6. CONTENT SECTIONS — reused for Outcomes / Role / Stack
══════════════════════════════════════════════════════ */

.project-section {
  margin-bottom: var(--sp-12);       /* 48px */
}
.project-section:last-child { margin-bottom: 0; }

.project-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--container-prose);
  margin-bottom: var(--sp-6);        /* 24px — paragraph break */
}
.project-body:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════
   7. AT-A-GLANCE META GRID — Role / Platforms / Stack / Live
══════════════════════════════════════════════════════ */

.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);                  /* 24px */
  padding: var(--sp-6);
  background: rgba(255, 233, 214, 0.4); /* pale peach — matches .overview-stats */
  border-radius: var(--r-lg);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.meta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-taupe);
}

.meta-value {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--h-weight);
  color: var(--text-primary);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
}

a.meta-value-link {
  color: var(--c-taupe);
  text-decoration: underline;
  text-decoration-color: var(--c-taupe);
  text-underline-offset: 2px;
}
a.meta-value-link:hover {
  color: var(--text-primary);
  text-decoration-color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════
   8. CALLOUT / PULL QUOTE
══════════════════════════════════════════════════════ */

.project-callout {
  background: var(--c-taupe);
  border-radius: var(--r-md);            /* 10px — down from --r-xl (20px) */
  padding: var(--sp-8) var(--sp-10);
}

/* Mirrors .overview-desc; inverted for the taupe surface */
.project-callout-text {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-loose);          /* 1.8 */
  color: var(--c-white);
  letter-spacing: var(--ls-normal);
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   9. FEATURE LIST — 01 / 02 / 03 with text body
══════════════════════════════════════════════════════ */

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);                  /* 24px between items */
  margin-top: var(--sp-8);           /* 32px below the features image */
}

.feature-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.feature-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);           /* 1.25rem */
  font-weight: 700;
  color: var(--c-taupe);
  letter-spacing: var(--ls-tight);
  line-height: 1.4;
}

.feature-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);           /* 1.25rem */
  font-weight: var(--h-weight);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  line-height: var(--lh-normal);
}

.feature-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--container-prose);
}

/* ══════════════════════════════════════════════════════
   10. CTA ROW — multiple buttons in a row
══════════════════════════════════════════════════════ */

.project-cta-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ══════════════════════════════════════════════════════
   10b. CASE-STUDY HERO — Overview-style layout
   Mirrors the home page Overview section (.avail-badge,
   .overview-title, .overview-subtitle-row, .overview-desc,
   .overview-stats from home.css) but slots a square image
   placeholder to the LEFT of the title for case studies.
   Use as a richer alternative to .project-hero.
══════════════════════════════════════════════════════ */

.cs-overview {
  margin-bottom: var(--sp-12);
}

.cs-overview-head {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-8);
  align-items: center;
  margin-bottom: var(--sp-6);
}

/* Square image / icon slot — transparent by default so a square PNG
   (e.g. an app icon with its own background) reads cleanly without an
   extra colored backdrop. Add a --card-tint inline if you want a
   tinted placeholder behind a transparent image. */
.cs-overview-image {
  width: 240px;
  height: 240px;
  background: transparent;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-overview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-overview-image .image-placeholder-label {
  text-align: center;
  padding: 0 var(--sp-3);
}

@media (max-width: 768px) {
  .cs-overview-head { grid-template-columns: 1fr; }
  .cs-overview-image { width: 160px; height: 160px; }
}

/* ══════════════════════════════════════════════════════
   11. IMAGE LAYOUTS
   Reusable grid wrappers for showing multiple images
   or image+text pairs inside .project-section.
══════════════════════════════════════════════════════ */

/* Two-up grid — side-by-side images or content (e.g. before/after) */
.layout-two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);                  /* 16px */
  margin-bottom: var(--sp-12);
}

/* Compact modifier — caps each captioned image so the pair sits
   tighter on a full-width project page. Used for the Numerade
   problem-solution before/after series. */
.layout-two-up.compact > .image-with-caption {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Three-up grid — three concepts or screens at a glance */
.layout-three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);                  /* 12px */
  margin-bottom: var(--sp-12);
}

/* Asymmetric — 2/3 hero + 1/3 supporting image */
.layout-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}

/* Image + text split — 50/50 image and prose side by side */
.image-text-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);                 /* 40px — generous gutter for prose */
  align-items: center;
  margin-bottom: var(--sp-12);
}

/* Caption below an image — small mono-ish taupe label */
.image-with-caption {
  margin-bottom: var(--sp-12);
}
.image-with-caption .project-image,
.image-with-caption .project-image-portrait {
  margin-bottom: var(--sp-3);
}
.image-caption-text {
  font-family: var(--font-body);
  font-size: var(--fs-xs);           /* 0.75rem */
  font-weight: 500;
  color: var(--c-taupe);
  letter-spacing: var(--ls-wide);
  text-align: center;
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   12. HIGHLIGHT BLOCKS
   Text and stat callouts to break up long-form prose.
   All sit on Black text (AAA on Peach + Sand) to keep
   contrast safe across the warm palette.
══════════════════════════════════════════════════════ */

/* Decision / insight block — pale peach with a taupe rail.
   Use to highlight a key decision, framing, or insight that
   shouldn't be skimmed over. Uniform 32px padding on all sides
   so the labeled top area and the body text are evenly framed. */
.decision-block {
  background: #FFF4E8;               /* pale peach — peach @ ~50% to white */
  border-radius: var(--r-lg);
  padding: var(--sp-8);              /* 32px on all sides */
  border-left: 4px solid var(--c-taupe);
  margin-bottom: var(--sp-8);
}
.decision-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);           /* 0.75rem */
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-taupe);
  margin-bottom: var(--sp-2);
}
.decision-text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  color: var(--text-primary);
  margin: 0;
}

/* User testimonial — full Peach surface, large italic quote,
   small uppercase attribution at the foot. */
.testimonial-block {
  background: var(--c-peach);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  margin-bottom: var(--sp-12);
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: var(--h-weight);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  font-style: italic;
  margin: 0 0 var(--sp-5) 0;
}
.testimonial-attribution {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-taupe);
}

/* Large hero stat — one big number with a single descriptive line.
   Use when one metric carries the story. */
.stat-block-large {
  background: var(--c-peach);
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-8);
  margin-bottom: var(--sp-12);
  text-align: center;
}
.stat-block-value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: var(--h-weight);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.stat-block-label {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  color: var(--text-primary);
  max-width: 480px;
  margin: 0 auto;
}

/* Image placeholder block — fills .project-image / layout cells when
   a real preview isn't ready yet. Driven by --card-tint custom prop
   (defaults to Sand). Use for templates and "coming soon" states. */
.image-placeholder {
  background: var(--card-tint, var(--c-sand));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.image-placeholder-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-taupe);
  opacity: 0.7;
  padding: 0 var(--sp-4);
  text-align: center;
}

/* Project footer — bottom nav with "Up next" label + project name
   on the left, and a Next button on the right that mirrors the Back
   button in the topbar (same Primary Outline Taupe pill, arrow flips
   to point right). */
.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--sp-10);
  margin-top: var(--sp-12);
  border-top: 1px solid var(--border);
}
.project-footer-next {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.project-footer-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);           /* 0.75rem */
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-taupe);
}
.project-footer-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);           /* 1.25rem */
  font-weight: var(--h-weight);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

@media (max-width: 640px) {
  .project-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
}

/* Credits — small team list, label/value pairs */
.credits-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.credits-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.credits-row:last-child { border-bottom: none; }
.credits-role {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-taupe);
}
.credits-name {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════
   13. RESPONSIVE
══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .project-page { padding: var(--sp-10) var(--sp-8) var(--sp-16); }
  .project-meta-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .layout-three-up { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .project-page { padding: var(--sp-8) var(--sp-5) var(--sp-12); }
  .project-hero-icon { width: 56px; height: 56px; }
  .project-meta-grid { gap: var(--sp-4); padding: var(--sp-5); }
  .project-callout { padding: var(--sp-6) var(--sp-5); }
  .feature-item { grid-template-columns: 40px 1fr; gap: var(--sp-3); }
  .layout-two-up,
  .layout-three-up,
  .layout-asymmetric,
  .image-text-split { grid-template-columns: 1fr; gap: var(--sp-3); }
  .testimonial-block,
  .stat-block-large { padding: var(--sp-8) var(--sp-5); }
  .credits-row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ══════════════════════════════════════════════════════
   Feature walkthrough — alternating video / copy rows
   Used in LoveTokens "The experience" section to showcase
   five product flows with screen-capture videos.
══════════════════════════════════════════════════════ */
.walkthrough {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  margin-top: var(--sp-10);
}

.walkthrough-item {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-10);
  align-items: center;
}
/* Reverse rows put the video on the right for visual rhythm */
.walkthrough-item.reverse { grid-template-columns: 1fr 320px; }
.walkthrough-item.reverse .walkthrough-media { order: 2; }

/* Phone-framed video — sand backdrop, centered, rounded screen */
.walkthrough-media {
  background: var(--c-sand);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.walkthrough-media video {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--r-lg);
  display: block;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.28);
}

.walkthrough-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-taupe);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}
.walkthrough-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--h-weight);
  color: var(--text-primary);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-4);
}

@media (max-width: 768px) {
  .walkthrough-item,
  .walkthrough-item.reverse { grid-template-columns: 1fr; gap: var(--sp-6); }
  .walkthrough-item.reverse .walkthrough-media { order: 0; }
  .walkthrough-media { padding: var(--sp-5); }
  .walkthrough-media video { max-width: 240px; }
}