/* ===================================================================
   Секція «Вебінари Liga360» — за макетом Figma (node 3793:154008
   + адаптивні кадри 4349:150997 / 4349:151223 / 4349:151449).

   Композиція фіксована (без каруселі): ряд карток, перші з них накриті
   промо-панеллю з матовим склом — вони лише фон для блюру. Скільки
   привидів під склом — стільки колонок накриває панель, тож видимими
   завжди лишаються ПЕРШІ вебінари:
     ≥1024    → 2 привиди → видно 3 вебінари
     601…1023 → 3 привиди → видно 2 вебінари
     ≤600     → 1 привид, вертикальний стек → видно 1 вебінар

   Усі класи в неймспейсі .vb-* — щоб не перетинатися з іншими стилями.
   Токени (кольори/типографіка/відступи) — з Figma variable defs.
   =================================================================== */

.vb {
  /* --- Colors (Figma tokens) --- */
  --vb-text-default: #25252a;
  --vb-text-subtle: #4b4b55;
  --vb-text-subtlest: #9898a3;
  --vb-text-alt: #ffffff;
  --vb-divider: #e5e2ff;
  --vb-border: #e5e2ff;
  --vb-bg: #ffffff;
  --vb-bg-hover: #f3f2ff;
  --vb-icon-active: #7267e6;
  --vb-btn-bg: #151517;

  /* --- Spacing (Figma tokens) --- */
  --vb-sp-050: 4px;
  --vb-sp-100: 8px;
  --vb-sp-150: 12px;
  --vb-sp-200: 16px;
  --vb-sp-250: 20px;
  --vb-sp-300: 24px;

  --vb-corner: 16px;
  --vb-pill: 10000px;
  --vb-gap: 20px;

  position: relative;
  background: var(--vb-bg);
  border-radius: var(--vb-corner);
  padding: var(--vb-sp-200) 0;
  overflow: hidden;
  font-family: var(--liga-font-family);
  color: var(--vb-text-default);
}

.vb *, .vb *::before, .vb *::after { box-sizing: border-box; }

/* --- Ряд карток: 5 рівних колонок, БЕЗ скролу.
       Промо-панель — теж елемент цієї сітки, тому накриває рівно
       потрібну кількість перших колонок на будь-якій ширині. --- */
.vb__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--vb-gap);
  padding: 0 var(--vb-sp-250);
  align-items: start;
}

/* ============================ Картка ============================ */
.vb-card {
  grid-row: 1;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--vb-sp-150);
  min-width: 0;
}

/* Привиди — лише фон для скла: не клікабельні. */
.vb-card--ghost { pointer-events: none; }

/* Розкладка за ролями (не :nth-child — на різних брейкпоінтах
   ховаються різні картки, і nth-child «поїхав би»).
   ≥1024: привиди g1 g2 | вебінари w1 w2 w3 → видно 3 */
.vb-card--g1 { grid-column: 1; }
.vb-card--g2 { grid-column: 2; }
.vb-card--g3 { display: none; }        /* третій привид потрібен лише на 601…1023 */
.vb-card--w1 { grid-column: 3; }
.vb-card--w2 { grid-column: 4; }
.vb-card--w3 { grid-column: 5; }

