/*!
 * Stirhits — app showcase layout (/apps/, /apps/<name>/, and the homepage #apps section).
 *
 * The New Age theme is a single-product landing page and ships nothing for listing
 * several apps, so these are ours. Load after styles.css and dark-theme.css; the
 * --sh-* vars come from dark-theme.css. Bootstrap component *colours* (carousel
 * indicators and the like) stay in dark-theme.css — only layout lives here.
 */

/* ---------------------------------------------------------------- app cards */

/* The whole card is the link, so kill the anchor's own text styling and let the
   children set colour. */
.app-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.75rem;
    background-color: var(--sh-surface-raised);
    border: 1px solid var(--sh-border);
    border-radius: 0.75rem;
    color: var(--sh-text);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.app-card:hover,
.app-card:focus-visible {
    color: var(--sh-text);
    border-color: var(--sh-primary);
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
}

/* Respect a reduced-motion preference: keep the colour change, drop the travel. */
@media (prefers-reduced-motion: reduce) {
    .app-card {
        transition: border-color 0.18s ease;
    }

    .app-card:hover,
    .app-card:focus-visible {
        transform: none;
    }
}

.app-card-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}

.app-card-title {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.app-card-text {
    color: var(--sh-text-muted);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* Pushes the platform row to the bottom so cards with different blurb lengths
   still line their pills up. */
.app-card-platforms {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-pill {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--sh-border);
    color: var(--sh-text-muted);
}

.app-pill-live {
    border-color: var(--sh-primary);
    color: var(--sh-primary);
}

/* The #apps section on the homepage sits on the brand gradient, where the card's
   dark surface would read as a hole. Lift it to a translucent white instead. */
.bg-gradient-primary-to-secondary .app-card {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.bg-gradient-primary-to-secondary .app-card:hover,
.bg-gradient-primary-to-secondary .app-card:focus-visible {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

.bg-gradient-primary-to-secondary .app-card-text,
.bg-gradient-primary-to-secondary .app-pill {
    color: rgba(255, 255, 255, 0.75);
}

.bg-gradient-primary-to-secondary .app-pill {
    border-color: rgba(255, 255, 255, 0.4);
}

.bg-gradient-primary-to-secondary .app-pill-live {
    border-color: #fff;
    color: #fff;
}

/* ------------------------------------------------------------ app page hero */

.app-hero {
    padding-top: 9.5rem;
    padding-bottom: 3rem;
    text-align: center;
}

.app-hero-icon {
    width: 6rem;
    height: 6rem;
    border-radius: 1.35rem;
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------- store badges */

/* The App Store listing does not exist yet. This is a bare <img> with no anchor —
   dimmed so it reads as unavailable, and it cannot be clicked or tabbed to. When
   iOS ships, wrap it in an <a> and drop this class along with the caption. */
.badge-soon {
    opacity: 0.45;
    filter: grayscale(1);
}

/* --------------------------------------------------- screenshot carousel */

/* Narrow enough that Bootstrap's 15%-wide prev/next controls land just outside
   the phone rather than across it or way off in the margins. */
.shots-carousel {
    max-width: 30rem;
    margin: 0 auto;
}

.shots-carousel .device-wrapper {
    max-width: 260px;
    margin: 0 auto;
}

/* Indicators sit under the phone, not over it — the app's own bottom tab bar is
   right where Bootstrap would otherwise put them. */
.shots-carousel .carousel-indicators {
    position: static;
    margin: 1.75rem 0 0;
}

/* Controls span the full height by default, which on a tall slide means a huge
   invisible hit area. Pin them beside the phone instead. */
.shots-carousel .carousel-control-prev,
.shots-carousel .carousel-control-next {
    width: 3rem;
    align-items: flex-start;
    padding-top: 40%;
    opacity: 0.6;
}

.shots-carousel .carousel-control-prev:hover,
.shots-carousel .carousel-control-next:hover,
.shots-carousel .carousel-control-prev:focus-visible,
.shots-carousel .carousel-control-next:focus-visible {
    opacity: 1;
}

/* The screenshot is a button so it is reachable by keyboard and announced as
   activatable. Strip the UA button chrome so the phone mockup looks untouched —
   the image itself is the whole hit area. */
.shot-zoom {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.shot-zoom:focus-visible {
    outline: 2px solid var(--sh-primary);
    outline-offset: -2px;
}

.shots-caption {
    color: var(--sh-text-muted);
    text-align: center;
    margin: 1.5rem auto 0;
    max-width: 22rem;
    min-height: 3rem;
}

@media (max-width: 400px) {
    .shots-carousel .device-wrapper {
        max-width: 210px;
    }
}

/* Screenshots are 1:2.22 and the iPhoneX screen slot is 1:2.16, so `cover` fills
   the bezel edge to edge and trims ~1.4% off the top and bottom — which on these
   captures is empty black. `contain` would leave a visible seam instead. */
.device .screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------- screenshot lightbox */

/* A Bootstrap modal built by /js/lightbox.js — Bootstrap already gets the fiddly
   parts right (Escape, the focus trap, and padding the body *and* the fixed-top
   navbar by the scrollbar width so nothing shifts when scrolling locks). It runs
   with backdrop:false: the dialog is fullscreen, so the tint belongs on the modal
   itself rather than on a separate element underneath it. */
.shot-lightbox {
    background-color: rgba(6, 8, 12, 0.92);
    cursor: zoom-out;
}

.shot-lightbox .modal-content {
    height: 100%;
    padding: 4vh 4vw;
    align-items: center;
    justify-content: center;
    background: none;
}

/* The screenshots are 540px wide natively; scaling past that only blurs them.
   The whole overlay closes on click, so the image needs no chrome of its own. */
.shot-lightbox img {
    display: block;
    max-width: min(100%, 540px);
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
}