/* Блок packages — додаткові пакети повідомлень.
   Стилістика карток — та сама, що в блоці «Тарифи» (blocks/pricing): центрований
   вміст, рамка + radius --r, темна «виділена» картка з лавандовим сяйвом і
   масштабом 1.045, лаймовий бейдж по центру над карткою, підйом на ховері.
   Значення взяті з pricing/style.css (.p-card, .p-hot, .ptag, .pname, .pv).
   Класи власні (pkg-), а не перевикористані p-*: стилі pricing вантажаться лише
   там, де стоїть pricing, а цей блок має працювати на будь-якій сторінці.
   Глобальні токени (--ink, --ink-rgb, --card, --line, --muted, --lime,
   --lime-rgb, --r, --section-gap, --ease) — з assets/css/style.css. */

.pkg {
   padding-top: var(--section-gap);

   /* локальні токени блоку */
   --pkg-div: 1px solid rgba(var(--ink-rgb), .07);       /* розділювач — як --p-div у pricing */
   --pkg-div-hot: 1px solid rgba(255, 255, 255, .1);     /* те саме на темній картці */
   --pkg-ok: #16A34A;                                    /* текст «вигода N%» на світлій картці */
   --pkg-ok-bg: rgba(34, 197, 94, .1);                   /* капсула вигоди на світлій картці */
   --pkg-ok-solid: #22C55E                               /* капсула вигоди на темній картці */
}

/* ---------- шапка секції ----------
   Як у решти секцій сайту (патерн blocks/pricing): надзаголовок → .h2 → .h3,
   усе по центру. */
.pkg > .h2,
.pkg > .h3 {
   text-align: center
}

/* .tagline — flex, тож text-align на нього не діє */
.pkg .tagline {
   justify-content: center
}

.pkg > .h3 {
   max-width: 52ch;
   margin-left: auto;
   margin-right: auto
}

/* Розмір .h2 закріплено явно, як у pricing (.price.wrap>.h2): у редакторі
   адмінське правило .wrap h2:first-child{font-size:23px} (0-2-1) інакше
   зменшує заголовок — у секції той самий клас .wrap. Тут 0-3-0. */
.pkg.wrap > .h2 {
   font-size: clamp(30px, 3.8vw, 52px);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -.02em
}

/* ---------- сітка карток ----------
   padding-top/bottom — місце під масштабовану темну картку (+4.5% з кожного
   боку), бейдж над нею (-13px) і тінь. Як .p-cards у pricing на ≥1024px. */
.pkg-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 18px;
   margin-top: clamp(24px, 3.4vw, 38px);
   padding: 40px 0 26px;
   align-items: stretch
}

/* Менше чотирьох пакетів — не розтягуємо на всю ширину */
.pkg-grid-1 { grid-template-columns: minmax(0, 300px); justify-content: center }
.pkg-grid-2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center }
.pkg-grid-3 { grid-template-columns: repeat(3, 1fr) }

/* ---------- картка (стилістика .p-card) ---------- */
.pkg-card {
   --pkg-scale: scale(1);
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: var(--r);
   padding: 30px 24px 26px;
   /* без тіні у спокої — картку тримає рамка; тінь лише в темної і на ховері */
   box-shadow: none;
   transform: var(--pkg-scale);
   transform-origin: center;
   transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease
}

/* Вміст над сяйвом темної картки. Явно перелічені діти, а не .pkg-card>* —
   інакше position:relative перебив би position:absolute у бейджа. */
.pkg-card > .pkg-body,
.pkg-card > .pkg-total {
   position: relative;
   z-index: 1
}

/* ---------- виділена картка — темна (стилістика .p-hot) ---------- */
.pkg-card.is-hot {
   --pkg-scale: scale(1.045);
   background: var(--ink);
   color: #fff;
   border-color: var(--ink);
   box-shadow: 0 32px 68px rgba(var(--ink-rgb), .28);
   z-index: 1
}

/* Лавандове сяйво згори. Зміщення в px, а не у % — як у pricing: картка
   висока, і відсоток відкинув би центр градієнта надто високо. */
.pkg-card.is-hot::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: var(--r);
   background: radial-gradient(440px 240px at 50% -60px, rgba(var(--lime-rgb), .42), transparent 62%);
   pointer-events: none
}

