/* BIZ-25 – страницата /demo (public/demo.php): картите на изгледите, рамката на телефон/лаптоп и QR кода.
   Върху основата на лендинга (lx.css, lx-landing.css) и токените му (--ink, --gold, --line, --cream, …). Без inline
   стилове (CSP): мащабът на рамката се задава от assets/demo-page.js през CSSOM. */

.dm-header .site-header__in {
  gap: 16px;
}
.dm-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink-muted);
  font: 500 14px/1.2 var(--font-body);
  text-decoration: none;
}
.dm-home:hover {
  color: var(--ink);
}
.dm-flip {
  transform: scaleX(-1);
}

.dm-hero {
  padding-top: clamp(40px, 8vw, 88px);
  padding-bottom: 24px;
  text-align: center;
}
.dm-hero .eyebrow {
  justify-content: center;
}
.dm-hero .lead {
  margin-left: auto;
  margin-right: auto;
}
.dm-date {
  margin: 8px 0 16px;
  color: var(--gold-ink);
  font: 600 13px/1.4 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Картите: една колона на телефон, три на компютър. Цялата карта е линк (44 px+ за пръста). */
.dm-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 48px;
}
/* Четирите карти – 2 × 2 от 720 px, с еднаква височина на редовете (VIS-DM-07, VIS-DM-13). */
@media (min-width: 720px) {
  .dm-cards {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
  /* Петата карта („Колажът“ – само когато темата го има) заема целия ред, а не остава сама до празно място. */
  .dm-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.dm-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 8px 16px;
  min-height: 132px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}
.dm-card:hover {
  border-color: var(--gold-line);
  box-shadow: 0 1px 2px rgb(41 39 37 / 0.06), 0 12px 32px rgb(41 39 37 / 0.08);
  transform: translateY(-2px);
}
.dm-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--gold);
}
.dm-card__ico {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold);
}
.dm-card__ico .ico {
  width: 22px;
  height: 22px;
}
.dm-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink-muted);
  font: 400 15px/1.5 var(--font-body);
}
/* Заглавията на картите – в Lora като другите заглавия на страницата (VIS-DM-06; правилото на p.h3 в lx.css). */
.dm-card__body .h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
}
.dm-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-ink);
  font: 600 14px/1.2 var(--font-body);
}
@media (prefers-reduced-motion: reduce) {
  .dm-card {
    transition: none;
  }
  .dm-card:hover {
    transform: none;
  }
}

.dm-final {
  padding-top: 40px;
  padding-bottom: 56px;
  border-top: 1px solid var(--line);
}
/* VIS-DM-15: колонтитулът на /demo е само правният ред – без горния отстъп на колонтитула с колоните. */
body[data-page='demo'] .site-footer {
  padding-top: var(--s-5);
}

/* Прегледът на компютър: <dialog> с рамка на телефон (390 × 844) или лаптоп (1280 × 800), мащабирани с CSSOM. */
.dm-viewer {
  width: min(1200px, calc(100vw - 32px));
  max-width: none;
  height: calc(100vh - 32px);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--cream);
  color: var(--ink);
}
.dm-viewer::backdrop {
  background: rgb(41 39 37 / 0.55);
}
.dm-viewer__in {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dm-viewer__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 24px;
  border-bottom: 1px solid var(--line);
}
.dm-viewer__head .h3 {
  margin: 0 auto 0 0;
}
.dm-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.dm-switch button {
  min-height: 36px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
}
.dm-switch button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--on-ink);
}
.dm-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.dm-viewer__body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 32px;
  padding: 20px 24px;
  justify-content: center;
}
.dm-frame {
  position: relative;
  flex: none;
  overflow: hidden;
  border: 10px solid var(--ink);
  border-radius: 44px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgb(41 39 37 / 0.18);
}
.dm-frame[data-device='desktop'] {
  border-width: 12px 12px 22px;
  border-radius: 14px;
}
.dm-frame iframe {
  display: block;
  border: 0;
  transform-origin: 0 0;
  background: var(--paper);
}
.dm-qr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 264px;
  flex: none;
}
.dm-open {
  white-space: nowrap;
}
.dm-qr__code {
  width: 180px;
  height: 180px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.dm-qr__code svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dm-qr p {
  margin: 0;
}
@media (max-width: 960px) {
  .dm-qr {
    display: none;
  }
}