/* Classic template — desktop layout. Loads only on (min-width: 768px). */

.desktop-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.desktop-layout aside { border-right: 1px solid var(--border); padding: 24px 16px; }
.desktop-layout aside h2 { font-size: 14px; color: var(--accent); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.desktop-layout aside ul { list-style: none; padding: 0; margin: 0; }
.desktop-layout aside li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.desktop-layout aside li:hover { background: var(--border); }
.desktop-layout main { padding: 32px 40px; }
.desktop-layout header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.desktop-layout header h1 { margin: 0; font-size: 22px; letter-spacing: -0.3px; }
.cta-desktop { display: inline-block; padding: 10px 18px; background: var(--accent); color: var(--accentFg); border-radius: 6px; font-weight: 600; font-size: 14px; text-decoration: none; }
.grid-desktop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 18px; }
/* aspect-ratio replaced with the padding-bottom trick so old Android Chrome
 * (<88) and iOS Safari (<15) still get a 4:3 tile instead of a height:0 row.
 * `::before` is the spacer; text wrapper is positioned absolutely. */
.tile-desktop { position: relative; background: var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; overflow: hidden; }
.tile-desktop::before { content: ''; display: block; padding-bottom: 75%; }
.tile-desktop > span { position: absolute; left: 12px; bottom: 12px; }
.meta { margin-top: 24px; padding: 14px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre; }