/* ============================================================
   PROJECTS PAGE & PROJECT DETAIL PAGE — supplemental styles
   Loads after style.css; inherits all design tokens from :root.
   ============================================================ */

/* ── Inner-page body base — uses theme tokens so ScrollTrigger theme
   toggle (remove/add .theme-dark) affects the whole page correctly.
   Transition covers the nav chip background which lives on the body. ── */
.page-body {
  background: var(--surface);
  color: var(--on-surface);
  transition: background 0.5s ease, color 0.5s ease;
}

/* All sections respond to the global theme toggle so that when the user
   enters Selected Work and body.theme-dark is removed, the whole page
   switches to light in one pass. ── */
.page-hero,
.filter-bar,
.all-projects {
  background: var(--surface);
  color: var(--on-surface);
  transition: background 0.5s ease, color 0.5s ease;
}

/* project-title/.project-type are shared with the homepage's Selected
   Work grid, which is permanently dark by design — so we can't change
   those base rules globally. Scope the theme-bound override to this
   page's "All Projects" grid only. */
.all-projects .project-title {
  color: var(--on-surface);
  transition: color 0.5s ease;
}

.all-projects .project-type {
  color: var(--surface-muted);
  transition: color 0.5s ease;
}

/* ── Active nav link state ── */
.nav-links a[aria-current="page"],
.nav-links a[aria-current="page"] .swap-line {
  color: var(--yellow);
}

.menu-link[aria-current="page"] {
  color: var(--yellow) !important;
}

.menu-link[aria-current="page"] .menu-link__num {
  color: var(--yellow) !important;
}

/* ================================================================
   SELECTED WORK (gallery carousel) — page-scoped classes so this
   section never shares CSS with the homepage's Projects section
   (which uses .projects / .projects-header / .projects-heading /
   .projects-sub for its own dark grid layout + pin transition).
   ================================================================ */
.selected-work {
  padding: 0;
  height: 100vh;
  position: relative;
  /* z-index: 1 keeps the section below the footer (z-index: 2) so
     the footer slides visually on top during the pin transition. */
  z-index: 1;
  /* Transition matches the homepage theme crossfade */
  background: var(--surface);
  transition: background 0.5s ease, color 0.5s ease;
}

/* Inner wrapper — this is the element GSAP animates (scale/fade/blur).
   Fills the full section so the animation affects everything inside. */
.selected-work-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 3vw, 40px);
  overflow: hidden;
  transform-origin: center center;
}


/* Gallery + caption break out of section-inner to go full width */
.selected-work .gallery {
  max-width: 100%;
  width: 100%;
  flex-shrink: 0;
}

.selected-work .gallery-caption {
  flex-shrink: 0;
}

/* Arrow buttons: invert in light mode so they're always visible.
   In dark mode (--on-surface = white, --surface = black): white bg, black icon — same as before.
   In light mode (--on-surface = black, --surface = white): black bg, white icon — visible on white. */
.selected-work .gallery-arrow {
  background: var(--on-surface);
  color: var(--surface);
  border-color: var(--surface-border);
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease,
              transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.selected-work .gallery-arrow:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}

/* ================================================================
   PAGE HERO — shared between /projects and /projects/:slug
   ================================================================ */
.page-hero {
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
  /* border-bottom: 1px solid var(--surface-border-soft); */
}

.page-hero__label {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 20px;
}

.page-hero__title {
  font-family: var(--font-geist);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--on-surface);
  margin-bottom: 20px;
}
.page-hero.project-inner {
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.page-hero__sub {
  font-family: var(--font-geist);
  font-weight: 300;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--surface-muted);
  max-width: 560px;
  line-height: 1.55;
}

.page-hero__title-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--surface-border-soft);
  justify-content: space-between;
}

/* Remove the bottom margin from the h1 itself — the row handles spacing now */
.page-hero__title-row .page-hero__title {
  margin-bottom: 0;
}

