/* The widget pages (widget-build.mjs), on top of persona.css and usecase.css. */
.wg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 2rem; align-items: start; margin: 1.5rem 0 1rem; }
.wg-head h1 { margin: .4rem 0 .6rem; text-wrap: balance; }
.wg-head .pe-eyebrow { justify-self: start; }
.wg-guide { margin-top: 1rem; }
.wg-video { margin: 0; }
.wg-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 16px; background: #000e2e; border: 1px solid rgba(255, 255, 255, .1); }
.wg-video figcaption { margin-top: .5rem; font-size: .85rem; color: var(--faint, #a3a2b0); }
.wg-beats { margin: 1rem 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.wg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.wg-tile { display: block; position: relative; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, .1); background: #000e2e; }
.wg-tile img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.wg-tile-text { position: absolute; inset: auto 0 0 0; padding: .8rem; display: grid; gap: .3rem; background: linear-gradient(transparent, rgba(0, 14, 46, .92) 40%); }
.wg-tile-text strong { font-size: .95rem; line-height: 1.25; }
.wg-tile-meta { display: inline-flex; gap: .3rem; align-items: center; font-size: .8rem; color: var(--faint, #a3a2b0); }
.wg-tile:hover { border-color: #8f7aee; }
@media (max-width: 720px) { .wg-head { grid-template-columns: 1fr; } .wg-video { max-width: 340px; } }