/* ==========================================================================
   INSTICK Israel — БЛОК «משתלב מצוין עם…» / «идеально сочетается с…»
   (компонент pairing-block, файл: components/css/pairing-block.css)
   --------------------------------------------------------------------------
   • Полностью изолирован: ВСЕ классы начинаются с `is-pairing`,
     все переменные — с `--is-pairing-`. Блок можно вставить в любую
     страницу сайта (или в MODX-чанк) без конфликтов с текущими стилями.
   • Тема (цвет фона/обводки/акцента) задаётся ОДНОЙ переменной
     --is-pairing-accent: остальные цвета выводятся из неё через color-mix().
     Готовые пресеты — через атрибут data-is-pairing-theme на самом блоке.
   • RTL-безопасно: только логические свойства (inline/block).
   • Стиль сайта: Rubik облегчённый, радиусы 3–5px, тонкие линии.
   ========================================================================== */

/* ---------- 1 · Переменные компонента (точка кастомизации) ----------------- */
.is-pairing {
  /* ЕДИНСТВЕННАЯ обязательная переменная темы — акцентный цвет.
     Меняется под категорию товара (см. пресеты ниже или README). */
  --is-pairing-accent: #557A2C;                  /* глубокий зелёный (как в макете) */

  /* Производные цвета — обычно менять НЕ нужно, всё считается от акцента.
     При желании каждую можно переопределить вручную (см. README). */
  --is-pairing-bg:       color-mix(in srgb, var(--is-pairing-accent) 6%, #FFFDF4);  /* мягкий фон карточки */
  --is-pairing-border:   color-mix(in srgb, var(--is-pairing-accent) 55%, #FFFFFF); /* тонкая обводка карточки */
  --is-pairing-chip-bg:  #FFFFFF;                                                    /* фон бейджей-чипов */
  --is-pairing-chip-border: color-mix(in srgb, var(--is-pairing-accent) 40%, #FFFFFF);
  --is-pairing-ratio-bg: color-mix(in srgb, var(--is-pairing-accent) 8%, #FFFFFF);  /* фон плашки пропорции */
  --is-pairing-ink:      #2B1B2E;                /* основной текст (как --ink сайта) */
  --is-pairing-ink-soft: #5E5560;                /* вторичный текст */

  /* Типографика и геометрия — в духе сайта */
  --is-pairing-font: "Rubik", "Heebo", "Arial Hebrew", "Helvetica Neue", system-ui, sans-serif;
  --is-pairing-radius:    5px;                   /* карточка и плашка */
  --is-pairing-radius-sm: 4px;                   /* чипы */

  /* ---------- Сама карточка-рамка ---------- */
  box-sizing: border-box;
  font-family: var(--is-pairing-font);
  color: var(--is-pairing-ink);
  background: #FAFAEF;                           /* фолбэк для браузеров без color-mix */
  background: var(--is-pairing-bg);
  border: 1px solid #9DB37B;                     /* фолбэк */
  border: 1px solid var(--is-pairing-border);
  border-radius: var(--is-pairing-radius);
  padding-block: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
  padding-inline: clamp(1rem, .7rem + 1.5vw, 2rem);
  text-align: center;                            /* всё содержимое — по центру, как в макете */
}

/* Сброс на случай агрессивных глобальных стилей страницы-носителя */
.is-pairing *, .is-pairing *::before, .is-pairing *::after { box-sizing: border-box; }

/* ---------- 2 · Ряд бейджей-чипов сверху ----------------------------------- */
.is-pairing-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;                               /* на мобиле чипы переносятся */
  justify-content: center;
  gap: .55rem;
  margin-block-end: clamp(1rem, .8rem + 1vw, 1.5rem);
}

.is-pairing-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: clamp(.82rem, .78rem + .2vw, .9rem);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--is-pairing-ink);
  background: var(--is-pairing-chip-bg);
  border: 1px solid var(--is-pairing-chip-border);
  border-radius: var(--is-pairing-radius-sm);
  padding-block: .42rem;
  padding-inline: .8rem;
}

/* Тонкая SVG-иконка внутри чипа (цвет — акцент темы) */
.is-pairing-badge-icon {
  display: inline-flex;
  color: var(--is-pairing-accent);
  flex: none;
}
.is-pairing-badge-icon svg { width: 15px; height: 15px; display: block; }

/* ---------- 3 · Крупный заголовок ------------------------------------------ */
.is-pairing-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.7rem);
  font-weight: 500;                              /* Rubik Medium — как заголовки сайта */
  line-height: 1.25;
  color: var(--is-pairing-ink);
}

/* ---------- 4 · Пояснительный текст ---------------------------------------- */
.is-pairing-text {
  margin: 0;
  margin-block-start: .7rem;
  margin-inline: auto;
  max-inline-size: 34em;                         /* комфортная ширина строки */
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
  font-weight: 300;                              /* облегчённый Rubik */
  line-height: 1.65;
  color: var(--is-pairing-ink-soft);
}

/* ---------- 5 · Плашка-«рецепт пропорции» ----------------------------------- */
.is-pairing-ratio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0;
  margin-block-start: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  margin-inline: auto;
  max-inline-size: 32rem;                        /* на десктопе — аккуратная плашка по центру */
  background: var(--is-pairing-ratio-bg);
  border: 1px solid var(--is-pairing-border);
  border-radius: var(--is-pairing-radius);
  padding-block: .95rem;
  padding-inline: 1.2rem;
}

/* Иконка стакана слева (в RTL — справа) от текста пропорции */
.is-pairing-ratio-icon { display: inline-flex; color: var(--is-pairing-accent); flex: none; }
.is-pairing-ratio-icon svg { width: 28px; height: 28px; display: block; }

.is-pairing-ratio-text {
  font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem);
  font-weight: 500;
  color: var(--is-pairing-accent);
  /* Числа и «מ״ל» внутри ивритской строки: направление решает браузер по bdi в разметке */
}

/* ---------- 6 · Готовые пресеты тем (по категориям сайта) -------------------
   Достаточно поставить на блок data-is-pairing-theme="…" (или передать
   theme: "…" в данных — JS выставит атрибут сам). Цвета — категорийные
   цвета сайта (см. --cat-* в instick-home.css), слегка затемнённые,
   чтобы держать контраст текста на светлом фоне (WCAG AA). */
.is-pairing[data-is-pairing-theme="green"]   { --is-pairing-accent: #557A2C; } /* молочно-зелёная гамма из макета */
.is-pairing[data-is-pairing-theme="milk"]    { --is-pairing-accent: #8A6134; } /* карамель — категория «חלב» */
.is-pairing[data-is-pairing-theme="klassik"] { --is-pairing-accent: #B12736; } /* классика */
.is-pairing[data-is-pairing-theme="tea"]     { --is-pairing-accent: #0E8A83; } /* чай */
.is-pairing[data-is-pairing-theme="energy"]  { --is-pairing-accent: #C56A12; } /* энергия */
.is-pairing[data-is-pairing-theme="iso"]     { --is-pairing-accent: #2F5FD0; } /* изотоники */
.is-pairing[data-is-pairing-theme="natural"] { --is-pairing-accent: #6E7B29; } /* натуральные */

/* ---------- 7 · Мобильная адаптация ---------------------------------------- */
@media (max-width: 640px) {
  .is-pairing-ratio {
    max-inline-size: none;                       /* плашка пропорции — на всю ширину карточки */
  }
}