.page-hero__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 70px;
  letter-spacing: 0.02em;
  color: var(--on-surface);
  /* background: rgba(255, 255, 255, 0.08); */
  /* border: 1px solid rgba(255, 255, 255, 0.12); */
  /* border-radius: 999px; */
  /* padding: 4px 12px; */
  /* Align to the top of the title so it reads as a superscript badge */
  margin-top: clamp(10px, 1.2vw, 18px);
  flex-shrink: 0;
  min-width: 36px;
  line-height: 1;
}

/* ================================================================
   FILTER TABS — projects listing page
   ================================================================ */
.filter-bar {
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--surface-border-soft);
  margin-bottom: clamp(32px, 5vw, 64px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar on mobile */
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar { display: none; }

.filter-tabs {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.filter-tab {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 14px;
  color: var(--surface-muted);
  background: var(--surface-border-soft);
  border: 1px solid var(--surface-border);
  border-radius: 100px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1;
  white-space: nowrap;
}

.filter-tab:hover {
  color: var(--on-surface);
  background: var(--track-bg);
  transform: scale(1.04);
}

.filter-tab[aria-selected="true"] {
  color: var(--black);
  background: var(--yellow);
  border-color: var(--yellow);
  transform: scale(1);
}

/* ================================================================
   ALL PROJECTS GRID — listing page
   ================================================================ */
.all-projects {
  padding: 0 0 clamp(80px, 10vw, 140px);
}

.all-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Projects page: 4-column grid override */
.all-projects .projects-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
  .all-projects .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .all-projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .all-projects .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .all-projects__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .all-projects .projects-grid {
    grid-template-columns: 1fr;
  }
}

/* Card link wrapper */
.project-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Extend the homepage .project-card with extras for the listing page */
.project-card--full {
  cursor: pointer;
}

.project-card--full .project-img {
  aspect-ratio: 4 / 3;
}

.project-card--full .project-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
}

.project-card--full .project-title {
  font-size: clamp(16px, 1.6vw, 20px);
}

.project-card--full .project-type {
  font-size: 13px;
}

.project-card--full .project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.project-tag {
  font-family: var(--font-geist);
  font-size: 11px;
  font-weight: 500;
  color: var(--surface-muted);
  background: var(--surface-border-soft);
  border: 1px solid var(--surface-border);
  border-radius: 100px;
  padding: 4px 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

.project-card--full .project-year {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 400;
  color: var(--surface-muted);
  margin-top: auto;
  transition: color 0.5s ease;
}

/* "No results" empty state */
.all-projects__empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  color: var(--surface-muted);
  font-family: var(--font-geist);
  font-size: 18px;
  transition: color 0.5s ease;
}

