/* Блок partner-tiers — рівні партнерської програми картками-тарифами.
   Глобальні токени (--ink, --muted, --line, --section-gap…) — з assets/css/style.css;
   кожен var() з фолбеком, щоб блок лишався самодостатнім поза партнерською сторінкою.
   Кольорів рівнів (бронза, срібло, золото) у токенах теми немає — заводимо тут. */

.ptiers {
  --ptiers-accent: var(--accent, #7C4DFF);

  /* Тони рівнів: підпис, кулька-декор, фон картки. */
  --tone-violet: var(--accent, #7C4DFF);
  --tone-violet-bg: #F7F5FF;
  --tone-bronze: #B4763A;
  --tone-bronze-bg: #FDF5EC;
  --tone-silver: #8D89A4;
  --tone-silver-bg: #F5F5F8;
  --tone-gold: #D79A25;
  --tone-gold-bg: #FEF8E9;

  padding-top: var(--section-gap)
}

/* Раніше тут стояв max-width:1440px — щоб чотири картки влізли в один ряд і
   підписи не переносились по-різному. Костиль знято разом із переходом на
   слайдер: видимих карток тепер три, і вони широкі за будь-якого контейнера.
   Важливо: 1440px усе одно не працював на проді — там секцію обрізає
   контейнер Neve (--container:1170px, тобто 1140px контенту). */

.ptiers > .h2,
.ptiers > .ptiers-sub {
  text-align: center
}

.ptiers-sub {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto
}

/* ---------- слайдер карток ---------- */

/* Swiper ріже все, що виходить за контейнер, а в нас виходять двоє: бейдж
   «популярний» (стоїть НАД карткою) і тінь піднятої картки (знизу). Тому
   даємо запас падінгом, а щоб секція від цього не підросла — знімаємо його
   відʼємними маргінами. Знизу знімаємо не весь: трохи повітря під тінню
   лишаємо, інакше навігація лізе просто на неї. */
/* Подвійний клас .ptiers-swiper.swiper — НЕ косметика. Базове правило
   бібліотеки `.swiper{padding:0;margin-left:auto;margin-right:auto}` має ту
   саму специфічність (0,1,0), що й одинарний клас, тож перемагає той, хто
   нижчий у каскаді. Порядок ми вирівнюємо ще й пріоритетом enqueue, але
   покладатись лише на нього крихко: варто комусь підвантажити Swiper пізніше —
   і падінг під бейдж із тінню мовчки зникне, а навігація сховається за
   картками. Два класи знімають залежність від порядку зовсім. */
.ptiers-swiper.swiper {
  --ptiers-bleed-top: 34px;
  --ptiers-bleed-bottom: 96px;   /* тінь: зсув 32 + розмиття 68, мінус підйом 14 */
  /* Строго МЕНШЕ за проміжок між слайдами (16/18/22 по брейкпоінтах): інакше
     в запас зазирає край наступної картки, а видимих має бути рівно три.
     Тінь збоку сягає ~34px, тож її хвіст усе одно зріжеться — але вже там,
     де він майже прозорий. Ширший запас і «рівно три» несумісні: сусідня
     картка стоїть лише за gap, тобто ближче, ніж тягнеться тінь. */
  --ptiers-bleed-x: 14px;
  padding: var(--ptiers-bleed-top) var(--ptiers-bleed-x) var(--ptiers-bleed-bottom);
  margin-top: calc(clamp(28px, 4vw, 44px) - var(--ptiers-bleed-top));
  margin-bottom: calc(var(--ptiers-bleed-bottom) * -1 + 24px);
  /* Бічний запас віднімаємо маргіном, щоб картки лишились на своїх місцях:
     контейнер ширший за секцію, а падінг повертає вміст на початкову лінію.
     Виліт ховає overflow-x: clip на <main> — горизонтального скролу не буде. */
  margin-left: calc(var(--ptiers-bleed-x) * -1);
  margin-right: calc(var(--ptiers-bleed-x) * -1)
}

/* Картки однакової висоти: слайд тягнеться, картка займає його повністю. */
.ptiers-swiper .swiper-slide {
  height: auto
}

/* Доки Swiper не піднявся (і в редакторі) — звичайна сітка, щоб блок
   не виглядав як стовпчик карток на всю ширину. */
.ptiers-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px)
}

/* ---------- картка ---------- */

.ptiers-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r, 24px);
  background: var(--tone-bg, #F7F5FF);
  box-shadow: none;
  border: 1px solid var(--line, rgba(23, 18, 51, .12))
}

.ptiers-card--violet { --tone: var(--tone-violet); --tone-bg: var(--tone-violet-bg) }
.ptiers-card--bronze { --tone: var(--tone-bronze); --tone-bg: var(--tone-bronze-bg) }
.ptiers-card--silver { --tone: var(--tone-silver); --tone-bg: var(--tone-silver-bg) }
.ptiers-card--gold { --tone: var(--tone-gold); --tone-bg: var(--tone-gold-bg) }

/* Підпис-тон над назвою: той самий текст, що й назва, але дрібним капсом —
   так на макеті. aria-hidden не ставимо: дублювання тут доречне візуально,
   а скрінрідер прочитає назву один раз із <h3> (підпис прихований нижче). */
.ptiers-tone {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tone, #7C4DFF)
}

.ptiers-name {
  margin: 6px 0 0;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink, #171233)
}

.ptiers-desc {
  margin: 10px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted, #5B5677)
}

/* Кулька-декор у правому верхньому куті: тон + м'який ореол. */
.ptiers-orb {
  position: absolute;
  top: clamp(20px, 2vw, 28px);
  right: clamp(20px, 2vw, 28px);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--tone, #7C4DFF) 78%);
  opacity: .55;
  box-shadow: 0 8px 24px rgba(var(--ink-rgb, 23, 18, 51), .12)
}

