/* ==========================================================================
   KIYIZGROUP — раздел интеллектуальной собственности (/patents).
   Общий слой сайта — в /site/base.css.

   Раздел монохромный, как весь сайт (base.css): выделение делают вес, трекинг
   и линия, а не цвет. Цвета здесь ровно два и оба принадлежат документу,
   а не оформлению: приглушённое золото печати (--seal в base.css) и синий
   бланка Кыргызпатента (--kp-blue). Синий живёт только внутри отрисовки
   свидетельства и за её пределы не выходит.
   ========================================================================== */

[data-view][hidden] {
  display: none;
}

/*
  Отбивки между экранами вдвое меньше общесайтовых --sec.

  Раздел читается как справка: шесть коротких экранов подряд, где текста
  на две-три строки. С обычной отбивкой между ними оставалось бы по
  полтора экрана пустоты, и страница из шести блоков превращалась
  в десять прокруток.
*/
[data-view='index'] .section {
  padding: clamp(48px, 6.5vh, 96px) 0;
}

/*
  Длинные слова в заголовках раздела разрешено переносить.

  «Зарегистрированных», «Интеллектуальная», немецкие составные и кыргызские
  падежные формы длиннее, чем 280 px, которые остаются от экрана в 320 px
  после полей страницы. Без переноса такое слово выезжает за край, и вместе
  с ним едет вся страница. break-word, а не anywhere: слово рвётся только
  когда целиком не влезает, а не при каждом удобном случае.
*/
.phero .h1,
[data-view='index'] .h2,
.pentry .h2,
.pitem__name {
  overflow-wrap: break-word;
}

/* ---------- первый экран ---------- */
.phero {
  padding: calc(var(--nav-h) + clamp(34px, 5vh, 64px)) 0 clamp(36px, 5vh, 64px);
  background: var(--bg-felt);
}
.phero__grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  column-gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.phero__lead {
  max-width: 58ch;
  margin-top: 20px;
}
.phero__note {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-mute);
}

/*
  Снимок свидетельства в первом экране.

  Рамки у него нет: жёсткий прямоугольник с обводкой на песочной подложке
  читался наклейкой поверх страницы. Вместо неё — скругление, как у кадра
  первого экрана главной, и лёгкая приглушка цвета: снимок сделан на фоне
  курака, где рядом красный, синий и оранжевый, и в полную насыщенность
  он спорит с монохромом раздела. Насыщенность снята на пятую часть,
  добавлен слабый тёплый тон подложки — кадр садится в бумагу, но
  национальное полотно за спиной остаётся цветным.
*/
.phero__proof {
  margin: 0;
}
.phero__shot {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg-card);
}
.phero__photo {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.78) sepia(0.09) contrast(0.97);
}
/* Затемнение только снизу: надпись лежит на руках и нижнем поле бланка.
   Выше клин поднимать нельзя — в тень начинает уходить сам документ,
   а он на снимке главный */
.phero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.54) 15%,
    rgba(0, 0, 0, 0.14) 29%,
    transparent 42%
  );
}
/* Белым и полужирным: 500, как у остального текста сайта, на снимке теряется */
.phero__over {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: clamp(18px, 2.6vw, 30px);
  color: #fff;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: balance;
}
.phero__cap {
  margin-top: 14px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* Три показателя первого экрана. Ячейки в одну рамку — тот же приём, что
   в блоке на главной и у чисел культурного кода. */
.pstats {
  display: grid;
  /* Ровно три колонки, а не auto-fit: показателей три, и при двух колонках
     в ряду третья оставалась одна — пустая ячейка сетки показывала подложку,
     серый прямоугольник рядом с числами */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: clamp(30px, 4vh, 46px) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.pstat {
  display: flex;
  flex-direction: column;
  background: var(--bg-felt);
  padding: 18px 20px;
}
.pstat dd {
  order: 1;
  margin: 0;
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.pstat dt {
  order: 2;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  overflow-wrap: anywhere;
}

/* ---------- манифест ---------- */
/*
  Слой войлока, из-под которого проступает чертёжная сетка. Сетка нарисована
  двумя градиентами, а не картинкой: шаг у неё ровный, файл не нужен, и она
  остаётся резкой на любом экране.
*/
.pmanifest {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 6vw, 80px) clamp(24px, 4vw, 64px);
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.pmanifest::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 40px);
  opacity: 0.5;
  /* Сетка проступает книзу: сверху ещё лежит войлок, ниже он раскрывается
     и под ним оказывается чертёж */
  mask-image: linear-gradient(to bottom, transparent, #000 70%);
}
.pmanifest__text {
  position: relative;
  max-width: 60ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.5;
}

/* ---------- фильтр реестра ---------- */
.pfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(26px, 4vh, 42px);
}
.pchip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 30px;
  padding: 9px 16px;
  font-size: 0.86rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.pchip:hover {
  border-color: var(--ink);
}
.pchip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.pchip__n {
  font-size: 0.74rem;
  color: var(--ink-mute);
}
.pchip.is-on .pchip__n {
  color: rgba(255, 255, 255, 0.62);
}

/* ---------- карточка реестра ---------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
/*
  Пропорции карточки близки к листу свидетельства — так требует раздел.
  Углы прямые: скругление превращает документ в стикер.
*/
.pat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition:
    border-color 0.35s ease,
    transform 0.35s ease;
}
.pat:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}
/* Подложка кадра белая, а не песочная: внутри лежит бумага бланка,
   и тонировать её незачем */
