/* ==========================================================================
   projects.css — 3-column image grid (6 projects, light bg)
   Source: alex-wbs.framer.website — video frames 7-16
   ========================================================================== */

.projects-section {
  padding: 100px var(--gutter) 80px;
  background: var(--white);
  color: var(--text);
}

.projects-section .container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.projects-header {
  margin-bottom: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.projects-header h2 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}

.projects-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto auto;
  grid-auto-rows: auto;
  gap: 24px 20px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 20px 0;
  align-items: start;
}

.project-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translate3d(0, var(--scroll-offset, 0px), 0);
  transition: transform 0.4s var(--ease-out);
}

.project-item:hover {
  transform: translate3d(0, calc(var(--scroll-offset, 0px) - 8px), 0);
}

.project-item:active {
  transform: scale(0.97);
  transition: transform 0.1s var(--ease-out);
}

/* ── Bento-style staggered layout: similar sizes, varied aspect ratios, slight vertical offsets ── */
.project-item--pos-tl {
  grid-column: 1 / span 3;
  grid-row: 1;
  margin-top: 0;
}
.project-item--pos-tr {
  grid-column: 4 / span 3;
  grid-row: 1;
  margin-top: 70px; /* offset down for staggered feel */
}
.project-item--pos-m {
  grid-column: 1 / span 2;
  grid-row: 2;
  margin-top: 20px;
}
.project-item--pos-bl {
  grid-column: 3 / span 4;
  grid-row: 2;
  margin-top: 0;
}
.project-item--pos-br {
  grid-column: 1 / span 3;
  grid-row: 3;
  margin-top: 30px;
}
.project-item--pos-bc {
  grid-column: 4 / span 3;
  grid-row: 3;
  margin-top: 90px; /* offset down for staggered feel */
}
.project-item--pos-auto {
  grid-column: 1 / span 3;
  margin-top: 30px;
}
.project-item--pos-auto[data-auto-side="right"] {
  grid-column: 4 / span 3;
}
.project-item--pos-auto .project-thumb { aspect-ratio: 16 / 10; }

/* ── Varied aspect ratios — some square, some landscape, some portrait ── */
.project-item--pos-tl .project-thumb { aspect-ratio: 4 / 3; }
.project-item--pos-tr .project-thumb { aspect-ratio: 1 / 1; }
.project-item--pos-m  .project-thumb { aspect-ratio: 3 / 4; }
.project-item--pos-bl .project-thumb { aspect-ratio: 16 / 10; }
.project-item--pos-br .project-thumb { aspect-ratio: 1 / 1; }
.project-item--pos-bc .project-thumb { aspect-ratio: 4 / 5; }

/* ── Top row: number + year ── */
.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-50);
  margin-bottom: 12px;
  font-weight: 500;
}

.project-num {
  font-weight: 600;
}

.project-year {
  font-weight: 400;
}

/* ── Image (large) — 3D layered hover effect (back, middle, front layers) ── */
.project-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--light);
  margin-bottom: 18px;
}

/* All three layers: base image (middle), ::before (back), ::after (front) */
.project-thumb > img,
.project-thumb::before,
.project-thumb::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease), opacity 0.6s var(--ease);
}

/* Base state: only the main image is visible — clear and sharp */
.project-thumb > img {
  z-index: 2;
  transform: scale(1);
  filter: none;
  opacity: 1;
}

/* Base state: back layer hidden, front layer hidden.
   The blur retains the image's natural colors (no brightness wash) so the glass
   effect picks up the dominant hue of the photo. */
.project-thumb::before {
  content: '';
  background-image: var(--thumb-src);
  z-index: 1;
  transform: scale(1.08);
  filter: blur(14px) saturate(1.6) brightness(1.0) contrast(1.05);
  opacity: 0;
}

.project-thumb::after {
  content: '';
  background-image: var(--thumb-src);
  z-index: 3;
  transform: scale(0.85);
  filter: blur(0px) saturate(1.2) brightness(1.05);
  opacity: 0;
}

/* Hover effect: reveal all 3 layers with cinematic depth and color-tinted glass */
.project-item:hover .project-thumb::before {
  transform: scale(1.0);
  filter: blur(12px) saturate(1.6) brightness(1.0) contrast(1.05);
  opacity: 0.55;
}

.project-item:hover .project-thumb > img {
  transform: scale(0.94);
  filter: blur(3px) saturate(1.1) brightness(1.0);
  opacity: 0.6;
}

.project-item:hover .project-thumb::after {
  transform: scale(0.82);
  filter: blur(0px) saturate(1.3) brightness(1.08);
  opacity: 1;
}



/* ── Title + category ── */
.project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.project-name {
  font-family: var(--display);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.project-item:hover .project-name {
  color: var(--red);
}

.project-category {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--border-mid);
  border-radius: 100px;
  color: var(--text-70);
  white-space: nowrap;
  background: var(--white);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.project-item:hover .project-category {
  border-color: var(--red);
  color: var(--red);
}

/* ── View all button ── */
.projects-footer {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.projects__view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
  padding: 14px 32px;
  border: 1px solid var(--border-mid);
  border-radius: 100px;
  background: var(--white);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.projects__view-all:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .projects-list { gap: 20px 16px; }
  .project-item--pos-tr { margin-top: 50px; }
  .project-item--pos-bc { margin-top: 60px; }
}

@media (max-width: 768px) {
  .projects-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .project-item--pos-tl { grid-column: 1 / span 2; grid-row: auto; margin-top: 0; }
  .project-item--pos-tr { grid-column: 1 / span 2; grid-row: auto; margin-top: 0; }
  .project-item--pos-m  { grid-column: 1 / span 1; grid-row: auto; margin-top: 0; }
  .project-item--pos-bl { grid-column: 2 / span 1; grid-row: auto; margin-top: 0; }
  .project-item--pos-br { grid-column: 1 / span 2; grid-row: auto; margin-top: 0; }
  .project-item--pos-bc { grid-column: 1 / span 2; grid-row: auto; margin-top: 0; }
  .project-item--pos-auto { grid-column: 1 / span 2; margin-top: 0; }
  .project-item--pos-tl .project-thumb,
  .project-item--pos-tr .project-thumb,
  .project-item--pos-m  .project-thumb,
  .project-item--pos-bl .project-thumb,
  .project-item--pos-br .project-thumb,
  .project-item--pos-bc .project-thumb { aspect-ratio: 4 / 3; }
  .projects-header { margin-bottom: 40px; }
  .projects-section { padding: 60px 16px; }
}

@media (max-width: 480px) {
  .projects-list {
    grid-template-columns: 1fr;
  }
  .project-item {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }
  .project-item--pos-tl .project-thumb,
  .project-item--pos-tr .project-thumb,
  .project-item--pos-m  .project-thumb,
  .project-item--pos-bl .project-thumb,
  .project-item--pos-br .project-thumb,
  .project-item--pos-bc .project-thumb { aspect-ratio: 16 / 9; }
}