/* ============================================================
   value.css — секция 6 «TASTE FIRST» (белый). Поток, токены.
   3 горизонтальные карточки: фото слева, номер+заголовок+описание справа.
   ============================================================ */

.val { background: var(--c-white); padding: 40px var(--side) 44px; }

/* ТЗ-12 §2: шапка блока по центру (eyebrow + H2). */
.val__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-eyebrow);
  text-align: center;
}
.val__h2 {
  margin-top: 10px; text-align: center;
  font-family: var(--ff-head); font-weight: 800; font-size: var(--fs-h2);
  line-height: var(--lh-head); color: var(--c-ink);
}

/* ТЗ-12 §6: карточка перестроена. Номер + заголовок сверху одной строкой на всю
   ширину карточки (334px вместо 202) — все три заголовка встают в строку без
   уменьшения кегля. Под шапкой: фото слева (118px, не менять), описание справа. */
.val__card {
  margin-top: 16px;
  background: var(--c-ivory); border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  display: block; padding: 12px;
}

.val__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.val__num {
  flex: 0 0 auto; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 28px; padding: 2px 12px;
  background: var(--c-dark); color: var(--c-white);
  border-radius: var(--r-pill);
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap); letter-spacing: .5px;
}
.val__t {
  margin: 0;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1.1; letter-spacing: .2px; text-transform: uppercase; color: var(--c-ink);
  /* намеренно: если заголовок удлинится — вылезет и это заметят, а не переползёт молча */
  white-space: nowrap;
}

.val__row { display: flex; align-items: center; gap: 14px; }
.val__ph { flex: 0 0 118px; width: 118px; aspect-ratio: 1 / 1; border-radius: var(--r-img); overflow: hidden; }
.val__ph img { width: 100%; height: 100%; object-fit: cover; }
.val__d {
  margin: 0;
  font-size: var(--fs-note); line-height: 1.45; color: var(--c-muted);
}