/*
 * Сторінки подій ("Як пройшла зустріч"), картки подій і повноекранний
 * перегляд фото. Підключається на сторінці події, на сторінці "Усі наші
 * події", на головній (там картки) і в редакторі - щоб прев'ю блоків
 * виглядало так само, як готова сторінка.
 *
 * Картки .event-card / .event-photo / .event-tag / .event-title описані в
 * style.css (вони вже були на головній) - тут лише те, чого там бракувало:
 * клікабельність картки, посилання "Як пройшла зустріч", галерея і лайтбокс.
 */

/* ---------- сітка карток (сторінка "Усі наші події") ----------
   .event-card у style.css має фіксовану ширину 300px - вона розрахована на
   горизонтальну стрічку на головній; у сітці ширину задає сама сітка. */
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.events-grid .event-card { min-width: 0; max-width: none; }

/* ---------- картка події ---------- */
a.event-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
a.event-card:hover .event-title { color: var(--pink); }
.event-more { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--teal); }
a.event-card:hover .event-more { color: var(--violet); }

/* ---------- картка зустрічі на головній ----------
   Уся картка - посилання (раніше клікалась лише кнопка "Записатися",
   тому сама кнопка тепер <span> усередині цього посилання). */
a.lecture-card { text-decoration: none; color: inherit; display: block; }
a.lecture-card .btn { pointer-events: none; }

/* ---------- сторінка події ----------
   Розкладка й типографіка беруться з .spec-hero / .spec-passport / .spec-block
   у style.css (ті самі, що на сторінці фахівця) - тут лише те, чого там немає. */
/* Світла шапка, як в еталоні: у style.css останнім іде темний варіант
   .page-hero (навий градієнт) - він перебиває світлий, тож повертаємо
   потрібний вигляд точковим правилом саме для сторінки події. */
.page-hero.event-page-hero {
  background: radial-gradient(ellipse 80% 60% at 15% 0%, var(--pink-tint), transparent 60%),
              radial-gradient(ellipse 70% 60% at 90% 10%, var(--teal-tint), transparent 55%),
              var(--cream);
  color: var(--ink);
  padding: 120px 0 20px;
}
.page-hero.event-page-hero .breadcrumb { color: var(--ink-soft); }
.page-hero.event-page-hero .breadcrumb a { color: var(--teal); font-weight: 600; }
.event-hero { padding-bottom: 80px; }
.spec-passport .spec-block p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 12px; }
.spec-passport .spec-block p:last-child { margin-bottom: 0; }
.spec-passport .spec-block h3 { font-size: 18px; margin-bottom: 8px; }
.spec-passport .spec-block ul { margin: 0; }
.spec-passport .spec-block li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 8px; padding-left: 18px; position: relative; }
.spec-passport .spec-block li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.event-highlight { background: var(--teal-tint); border-radius: 16px; padding: 22px 26px; }
.event-highlight h3 { margin-bottom: 8px; }
.event-gallery-caption { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; text-align: center; }
.event-gallery-empty { font-size: 13px; color: var(--ink-soft); }
.event-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- повноекранний перегляд ---------- */
.event-lightbox {
  position: fixed; inset: 0; z-index: 400; display: none;
  align-items: center; justify-content: center; gap: 10px;
  background: rgba(32, 26, 43, .92); padding: 24px;
}
.event-lightbox.show { display: flex; }
.event-lightbox-stage { margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.event-lightbox-stage img { max-width: 100%; max-height: 82vh; border-radius: 14px; display: block; object-fit: contain; }
.event-lightbox-count { color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 700; }
.event-lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .15); color: #fff; font-size: 16px; cursor: pointer;
}
.event-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.event-lightbox-nav {
  width: 46px; height: 46px; border-radius: 50%; border: none; flex-shrink: 0;
  background: rgba(255, 255, 255, .15); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.event-lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.event-lightbox-nav svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .event-lightbox { padding: 12px; gap: 4px; }
  .event-lightbox-nav { width: 38px; height: 38px; }
}

/* ---------- керування галереєю в редакторі ---------- */
.yamama-gallery-placeholder {
  border: 1px dashed #c3c4c7; border-radius: 10px; padding: 20px; text-align: center; background: #fff;
}
.yamama-gallery-placeholder p { color: #666; font-size: 13px; margin: 0 0 12px; }
.yamama-gallery-editbar { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #c3c4c7; }
.yamama-gallery-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.yamama-gallery-item { position: relative; width: 84px; }
.yamama-gallery-item img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }
.yamama-gallery-item-actions { display: flex; gap: 2px; margin-top: 4px; }
.yamama-gallery-item-actions .components-button { min-width: 24px; padding: 0 4px; height: 24px; }