/*
 * Public launcher download page (see resources/views/launcher-auth/download/index.blade.php).
 *
 * Deliberately scoped under .sn3-dl so nothing here can leak into the rest of the site: this
 * plugin ships one stylesheet for every page it owns, and the Azuriom theme is not ours to
 * restyle. Everything is expressed with the theme's own Bootstrap CSS variables
 * (--bs-body-color, --bs-primary...) rather than hardcoded colours, so the page follows the
 * site's palette and its light/dark mode instead of fighting them.
 */

.sn3-dl-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem 0 1rem;
}

@media (min-width: 992px) {
    .sn3-dl-hero {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.sn3-dl-hero h1 {
    font-weight: 700;
    line-height: 1.15;
}

.sn3-dl-hero-lead {
    font-size: 1.1rem;
    opacity: .85;
    max-width: 34rem;
}

/* The screenshot is the page's one decorative element - given a little depth and a slight tilt so
   it reads as a product shot rather than an inline image. */
.sn3-dl-shot {
    width: 100%;
    height: auto;
    border-radius: .75rem;
    border: 1px solid rgba(128, 128, 128, .25);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}

.sn3-dl-shot-tilted {
    transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
    transition: transform .35s ease;
}

.sn3-dl-shot-tilted:hover {
    transform: perspective(1600px) rotateY(0) rotateX(0);
}

/* Respect a user who has asked for less motion - the tilt/hover is pure decoration. */
@media (prefers-reduced-motion: reduce) {
    .sn3-dl-shot-tilted,
    .sn3-dl-shot-tilted:hover {
        transform: none;
        transition: none;
    }
}

.sn3-dl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.sn3-dl-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 2rem;
    font-size: .85rem;
    background: rgba(128, 128, 128, .15);
    border: 1px solid rgba(128, 128, 128, .25);
}

/* --- "How it works" steps -------------------------------------------------------------------- */

.sn3-dl-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .sn3-dl-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

.sn3-dl-step {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

/* The number carries the sequence on its own, so the heading below it doesn't have to repeat
   "Step 1" in every language. Hidden from assistive tech (aria-hidden in the markup): the reading
   order already conveys it, and "1" announced before each heading is noise. */
.sn3-dl-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}

.sn3-dl-step h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .3rem;
}

.sn3-dl-step p {
    opacity: .8;
    font-size: .95rem;
}

/* --- Perk pills ------------------------------------------------------------------------------ */

.sn3-dl-perks {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.sn3-dl-perk {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 2rem;
    font-size: .9rem;
    background: rgba(128, 128, 128, .13);
    border: 1px solid rgba(128, 128, 128, .25);
}

/* One-click installation is the headline claim of this whole section, so the first pill gets the
   accent treatment rather than blending into the row. */
.sn3-dl-perk:first-child {
    background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
    border-color: var(--bs-primary);
    font-weight: 600;
}

/* --- Download cards ------------------------------------------------------------------------- */

.sn3-dl-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: .75rem;
    border: 1px solid rgba(128, 128, 128, .25);
    padding: 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sn3-dl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .18);
}

/* The recommended option is the one a player should pick without reading - given the accent
   colour and a ribbon so it wins the scan even before the copy is read. */
.sn3-dl-card-featured {
    border-color: var(--bs-primary);
    border-width: 2px;
    position: relative;
}

.sn3-dl-ribbon {
    position: absolute;
    top: -.75rem;
    left: 1.25rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem .6rem;
    border-radius: .35rem;
}

.sn3-dl-card-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .75rem;
    color: var(--bs-primary);
}

.sn3-dl-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.sn3-dl-card-desc {
    opacity: .8;
    font-size: .95rem;
    flex-grow: 1;
}

.sn3-dl-card-meta {
    font-size: .8rem;
    opacity: .65;
    margin-top: .6rem;
}

/* --- Requirement line ------------------------------------------------------------------------ */

.sn3-dl-req {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    padding: .2rem .55rem;
    border-radius: .35rem;
    background: rgba(128, 128, 128, .13);
    margin-top: .75rem;
}

/* --- One-line install commands --------------------------------------------------------------- */

.sn3-dl-commands {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 992px) {
    .sn3-dl-commands {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sn3-dl-command-label {
    font-size: .85rem;
    font-weight: 600;
    opacity: .8;
    margin-bottom: .35rem;
}

.sn3-dl-command {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border-radius: .5rem;
    background: rgba(128, 128, 128, .13);
    border: 1px solid rgba(128, 128, 128, .25);
}

/* The command must stay selectable and readable rather than wrapping mid-flag, so it scrolls
   horizontally on a narrow screen instead of breaking across lines. */
.sn3-dl-command code {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    font-size: .85rem;
    color: inherit;
}

.sn3-dl-command .btn {
    flex: 0 0 auto;
}

.sn3-dl-checksum {
    word-break: break-all;
    font-size: .8rem;
    /* Bootstrap renders <code> in its "danger" pink by default, which makes a perfectly healthy
       checksum read as an error message. */
    color: inherit;
}

/* --- Screenshot gallery ---------------------------------------------------------------------- */

.sn3-dl-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .sn3-dl-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sn3-dl-gallery figure {
    margin: 0;
}

.sn3-dl-gallery figcaption {
    font-size: .9rem;
    opacity: .75;
    margin-top: .6rem;
}