/* Reusable demo layouts: content uses the same editorial blocks as the theme. */
.skip-link { position:absolute; left:16px; top:-80px; padding:10px 16px; background:#fff; color:var(--ink); z-index:200; }
.skip-link:focus { top:10px; }
.demo-preview-bar { background:#fff; border-bottom:1px solid var(--rule); font-size:.75rem; }
.demo-preview-bar .wrap { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding-block:9px; }
.demo-preview-bar span { margin-right:auto; color:var(--ink-soft); }
.demo-preview-bar a { color:var(--ink); text-decoration:none; }
.demo-preview-bar a:hover { text-decoration:underline; }
.masthead .drop__in { grid-template-columns:220px minmax(0,1fr); gap:32px; padding-block:24px; }
.demo-drop-title { font-size:1.3rem; margin:0 0 10px; }
.masthead .drop__list { columns:unset; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
.masthead .drop__list a { display:flex; align-items:center; justify-content:space-between; gap:12px; font:500 .95rem/1.4 var(--sans); padding:16px 0; }
.masthead .drop__list a .icon { flex:none; width:18px; height:18px; color:var(--teal); }
.masthead .drop__list a[aria-current] { color:var(--teal); }
.demo-hero { --ink-soft:#C6D0D2; --rule:rgba(255,255,255,.22); }
.demo-hero .byline a { color:#C6D0D2; }
.demo-hero .hero__title { max-width:22ch; }
.demo-hero .hero__art { width:min(100%,340px); max-width:340px; justify-self:center; }
.demo-hero .hero__cover { width:100%; height:auto; max-height:280px; object-fit:contain; }
.demo-hero__logo { width:100%; background:#fff; padding:36px; border-radius:12px; }
.demo-hero__logo--dark { background:#142329; }
.demo-hero__logo img { height:160px; }
.page--author .hero__cover { width:280px; height:320px; max-height:320px; object-fit:cover; border-radius:14px; }
.page--author .hero__art { padding:10px; border:1px solid rgba(255,255,255,.24); border-radius:22px; width:300px; }
.demo-author-avatar { width:72px; height:72px; object-fit:cover; border-radius:50%; flex:none; }
.page--author .demo-author-card { display:none; }
.demo-hero--payment { background:#24383E; }
.demo-hero--bonus { background:#303947; }
.demo-hero--game { background:#233C3B; }
.demo-hero--slot { background:#2B3444; }
.demo-hero--provider { background:#25373D; }
.demo-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:28px 0 42px; }
.demo-card { display:flex; flex-direction:column; min-width:0; padding:20px; border:1px solid var(--rule); border-radius:10px; background:#fff; color:var(--ink); text-decoration:none; transition:border-color .15s,transform .15s; }
.demo-card:hover { border-color:var(--teal); transform:translateY(-3px); }
.demo-card__media { display:flex; justify-content:center; align-items:center; height:140px; padding:10px; border-radius:7px; background:#E5F0EE; margin-bottom:18px; }
.demo-card__media img { width:100%; height:100%; object-fit:contain; }
.demo-card:nth-child(3n+2) .demo-card__media { background:#F7EDCF; }
.demo-card:nth-child(3n+3) .demo-card__media { background:#F3E3DF; }
.demo-card--dark .demo-card__media { background:#23343B!important; }
.demo-card__category { font:500 .67rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); }
.demo-card h3, .prose .demo-card h3 { font:600 1.35rem/1.2 var(--sans); margin:8px 0 12px; color:var(--ink); }
.demo-card p { font-size:.9rem; line-height:1.55; color:var(--ink-soft); margin:0 0 18px; }
.demo-card__link { display:flex; gap:12px; align-items:center; margin-top:auto; font-size:.85rem; font-weight:600; color:var(--teal); }
.demo-card__link .icon { margin-left:auto; }
.demo-cards--ranked { grid-template-columns:1fr; }
.demo-cards--ranked .demo-card { display:grid; grid-template-columns:100px 1fr; column-gap:20px; }
.demo-cards--ranked .demo-card__media { grid-row:1/5; height:110px; margin:0; }
.demo-cards--ranked .demo-card p { margin-bottom:8px; }
.demo-cards--payments .demo-card__media { height:94px; background:#F3F5F6!important; padding:20px; }
.demo-cards--bonuses .demo-card { border-top:4px solid var(--narra); }
.demo-cards--spins .demo-card { border-top:4px solid var(--saffron); }
.demo-cards--games .demo-card { background:#F8FAFA; }
.demo-cards--slots .demo-card { padding:0; overflow:hidden; }
.demo-cards--slots .demo-card__media { height:190px; border-radius:0; margin:0; padding:0; background:#172730!important; }
.demo-cards--slots .demo-card__category,.demo-cards--slots .demo-card h3,.demo-cards--slots .demo-card p,.demo-cards--slots .demo-card__link { margin-inline:20px; }
.demo-cards--slots .demo-card__category { margin-top:18px; }
.demo-cards--slots .demo-card__link { margin-bottom:20px; }
.demo-cards--providers .demo-card__media { height:110px; background:#F6F7F8; padding:24px; }
.demo-cards--home { grid-template-columns:repeat(2,minmax(0,1fr)); }
.demo-cards--home .demo-card:first-child { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; column-gap:24px; background:#DDEEE9; }
.demo-cards--home .demo-card:first-child .demo-card__media { width:140px; flex:none; }
.demo-cards--home .demo-card:first-child h3 { align-self:center; flex:1; }
.demo-cards--home .demo-card:first-child .demo-card__category { display:none; }
.demo-cards--compact .demo-card__media { height:100px; }
.demo-related { padding-block:24px 36px; }
.demo-related > h2 { margin-bottom:20px; }
.demo-related .demo-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.demo-author-card h2 { font-size:1.65rem; margin:0 0 12px; }
.demo-rail-related { margin-top:28px; border-top:1px solid var(--rule); padding-top:20px; }
.demo-rail-related ul { padding-left:0; list-style:none; font-size:.85rem; }
.demo-rail-related li { margin:12px 0; }
.demo-rail-related a { color:var(--ink-soft); }
.demo-inline-note { font-size:.8rem!important; color:var(--ink-soft); border-left:3px solid var(--saffron); padding-left:14px; }
.demo-table-scroll { max-width:100%; overflow:auto; }
.demo-table-scroll caption { text-align:left; font-size:.78rem; padding:8px 0; color:var(--ink-soft); }
.demo-faq { margin:24px 0; width:100%; }
.demo-footer-note { border-left:2px solid #57C5AE; padding-left:24px; max-width:50ch; }
.demo-footer-note p { color:#BCC8CA; }
.demo-sitemap { padding-block:42px 64px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.demo-sitemap > p { grid-column:1/-1; }
.demo-sitemap section { background:#fff; border:1px solid var(--rule); border-radius:8px; padding:24px; }
.demo-sitemap h2 { font-size:1.35rem; margin:0 0 16px; }
.demo-sitemap ul { list-style:none; padding:0; margin:0; }
.demo-sitemap li { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.demo-sitemap li span { color:var(--ink-soft); font-size:.75rem; margin-left:auto; }
.demo-search { padding-block:48px 70px; min-height:480px; }
.demo-search .searchform { margin-bottom:32px; }
.demo-empty { text-align:center; padding-block:64px 80px; }
.demo-empty p { margin:24px auto; }
.demo-page .article > .prose { min-width:0; }
@media(min-width:1250px) { .demo-cards--home { grid-template-columns:repeat(3,minmax(0,1fr)); } .demo-cards--home .demo-card:first-child { grid-column:auto; flex-direction:column; } .demo-cards--home .demo-card:first-child .demo-card__media { width:auto; } }
@media(max-width:899px) { .demo-hero .hero__art { width:min(100%,220px); max-width:220px; justify-self:start; } .demo-hero .hero__cover { max-height:170px; } .demo-hero__logo img { height:90px; } .demo-hero__logo { padding:20px; } .demo-related .demo-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:599px) { .demo-cards,.demo-related .demo-cards,.demo-cards--home { grid-template-columns:1fr; } .demo-sitemap { grid-template-columns:1fr; } .demo-cards--home .demo-card:first-child { grid-column:auto; flex-direction:column; } .demo-cards--home .demo-card:first-child .demo-card__media { width:auto; } .demo-cards--ranked .demo-card { grid-template-columns:75px 1fr; gap:8px 14px; } .demo-cards--ranked .demo-card__media { height:90px; } .demo-card h3,.prose .demo-card h3 { font-size:1.2rem; } .demo-author-card { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { .demo-card:hover { transform:none; } }
/* Compact library cards keep large hubs easy to scan. */
.demo-cards, .demo-cards--ranked, .demo-cards--home, .demo-related .demo-cards { display:flex; flex-wrap:wrap; gap:12px; }
.demo-card { flex:1 1 calc((100% - 24px) / 3); padding:14px; border-radius:8px; }
.demo-card__media, .demo-cards--compact .demo-card__media { height:90px; margin-bottom:12px; padding:6px; }
.demo-card h3, .prose .demo-card h3 { font-size:1.05rem; line-height:1.3; margin:6px 0 8px; }
.demo-card p { font-size:.8rem; line-height:1.45; margin-bottom:12px; }
.demo-card__category { font-size:.58rem; letter-spacing:.04em; }
.demo-card__link { font-size:.78rem; gap:6px; }
.demo-cards--ranked .demo-card { display:flex; }
.demo-cards--ranked .demo-card__media { height:90px; margin:0 0 12px; }
.demo-cards--home .demo-card:first-child { grid-column:auto; display:flex; flex-direction:column; flex-wrap:nowrap; background:#fff; }
.demo-cards--home .demo-card:first-child .demo-card__media { width:auto; flex:none; }
.demo-cards--home .demo-card:first-child h3 { align-self:stretch; flex:none; }
.demo-cards--home .demo-card:first-child .demo-card__category { display:block; }
.demo-cards--payments .demo-card__media { height:64px; padding:12px; }
.demo-cards--slots .demo-card__media { height:115px; }
.demo-cards--providers .demo-card__media { height:80px; padding:14px; }
.demo-cards--slots .demo-card__category,.demo-cards--slots .demo-card h3,.demo-cards--slots .demo-card p,.demo-cards--slots .demo-card__link { margin-inline:14px; }
.demo-profile-features { padding-left:20px; }
.demo-profile-features li { margin-bottom:10px; }
.demo-profile-features strong { display:block; color:var(--ink); }
.brand-card__body h4 { margin:24px 0 14px; font-size:1.05rem; }
@media(max-width:699px) { .demo-card { flex-basis:calc((100% - 12px) / 2); } }
@media(max-width:479px) { .demo-card { flex-basis:100%; } }