/* =========================================
   IceTeaMacchiato — Projects Page
   ========================================= */

:root {
  --color-gold:    #C8963E;
  --color-crimson: #7B1515;

  --proj-header-h:   5.5rem;
  --gallery-v-pad:   1.5rem;
  --gallery-side-pad: 3rem;
  --col-gap:         2.5rem;

  /*
   * Column width: natural 2.5-column layout on common screens.
   * Capped at 520px so ultrawide monitors show more columns rather
   * than making individual cards uncomfortably wide.
   * Floored at 280px so narrow tablets still get legible cards.
   */
  --col-w: clamp(
    280px,
    calc((100vw - var(--gallery-side-pad) - var(--col-gap) * 1.5) / 2.5),
    520px
  );

  /*
   * Gallery height: whichever is smallest of —
   *   • viewport minus header+padding (never overflow the page)
   *   • 1.5× column width (keeps cards at a comfortable portrait ratio)
   *   • 800px absolute ceiling
   */
  --gallery-h: min(
    calc(100dvh - var(--proj-header-h) - var(--gallery-v-pad) * 2),
    calc(var(--col-w) * 1.5),
    800px
  );
}

/* ── Page-level layout ───────────────────── */

body {
  overflow: hidden;
}

/* Theme toggle lives in the side menu on this page, not bottom-right */
.theme-toggle {
  display: none;
}

/* ── Header ──────────────────────────────── */

.proj-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: var(--color-bg);
  transition: background-color 0.3s ease;
}

.proj-nav {
  display: flex;
  align-items: center;
  padding: var(--nav-padding);
  gap: 2rem;
}

/* Push filter tabs toward the right — they live next to the hamburger */
#desktop-filters {
  margin-left: auto;
}

/* ── Brand area ──────────────────────────── */

.proj-brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-shrink: 0;
}

.home-link {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  transition: opacity 0.2s ease;
}

.home-link:hover {
  opacity: 0.6;
}

.home-link .logo-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
  white-space: nowrap;
}

.home-link .logo-zh {
  display: none;
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin-left: 0.6em;
}

[data-lang="zh"] .home-link .logo-zh {
  display: inline;
}

.brand-sep {
  color: var(--color-muted);
  font-size: 1.2rem;
  opacity: 0.45;
  padding: 0 0.1rem;
  flex-shrink: 0;
}

.brand-title {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  white-space: nowrap;
}

[data-lang="zh"] .brand-title {
  font-family: var(--font-zh);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ── Filter tabs ─────────────────────────── */

.proj-filters {
  display: flex;
  align-items: baseline;
  gap: 2rem;
}

/* Mobile second-row filter bar — hidden on desktop */
.mobile-filter-bar {
  display: none;
}

.filter-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--color-muted);
  letter-spacing: 0.01em;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease;
}

[data-lang="zh"] .filter-btn {
  font-family: var(--font-zh);
  font-size: 1rem;
}

.filter-btn:hover {
  color: var(--color-text);
}

.filter-btn.active {
  color: var(--color-crimson);
  font-size: 1.35rem;
}

[data-lang="zh"] .filter-btn.active {
  font-size: 1.25rem;
}

/* Dark mode: active filter switches from crimson to gold for better contrast */
[data-theme="dark"] .filter-btn.active {
  color: var(--color-gold);
}

/* Dark mode: inactive filters use near-full text colour so they're legible */
[data-theme="dark"] .filter-btn:not(.active) {
  color: rgba(224, 224, 224, 0.8);
}

[data-theme="dark"] .filter-btn:not(.active):hover {
  color: var(--color-text);
}

/* Make the hamburger always visible on the projects page */
.menu-btn {
  display: flex;
}

/* The side menu's top padding must clear the projects header (taller than the
   default 4rem used by the home page's menu, which was designed for mobile). */
.mobile-menu .mobile-nav-links {
  padding-top: calc(var(--proj-header-h) + 1rem);
}

/* ── Main container ──────────────────────── */

.proj-main {
  position: relative;
}

/* ── Desktop gallery outer ───────────────── */

.gallery-outer {
  position: relative;
  overflow: hidden;
  padding-top: var(--gallery-v-pad);
  padding-bottom: var(--gallery-v-pad);
  padding-left: var(--gallery-side-pad);
  height: calc(var(--gallery-h) + var(--gallery-v-pad) * 2);
}

/* ── Gallery track (horizontally scrolled) ── */

.gallery-track {
  display: flex;
  gap: var(--col-gap);
  height: var(--gallery-h);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Column ──────────────────────────────── */

.col {
  flex: 0 0 var(--col-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--col-gap);
}

/* ── Project card (desktop) ──────────────── */

.proj-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  flex: 1;
}

.proj-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* Bottom gradient for title legibility */
.proj-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.25) 35%,
    transparent 65%
  );
  pointer-events: none;
}

