/* ============================================================================
   2 · Câu chuyện (philosophy)
   Design source: design/v3.0.1/reference/nam-yam-index.html  L112–138

   The figure is three stacked layers: the square photo, a bronze outline
   offset down-right, and a teal caption overhanging down-left. The offsets
   are local variables so the outline's calc() stays readable.
   ============================================================================ */

#philosophy {
  --fig-offset: clamp(16px, 2vw, 32px);
  --fig-pad-l:  clamp(32px, 4vw, 64px);
  --fig-pad-r:  clamp(16px, 2vw, 32px);
  --fig-pad-b:  clamp(32px, 4vw, 64px);

  background: var(--ny-paper);
  color: var(--ny-ink);
  padding: clamp(80px, 12vw, 150px) var(--ny-pad);
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(48px, 6vw, 90px);
}

.ny-philo__copy {
  flex: 1 1 420px;
  min-width: 280px;
  max-width: 650px;          /* sized so "Một bát mì ngon" never wraps */
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(28px, 4vw, 48px);
}

.ny-philo__title {
  font: var(--ny-serif-regular) clamp(44px, 4.55vw, 72px)/1.06 var(--ny-serif);
  letter-spacing: 0;
  color: var(--ny-ink);
}
.ny-philo__title span { display: block; white-space: nowrap; }
.ny-philo__title-alt { color: var(--ny-bronze); }

.ny-philo__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 32px);
  margin-top: 6px;
}
.ny-philo__cols p {
  font: var(--ny-sans-light) var(--ny-fs-body)/var(--ny-lh-body) var(--ny-sans);
  color: var(--ny-body-dark);
  text-wrap: pretty;
}

.ny-philo__fig {
  flex: 0 1 42%;
  min-width: 260px;
  max-width: 42%;
  position: relative;
  padding: 0 var(--fig-pad-r) var(--fig-pad-b) var(--fig-pad-l);
}
.ny-philo__figbox {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--ny-dark-20);
}
.ny-philo__figbox img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ny-philo__frame {
  position: absolute;
  left: calc(var(--fig-pad-l) + var(--fig-offset));
  top: var(--fig-offset);
  width: calc(100% - var(--fig-pad-l) - var(--fig-pad-r));
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--ny-bronze);
  box-shadow: 0 0 0 1px var(--ny-frame-glow);
  pointer-events: none;
}
.ny-philo__cap {
  position: absolute; left: 0; bottom: 0;
  width: min(340px, 74%);
  background: var(--ny-teal);
  padding: clamp(18px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 8px;
}
.ny-philo__cap small {
  font: var(--ny-sans-regular) var(--ny-fs-label)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--ny-gold);
}
.ny-philo__cap strong {
  font: var(--ny-serif-regular) var(--ny-fs-caption)/1.2 var(--ny-serif);
  color: var(--ny-white);
}
.ny-philo__cap strong span { display: block; white-space: nowrap; }

.ny-philo__vnote {
  position: absolute;
  right: clamp(12px, 1.6vw, 26px);
  top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font: var(--ny-sans-regular) var(--ny-fs-label)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ny-dark-45);
}

@media (max-width: 1000px) {
  .ny-philo__copy { flex: 1 1 100%; }
  .ny-philo__cols { grid-template-columns: 1fr; }
  .ny-philo__fig  { flex: 1 1 100%; max-width: 78%; }
}

@media (max-width: 760px) {
  #philosophy {
    --fig-offset: 10px;
    --fig-pad-l: 18px;
    --fig-pad-r: 10px;
    --fig-pad-b: 20px;
    padding: clamp(56px, 9vw, 72px) var(--ny-pad-sm);
    gap: 44px;
  }
  .ny-philo__title { font-size: clamp(38px, 10.6vw, 58px); }
  .ny-philo__fig   { max-width: 100%; }
  .ny-philo__vnote { display: none; }
}