/* ================================================================
   gallery.css — Gallery page ONLY
   style.css must be loaded first.
   ================================================================ */

/* ── HERO MOSAIC STRIP
   FILES: gallery-hero-1.jpg to gallery-hero-8.jpg
   ================================================================ */
.gl-hero {
  position: relative;
  height: clamp(180px, 22vw, 250px);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gl-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.gl-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}
.gl-hero-title {
  position: relative;
  z-index: 2;
  font-family: var(--font);
  font-size: var(--h1);
  font-weight: 700;
  color: var(--white);
  text-align: center;
}

/* ── PORTFOLIO GRID
   Screenshot: 3-column grid, no rounded corners,
   title bold serif, desc regular — last row has only 2 items left-aligned
   ================================================================ */
.gl-portfolio { background: #fff; }
.gl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.gl-card { display: flex; flex-direction: column; gap: 0.6rem; }
.gl-card-img {
  aspect-ratio: 33 / 40;
  overflow: hidden;
  background: #f0f0f0;
}
.gl-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.gl-card:hover .gl-card-img img { transform: scale(1.04); }
.gl-card-title {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 20px; font-weight: 700; color: #111; line-height: 1.3;
}
.gl-card-desc {
  font-family: 'Inria Serif', Georgia, serif;
  font-size: 20px; color: #444; line-height: 1.55;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .gl-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .gl-hero-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .gl-hero  { height: 160px; }
  .gl-grid  { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .gl-hero-strip { grid-template-columns: repeat(4, 1fr); }
}