/* ==========================================================================
   Страница партнёров — карточки-купоны.
   Токены берутся из gamler.css, подключать после него.
   ========================================================================== */

.p-wrap{padding:8px 0 20px}

/* --- фильтр по категориям (рендерится, только если категорий больше одной) - */
.p-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.p-filter:empty{display:none}
.p-filter__chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:14px;color:var(--muted);
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.p-filter__chip b{font:500 11px/1 var(--mono);opacity:.55}
.p-filter__chip:hover{color:var(--ink);border-color:var(--ink)}
.p-filter__chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.p-filter__chip[aria-pressed="true"] b{color:var(--accent);opacity:.85}

/* --- сетка --------------------------------------------------------------- */
.p-grid{
  display:grid;gap:18px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}

/* --- купон ---------------------------------------------------------------
   Фон живёт на .p-card__body и .p-card__stub, а не на самой карточке:
   иначе вырубки перфорации закрылись бы её собственным фоном.
   Тень — drop-shadow, она идёт по альфа-контуру и обходит вырезы.
   ------------------------------------------------------------------------- */
.p-card{
  position:relative;display:flex;flex-direction:column;
  background:transparent;transform-origin:50% 0;
  filter:drop-shadow(0 0 .5px rgba(0,0,0,.22)) drop-shadow(0 16px 26px rgba(0,0,0,.10));
  transition:transform .28s var(--p-ease),filter .28s var(--p-ease);
  --p-ease:cubic-bezier(.22,1,.36,1);
}
.p-card:hover{
  transform:translateY(-3px);
  filter:drop-shadow(0 0 .5px rgba(0,0,0,.28)) drop-shadow(0 26px 38px rgba(0,0,0,.18));
}
.p-card.is-open{transform:none}
.p-card.is-open:hover{transform:none}

/* невидимая кнопка-мишень на всю карточку: раскрывает и сворачивает.
   Лежит под ссылками (z-index), поэтому они кликаются нормально. */
.p-card__hit{
  position:absolute;inset:0;z-index:1;
  width:100%;padding:0;border:0;background:transparent;
  border-radius:var(--r-card);cursor:pointer;
}
.p-card__hit:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.p-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.p-card__body{background:var(--card);border-radius:var(--r-card) var(--r-card) 0 0;padding:24px}
.p-card__top{display:flex;align-items:center;gap:14px}

/* аватар и его заглушка на случай, если логотип ещё не залит */
.p-av{
  width:48px;height:48px;flex:0 0 48px;border-radius:14px;object-fit:cover;
  background:var(--light);
}
.p-av--fb{
  display:grid;place-items:center;
  background:var(--fb-bg,var(--ink));color:#fff;
  font:500 17px/1 var(--display);letter-spacing:.5px;
}

/* Широкий логотип-вордмарк (от 2:1). Ширину и высоту задаёт атрибутами
   разметка — место резервируется до загрузки, вёрстка не прыгает.
   max-width страхует логотипы длиннее фактического слота. */
.p-card__top--wide{align-items:flex-start}
.p-card__ident{min-width:0;flex:1}
.p-logo{
  width:auto;height:auto;
  max-width:100%;max-height:40px;
  object-fit:contain;object-position:left center;
  /* схлопывается с margin-top категории, поэтому это и есть итоговый зазор */
  margin-bottom:14px;
}
/* логотип не загрузился — плитка с инициалами и вернувшийся заголовок */
.p-card__top--wide .p-av--fb{width:48px;height:48px;border-radius:14px}
.p-card__top--wide .p-card__nm{margin-top:14px}