.vb-card__cover {
  width: 100%;
  aspect-ratio: 341.6 / 192.15;        /* точні пропорції з Figma */
  border-radius: var(--vb-corner);
  overflow: hidden;
  background: linear-gradient(135deg, #7b6cf0, #a99bf5);
  flex: none;
}
.vb-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.vb-card:not(.vb-card--ghost):hover .vb-card__cover img { transform: scale(1.03); }

.vb-card__body { padding: 0 var(--vb-sp-050); }   /* Figma: текст x=4 у картці */

.vb-card__title {
  margin: 0;
  font-size: 16px;                     /* H400/Bold */
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.13px;
  color: var(--vb-text-default);
  /* Figma: висота 40px = рівно 2 рядки з обрізанням */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.vb-card:not(.vb-card--ghost):hover .vb-card__title { color: var(--vb-icon-active); }

/* --- Мета-рядок: дата │ спікер --- */
.vb-card__meta {
  margin-top: var(--vb-sp-100);
  display: flex;
  align-items: center;
  gap: var(--vb-sp-100);
  min-height: 16px;
  flex-wrap: wrap;
  font-size: 14px;                     /* H300/Regular */
  line-height: 16px;
  letter-spacing: 0.29px;
  color: var(--vb-text-subtlest);
}
.vb-card__sep {
  width: 1px; height: 16px;
  background: var(--vb-divider);
  flex: none;
}

/* ======================== Промо-панель (glass) ======================== */
.vb__promo {
  grid-column: 1 / 3;                  /* ≥1024: накриває два перші привиди */
  grid-row: 1;
  z-index: 2;
  align-self: stretch;
  /* відʼємні маржі — дотягнутися до країв секції (у Figma панель на x=0) */
  margin: calc(-1 * var(--vb-sp-200)) calc(-1 * var(--vb-gap) / 2)
          calc(-1 * var(--vb-sp-200)) calc(-1 * var(--vb-sp-250));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vb-sp-200);
  padding: var(--vb-sp-300) 40px;
  text-align: center;

  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  /* Згасання лише в останніх ~4% — рівно в проміжку між останньою накритою
     карткою та першою видимою. Ширший градієнт «здирає» скло з картки під
     ним, і крізь панель проступає різкий текст. */
  -webkit-mask-image: linear-gradient(to right, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, #000 96%, transparent 100%);
}

.vb__lock {
  width: 56px; height: 56px;
  border-radius: var(--vb-corner);
  background: var(--vb-bg-hover);
  border: 1px solid var(--vb-border);
  display: grid;
  place-items: center;
  color: var(--vb-icon-active);
  flex: none;
}
.vb__lock svg { width: 24px; height: 24px; display: block; }

.vb__title {
  margin: 0;
  font-size: 18px;                     /* H450/Bold */
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--vb-text-default);
}

.vb__lead {
  margin: 0;
  max-width: 620px;
  font-size: 16px;                     /* H400/Regular (Paragraph) */
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0.33px;
  color: var(--vb-text-subtle);
}

.vb__cta {
  margin-top: var(--vb-sp-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--vb-sp-300);
  border: 0;
  border-radius: var(--vb-pill);
  background: var(--vb-btn-bg);
  color: var(--vb-text-alt);
  font-family: inherit;
  font-size: 14px;                     /* H300/CTA */
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.38px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.vb__cta:hover { opacity: .9; color: var(--vb-text-alt); }
.vb__cta:active { transform: translateY(1px); }
.vb__cta:focus-visible { outline: 2px solid var(--vb-icon-active); outline-offset: 3px; }

/* ========================= Адаптив ========================= */

/* Заголовки обрізаємо у 2 рядки лише на десктопі (так у кадрі 1828). */
@media (max-width: 1279px) {
  .vb-card__title { -webkit-line-clamp: unset; display: block; }
}

/* ---- 601…1023 [макет 768]: третій привид зʼявляється, панель накриває
        3 колонки, праворуч лишаються ПЕРШІ ДВА вебінари. ---- */
@media (max-width: 1023px) {
  .vb-card--g3 { display: flex; grid-column: 3; }
  .vb-card--w1 { grid-column: 4; }
  .vb-card--w2 { grid-column: 5; }
  .vb-card--w3 { display: none; }

  .vb__promo { grid-column: 1 / 4; padding: var(--vb-sp-300) var(--vb-sp-250); }
  .vb__lead { font-size: 15px; line-height: 22px; }
}

/* ---- ≤600 [макет 375]: вертикальний стек — панель над єдиним привидом,
        під нею рівно ОДИН вебінар. Нижче 600 горизонтальна композиція
        стиснула б картки до нечитаемих (~90px на 601). ---- */
@media (max-width: 600px) {
  .vb__track { grid-template-columns: 1fr; padding: 0 var(--vb-sp-250); }

  /* Явні ряди: інакше авто-розміщення обійде комірку під панеллю. */
  .vb-card--g1 { grid-column: 1; grid-row: 1; }
  .vb-card--g2, .vb-card--g3 { display: none; }
  .vb-card--w1 { grid-column: 1; grid-row: 2; }
  .vb-card--w2, .vb-card--w3 { display: none; }

  .vb__promo {
    grid-column: 1;
    grid-row: 1;
    margin: calc(-1 * var(--vb-sp-200)) calc(-1 * var(--vb-sp-250)) 0;
    padding: var(--vb-sp-250) var(--vb-sp-200);
    gap: var(--vb-sp-150);
    -webkit-mask-image: none;
            mask-image: none;
  }

  .vb__lock { width: 48px; height: 48px; }
  .vb__title { font-size: 17px; line-height: 21px; }
  .vb__lead { font-size: 14px; line-height: 20px; }
  .vb__cta { width: 100%; height: 44px; }
  .vb-card__title { font-size: 15px; line-height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .vb * { transition: none !important; }
}