/* ---------- ховер — лише на десктопі з мишею, як у pricing ----------
   ≥1101px — саме там блок є сіткою; у горизонтальній доріжці (≤1100px)
   підйом і тінь зрізав би overflow-y:hidden. */
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
   .pkg-card:hover {
      transform: var(--pkg-scale) translateY(-6px);
      border-color: rgba(var(--lime-rgb), .55);
      box-shadow: 0 26px 54px rgba(var(--ink-rgb), .15)
   }

   .pkg-card.is-hot:hover {
      border-color: var(--ink);
      box-shadow: 0 36px 74px rgba(var(--ink-rgb), .32)
   }
}

@media (prefers-reduced-motion: reduce) {
   .pkg-card {
      transition: none
   }
}

/* ---------- бейдж — стилістика .ptag ---------- */
.pkg-tag {
   position: absolute;
   top: -13px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--lime);
   color: var(--ink);
   font-size: 11.5px;
   font-weight: 800;
   letter-spacing: .06em;
   line-height: 1.3;
   text-transform: uppercase;
   border-radius: 999px;
   padding: 6px 14px;
   white-space: nowrap;
   box-shadow: 0 8px 20px rgba(var(--lime-rgb), .55);
   z-index: 3
}

/* ---------- тіло картки ----------
   Розтягується (flex:1) — тож лінія «Разом» стоїть на одній висоті в усіх
   картках ряду, а padding-bottom гарантує зазор над нею навіть у найвищій.
   align-self:stretch — бо картка центрує дітей і інакше стиснула б тіло
   до ширини тексту. */
.pkg-body {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1 0 auto;
   padding-bottom: 22px
}

/* ---------- кількість — як ціна .pv ---------- */
.pkg-count {
   margin: 0;
   font-size: clamp(36px, 3.2vw, 44px);
   font-weight: 800;
   line-height: 1;
   letter-spacing: -.03em;
   font-variant-numeric: tabular-nums;
   white-space: nowrap   /* «10 000» не має переламуватись на пробілі */
}

/* «повідомлень» — дрібний капс, як назва тарифу .pname */
.pkg-unit {
   margin: 10px 0 0;
   font-size: 13px;
   font-weight: 800;
   line-height: 1.3;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--muted)
}

.pkg-card.is-hot .pkg-unit {
   color: var(--lime)
}

/* ---------- ціна за одиницю ----------
   Відділена від «шапки» картки тонкою лінією — як фічі в pricing. */
.pkg-rate {
   align-self: stretch;
   margin: 20px 0 0;
   padding-top: 18px;
   border-top: var(--pkg-div);
   font-size: 21px;
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -.01em;
   font-variant-numeric: tabular-nums;
   white-space: nowrap
}

.pkg-card.is-hot .pkg-rate {
   border-top: var(--pkg-div-hot)
}

/* підпис ціни — як опис тарифу .pd */
.pkg-rate-note {
   margin: 5px 0 0;
   font-size: 13.5px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--muted)
}

.pkg-card.is-hot .pkg-rate-note {
   color: rgba(255, 255, 255, .68)
}

/* ---------- вигода — капсула ----------
   Без min-height: порожній слот лишав би в картці без вигоди діру, а
   вирівнювання лінії «Разом» і так тримає .pkg-body. */
.pkg-benefit {
   margin: 14px 0 0;
   padding: 6px 12px;
   border-radius: 999px;
   background: var(--pkg-ok-bg);
   color: var(--pkg-ok);
   font-size: 12.5px;
   font-weight: 800;
   line-height: 1.2
}

/* «базова ціна» — не вигода: нейтральна сіра капсула без акценту */
.pkg-benefit.is-base {
   background: rgba(var(--ink-rgb), .05);
   color: var(--muted);
   font-weight: 700
}

/* На темній картці — суцільна зелена капсула з ТЕМНИМ текстом:
   білий на #22C55E має контраст лише ~2.3:1, а --ink — ~8:1. */
.pkg-card.is-hot .pkg-benefit {
   background: var(--pkg-ok-solid);
   color: var(--ink)
}

.pkg-card.is-hot .pkg-benefit.is-base {
   background: rgba(255, 255, 255, .14);
   color: rgba(255, 255, 255, .85)
}

