/* Карточки репертуара на главной (из repertuar-cards.html). Классы pc-*. */
:is(#fp-repertoire, #rep-page) {
  --pc-card: 36 60% 97%; --pc-ink: 215 25% 18%; --pc-muted: 215 10% 45%;
  --pc-wine: 356 58% 30%; --pc-wine-2: 356 50% 42%; --pc-gold: 40 70% 58%; --pc-line: 34 25% 80%;
  --pc-r: 12px; --pc-ease: cubic-bezier(.2,.7,.2,1); --pc-spring: cubic-bezier(.34,1.56,.64,1);
}
:is(#fp-repertoire, #rep-page) .pc-grid { gap: 18px; }
:is(#fp-repertoire, #rep-page) .pc-li { min-width: 0; list-style: none; }

:is(#fp-repertoire, #rep-page) .pc {
  min-width: 0; position: relative; display: flex; container-type: inline-size; height: 100%;
  font-family: "Manrope", system-ui, sans-serif;
  filter: drop-shadow(0 1px 1px hsl(var(--pc-ink) / .08)) drop-shadow(0 10px 12px hsl(var(--pc-ink) / .10));
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .45s var(--pc-ease), filter .45s var(--pc-ease), opacity .6s var(--pc-ease), translate .6s var(--pc-ease);
}
:is(#fp-repertoire, #rep-page) .pc-li:hover .pc, :is(#fp-repertoire, #rep-page) .pc:focus-within {
  --ty: -6px; filter: drop-shadow(0 2px 2px hsl(var(--pc-ink) / .08)) drop-shadow(0 18px 18px hsl(var(--pc-ink) / .16));
}
/* оболочка; вырезы — маской, сквозь них виден фон секции */
:is(#fp-repertoire, #rep-page) .pc-shell {
  --y: calc(100cqw * 1086 / 768); --h: 9px;
  flex: 1; display: flex; flex-direction: column; background: hsl(var(--pc-card)); border-radius: var(--pc-r);
  -webkit-mask: radial-gradient(circle var(--h) at 0 var(--y), #0000 97%, #000), radial-gradient(circle var(--h) at 100% var(--y), #0000 97%, #000);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle var(--h) at 0 var(--y), #0000 97%, #000), radial-gradient(circle var(--h) at 100% var(--y), #0000 97%, #000);
          mask-composite: intersect;
}
:is(#fp-repertoire, #rep-page) .pc-poster {
  position: relative; aspect-ratio: 768 / 1086; overflow: hidden; border-radius: var(--pc-r) var(--pc-r) 0 0; background: hsl(var(--pc-wine));
}
:is(#fp-repertoire, #rep-page) .pc-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--pc-ease); }
:is(#fp-repertoire, #rep-page) .pc-li:hover .pc .pc-poster img { transform: none; }
:is(#fp-repertoire, #rep-page) .pc-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, hsl(0 0% 100% / .35) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .9s var(--pc-ease);
}
:is(#fp-repertoire, #rep-page) .pc-li:hover .pc .pc-poster::after { transform: translateX(120%); }
:is(#fp-repertoire, #rep-page) .pc-fb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 22px 18px; text-align: center; color: hsl(var(--pc-gold));
  background: radial-gradient(circle at 30% 20%, hsl(var(--pc-wine-2)), hsl(var(--pc-wine)) 70%); }
/* тонкая двойная рамка, как на театральной афише */
:is(#fp-repertoire, #rep-page) .pc-fb::before { content: ""; position: absolute; inset: 10px; border: 1px solid hsl(var(--pc-gold) / .55); border-radius: 4px; pointer-events: none; }
:is(#fp-repertoire, #rep-page) .pc-fb::after { content: ""; position: absolute; inset: 14px; border: 1px solid hsl(var(--pc-gold) / .25); border-radius: 2px; pointer-events: none; }
:is(#fp-repertoire, #rep-page) .pc-fb__logo { position: static; width: 46%; height: auto; max-width: 120px; object-fit: contain; opacity: .9; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35)); }
:is(#fp-repertoire, #rep-page) .pc-fb__t { font: 700 15px/1.25 "Lora", Georgia, serif; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
:is(#fp-repertoire, #rep-page) .pc-poster .pc-fb__logo { position: static; inset: auto; width: 46%; height: auto; max-width: 120px; }

:is(#fp-repertoire, #rep-page) .pc-cut { height: 0; margin: 0 14px; border-top: 1.5px dashed hsl(var(--pc-line)); }
:is(#fp-repertoire, #rep-page) .pc-info { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
:is(#fp-repertoire, #rep-page) .pc-info h3 { margin: 0; font: 700 16.5px/1.25 "Lora", Georgia, serif; color: hsl(var(--pc-ink)); }
:is(#fp-repertoire, #rep-page) .pc-stretch { color: inherit; text-decoration: none; }
:is(#fp-repertoire, #rep-page) .pc-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--pc-r); }
:is(#fp-repertoire, #rep-page) .pc-stretch:focus-visible { outline: none; }
:is(#fp-repertoire, #rep-page) .pc:has(.pc-stretch:focus-visible) { outline: 2px solid hsl(var(--pc-wine)); outline-offset: 3px; }

:is(#fp-repertoire, #rep-page) .pc-next {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: hsl(var(--pc-wine) / .08); color: hsl(var(--pc-wine)); font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
:is(#fp-repertoire, #rep-page) .pc-next i { width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--pc-wine)); flex: none; animation: pc-pulse 2s infinite; }
:is(#fp-repertoire, #rep-page) .pc-next.today { background: hsl(var(--pc-wine)); color: #fff; }
:is(#fp-repertoire, #rep-page) .pc-next.today i { background: #fff; }
@keyframes pc-pulse { 0% { box-shadow: 0 0 0 0 hsl(var(--pc-wine) / .5); } 70% { box-shadow: 0 0 0 7px hsl(var(--pc-wine) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--pc-wine) / 0); } }

:is(#fp-repertoire, #rep-page) .pc-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
:is(#fp-repertoire, #rep-page) .pc-tag {
  position: relative; z-index: 2; font-size: 10.5px; font-weight: 600; padding: 3px 8px; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; border-radius: 999px; text-decoration: none;
  border: 1px solid hsl(var(--pc-line)); color: hsl(var(--pc-muted)); background: hsl(0 0% 100% / .5);
  transition: border-color .2s;
}
:is(#fp-repertoire, #rep-page) .pc-tag:hover { border-color: hsl(var(--pc-wine) / .6); }
:is(#fp-repertoire, #rep-page) .pc-tag.ny { border-color: hsl(var(--pc-gold)); color: hsl(36 60% 30%); background: hsl(var(--pc-gold) / .15); }
:is(#fp-repertoire, #rep-page) .pc-tag.adult { border-color: hsl(var(--pc-ink) / .4); color: hsl(var(--pc-ink)); }
:is(#fp-repertoire, #rep-page) .pc-dur { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: hsl(var(--pc-muted)); white-space: nowrap; }

/* возрастная печать: откатывается за край афиши при наведении */
:is(#fp-repertoire, #rep-page) .pc-age {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: hsl(var(--pc-wine)); cursor: default;
  background: hsl(var(--pc-card) / .86); -webkit-backdrop-filter: blur(6px) saturate(1.3); backdrop-filter: blur(6px) saturate(1.3);
  box-shadow: 0 0 0 1px hsl(0 0% 100% / .6), 0 6px 14px -6px hsl(var(--pc-ink) / .55);
  transition: transform .65s var(--pc-spring) .08s, opacity .3s ease .08s;
}
:is(#fp-repertoire, #rep-page) .pc-age::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid hsl(var(--pc-wine) / .28); }
:is(#fp-repertoire, #rep-page) .pc-age b { font: 600 16px/1 "Lora", Georgia, serif; letter-spacing: -.02em; font-feature-settings: "lnum"; }
:is(#fp-repertoire, #rep-page) .pc-age b sup { font: 700 .55em/1 "Manrope", system-ui, sans-serif; vertical-align: .55em; margin-left: 1px; opacity: .75; }
:is(#fp-repertoire, #rep-page) .pc-li:hover .pc .pc-age, :is(#fp-repertoire, #rep-page) .pc.peek .pc-age {
  transform: translate(30px, -24px) rotate(100deg) scale(.5); opacity: 0;
  transition: transform .42s cubic-bezier(.55,0,.75,.2), opacity .32s ease .1s;
}

/* появление при прокрутке (только когда включён JS) */
:is(#fp-repertoire, #rep-page) .pc-js .pc-rv { opacity: 0; translate: 0 22px; }
:is(#fp-repertoire, #rep-page) .pc-js .pc-rv.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  :is(#fp-repertoire, #rep-page) .pc, :is(#fp-repertoire, #rep-page) .pc * { animation: none !important; transition: none !important; }
  :is(#fp-repertoire, #rep-page) .pc { transform: none !important; }
  :is(#fp-repertoire, #rep-page) .pc-js .pc-rv { opacity: 1; translate: none; }
}

/* плашка ближайшего показа: синий #37518C и золотой текст #FFC069 */
:is(#fp-repertoire, #rep-page) .pc-next, :is(#fp-repertoire, #rep-page) .pc-next.today { background: #37518C; color: #FFC069; }
:is(#fp-repertoire, #rep-page) .pc-next i, :is(#fp-repertoire, #rep-page) .pc-next.today i { background: #FFC069; animation-name: pc-pulse-gold; }
@keyframes pc-pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(255,192,105,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,192,105,0); } 100% { box-shadow: 0 0 0 0 rgba(255,192,105,0); } }

/* возрастная печать: синяя, золотой текст; «+» крупный и на уровне цифры */
:is(#fp-repertoire, #rep-page) .pc-age {
  width: 46px; height: 46px; color: #FFC069; background: #37518C;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1.5px rgba(255,192,105,.55), 0 6px 14px -6px rgba(0,0,0,.55);
}
:is(#fp-repertoire, #rep-page) .pc-age::before { inset: 3px; border: 1px dashed rgba(255,192,105,.55); }
:is(#fp-repertoire, #rep-page) .pc-age b { display: inline-flex; align-items: center; justify-content: center; gap: 1px; font: 800 18px/1 "Manrope", system-ui, sans-serif; letter-spacing: -.01em; }
:is(#fp-repertoire, #rep-page) .pc-age b sup { font: 800 15px/1 "Manrope", system-ui, sans-serif; vertical-align: baseline; margin: 0; opacity: 1; position: relative; top: -.5px; }

/* возрастная печать — как вкладка «Понеділок» в календаре: синий градиент, белый текст, без пунктира */
:is(#fp-repertoire, #rep-page) .pc-age {
  width: 48px; height: 48px; color: #fff;
  background: linear-gradient(180deg, #37518C, #192842);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px rgba(0,0,0,.55);
}
:is(#fp-repertoire, #rep-page) .pc-age::before { display: none; }
:is(#fp-repertoire, #rep-page) .pc-age b { font-size: 20px; font-weight: 800; }
:is(#fp-repertoire, #rep-page) .pc-age b sup { font-size: 17px; }

/* метка возраста — красный градиент как «Вівторок» */
:is(#fp-repertoire, #rep-page) .pc-age { background: linear-gradient(180deg, #B6313A, #750E17); }
/* ближайший показ — синий градиент как «Понеділок», белый текст */
:is(#fp-repertoire, #rep-page) .pc-next, :is(#fp-repertoire, #rep-page) .pc-next.today {
  background: linear-gradient(180deg, #37518C, #192842); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
:is(#fp-repertoire, #rep-page) .pc-next i, :is(#fp-repertoire, #rep-page) .pc-next.today i { background: #fff; animation-name: pc-pulse-white; }
@keyframes pc-pulse-white { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* печати возраста появляются после того, как проявились все карточки (по очереди, пружиной) */
:is(#fp-repertoire, #rep-page) .pc-js:not(.seals-in) .pc-age { transform: translate(30px, -24px) rotate(100deg) scale(.5); opacity: 0; }

/* страница «Репертуар»: кнопки-теги, скрытие отфильтрованных, архив */
#rep-page .pc-li[hidden] { display: none !important; }
#rep-page button.pc-tag { font-family: inherit; cursor: pointer; }
#rep-page button.pc-tag.is-active { background: hsl(var(--pc-wine) / .14); border-color: hsl(var(--pc-wine) / .55); color: hsl(var(--pc-ink)); }
#rep-page .rep-grid--archive .pc-poster img { filter: grayscale(.55); transition: filter .3s; }
#rep-page .rep-grid--archive .pc-li:hover .pc-poster img { filter: none; }

/* Размер карточки не должен зависеть от картинки: пока афиша не загрузилась (или не загрузилась вовсе),
   её собственные width/height-атрибуты раздували оболочку на всю ширину экрана и растягивали ряд. */
:is(#fp-repertoire, #rep-page) .pc { width: 100%; }
:is(#fp-repertoire, #rep-page) .pc-shell { min-width: 0; width: 100%; }
:is(#fp-repertoire, #rep-page) .pc-poster { min-width: 0; contain: size; }
:is(#fp-repertoire, #rep-page) .pc-poster img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Мобильные / сенсорные: без наклона, теней-фильтров, блика, blur и анимаций — легче и нет «залипшего» :hover */
@media (hover: none), (max-width: 767px) {
  :is(#fp-repertoire, #rep-page) .pc,
  :is(#fp-repertoire, #rep-page) .pc * { transition: none !important; animation: none !important; }
  :is(#fp-repertoire, #rep-page) .pc { filter: none; transform: none !important; }
  :is(#fp-repertoire, #rep-page) .pc-poster::after { display: none; }
  :is(#fp-repertoire, #rep-page) .pc-age,
  :is(#fp-repertoire, #rep-page) .pc-li:hover .pc .pc-age,
  :is(#fp-repertoire, #rep-page) .pc-js:not(.seals-in) .pc-age {
    transform: none; opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :is(#fp-repertoire, #rep-page) .pc-rv { opacity: 1 !important; translate: none !important; }
}

/* Репертуар, мобильные: без счётчиков в тегах-фильтрах */
@media (max-width: 767px) { #rep-page .rep-chip .n { display: none; } }

/* Репертуар, мобильные: каждая группа фильтров — своя плашка, подпись сверху, компактные теги */
@media (max-width: 640px) {
  #rep-page .rep-frow {
    gap: 7px; margin-bottom: 10px; padding: 12px 14px 14px;
    background: rgba(255,255,255,.55); border: 1px solid var(--rp-line); border-radius: 16px;
  }
  #rep-page .rep-frow__label { flex: 0 0 100%; margin: 0 0 2px; font-size: 10.5px; opacity: .8; }
  #rep-page .rep-chip { padding: 6px 13px; font-size: 13px; font-weight: 600; border-width: 1px; background: #fff; }
  #rep-page .rep-chip[aria-pressed="true"] {
    background: linear-gradient(180deg, #B6313A, #750E17); border-color: #750E17; color: #fff;
    box-shadow: 0 4px 10px -4px rgba(117,14,23,.55);
  }
}