/*!
 * Homepage (/) — Spectre-theme styling.
 * The feature/uses content renders from translation tokens (identical markup
 * in all 15 languages), so the refresh lives here, not in the tokens.
 * Color values mirror themes.canvasThemes.Spectre / site-overrides.css.
 */

/* ── Hero ──────────────────────────────────────────────────────────── */

/* Soft accent glow rising from the top of the hero panel (layers over the
   raised-surface background-color pinned in site-overrides) */
#hero {
    background-image: radial-gradient(1200px 400px at 50% -10%, rgba(0, 212, 232, 0.10), transparent 70%);
}

/* Hero shot framing. The blurb token still carries the old width="800"
   height="259" (from the previous two-monitor graphic); the current
   screenshot is 43:18, so the ratio is overridden here — avoiding a
   per-language token edit — with a clean-bezel frame.
   (Moved from inline styles in Index.cshtml.) */
#hero .fs-4 img {
    display: block;
    box-sizing: border-box;
    width: min(100%, 916px);
    height: auto;
    aspect-ratio: 43 / 18;
    object-fit: cover;
    margin: 1.5rem auto 0.5rem;
    padding: 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, #16283A, #0A0E14);
    border: 1px solid rgba(120, 220, 255, 0.16);
    box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .75);
}

/* Constrain the blurb measure for readability on wide screens */
#hero .fs-4 {
    max-width: 62rem;
    margin-left: auto;
    margin-right: auto;
}

/* ── Feature grid (summary token: rows of icon + text columns) ─────── */

/* Icon tiles: fixed size (they were unconstrained img-fluid SVGs filling
   their columns), centered, on an accent-wash chip */
.home-features svg {
    display: block;
    width: min(100%, 96px);
    height: 96px;
    margin: 0 auto;
    padding: 18px;
    background: rgba(0, 212, 232, 0.07);
    border: 1px solid rgba(0, 212, 232, 0.22);
    border-radius: 18px;
    fill: #9FD4DE;
    stroke: #9FD4DE;
}

.home-features h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.home-features p {
    color: #B8CAD2;
}

.home-features .row .row + .row {
    margin-top: 1.25rem;
}

/* ── Section headings (Typical Uses / Screenshots) ─────────────────── */

.section-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #93B4BE;
}

.section-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: .6rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #00D4E8, #5B8DEF);
}

/* ── Typical-uses cards ────────────────────────────────────────────── */

.album .card {
    background-color: #101823;
    border: 1px solid rgba(120, 220, 255, 0.14);
    border-radius: .6rem;
    height: 100%;
    transition: transform .2s ease, border-color .2s ease;
}

.album .card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 212, 232, 0.45);
}

.album .card-title {
    color: #5CF2FF;
    font-size: 1.15rem;
    font-weight: 600;
}

.album .card-text {
    color: #B8CAD2;
}

/* ── Screenshots: bezel frames (scale-on-hover comes from .pop-img) ── */

#screenshots img {
    padding: 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, #16283A, #0A0E14);
    border: 1px solid rgba(120, 220, 255, 0.16);
}