/* Card filter transition */
.project-card-link {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-card-link.is-hidden {
  display: none;
}

/* ================================================================
   PROJECT DETAIL PAGE
   ================================================================ */

/* Back link */
.detail-back {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.01em;
}

.back-link:hover {
  color: var(--yellow);
}

/* Detail hero */
.detail-hero {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.detail-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--font-geist);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.detail-hero__meta-type {
  color: var(--yellow);
  font-weight: 500;
}

.detail-hero__title {
  font-family: var(--font-geist);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 24px;
  max-width: 16ch;
}

.detail-hero__brief {
  font-family: var(--font-geist);
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  max-width: 640px;
  margin-bottom: 28px;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Cover image */
.detail-cover {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.detail-cover__img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 16px;
  background: #1a1a1a;
  display: block;
}

/* Content grid */
.detail-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(48px, 6vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(80px, 10vw, 128px);
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 900px) {
  .detail-content {
    grid-template-columns: 1fr;
  }
}

/* Left: prose blocks */
.detail-block {
  margin-bottom: clamp(36px, 4vw, 56px);
}

.detail-block:last-child {
  margin-bottom: 0;
}

.detail-block h2 {
  font-family: var(--font-geist);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 14px;
}

.detail-block p {
  font-family: var(--font-geist);
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
}

/* Right: sidebar */
.detail-sidebar {
  position: sticky;
  top: calc(72px + 32px); /* nav height + breathing room */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.detail-sidebar-block h3 {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
}

.detail-sidebar-block p,
.detail-sidebar-block li {
  font-family: var(--font-geist);
  font-weight: 400;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
}

.detail-sidebar-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-sidebar-block li::before {
  content: '·  ';
  color: var(--yellow);
}

/* Next / Prev navigation */
.detail-nav {
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.detail-nav__back {
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}

.detail-nav__back:hover { color: var(--yellow); }

.detail-nav__adjacent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-nav__adj {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  transition: color 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.detail-nav__adj:hover {
  color: var(--yellow);
  border-color: var(--yellow);
  transform: scale(1.04);
}

/* ── Detail page 404 / error state ── */
.detail-error {
  padding: clamp(80px, 12vw, 160px) 0;
  text-align: center;
}

.detail-error__code {
  font-family: var(--font-geist);
  font-weight: 700;
  font-size: clamp(72px, 12vw, 160px);
  color: rgba(255, 255, 255, 0.07);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 16px;
}

.detail-error__msg {
  font-family: var(--font-geist);
  font-size: clamp(18px, 2vw, 26px);
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 32px;
}

.detail-error__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-geist);
  font-weight: 500;
  font-size: 15px;
  color: var(--black);
  background: var(--yellow);
  border-radius: 100px;
  padding: 12px 28px;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.detail-error__link:hover { transform: scale(1.05); }

/* ================================================================
   "VIEW ALL PROJECTS" BUTTON — homepage + projects page
   ================================================================ */
.projects-cta {
  text-align: center;
  margin-top: clamp(36px, 5vw, 56px);
}

.btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-geist);
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--black);
  background: var(--yellow);
  border-radius: 100px;
  padding: 14px 34px;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}

.btn-view-all:hover {
  transform: scale(1.06);
}

.btn-view-all:active {
  transform: scale(0.98);
}

/* ================================================================
   SPACER — page-scoped override. The base .section-spacer (homepage
   Experience → Skills) is 30vh; here we want exactly 20vh of breathing
   room between Selected Work and the footer.
   ================================================================ */
main .section-spacer {
  height: 20vh;
}

/* ================================================================
   FOOTER — inherits the same look as the homepage footer; the base
   .footer rule now uses theme-aware tokens (var(--surface), etc.)
   so no overrides are needed here.
   ================================================================ */

/* ================================================================
   RESPONSIVE — inner pages
   ================================================================ */
@media (max-width: 768px) {
  .page-hero__title {
    letter-spacing: -0.025em;
  }

  .detail-hero__title {
    letter-spacing: -0.025em;
  }

  .detail-nav {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .filter-tabs {
    gap: 8px;
  }

  .filter-tab {
    font-size: 13px;
    padding: 8px 16px;
  }

  .detail-nav__adjacent {
    width: 100%;
  }

  .detail-nav__adj {
    flex: 1;
    justify-content: center;
  }
}

/* ── All-projects section: pin context for footer slide-up effect ── */
.all-projects {
  position: relative;
  z-index: 1;
}

/* ── Projects-page footer: force light theme to match the home-page footer ──
   The projects page body carries `theme-dark` permanently, which flips
   --surface to #060606 (black).  The home page footer is always rendered
   in light mode because the home page body starts without theme-dark.
   Locally overriding the four surface tokens on .page-footer (the extra
   class that exists only on the projects footer) makes both footers
   visually identical without touching style.css or duplicating any rules. */
.page-footer {
  --surface:             var(--white);
  --on-surface:          var(--black);
  --surface-muted:       var(--light-grey);
  --surface-border-soft: rgba(0, 0, 0, 0.05);
  --surface-border:      rgba(0, 0, 0, 0.15);
}