.pat__frame {
  position: relative;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
/* Орнаментальная линия по краю. Прорисовывается при наведении и по фокусу
   с клавиатуры: эффект держится 420 мс — спокойно, как просит раздел */
.pat__edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pat__edge rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.42s ease;
}
.pat:hover .pat__edge rect,
.pat:focus-visible .pat__edge rect {
  stroke-dashoffset: 0;
}
.pat__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.pat__group {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pat__name {
  margin: 10px 0 0;
  font-size: 1.06rem;
  line-height: 1.3;
}
.pat__more {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.84rem;
  font-weight: 600;
}
.pat__more::after {
  content: ' →';
}

/* ---------- бланк свидетельства ---------- */
/*
  Отрисовка бланка Кыргызпатента вместо абстрактного листа: карточка реестра
  выглядит тем же документом, что человек держит в руках на снимке в начале
  страницы. Синий — единственное место во всём разделе, где он появляется:
  это цвет самого бланка, а не решение оформления, и за пределы этой
  отрисовки он не выходит.

  Стилизация, а не факсимиле: подписи, реквизиты подписанта и защитные
  элементы сюда не переносятся, герб не воспроизводится, а все существенные
  сведения записи стоят рядом обычным текстом (см. page.js).
*/
.psheet {
  --kp-blue: #3a5f96;
  display: block;
  width: 100%;
  height: auto;
}
.psheet__paper {
  fill: #fff;
}
/* Орнаментальная лента по краю. Мотив нарисован линией, а не залит: на
   ширине карточки заливка слиплась бы в сплошную полосу */
.psheet__orn {
  fill: none;
  stroke: var(--kp-blue);
  stroke-width: 1.6;
  opacity: 0.55;
}
.psheet__rule {
  fill: none;
  stroke: var(--kp-blue);
  stroke-width: 1;
  opacity: 0.5;
}
.psheet__hair {
  stroke: var(--kp-blue);
  stroke-width: 0.8;
  opacity: 0.35;
}
/* Условный знак ведомства на месте герба: два кольца, без символики */
.psheet__seal-ring {
  fill: none;
  stroke: var(--kp-blue);
  stroke-width: 1.2;
  opacity: 0.55;
}
/* Мелкие строки бланка. Кегль здесь заведомо ниже читаемого — это фактура
   документа, а не текст страницы: всё, что нужно прочесть, набрано рядом */
.psheet__k {
  fill: var(--ink-soft);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.psheet__s {
  fill: var(--ink-mute);
  font-family: var(--sans);
  font-size: 9px;
  font-style: italic;
}
.psheet__t {
  fill: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.psheet__n {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Синяя надпись — самый узнаваемый элемент бланка */
.psheet__w {
  fill: var(--kp-blue);
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.psheet__d {
  fill: var(--ink-mute);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}
/* Печать — то же приглушённое золото, что у знака «зарегистрировано» */
.psheet__stamp circle {
  fill: none;
  stroke: var(--seal);
  stroke-width: 1.6;
  opacity: 0.8;
}
.psheet__ribbon {
  fill: none;
  stroke: var(--seal);
  stroke-width: 1.2;
  opacity: 0.5;
}

/* ---------- знак «зарегистрировано» ---------- */
/*
  Лёгкое тиснение, а не наклейка: тонкая рамка, приглушённое золото и
  внутренняя тень в один пиксель. Тот же знак повторяется на карточке
  изделия в каталоге (/catalog/page.css) — он и есть «авторское изделие».

  Золотом здесь только рамка и точка. Подпись набрана основным тоном текста:
  #a8894a на белом даёт 3,3:1 — этого хватает рамке, но не строчке
  прописными в кегле около десяти пикселей.
*/
.pstamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--seal);
  border-radius: 30px;
  background: var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Знак стоит в правом нижнем углу бланка и НЕ переворачивается в арабской
   раскладке: левый угол занят печатью, которая нарисована по месту
   настоящего документа. Поэтому здесь физическое right, а не логическое
   свойство — единственное такое место в разделе */
.pat__frame .pstamp {
  position: absolute;
  right: 14px;
  bottom: 14px;
  /* Компактнее общего знака: в полный рост он дотягивается до печати
     в левом углу бланка и касается её */
  gap: 6px;
  padding: 5px 10px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}
.pat__frame .pstamp__seal {
  width: 12px;
  height: 12px;
}
/* Иконка печати. Обводкой, без заливки: в кегле метки залитая фигура
   слипается в пятно, а контур читается предметом */
.pstamp__seal {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--seal);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- карточка отдельной записи ---------- */
.pentry {
  padding: calc(var(--nav-h) + clamp(34px, 5vh, 64px)) 0 var(--sec);
}
.pback {
  display: inline-block;
  margin-bottom: clamp(22px, 3vh, 34px);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-mute);
}
.pback::before {
  content: '← ';
}
.pback:hover {
  color: var(--ink);
}
.pitem {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.pitem__fig {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--bg-felt);
  padding: clamp(14px, 2vw, 24px);
}
.pitem__photo {
  width: 100%;
  height: auto;
}
.pitem__cap {
  margin-top: 14px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ink-mute);
}
.pitem__info .pstamp {
  margin-bottom: 18px;
}
.pitem__name {
  margin: 10px 0 0;
}
.pitem__idea {
  margin-top: 16px;
  max-width: 56ch;
}
/*
  Сведения записи. Номера и даты набраны табличными цифрами: в столбце
  из восьми строк разнобой по ширине знака читается как небрежность
  в документе.
*/
.pitem__meta {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 0;
  margin: clamp(26px, 3.5vh, 40px) 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.pitem__meta dt {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mute);
}
.pitem__meta dd {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.pitem__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vh, 34px);
}

/*
  Изделия, которые защищает свидетельство.

  Отдельным блоком под карточкой записи, а не строкой со ссылкой: свидетельство
  выдано на внешний вид, и связь «этот документ — про эту вещь» доказывает
  кадр, а не название. Карточка повторяет ту, что посетитель увидит
  в каталоге, — узнать её он должен с первого взгляда.

  Блока нет вовсе, пока витрина не ответила (см. loadStore в page.js).
*/
.pitem__products:empty {
  display: none;
}
.pitem__products {
  margin-top: clamp(38px, 5vh, 64px);
  padding-top: clamp(28px, 3.6vh, 44px);
  border-top: 1px solid var(--line);
}
.pitem__blockt {
  margin: 0 0 clamp(18px, 2.4vh, 26px);
  font-family: var(--serif);
  font-size: 1.25rem;
}
/* Одна карточка не растягивается на всю ширину: изделие в кадре 4:5,
   растянутом на тысячу пикселей, выглядит баннером, а не товаром */
.pgoods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.pgood {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.pgood__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-card);
}
.pgood__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pgood:hover .pgood__img {
  transform: scale(1.03);
}
/* Съёмка есть не у всех: каталог заведён из прайса. Заглушка честнее
   битой картинки и не ломает сетку — та же, что в каталоге */