/* Hover: image zooms slightly — the card frame stays fixed */
.proj-card:hover img {
  transform: scale(1.06);
}

.card-title {
  position: absolute;
  bottom: 1.1rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
  z-index: 2;
  padding: 0 1rem;
  pointer-events: none;
}

[data-lang="zh"] .card-title {
  font-family: var(--font-zh);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

/* ── Edge fade overlays ──────────────────── */

.gallery-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.3s ease;
}

.gallery-fade-right {
  right: 0;
  background: linear-gradient(to right, transparent, var(--color-bg) 72%);
}

.gallery-fade-left {
  left: 0;
  background: linear-gradient(to left, transparent, var(--color-bg) 72%);
  opacity: 0;
}

.gallery-fade-left.visible {
  opacity: 1;
}

/* ── Navigation arrows ───────────────────── */

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  opacity: 0;
  transition: opacity 0.25s ease, color 0.2s ease;
  padding: 0.4rem;
  line-height: 0;
}

.gallery-outer:hover .gallery-arrow:not(.hidden) {
  opacity: 0.55;
}

.gallery-arrow:hover {
  opacity: 1 !important;
  color: var(--color-text);
}

.gallery-arrow.hidden {
  opacity: 0 !important;
  pointer-events: none;
}

.arrow-right {
  right: 1.5rem;
}

.arrow-left {
  left: calc(var(--gallery-side-pad) - 0.5rem);
}

/* ── Mobile gallery ──────────────────────── */

.gallery-mobile {
  display: none;
}

/* ── Page transition ─────────────────────── */

.page-entering .proj-header,
.page-entering .proj-main {
  opacity: 0;
  transform: translateY(14px);
}

.proj-header,
.proj-main {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

body.page-leaving {
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* ── Responsive: tablet ──────────────────── */

@media (max-width: 768px) {
  :root {
    --gallery-side-pad: 1.5rem;
    --col-gap: 0.75rem;
  }

  /* Match the home page's reduced logo size at tablet/mobile widths.
     projects.css's .home-link .logo-en has higher specificity than style.css's
     .logo-en, so we need an explicit override here. */
  .home-link .logo-en {
    font-size: 1.15rem;
  }
}

/* ── Responsive: mobile ──────────────────── */

@media (max-width: 430px) {
  :root {
    --proj-header-h: 7rem;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Match home page mobile navbar: top-align, hamburger at far right edge */
  .proj-nav {
    align-items: flex-start;
  }

  /* On mobile, #desktop-filters is hidden so the auto-margin on it doesn't push
     the hamburger right. Use margin-left: auto here instead. */
  .menu-btn {
    margin-left: auto;
    margin-top: 0.25rem;
  }

  /* Hide Chinese subtitle in the brand — not enough room on narrow screens */
  .home-link .logo-zh {
    display: none !important;
  }

  /* Reduce brand + title to home-page mobile proportions */
  .home-link .logo-en,
  .brand-title {
    font-size: 1.15rem;
  }

  [data-lang="zh"] .brand-title {
    font-size: 1.1rem;
  }

  .brand-sep {
    font-size: 1rem;
  }

  /* Hide desktop carousel */
  .gallery-outer {
    display: none;
  }

  /* Show vertical mobile gallery */
  .gallery-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.75rem 1.25rem 2.5rem;
  }

  /* Hide desktop filters in the nav; show mobile filter bar instead */
  #desktop-filters {
    display: none;
  }

  .mobile-filter-bar {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.55rem 1.25rem 0.7rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.13);
    background: var(--color-bg);
    transition: background-color 0.3s ease;
  }

  .mobile-filter-bar .filter-btn {
    font-size: 0.9rem;
  }

  .mobile-filter-bar .filter-btn.active {
    font-size: 1.1rem;
  }

  /* Theme toggle moves into side menu on mobile */
  .theme-toggle {
    display: none;
  }

  /* ── Mobile project cards ── */

  .mobile-card {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
  }

  .mobile-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.25) 35%,
      transparent 65%
    );
    pointer-events: none;
  }

  .mobile-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.35s ease;
  }

  /* Tap-and-hold (>500ms) zooms the image — class added by JS */
  .mobile-card.tap-zoom img {
    transform: scale(1.06);
  }

  /* Writings + Zines in Zines-filter: tall portrait */
  .mobile-card.card-tall img {
    aspect-ratio: 3 / 4;
  }

  /* Zines in Everything-filter: compact landscape */
  .mobile-card.card-small img {
    aspect-ratio: 5 / 3;
  }

  .mobile-card-title {
    position: absolute;
    bottom: 0.9rem;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    z-index: 2;
    padding: 0 1rem;
    pointer-events: none;
  }

  [data-lang="zh"] .mobile-card-title {
    font-family: var(--font-zh);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
  }

}