/* ---------- показники ---------- */

/* margin-top:auto притискає блок показників до низу — тоді в картках з
   різною довжиною опису рядки лишаються на одній лінії. */
.ptiers-rows {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: clamp(20px, 2.4vw, 28px)
}

/* min-height розрахована на ДВА рядки підпису (13.5px × 1.35 × 2 + падінги).
   Це головний запобіжник вирівнювання: ширина значень у картках різна
   («€7–28» проти «безкоштовно»), тож підпису лишається різне місце і він
   переноситься то в одній картці, то в іншій. З фіксованою мінімальною
   висотою рядок однаковий незалежно від того, переносився він чи ні. */
.ptiers-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .62)
}

/* Переносити дозволено ЛИШЕ підпису. Підписи однакові в усіх картках, тож
   якщо десь стане два рядки — стане в усіх, і рядки лишаться на одній лінії.
   Якби переносилось значення (воно в картках різної довжини), висота блоків
   розʼїхалась би: виміряно 311px проти 338px. */
.ptiers-row dt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted, #5B5677)
}

.ptiers-row dd {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink, #171233);
  text-align: right
}

/* ---------- виділена картка ---------- */

/* Тінь була 0 32px 68px без spread — вона розходилась убік на ~34px, а
   слайдер може дати їй лише 14px запасу (далі вже сусідня картка), і збоку
   лишався видимий прямий зріз. Відʼємний spread прибирає саме БІЧНИЙ розліт
   (34 → 12px), а глибину під карткою тримає збільшений зсув. */
.ptiers-card.is-featured {
  background: var(--ink, #171233);
  transform: translateY(-14px);
  box-shadow: 0 38px 68px -22px rgba(var(--ink-rgb, 23, 18, 51), .34);
  border-color: transparent
}

.ptiers-card.is-featured .ptiers-name,
.ptiers-card.is-featured .ptiers-row dd {
  color: #fff
}

.ptiers-card.is-featured .ptiers-desc,
.ptiers-card.is-featured .ptiers-row dt {
  color: rgba(255, 255, 255, .72)
}

.ptiers-card.is-featured .ptiers-tone {
  color: rgba(255, 255, 255, .86)
}

.ptiers-card.is-featured .ptiers-row {
  background: rgba(255, 255, 255, .08)
}

.ptiers-card.is-featured .ptiers-orb {
  opacity: .9
}

/* Бейдж сидить на верхньому краї картки, наполовину виступаючи назовні. */
.ptiers-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--ptiers-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase
}

/* ---------- примітка ---------- */


/* ---------- responsive ---------- */

/* Поріг 1300, а не 1100: у чотири колонки картка стає вужчою за ~300px,
   підписи починають переноситись по-різному в кожній картці — і рядки
   перестають бути на одній лінії (виміряно на 1264px). */
/* ---------- навігація слайдера ---------- */

/* Структура й вигляд — 1:1 як у reviews, щоб на сторінці був один тип
   керування слайдером. Класи власні: у reviews вони прибиті до тієї секції. */
/* z-index вище за слайдер: Swiper ставить transform на .swiper-wrapper, тож
   слайди малюються в шарі позиціонованих і перекривають статичних сусідів.
   Сам .swiper має z-index:1 — беремо 2. Без цього навігація йде під картки. */
.ptiers-ctrl {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(22px, 3vw, 32px)
}

/* Щит від Neve. Батьківська тема фарбує ВСІ <button> своїм акцентом:
   `button{background:var(--primarybtnbg);padding:13px 15px;…}` — і на
   внутрішніх сторінках вона жива (dequeue neve-style є лише для головної
   та 404). Тому переоголошуємо не тільки колір, а й padding/типографіку,
   які Neve теж нав'язує кнопкам. */
.ptiers-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 8px 22px rgba(var(--ink-rgb), .12);
  transition: transform .2s ease, background .2s ease
}

/* Стани мусять повторити фон і колір явно: у Neve є `button:hover` (0,1,1),
   і без цього правила саме воно фарбувало кнопку синім при наведенні.
   `.ptiers-nav:hover` — (0,2,0), тож виграє незалежно від порядку. */
.ptiers-nav:hover,
.ptiers-nav:focus,
.ptiers-nav:active {
  background: #fff;
  color: var(--ink);
  border-color: var(--line)
}

.ptiers-nav:hover {
  transform: scale(1.08)
}

.ptiers-nav:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px
}

/* Крайні стрілки не ховаємо — лише притлумлюємо, щоб ряд не стрибав. */
.ptiers-nav.swiper-button-disabled {
  opacity: .35;
  cursor: default;
  box-shadow: none
}

/* width:auto !important — Swiper робить пагінацію на всю ширину; стискаємо її
   до вмісту, щоб стрілки стояли впритул до крапок, а не розліталися по краях. */
.ptiers-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: auto !important
}

.ptiers-dots .ptiers-dot {
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
  display: inline-block
}

.ptiers-dots .ptiers-dot.on {
  width: 26px;
  border-radius: 99px;
  background: var(--lime)
}

/* Слайдер помістив усі картки — керування зайве (клас вішає watchOverflow). */
.ptiers-swiper.swiper-lock + .ptiers-ctrl {
  display: none
}

@media (max-width: 1000px) {
  .ptiers-swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width: 620px) {
  .ptiers-swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: minmax(0, 1fr)
  }

  .ptiers-nav {
    width: 42px;
    height: 42px;
    font-size: 22px
  }

  .ptiers-orb {
    width: 44px;
    height: 44px
  }
}