/* Interaktivní ukázka bez přihlášení (/archidad/demo/) */
.demo-hlava { padding-bottom: 28px; }
.demo-volba { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1100px; margin: 18px auto 12px; padding: 0 16px; }
.demo-dl { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cara, #d7dcd9); background: #fff; color: inherit; font: inherit; cursor: pointer; }
.demo-dl b { font-size: 15px; } .demo-dl span { font-size: 13px; opacity: .7; }
.demo-dl[aria-pressed="true"] { border-color: var(--zelena); box-shadow: inset 0 0 0 1px var(--zelena); }
.demo-ram { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.demo-ram iframe { display: block; width: 100%; height: min(78vh, 820px); border: 1px solid var(--cara, #d7dcd9); border-radius: 14px; background: #f6f7f5; }
.demo-pod { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1100px; margin: 14px auto 6px; padding: 0 16px; }
.demo-pozn { max-width: 1100px; margin: 0 auto 40px; padding: 0 16px; text-align: center; font-size: 14px; opacity: .7; }
@media (max-width: 760px) {
  .demo-volba { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-ram { padding: 0 8px; }
  .demo-ram iframe { height: calc(100dvh - 90px); border-radius: 10px; }
}
/* telefon: nástroj až po ťuknutí (rychlost, posouvání stránky), rám nižší než displej, ať jde stránka posunout kolem */
.demo-start { display: grid; gap: 10px; justify-items: stretch; text-align: center; padding: 22px 18px; border: 1px dashed var(--cara, #c9d0cc); border-radius: 14px; background: #f6f7f5; }
.demo-start[hidden], .demo-ram iframe[hidden] { display: none; }
.demo-start p { margin: 0 0 4px; display: grid; gap: 4px; } .demo-start p b { font-size: 18px; } .demo-start p span { font-size: 14px; opacity: .75; }
.demo-start .btn { min-height: 48px; }
@media (max-width: 760px) {
  .demo-ram iframe { height: 72dvh; }
  .demo-dl { min-height: 64px; }
  .demo-pod .btn { width: 100%; }
}
#demoCela[hidden] { display: none; }