/* «Ещё в каталоге»: две карточки-двери (assets/features/pglinks.js) — приём карточек «Ресторану / Поставщику» flux-horeca.uz,
   в цветах сайта. Покой: бумага, слово антиквой внизу, веер флаконов сложен стопкой. Наведение: карточка шире соседки,
   заливается чернилами, круглая стрелка поворачивается к верхнему углу, веер раскрывается дугой с упругим перелётом
   (уход — быстрее и без упругости). Веер лежит под текстом: слово, подпись и ссылка всегда читаются поверх фото */
.pglinks .pglinks__list { display: flex; gap: var(--col-gap); }
.pglinks .pglinks__list > div { flex: 1 1 0; min-width: 0; display: flex; transition: flex-grow .75s cubic-bezier(.165, .84, .44, 1); }

.pglinks .pglinks__list .pglink--door {
  position: relative; isolation: isolate; container-type: inline-size;
  flex: 1; min-width: 0; min-height: clamp(360px, 30vw, 450px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12px;
  padding: clamp(24px, 2.5vw, 40px);
  border: 1px solid var(--line); border-radius: clamp(20px, 2vw, 32px); overflow: hidden;
  background: var(--paper-2); color: var(--ink);
  transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.pglink--door .pglink__n {
  position: absolute; left: clamp(24px, 2.5vw, 40px); top: clamp(26px, 2.6vw, 42px);
  font: 500 .75rem/1 var(--f-text); letter-spacing: .2em; color: var(--mute); transition: color .45s var(--ease);
}
.pglink--door .pglink__arrow {
  position: absolute; right: clamp(16px, 1.8vw, 30px); top: clamp(16px, 1.8vw, 30px);
  display: grid; place-items: center; width: clamp(52px, 4.4vw, 70px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: rotate .7s cubic-bezier(.165, .84, .44, 1), background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.pglink--door .pglink__arrow .pglink__go { width: 40%; height: 40%; stroke-width: 1.2; transform: none; transition: none; }
.pglink--door .pglink__t {
  font: 300 clamp(2.4rem, 10.5cqi, 6.2rem)/.95 var(--f-display); letter-spacing: -.03em;
  margin-bottom: 4px;
}
.pglink--door .pglink__s { max-width: 40ch; font-size: .9375rem; line-height: 1.5; color: var(--mute); transition: color .45s var(--ease); }
.pglink--door .pglink__more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 4px 0;
  font: 500 .75rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.pglink--door .pglink__more .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* Веер: точка — правее середины, выше слова; карточки стоят стопкой и при наведении разлетаются в дугу */
.pglink__fan { position: absolute; left: 63%; top: 30%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.pglink__fan > i {
  position: absolute; left: 0; top: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  width: 104px; height: 140px; padding: 10px 8px 9px; border-radius: 13px;
  background: var(--white); color: var(--ink);
  box-shadow: 0 22px 40px -20px rgba(18, 17, 15, .55), 0 0 0 1px rgba(18, 17, 15, .07);
  translate: -50% -50%; transform-origin: 50% 88%;
  transform: translate(calc(var(--x) * .16), calc(var(--y) * .4 + 18px)) rotate(calc(var(--r) * .45)) scale(.84);
  transition: transform .42s cubic-bezier(.55, .055, .675, .19);
}
.pglink__fan img { display: block; width: 100%; min-height: 0; flex: 1; object-fit: contain; user-select: none; }
.pglink__fan b {
  display: block; max-width: 100%; margin-top: 6px;
  font: italic 400 .8125rem/1 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pglink__fan--years b { font-size: .9375rem; }
/* карточка уже — веер мельче и выше, чтобы не заходить на слово */
@media (max-width: 1280px) { .pglink__fan { top: 29%; scale: .84; } }

@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .pglinks .pglinks__list:hover > div { flex-grow: .8; }
  .pglinks .pglinks__list > div:hover { flex-grow: 1.32; }
  .pglinks .pglinks__list .pglink--door:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .pglink--door:hover .pglink__n, .pglink--door:hover .pglink__s { color: var(--mute-inv); }
  .pglink--door:hover .pglink__arrow { rotate: -45deg; background: var(--white); border-color: var(--white); color: var(--ink); }
  .pglink--door:hover .pglink__more { gap: 14px; border-bottom-color: currentColor; }
  .pglink--door:hover .pglink__fan > i,
  .pglink--door:focus-visible .pglink__fan > i {
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
    transition: transform 1.1s cubic-bezier(.165, .84, .44, 1) calc(var(--i) * 55ms);
  }
  /* упругий перелёт — где браузер умеет linear() */
  @supports (transition-timing-function: linear(0, 1)) {
    .pglink--door:hover .pglink__fan > i, .pglink--door:focus-visible .pglink__fan > i {
      transition-timing-function: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
    }
  }
}
.pglinks .pglinks__list .pglink--door:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

/* Касание: наведения нет — веер сразу раскрыт, чуть мельче */
@media (hover: none), (pointer: coarse) {
  .pglink__fan > i { transform: translate(calc(var(--x) * .8), calc(var(--y) * .8)) rotate(var(--r)) scale(.8); transition: none; }
  .pglinks .pglinks__list .pglink--door:active { background: var(--paper-3); }
}
@media (max-width: 760px) {
  .pglinks .pglinks__list { flex-direction: column; }
  .pglinks .pglinks__list .pglink--door { min-height: 380px; }
  .pglink__fan { left: 55%; top: 34%; scale: 1; }
  .pglink__fan > i { transform: translate(calc(var(--x) * .7), calc(var(--y) * .7)) rotate(var(--r)) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .pglinks .pglinks__list > div, .pglink--door, .pglink--door .pglink__arrow, .pglink__fan > i { transition: none !important; }
}