/* ---------- підсумок ----------
   На всю ширину картки (align-self:stretch), лейбл ліворуч, сума праворуч —
   як рядки фіч у pricing, що теж вирівняні по ширині всередині центрованої картки. */
.pkg-total {
   align-self: stretch;
   padding-top: 18px;
   border-top: var(--pkg-div);
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 10px;
   text-align: left
}

.pkg-card.is-hot .pkg-total {
   border-top: var(--pkg-div-hot)
}

.pkg-total-lbl {
   font-size: 13.5px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--muted)
}

.pkg-card.is-hot .pkg-total-lbl {
   color: rgba(255, 255, 255, .68)
}

.pkg-total-sum {
   font-size: clamp(26px, 2.4vw, 32px);
   font-weight: 800;
   letter-spacing: -.02em;
   line-height: 1;
   font-variant-numeric: tabular-nums;
   white-space: nowrap
}

/* ---------- переваги під картками ---------- */
.pkg-feats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px 32px;
   margin-top: clamp(28px, 3vw, 40px)
}

/* font-family:inherit — страховка: якщо блок опиниться на сторінці з
   батьківським Neve CSS, той перебив би шрифт заголовків. */
.pkg-feat h3 {
   margin: 0 0 6px;
   font-family: inherit;
   font-size: 17.5px;
   font-weight: 700;
   line-height: 1.3;
   color: var(--ink)
}

.pkg-feat p {
   margin: 0;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.5;
   color: var(--muted)
}

/* ---------- адаптив ----------
   ≤1100px (планшет і менше) — горизонтальна доріжка зі snap. Той самий
   патерн, що в blocks/pricing (.p-cards на ≤768px).
   Сітки у два стовпці свідомо НЕМАЄ: бейдж виступає за верх картки і в
   другому ряду наїжджав би на картку згори.
   Сітку перемикаємо на flex — grid-колонки для горизонтального треку
   не годяться. */
@media (max-width: 1100px) {
   .pkg-grid,
   .pkg-grid-1,
   .pkg-grid-2,
   .pkg-grid-3,
   .pkg-grid-4 {
      display: flex;
      grid-template-columns: none;
      justify-content: flex-start;
      gap: 14px;
      margin-top: clamp(22px, 3vw, 30px);

      /* доріжка на всю ширину екрана, поза padding-ами .wrap */
      width: 100vw;
      margin-left: calc(50% - 50vw);

      /* padding-top — під бейдж (виступ -13px): overflow-y:hidden інакше
         його зріже */
      padding: 24px clamp(18px, 4vw, 44px) 14px;

      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: clamp(18px, 4vw, 44px);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;

      /* Краї згасають, щоб обрізана сусідня картка не виглядала «відрізаною»
         рамкою екрана. Маска, а не псевдоелемент: доріжка розтягнута на 100vw,
         і накладка мусила б повторювати той самий трюк. */
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%)
   }

   .pkg-grid::-webkit-scrollbar {
      display: none
   }

   /* На планшеті видно ~2.5 картки — достатньо, щоб було ясно, що доріжка
      гортається, і картка не роздувалась на пів екрана. */
   .pkg-grid .pkg-card {
      flex: 0 0 38%;
      min-width: 240px;
      max-width: 300px;
      scroll-snap-align: center;
      padding: 28px 20px 24px
   }

   /* Як у pricing на планшеті: масштаб і тінь темної картки геть —
      у доріжці вона лізла б на сусідню, а тінь зрізав би overflow. */
   .pkg-grid .pkg-card.is-hot {
      --pkg-scale: scale(1);
      box-shadow: none
   }

   /* Три колонки й на планшеті — тексти короткі, у дві вони розпадались
      на нерівні ряди (2 + 1). Трохи тісніший зазор. */
   .pkg-feats {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px 24px
   }
}

/* ---------- мобільний ≤680px ---------- */
@media (max-width: 680px) {
   /* Одна картка на екран із натяком на наступну */
   .pkg-grid .pkg-card {
      flex: 0 0 55%;
      min-width: 0;
      max-width: 340px
   }

   .pkg-feats {
      grid-template-columns: 1fr;
      gap: 20px
   }
}