.pgood__img--stub {
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font: 500 12px/1.5 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(17, 17, 17, 0.035) 10px 20px),
    var(--bg-felt);
}
.pgood__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 2px 0;
}
.pgood__name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}
.pgood__price {
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 500;
}
/* «Цена по запросу» — не цена, и выглядеть как цена не должна */
.pgood__price.is-request {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink-mute);
}
.pgood__more {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
}
.pgood__more::after {
  content: ' →';
}

/* Пиктограмма ухода на чужой сайт */
.pext {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- товарный знак ---------- */
/*
  Отдельным блоком и на другой подложке. Это другой объект права: смешать
  его со списком авторских свидетельств значит сказать посетителю неправду
  об объёме охраны.
*/
.ptm {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
}
/* Пока снимка свидетельства нет, здесь стоит сам знак. Кадр намеренно
   низкий: пустая плашка в пропорции 4:3 занимает на телефоне целый экран
   ради одного слова. Придёт снимок — пропорцию задаст он сам. */
.ptm__mark {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line-d);
  background: var(--dark-2);
  padding: clamp(24px, 4vw, 48px);
  text-align: center;
}
.ptm__wordmark {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ptm__cap {
  margin: 16px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}
.ptm__meta {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  margin: clamp(22px, 3vh, 32px) 0 0;
  border-top: 1px solid var(--line-d);
  font-size: 0.9rem;
}
.ptm__meta dt {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line-d);
  color: rgba(255, 255, 255, 0.6);
}
.ptm__meta dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-d);
  font-variant-numeric: tabular-nums;
}

/* ---------- финал ---------- */
.pfinal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vh, 34px);
}

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
  .phero__grid,
  .pitem,
  .ptm {
    grid-template-columns: 1fr;
  }
  .phero__proof {
    max-width: 420px;
    margin: clamp(26px, 4vh, 40px) auto 0;
  }
  .pitem__fig {
    max-width: 520px;
  }
}
/* Три колонки перестают вмещать «ЗАРЕГИСТРИРОВАННЫХ ПРОИЗВЕДЕНИЙ» —
   показатели идут столбцом, без пустых ячеек */
@media (max-width: 760px) {
  .pstats {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .pitem__meta,
  .ptm__meta {
    grid-template-columns: 1fr;
  }
  .pitem__meta dt,
  .ptm__meta dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .pitem__meta dd,
  .ptm__meta dd {
    padding-top: 4px;
  }
}

/* ---------- RTL ---------- */
/* Стрелки в подписях разворачиваются вместе с направлением чтения:
   «назад» в арабской раскладке уводит вправо, «дальше» — влево */
[dir='rtl'] .pback::before {
  content: '→ ';
}
[dir='rtl'] .pat__more::after {
  content: ' ←';
}
[dir='rtl'] .pitem__meta dt,
[dir='rtl'] .ptm__meta dt {
  padding: 13px 0 13px 16px;
}