.p-card__nm{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.2;margin:0}
.p-card__cat{margin:5px 0 0;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.p-card__chev{
  margin-left:auto;flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--light);color:var(--muted);
  transition:transform .3s var(--p-ease),background-color .22s ease,color .22s ease;
}
.p-card__chev svg{width:13px;height:13px}
.p-card:hover .p-card__chev{background:var(--ink);color:#fff}
.p-card.is-open .p-card__chev{transform:rotate(180deg);background:var(--ink);color:#fff}

/* --- раскрываемая зона ---------------------------------------------------
   max-height проставляет скрипт по фактической высоте — так переход
   идёт до реального размера, а не до условного «большого числа».
   ------------------------------------------------------------------------- */
.p-card__reveal{
  overflow:hidden;
  max-height:var(--p-collapsed,88px);
  transition:max-height .46s var(--p-ease);
}
.p-card__reveal.is-clipped{
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
}
.p-card.is-open .p-card__reveal{-webkit-mask-image:none;mask-image:none}

.p-card__ds{margin:18px 0 0;font-size:14px;line-height:22px;color:var(--muted)}

/* нижний отступ держит фокус-ринг ссылок внутри overflow:hidden зоны */
.p-card__links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 5px}
.p-link{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:var(--card);
  font-size:14px;font-weight:500;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s var(--p-ease);
}
.p-link svg{width:14px;height:14px;flex:0 0 14px}
.p-link:hover{border-color:var(--ink);transform:translateY(-1px)}
.p-link--primary{background:var(--ink);border-color:var(--ink);color:#fff}
.p-link--primary:hover{background:#000}
.p-link--tg{color:var(--blue);border-color:rgba(21,99,255,.3)}
.p-link--tg:hover{background:rgba(21,99,255,.07);border-color:var(--blue)}
.p-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* --- перфорация и корешок ------------------------------------------------ */
.p-card__perf{
  position:relative;height:22px;
  background:
    radial-gradient(circle 11px at 0 50%,transparent 11px,var(--card) 11px) left/50.5% 100% no-repeat,
    radial-gradient(circle 11px at 100% 50%,transparent 11px,var(--card) 11px) right/50.5% 100% no-repeat;
}
.p-card__perf::after{
  content:"";position:absolute;left:18px;right:18px;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,#D8D8D8 0 6px,transparent 6px 12px);
}
.p-card__stub{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 24px 22px;border-radius:0 0 var(--r-card) var(--r-card);
}
.p-card--bonus .p-card__stub{background:var(--accent)}
.p-card--plain .p-card__stub{background:var(--card)}
.p-card__lbl{font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 7px}
.p-card--bonus .p-card__lbl{color:rgba(23,23,23,.55)}
.p-card--plain .p-card__lbl{color:var(--muted-dark)}
.p-card__bn{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.25;margin:0}
.p-card--plain .p-card__bn{color:var(--muted);font-weight:400;font-size:15px}
.p-card__cta{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:11px 18px;border-radius:var(--r-btn);background:var(--ink);color:#fff;
  font-size:14px;font-weight:500;
  transition:transform .22s var(--p-ease);
}
.p-card__cta svg{width:14px;height:14px;transition:transform .3s var(--p-ease)}
.p-card:hover .p-card__cta{transform:translateX(3px)}
.p-card.is-open .p-card__cta svg{transform:rotate(180deg)}
.p-card--bonus .p-card__cta{background:var(--ink)}

/* --- появление ------------------------------------------------------------
   Анимация, а не transition: задержка стаггера не должна протекать
   в ховер-переходы. backwards держит стартовый кадр на время задержки,
   после проигрыша элемент возвращается к своим стилям.
   ------------------------------------------------------------------------- */
.p-reveal{opacity:0}
.p-reveal.is-in{
  opacity:1;
  animation:p-unfold .72s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes p-unfold{from{opacity:0;transform:translateY(20px) scaleY(.9)}}

/* --- служебные состояния -------------------------------------------------- */
.p-skeleton{
  min-height:260px;border-radius:var(--r-card);
  background:linear-gradient(100deg,#EDEDED 30%,#F6F6F6 50%,#EDEDED 70%) 0 0/300% 100%;
  animation:p-shimmer 1.4s linear infinite;
}
@keyframes p-shimmer{to{background-position:-300% 0}}
.p-note{
  margin:0;padding:36px 24px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--r-card);
  color:var(--muted);font-size:15px;line-height:24px;
}
.p-note b{display:block;color:var(--ink);font-weight:500;margin-bottom:6px}

@media (max-width:520px){
  .p-grid{grid-template-columns:1fr}
  .p-card__body{padding:20px}
  .p-card__stub{padding:14px 20px 20px;flex-wrap:wrap}
  .p-card__cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .p-reveal{opacity:1}
  .p-card__reveal{transition:none}
  *,*::before,*::after{animation:none!important}
}