/* Live demos (content/en/live-demos.html): the ten castomo.com customisers as cards, and the dialog
   that runs one in a frame (assets/live-demos.js). Tokens only, so all four themes hold. */
.ld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.ld-card { display: flex; flex-direction: column; padding: 16px; border: var(--rule-w) solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.ld-card h3 { margin: 0 0 .35em; font-size: 1.2rem; line-height: 1.25; }
.ld-card p { margin: 0 0 .8em; color: var(--ink-2); }
.ld-shot { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--paper-2); overflow: hidden; }
.ld-shot img { width: 100%; height: 100%; object-fit: contain; }
.ld-card .ld-meta { margin-bottom: .4em; color: var(--sc-hue); font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ld-card .ld-acts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: auto 0 0; padding-top: 6px; }
.ld-try { padding: 8px 16px; border-radius: var(--radius-pill); background: var(--sc-hue); color: var(--paper); font-weight: 700; text-decoration: none; }
.ld-try:hover, .ld-try:focus-visible { filter: brightness(1.1); }

.ld-dialog { width: min(1200px, 100vw - 32px); height: min(860px, 100dvh - 32px); max-width: none; max-height: none; padding: 0; border: var(--rule-w) solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.ld-dialog[open] { display: flex; flex-direction: column; }
.ld-dialog::backdrop { background: rgba(11, 12, 16, .6); }
.ld-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 16px; border-bottom: var(--rule-w) solid var(--rule); }
.ld-bar h2 { flex: 1 1 auto; margin: 0; font-size: 1.05rem; }
.ld-bar button { min-height: 40px; padding: 6px 14px; border: var(--rule-w) solid var(--rule); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.ld-dialog iframe { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
@media (max-width: 600px) { .ld-dialog { width: 100vw; height: 100dvh; border-radius: 0; } }