/* ============================================================
   PROJECTS PAGE — projects.css
   Extends the main design system (style.css)
   Electric purple · Chartreuse · Off-white
   ============================================================ */

/* ─── PAGE BASE ──────────────────────────────────────────────── */
.projects-page {
  background: var(--offwhite);
}

/* ─── PAGE HERO — COMPACT (50% height reduction) ─────────────── */
.pj-hero--compact {
  padding-top: calc(var(--nav-h) + 32px);  /* was nav-h + 64px */
  padding-bottom: 32px;                    /* was 72px          */
  background: var(--offwhite);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--gray-light);
}

.pj-hero__inner {
  position: relative;
  z-index: 1;
}

/* Back link */
.pj-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 20px;  /* was 48px */
  transition: color 0.2s, gap 0.3s var(--ease-out);
}

.pj-back:hover {
  color: var(--purple);
  gap: 14px;
}

.pj-back__arrow {
  font-size: 1.1em;
  transition: transform 0.3s var(--ease-out);
}

.pj-back:hover .pj-back__arrow {
  transform: translateX(-4px);
}

/* Hero headline — clean left-aligned block */
.pj-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--black);
  margin: 0 0 20px;
  display: flex;
  gap: 0.2em;
  align-items: baseline;
  flex-wrap: wrap;
}

.pj-hero__title-line {
  display: inline;
}

.pj-hero__title-line--accent {
  color: var(--purple);
}

/* Meta row */
.pj-hero__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pj-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pj-hero__meta-num {
  font-family: var(--font-display);
  font-size: 1.6rem;  /* was 2.2rem */
  font-weight: 900;
  line-height: 1;
  color: var(--black);
  letter-spacing: -0.02em;
}

.pj-hero__meta-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

.pj-hero__meta-divider {
  display: block;
  width: 1px;
  height: 28px;  /* was 36px */
  background: var(--gray-light);
  flex-shrink: 0;
}

/* ─── PROJECTS GRID SECTION ──────────────────────────────────── */
.pj-grid-section {
  background: var(--white);
  padding: 60px 0 100px;
}

/* ─────────────────────────────────────────────────────────────
   ASYMMETRIC EDITORIAL GRID
   Desktop layout (≥1024px):

   Columns: [2fr] [1.4fr] [1.4fr]   (3 cols total)
   Row 1 (560px): 01 Addison (col 1, spans rows 1–2) | 02 Pinterest (col 2-3, row 1)
   Row 2 (360px): 01 continued                        | 03 Twitter (col 2, row 2) | — (col 3 gap, next row)
   Row 3 (340px): 04 Lyft (col 1-2, row 3)           | 05 Super Bowl (col 3, rows 2–3)

   Visual:
   ┌─────────────────┬──────────────────────────────┐
   │                 │   02 PINTEREST               │
   │  01 ADDISON     │   (wide, short)              │
   │  (tall)         ├────────────────┬─────────────┤
   │                 │  03 TWITTER    │             │
   ├─────────────────┴────────────────┤ 05 SUPER    │
   │   04 LYFT (wide landscape)       │ BOWL (tall) │
   └──────────────────────────────────┴─────────────┘
───────────────────────────────────────────────────── */
.pj-grid {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1.2fr;
  grid-template-rows: 360px 300px 320px;
  gap: 16px;
  align-items: stretch;
}

/* 01: Addison — tall left, rows 1–2 */
.pj-card--tall-left {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* 02: Pinterest — top right, spans cols 2–3, row 1 */
.pj-card--top-right {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

/* 03: Twitter — mid col 2, row 2 */
.pj-card--mid-right {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* 04: Lyft — wide bottom, cols 1–2, row 3 */
.pj-card--wide-bottom {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

/* 05: Super Bowl — right accent, rows 2–3 */
.pj-card--accent-bottom {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

/* ─── BASE CARD STYLES ───────────────────────────────────────── */
.pj-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.pj-card:hover {
  border-color: var(--purple);
  box-shadow: 0 12px 48px rgba(123, 47, 255, 0.12);
  transform: translateY(-3px);
}

.pj-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Landscape layout for wide cards (Lyft) */
.pj-card__link--landscape {
  flex-direction: row;
}

.pj-card__link--landscape .pj-card__media {
  flex: 1.4;
  aspect-ratio: unset;
  height: 100%;
}

.pj-card__link--landscape .pj-card__info {
  flex: 1;
  justify-content: center;
}

/* ─── CARD NUMBER ────────────────────────────────────────────── */
.pj-card__num {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gray-medium);
  z-index: 3;
  background: rgba(245, 242, 238, 0.88);
  padding: 3px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}

/* ─── CARD MEDIA ─────────────────────────────────────────────── */
.pj-card__media {
  position: relative;
  overflow: hidden;
  background: var(--black);
  flex: 1;
  min-height: 0;
}

/* Navy SVG media (Super Bowl) — no aspect-ratio constraint */
.pj-card__media--navy {
  background: #050d1f;
}

.pj-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s var(--ease-out), opacity 0.4s;
  opacity: 0.9;
}

.pj-card:hover .pj-card__img {
  transform: scale(1.04);
  opacity: 1;
}

/* Prevent GIF jank on scale */
.pj-card__img[src$=".gif"],
.pj-card__img[src$=".GIF"] {
  transition: opacity 0.4s;
  transform: none !important;
}

.pj-card:hover .pj-card__img[src$=".gif"],
.pj-card:hover .pj-card__img[src$=".GIF"] {
  transform: none !important;
  opacity: 1;
}

/* Overlay CTA */
.pj-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(123, 47, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  z-index: 2;
}

.pj-card:hover .pj-card__overlay {
  opacity: 1;
}

.pj-card__overlay-cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  transform: translateY(6px);
  transition: transform 0.35s var(--ease-out), border-color 0.2s;
}

.pj-card:hover .pj-card__overlay-cta {
  transform: translateY(0);
}

.pj-card__overlay-cta span {
  transition: transform 0.3s var(--ease-out);
}

.pj-card:hover .pj-card__overlay-cta span {
  transform: translateX(4px);
}

/* ─── CARD INFO ──────────────────────────────────────────────── */
.pj-card__info {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  flex-shrink: 0;
}

.pj-card__client {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple);
}

.pj-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--black);
  transition: color 0.2s;
}

