/* What makes VEYLMU different (docs/website-showcase.md): the home page's showcase (.show) and the /features page
   (.feat-*). Dark glass cards and the violet accent of style.css; "Coming soon" in the dashed gold of the patch notes. */

/* --- a card's picture: an in-game shot (opens large) or badge art on the veil gradient --- */
.show-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #0b0a10;
}
.show-shot { cursor: zoom-in; }
.show-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.show-shot:hover img, .show-shot:focus-visible img { transform: scale(1.03); }
.show-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* "Coming soon: the new HUD in this picture" on a shot that shows the next client's look */
.show-note { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); background: rgba(20, 16, 6, 0.86); border: 1px solid rgba(252, 211, 77, 0.35); }
.show-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(143, 123, 255, 0.28), transparent 62%),
        linear-gradient(160deg, #15122a 0%, #0b0a10 70%);
}
/* on /features a card without a shot gets a low band, so it doesn't read as a missing picture */
.feat-card .show-art { aspect-ratio: 16 / 5; }
.show-art img { width: 64px; height: 64px; filter: drop-shadow(0 0 14px rgba(143, 123, 255, 0.45)); }
.show-art img:nth-child(2) { width: 84px; height: 84px; }
.show-art img:only-child { width: 88px; height: 88px; }

/* --- home: three picture tiles, four small cards, a link to /features --- */
.show { margin: 22px 0; }
.show-leads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.show-lead, .feat-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(15, 15, 22, 0.78);
    transition: border-color 0.2s;
}
.show-lead:hover, .feat-card:hover { border-color: var(--accent-line); }
.show-lead-body, .feat-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.show-lead h3, .feat-body h3 { margin: 0 0 6px; font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; color: #fff; }
.show-lead p { flex: 1; margin: 0 0 10px; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.feat-link { align-self: flex-start; font-size: 0.88rem; color: var(--accent-hi); text-decoration: none; }
.feat-link:hover { text-decoration: underline; }

.show-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.show-small {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(15, 15, 22, 0.7);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, transform 0.2s;
}
.show-small:hover, .show-small:focus-visible { border-color: var(--accent-line); transform: translateY(-2px); }
.show-small img { grid-row: span 2; width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(143, 123, 255, 0.35)); }
.show-small-title { font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: #fff; }
.show-small-line { font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.show-all { margin: 16px 0 0; text-align: center; }
/* on a phone the label wraps: keep the arrow in the text flow, not stranded as a flex item */
.show-all .btn { display: inline-block; max-width: 100%; text-align: center; white-space: normal; }

/* --- /features --- */
.feat-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.feat-jump a {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    font-size: 0.85rem;
    color: var(--accent-hi);
    text-decoration: none;
}
.feat-jump a:hover { background: rgba(143, 123, 255, 0.22); }
.feat-section { margin: 30px 0; scroll-margin-top: 80px; }
.feat-card { scroll-margin-top: 80px; }
.feat-section .why-head { text-align: center; margin-bottom: 14px; }
.feat-section .why-head h2 { margin: 0; font-size: 1.45rem; }
.feat-sec-text { margin: 6px 0 0; color: var(--muted); }
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feat-line { margin: 0 0 8px; color: var(--text); line-height: 1.5; }
.feat-facts { flex: 1; margin: 0 0 12px; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.feat-facts li { margin: 3px 0; }
.feat-facts li::marker { color: var(--accent); }
.feat-facts code { font-size: 0.85em; color: var(--accent-hi); }
/* a target of /features#id gets a short glow */
.feat-card:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line), 0 0 28px var(--accent-glow); }

/* Coming soon (upcoming.json): dashed gold, a "Coming soon" tag */
.feat-soon-grid { align-items: start; }
.feat-soon { border-style: dashed; border-color: rgba(252, 211, 77, 0.28); }
.feat-soon:hover { border-color: rgba(252, 211, 77, 0.5); }
.feat-soon .tag { align-self: flex-start; margin-bottom: 8px; }
.feat-soon p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.feat-soon .show-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* an item with a picture takes the whole row, the picture beside the text */
.feat-soon-wide { grid-column: 1 / -1; flex-direction: row; }
.feat-soon-wide .show-media { flex: none; width: 46%; }
.feat-soon-wide .feat-body { justify-content: center; }

.feat-cta { margin: 30px 0 10px; text-align: center; }
.feat-cta h2 { margin: 0 0 6px; }
.feat-cta p { margin: 0 0 14px; color: var(--muted); }
.feat-cta .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* the large picture (the same as the home gallery's, css/index.css) */
.shot-view {
    max-width: min(1200px, 94vw);
    padding: 12px;
    border: 1px solid var(--accent-line);
    border-radius: 14px;
    background: #0b0a10;
    color: var(--text);
}
.shot-view::backdrop { background: rgba(4, 4, 8, 0.82); }
.shot-view img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 8px; }
.shot-view p { margin: 10px 4px; color: var(--muted); }
.shot-view-actions { text-align: right; }

@media (max-width: 900px) {
    .show-leads { grid-template-columns: 1fr 1fr; }
    .show-leads .show-lead:first-child { grid-column: span 2; }
    .show-more { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .show-leads, .feat-grid { grid-template-columns: 1fr; gap: 12px; }
    .show-leads .show-lead:first-child { grid-column: auto; }
    .show-lead .show-media, .feat-card .show-media { aspect-ratio: 16 / 9; }
    .feat-card .show-art { aspect-ratio: 16 / 6; }
    .feat-soon-wide { flex-direction: column; }
    .feat-soon-wide .show-media { width: 100%; }
    .show-art img { width: 48px; height: 48px; }
    .show-art img:nth-child(2), .show-art img:only-child { width: 64px; height: 64px; }
    .show-more { gap: 10px; }
    .show-small { grid-template-columns: 36px 1fr; padding: 12px; column-gap: 10px; }
    .show-small img { width: 36px; height: 36px; }
    .show-small-line { font-size: 0.78rem; }
    .feat-section { margin: 22px 0; }
}
@media (max-width: 380px) {
    .show-more { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .show-shot img, .show-small { transition: none; }
    .show-shot:hover img, .show-small:hover { transform: none; }
}