/* ============================================================
   LINKS.CSS — cubey cyberpunk grid of pixelated link buttons.
   Loaded only on /links. scoped to its own classes.
   ============================================================ */

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.4rem;
    margin-top: 0.5rem;
}

/* the square "cube" button */
.link-cube {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.1rem; text-decoration: none; aspect-ratio: 1 / 1; padding: 1.5rem;
    background: rgba(8, 8, 18, 0.72);
    border: 1px solid rgba(var(--c-primary-rgb), 0.4);
    box-shadow: 0 0 14px rgba(var(--c-primary-rgb), 0.12), inset 0 0 30px rgba(var(--c-primary-rgb), 0.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.link-cube:hover {
    transform: translateY(-4px);
    border-color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), 0.08);
    box-shadow: 0 0 26px rgba(var(--c-primary-rgb), 0.45);
}

/* corner brackets (mirror the desktop windows) */
.link-cube::before, .link-cube::after {
    content: ""; position: absolute; width: 11px; height: 11px;
    border: 2px solid var(--c-secondary); opacity: 0.65; pointer-events: none; transition: opacity .16s ease;
}
.link-cube::before { left: -1px; top: -1px; border-right: none; border-bottom: none; }
.link-cube::after { right: -1px; bottom: -1px; border-left: none; border-top: none; }
.link-cube:hover::before, .link-cube:hover::after { opacity: 1; }

/* pixelated logo (or neon monogram fallback when no image is present) */
.lc-icon {
    position: relative; width: 118px; height: 118px; flex: none; display: block;
}
/* monogram fallback — only shown when the logo image is missing/failed to load */
.lc-icon::before {
    content: attr(data-mono); position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center;
    font-family: var(--f-hero, 'Orbitron', sans-serif); font-weight: 900; font-size: 44px; letter-spacing: 1px;
    color: var(--c-secondary); text-shadow: 0 0 14px rgba(var(--c-secondary-rgb), 0.6);
}
.lc-icon:not(:has(img))::before { display: flex; }
.lc-icon img {
    position: relative; z-index: 1; width: 100%; height: 100%; box-sizing: border-box;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(var(--c-primary-rgb), 0.25));
    transition: filter .16s ease, transform .16s ease;
    /* keep dropped-in logos crunchy & cyberpunk */
    image-rendering: pixelated; image-rendering: crisp-edges;
}
.link-cube:hover .lc-icon img { filter: drop-shadow(0 0 16px rgba(var(--c-primary-rgb), 0.6)); transform: scale(1.05); }

.lc-name {
    font-family: var(--f-mono, monospace); font-size: 16px; letter-spacing: 1px;
    color: var(--c-text); text-transform: lowercase; text-align: center;
}
.link-cube:hover .lc-name { color: var(--c-primary); text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5); }

/* little "opens in new tab" marker */
.lc-ext {
    position: absolute; top: 0.5rem; right: 0.6rem;
    font-family: var(--f-mono, monospace); font-size: 11px; color: var(--c-secondary);
    opacity: 0; transform: translate(-3px, 3px); transition: opacity .16s ease, transform .16s ease;
}
.link-cube:hover .lc-ext { opacity: 0.85; transform: translate(0, 0); }

@media (max-width: 768px) {
    .links-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
    .lc-icon { width: 84px; height: 84px; }
    .lc-icon:not(:has(img))::before { font-size: 32px; }
}