.pj-card:hover .pj-card__title {
  color: var(--purple);
}

/* Tags */
.pj-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.pj-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  border: 1px solid var(--gray-light);
  padding: 3px 9px;
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pj-card:hover .pj-tag {
  border-color: var(--purple);
  color: var(--purple);
}

/* ─── CONTACT CTA ────────────────────────────────────────────── */
.pj-contact {
  padding: 120px 0 100px;
  background: var(--offwhite);
  border-top: 1px solid var(--gray-light);
  position: relative;
  overflow: hidden;
}

.pj-contact__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.pj-contact__label {
  display: inline-block;
  background: var(--chartreuse);
  color: var(--black);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 32px;
}

.pj-contact__headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--black);
  margin-bottom: 44px;
}

.pj-contact__accent {
  display: block;
  color: var(--purple);
}

.pj-contact__email {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 600;
  color: var(--black);
  border-bottom: 2px solid var(--purple);
  padding-bottom: 4px;
  transition: color 0.2s, gap 0.3s var(--ease-out);
  letter-spacing: -0.01em;
}

.pj-contact__email:hover {
  color: var(--purple);
  gap: 20px;
}

.pj-contact__arrow {
  font-size: 1.3em;
  transition: transform 0.3s var(--ease-out);
}

.pj-contact__email:hover .pj-contact__arrow {
  transform: translateX(6px);
}

.pj-contact__links {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.pj-contact__back,
.pj-contact__studio {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  transition: color 0.2s;
}

.pj-contact__back:hover { color: var(--black); }
.pj-contact__studio:hover { color: var(--purple); }

.pj-contact__bg-text {
  position: absolute;
  bottom: -8%;
  right: -3%;
  font-family: var(--font-display);
  font-size: clamp(200px, 30vw, 460px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet: 2-column grid */
@media (max-width: 1024px) {
  .pj-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 400px 320px 320px;
    gap: 14px;
  }

  /* 01 Addison: col 1–2, row 1 (full width, short) */
  .pj-card--tall-left   { grid-column: 1 / 3; grid-row: 1 / 2; }
  /* 02 Pinterest: col 1, row 2 */
  .pj-card--top-right   { grid-column: 1 / 2; grid-row: 2 / 3; }
  /* 03 Twitter: col 2, row 2 */
  .pj-card--mid-right   { grid-column: 2 / 3; grid-row: 2 / 3; }
  /* 04 Lyft: col 1, row 3 */
  .pj-card--wide-bottom { grid-column: 1 / 2; grid-row: 3 / 4; }
  /* 05 Super Bowl: col 2, row 3 */
  .pj-card--accent-bottom { grid-column: 2 / 3; grid-row: 3 / 4; }

  /* Disable landscape layout on tablet */
  .pj-card__link--landscape { flex-direction: column; }
  .pj-card__link--landscape .pj-card__media { flex: 1; height: auto; }
  .pj-card__link--landscape .pj-card__info { flex: none; }
}

/* Mobile: single column */
@media (max-width: 640px) {
  .pj-hero--compact {
    padding-top: calc(var(--nav-h) + 20px);
    padding-bottom: 24px;
  }

    .pj-hero__title {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  .pj-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }

  .pj-card--tall-left,
  .pj-card--top-right,
  .pj-card--mid-right,
  .pj-card--wide-bottom,
  .pj-card--accent-bottom {
    grid-column: 1 / 2;
    grid-row: auto;
  }

  /* Fixed heights for single-col mobile cards */
  .pj-card--tall-left   { min-height: 420px; }
  .pj-card--top-right   { min-height: 340px; }
  .pj-card--mid-right   { min-height: 320px; }
  .pj-card--wide-bottom { min-height: 320px; }
  .pj-card--accent-bottom { min-height: 300px; }

  .pj-card__link--landscape { flex-direction: column; }
  .pj-card__link--landscape .pj-card__media { flex: 1; height: auto; }

  .pj-card__info { padding: 16px 20px 20px; }

  .pj-contact__links {
    flex-direction: column;
    gap: 16px;
  }
}