/* ============================================================
   Розділ «Презентації» — /prezentatsii/ і /prezentatsii/<id>/.

   Власність розділу презентацій. Інші файли css не чіпає: за
   розводкою з base.njk кожен розділ пише у свій файл.
   ============================================================ */

/* ------------------------------------------------------------
   Картки розділу
   ------------------------------------------------------------ */

/* Дві колонки, а не три як у .entries: картка презентації несе
   обкладинку 4:3 і ряд цифр, у третині ширини вони стають нечитабельні. */
.deck-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .deck-list { grid-template-columns: 1fr; }
}

.deck-list-card {
  padding: 0;
  overflow: hidden;
  gap: 0;
  min-height: 0;
}
.deck-list-card:hover { transform: translateY(-3px); }

.deck-list-card__shot {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--deck-surface-2);
  border-bottom: 1px solid var(--deck-line);
  overflow: hidden;
}
.deck-list-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.deck-list-card:hover .deck-list-card__shot img { transform: scale(1.03); }

.deck-list-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--deck-s-3);
  padding: var(--deck-s-5);
}
.deck-list-card__body h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.deck-list-card__body p { color: var(--deck-text-2); font-size: 15px; margin: 0; }

/* Ключові цифри картки. Значення — моно, підпис — дрібний прозорий:
   той самий контраст, що в .obj-figures каталогу. */
.deck-list-card__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-2) var(--deck-s-5);
  padding-top: var(--deck-s-1);
}
.deck-list-card__figures span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--deck-text-3);
}
.deck-list-card__figures b {
  font-family: var(--deck-font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--deck-text);
}

.deck-list-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--deck-s-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--deck-s-2);
}
.deck-list-card__meta {
  font-family: var(--deck-font-mono);
  font-size: 12px;
  color: var(--deck-text-3);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Сторінка презентації — герой
   ------------------------------------------------------------ */
.deck-hero {
  padding: var(--deck-s-7) 0 var(--deck-s-5);
}
.deck-hero__crumbs {
  font-family: var(--deck-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.deck-hero__crumbs a { color: var(--deck-amber); text-decoration: none; }
.deck-hero__crumbs a:hover { text-decoration: underline; }

.deck-hero h1 {
  font-family: var(--deck-font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--deck-s-3) 0 var(--deck-s-3);
}
.deck-hero__lead {
  color: var(--deck-text-2);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 780px;
}

.deck-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-3) var(--deck-s-7);
  margin-top: var(--deck-s-5);
}
.deck-figures div { display: flex; flex-direction: column; gap: 4px; }
.deck-figures dt {
  font-family: var(--deck-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deck-text-3);
}
.deck-figures dd {
  font-family: var(--deck-font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--deck-text);
  margin: 0;
}

/* ------------------------------------------------------------
   Рамка з деком

   Дек усередині — власний документ зі своєю тёмною канвою. Рамці
   потрібна лише підкладка на час завантаження iframe, тому колір
   береться з токена поверхні, а не хардкодиться під канву деку.
   ------------------------------------------------------------ */
.deck-stage { padding-bottom: var(--deck-s-7); }

.deck-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--deck-r-lg);
  border: 1px solid var(--deck-line-strong);
  background: var(--deck-surface-2);
  /* Запасна висота до того, як відпрацює deck-embed.js: сторінка не
     стрибає, а без JS рамка лишається робочою коробкою 16:9. */
  aspect-ratio: 16 / 9;
}
.deck-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Після масштабування скрипт сам проставляє висоту рамки — фіксоване
   співвідношення більше не потрібне і заважало б. */
.deck-frame[style*="height"] { aspect-ratio: auto; }

.deck-actions {
  display: flex;
  align-items: center;
  gap: var(--deck-s-3);
  flex-wrap: wrap;
  margin-top: var(--deck-s-4);
}
.deck-actions__meta {
  font-family: var(--deck-font-mono);
  font-size: 12.5px;
  color: var(--deck-text-3);
  margin-left: auto;
}
@media (max-width: 680px) {
  .deck-actions__meta { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------
   Блок під деком
   ------------------------------------------------------------ */
.deck-after {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--deck-s-7);
}
@media (max-width: 860px) {
  .deck-after { grid-template-columns: 1fr; gap: var(--deck-s-6); }
}
.deck-after__col { display: flex; flex-direction: column; gap: var(--deck-s-4); }
.deck-after__col h2 {
  font-family: var(--deck-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.deck-after__col h2 + * { margin-top: calc(var(--deck-s-4) * -1 + var(--deck-s-1)); }
.deck-after__note { color: var(--deck-text-2); font-size: 15.5px; line-height: 1.6; }
.deck-after .deck-btn { align-self: flex-start; }

.deck-contents { list-style: none; margin: 0; padding: 0; }
.deck-contents li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--deck-s-3);
  color: var(--deck-text-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.deck-contents li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--deck-amber);
}

.deck-object-card { min-height: 0; }