/* ============================================================================
   5 · Khoảnh khắc (gallery)
   Design source: design/v3.0.1/reference/nam-yam-index.html  L176–192

   Desktop grid — the left cell spans both rows, so it is the TALL one:
     ┌─────────┬─────┐
     │         │  b  │
     │    a    ├─────┤
     │         │  c  │
     └─────────┴─────┘
   a ≈ 3:4 portrait · b and c ≈ 4:3 landscape.
   (design/v3.0.1/CONTENT.md states these the other way round — the grid wins.)
   ============================================================================ */

#gallery {
  background: var(--ny-paper);
  color: var(--ny-ink);
  padding: clamp(56px, 7.5vw, 104px) var(--ny-pad) clamp(72px, 10vw, 132px);
}

.ny-gal__head {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
  gap: clamp(20px, 3vw, 44px);
  margin-bottom: clamp(26px, 3.2vw, 42px);
}
.ny-gal__head .ny-eyebrow {
  margin-top: clamp(10px, 1.1vw, 18px);   /* sits level with the first heading line */
}
.ny-gal__head h2 {
  font: var(--ny-serif-regular) var(--ny-fs-h2)/var(--ny-lh-tight) var(--ny-serif);
  color: var(--ny-ink);
  text-align: right;
}
.ny-gal__head h2 span { color: var(--ny-bronze); }

.ny-gal__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: clamp(280px, 30vw, 420px) clamp(260px, 28vw, 390px);
  gap: clamp(12px, 1.6vw, 22px);
}
.ny-gal__a { grid-area: 1 / 1 / 3 / 2; }
.ny-gal__b { grid-area: 1 / 2 / 2 / 3; }
.ny-gal__c { grid-area: 2 / 2 / 3 / 3; }

.ny-gal__grid figure {
  overflow: hidden;
  border: 1px solid var(--ny-dark-16);
}
.ny-gal__grid img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.9);
  transition: transform 900ms var(--ny-ease), filter 700ms;
}
.ny-gal__grid img:hover { transform: scale(1.03); filter: saturate(1.04); }

.ny-gal__foot {
  margin-top: clamp(22px, 3vw, 36px);
  text-align: center;
  font: var(--ny-sans-regular) var(--ny-fs-label)/1.6 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ny-label);
}

@media (max-width: 760px) {
  #gallery { padding: clamp(48px, 8vw, 64px) var(--ny-pad-sm) clamp(56px, 9vw, 72px); }
  .ny-gal__head .ny-eyebrow { margin-top: 0; }
  .ny-gal__head h2 { text-align: left; }
  .ny-gal__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 270px 190px;
  }
  .ny-gal__a { grid-area: 1 / 1 / 2 / 3; }
  .ny-gal__b { grid-area: 2 / 1 / 3 / 2; }
  .ny-gal__c { grid-area: 2 / 2 / 3 / 3; }
}