/* projects.css */

/* ===== Page ===== */

.page-projects .page{
  max-width:1120px;
  margin:0 auto;
  padding:22px 16px 44px;
}

.page-projects{
  --proj-max:820px;
}

/* ===== Intro ===== */

.proj-intro{
  max-width:720px;
  margin:0 auto 2rem;
  text-align:center;
}

.proj-intro-line{
  display:block;
  width:48px;
  height:1px;
  background:#ccc;
  margin:.9rem auto;
}

.proj-note{
  font-size:.92em;
  opacity:.72;
}

/* ===== Grid ===== */

.grid{
  display:grid;
  grid-template-columns:1fr;
}

.proj-sep{
  max-width:var(--proj-max);
  height:1px;
  background:#e6e6e6;
  margin:18px auto;
}

/* ===== Card ===== */

.card{
  max-width:var(--proj-max);
  margin:0 auto;
  padding:18px;
  border-radius:14px;
  background:#fff;
}

/* ===== Featured layout ===== */

.proj-featured{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:18px;
}

/* ===== Static photo (no zoom) ===== */

.proj-static-photo img{
  width:100%;
  border-radius:12px;
  display:block;
}

/* ===== Photos ===== */

.proj-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.proj-photo-wrap{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  cursor:pointer;
}

.proj-photo-wrap.big{
  grid-column:1 / -1;
  aspect-ratio:3 / 2;
}

.proj-photo-wrap.small{
  aspect-ratio:16 / 9;
}

.proj-photo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:filter .15s ease, transform .15s ease;
}

/* hover reaction */

.proj-photo-wrap:hover .proj-photo{
  filter:brightness(0.92) contrast(1.05);
  transform:scale(1.01);
}

/* ===== Content ===== */

.proj-content{
  display:flex;
  flex-direction:column;
  height:100%;
}

.proj-head-text{
  margin:0 0 14px;
  font-size:.95em;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.7;
  text-align:center;
}

.proj-block{
  margin-bottom:8px;
}

.proj-block p{
  margin:0;
  font-size:.92em;
  line-height:1.45;
  color:#555;
}

.proj-tagline{
  font-size:.85em;
  opacity:.7;
  line-height:1.4;
  color:#555;
}

/* ===== Watch link ===== */

.proj-watch-wrap{
  margin-top:auto;
  text-align:right;
}

.proj-watch{
  font-size:.9em;
  color:#888;
  text-decoration:none;
  display:inline-block;
  transition:color .15s ease, transform .15s ease;
}

.proj-watch:hover{
  color:#000;
  transform:scale(1.05);
}

/* ===== Zoom ===== */

.zoom-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
}

.zoom-overlay.open{
  display:flex;
}

.zoom-overlay img{
  max-width:min(1100px,92vw);
  max-height:88vh;
  border-radius:14px;
  cursor:pointer;
}

/* ===== Responsive ===== */

@media (max-width:820px){
  .page-projects{
    --proj-max:100%;
  }

  /* IMPORTANT: stack and put text first, photo second */
  .proj-featured{
    display:flex;
    flex-direction:column-reverse;
    gap:18px;
  }

  .proj-head-text{
    text-align:left;
  }
}
@media (max-width:820px){
  .page-projects{
    --proj-max:100%;
  }

  /* mobile: exact order: title -> photo -> text -> link */
  .proj-featured{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  /* make children of .proj-content participate in the same flex flow */
  .proj-content{
    display:contents;
  }

  .proj-head-text{ order:1; text-align:left; }

  .proj-photos,
  .proj-static-photo{ order:2; }

  .proj-block{ order:3; }

  .proj-watch-wrap{ order:4; text-align:right; }
}