/* ---------- мобільна coverflow-карусель (≤680px) ----------
   Вмикає view.js: вішає на .pkg-carousel / .pkg-grid / .pkg-card класи Swiper
   і клас .is-swiper на секцію. Без JS або без Swiper (інша сторінка) нічого з
   цього не діє — лишається CSS-доріжка вище.
   Специфічність .pkg.is-swiper … (0,2,0+) навмисно вища за правила доріжки
   (.pkg-grid-4 тощо, 0,1,0), які тут треба повністю скасувати. */

/* Навігація прихована, доки карусель не увімкнулась: без JS стрілки були б
   кнопками, що нічого не роблять. */
.pkg-nav {
   display: none
}

@media (max-width: 680px) {
   /* Контейнер — на всю ширину екрана: бічні картки обрізаються краєм екрана,
      як на макеті. padding — під бейдж (-13px) і тінь активної картки, бо
      .swiper{overflow:hidden} інакше їх зріже. */
   .pkg.is-swiper .pkg-carousel {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: clamp(22px, 3vw, 30px);
      padding: 24px 0 26px
   }

   /* Скасовуємо CSS-доріжку: Swiper сам рухає обгортку трансформом */
   .pkg.is-swiper .pkg-grid {
      display: flex;
      align-items: stretch;
      width: 100%;
      margin: 0;
      padding: 0;
      gap: 0;
      overflow: visible;
      scroll-snap-type: none;
      -webkit-mask-image: none;
      mask-image: none
   }

   /* Ширину слайда задає Swiper інлайном (slidesPerView), тож flex-basis і
      max-width з доріжки мусять піти — інакше перебили б її.
      height:auto + stretch на обгортці — картки однакової висоти. */
   .pkg.is-swiper .pkg-grid .pkg-card {
      flex: 0 0 auto;
      max-width: none;
      min-width: 0;
      height: auto;
      scroll-snap-align: none;
      opacity: .55;
      transition-property: transform, opacity, box-shadow
   }

   /* Активна картка — повна непрозорість і тінь, як на макеті */
   .pkg.is-swiper .pkg-grid .pkg-card.swiper-slide-active {
      opacity: 1;
      box-shadow: 0 8px 22px rgba(var(--ink-rgb), .08)
   }

   /* ---------- стрілки + крапки ----------
      Стилістика контролів продуктового слайдера (blocks/showcase:
      .slider-nav / .sdot), але власні класи — стилі showcase вантажаться
      лише там, де стоїть showcase. */
   .pkg.is-swiper .pkg-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px
   }

   .pkg-nav-btn {
      flex: none;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .92);
      color: var(--ink);
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(var(--ink-rgb), .1);
      transition: transform .2s ease, background .2s ease, opacity .2s ease
   }

   /* Щит від Neve: на внутрішніх сторінках батьківський CSS фарбує будь-який
      <button> на :hover/:focus правилом 0-1-1. Тримаємо вигляд на 0-2-0. */
   .pkg-nav-btn:hover,
   .pkg-nav-btn:focus,
   .pkg-nav-btn:active {
      background: #fff;
      color: var(--ink);
      border-color: var(--line)
   }

   .pkg-nav-btn:active {
      transform: scale(.94)
   }

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

   .pkg-nav-btn svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round
   }

   /* Без loop (менше 4 пакетів) Swiper вимикає крайню стрілку */
   .pkg-nav-btn.swiper-button-disabled {
      opacity: .4;
      cursor: default
   }

   /* Контейнер крапок. Swiper вішає на нього .swiper-pagination-horizontal,
      а його CSS дає таким елементам width:100% — у ряду з кнопками це
      розштовхало б стрілки по краях. Тому ширину й позицію задаємо явно. */
   .pkg .pkg-dots {
      position: static;
      width: auto;
      display: flex;
      align-items: center;
      gap: 8px
   }

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

   /* Активна — лавандова «таблетка», як .sdot.on у продуктовому слайдері */
   .pkg-dot.is-on {
      width: 26px;
      border-radius: 99px;
      background: var(--lime)
   }

   .pkg-dot:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px
   }

   /* Переваги — відступ від навігації, а не від доріжки */
   .pkg.is-swiper .pkg-feats {
      margin-top: 28px
   }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
   .pkg-nav-btn,
   .pkg-dot {
      transition: none
   }
}