/* ============================================================================
   3 · Món tiêu biểu (signature)
   Design source: design/v3.0.1/reference/nam-yam-index.html  L141–165

   Three cards share one baseline: the box is as tall as the tallest (middle)
   image, and the two side images sit at its bottom edge.
   All three are visible at every width — fixed in v3.0.1.
   ============================================================================ */

#signature {
  --sig-box-h:     clamp(380px, 41.5vw, 552px);   /* height of the tallest   */
  --sig-img-side:  clamp(330px, 36vw, 480px);
  --sig-img-mid:   clamp(380px, 41.5vw, 552px);

  background: var(--ny-teal);
  padding: clamp(72px, 10vw, 132px) var(--ny-pad) clamp(80px, 11vw, 140px);
}

.ny-sig__hairline {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--ny-sig-line);
}

.ny-sig__head {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 14px;
  margin-bottom: clamp(40px, 5vw, 68px);
}
.ny-sig__head h2 {
  font: var(--ny-serif-regular) clamp(46.8px, 5.4vw, 84.6px)/var(--ny-lh-tight) var(--ny-serif);
  color: var(--ny-white);
}
.ny-sig__head h2 span { color: var(--ny-bronze); }
.ny-sig__head p {
  font: var(--ny-sans-light) var(--ny-fs-small)/1.7 var(--ny-sans);
  color: var(--ny-white-68);
}

.ny-sig__grid {
  display: grid;
  grid-template-columns: .82fr 1.16fr .82fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.ny-sig__card {
  display: flex; flex-direction: column;
  gap: clamp(32px, 3.6vw, 45px);
  border: 1px solid transparent;
  padding: clamp(12px, 1.4vw, 20px);
}
.ny-sig__card--feature { border-color: var(--ny-gold-75); }

.ny-sig__box {
  position: relative;
  display: flex; align-items: flex-end;
  width: 100%;
  height: var(--sig-box-h);
  overflow: hidden;
}
.ny-sig__box img {
  display: block;
  width: 100%;
  height: var(--sig-img-side);
  object-fit: cover;
  object-position: center;
  filter: saturate(.9);
  transition: filter var(--ny-slow), transform var(--ny-slow) var(--ny-ease);
}
.ny-sig__card--feature .ny-sig__box img { height: var(--sig-img-mid); }
.ny-sig__box img:hover { filter: saturate(1.04); transform: scale(1.015); }

.ny-sig__meta { display: flex; align-items: flex-end; gap: 14px; }
.ny-sig__meta > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.ny-sig__num {
  flex: none;
  font: var(--ny-sans-regular) var(--ny-fs-body)/1 var(--ny-sans);
  letter-spacing: .22em;
  color: var(--ny-red);
}
.ny-sig__meta h3 {
  font: var(--ny-serif-regular) clamp(22px, 2.05vw, 31.5px)/var(--ny-lh-heading) var(--ny-serif);
  color: var(--ny-white);
}
.ny-sig__meta p {
  font: var(--ny-sans-light) var(--ny-fs-small)/1.5 var(--ny-sans);
  letter-spacing: .18em;
  color: var(--ny-white-60);
}

.ny-sig__link {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: var(--ny-tap); height: var(--ny-tap);
  border: 1px solid var(--ny-gold-55);
  color: var(--ny-gold);
  font: var(--ny-sans-regular) 15px/1 var(--ny-sans);
  transition: background 300ms;
}
.ny-sig__link:hover { background: var(--ny-gold-16); color: var(--ny-white); }

@media (max-width: 1000px) {
  #signature {
    --sig-box-h:    clamp(320px, 72vw, 460px);
    --sig-img-side: clamp(320px, 72vw, 460px);
    --sig-img-mid:  clamp(320px, 72vw, 460px);
  }
  .ny-sig__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  #signature { padding: clamp(56px, 9vw, 72px) var(--ny-pad-sm) clamp(64px, 10vw, 84px); }
  .ny-sig__head { align-items: flex-start; text-align: left; }
}