/* Apps Promo pages (/Apps/Promo/{App}) — standalone ASO landing pages.
   Shared visual identity for the 10 app promo pages, aligned with apps-hub.css
   and .github/design.md (primary #2D6CB5 / accent #34C759, radius 8-16px,
   shadow 0 4px 12px rgba(0,0,0,.08)). Category accent:
   - .promo-page (default / DevLife pack apps) -> primary blue
   - .promo-page--solo (independent free tools) -> accent green
*/

.promo-page {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.promo-page :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.promo-page--solo :focus-visible {
    outline-color: var(--color-accent);
}

/* Back link: slightly more visible than the bare site.css default on these
   standalone documents (no nav bar for context). */
.promo-page .promo-back-link {
    font-size: 0.85rem;
    opacity: 0.65;
}

.promo-page .promo-back-link:hover,
.promo-page .promo-back-link:focus-visible {
    opacity: 1;
}

/* Hero badge (kicker) ------------------------------------------------- */
.promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.promo-page--solo .promo-badge {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
    color: color-mix(in srgb, var(--color-accent) 75%, var(--text-color) 25%);
}

/* Concept block (pain point) ------------------------------------------ */
.promo-concept {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    color: var(--text-color);
}

.promo-page--solo .promo-concept {
    border-left-color: var(--color-accent);
}

.promo-concept-icon {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 1.3rem;
    line-height: 1.6;
}

.promo-page--solo .promo-concept-icon {
    color: var(--color-accent);
}

.promo-concept strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
    color: var(--text-color);
}

.promo-concept span,
.promo-concept-body {
    color: var(--text-secondary);
}

/* Buttons: align Bootstrap defaults with the brand palette on these
   standalone pages (they load Bootstrap from a CDN, not the themed build). */
.promo-page .btn {
    border-radius: 8px;
    font-weight: 600;
}

.promo-page .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.promo-page .btn-primary:hover,
.promo-page .btn-primary:focus-visible {
    background-color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
    border-color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
}

.promo-page--solo .btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #0b1f12;
}

.promo-page--solo .btn-primary:hover,
.promo-page--solo .btn-primary:focus-visible {
    background-color: color-mix(in srgb, var(--color-accent) 85%, black 15%);
    border-color: color-mix(in srgb, var(--color-accent) 85%, black 15%);
    color: #0b1f12;
}

.promo-page .btn-outline-dark,
.promo-page .btn-outline-secondary {
    color: var(--text-color);
    border-color: var(--border-color);
}

.promo-page .btn-outline-dark:hover,
.promo-page .btn-outline-dark:focus-visible,
.promo-page .btn-outline-secondary:hover,
.promo-page .btn-outline-secondary:focus-visible {
    background-color: var(--text-color);
    border-color: var(--text-color);
    color: var(--bg-color);
}

.promo-page .btn-outline-secondary.disabled {
    opacity: 0.5;
}

/* Generic elevated card (stats / features / how it works / models /
   platforms) — one consistent surface across the whole page. */
.promo-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.promo-card h2,
.promo-card h3 {
    color: var(--text-color);
}

.promo-card p,
.promo-card li {
    color: var(--text-secondary);
}

.promo-card ul,
.promo-card ol {
    padding-left: 1.2rem;
}

.promo-card li + li {
    margin-top: 0.35rem;
}

/* Stat cards: colored icon chip on top */
.promo-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-secondary));
    font-size: 1.6rem;
}

.promo-page--solo .promo-stat-icon {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--bg-secondary));
}

/* Feature cards: thin accent rule on top, alternating primary/accent for
   visual rhythm without leaving the brand palette. */
#features .promo-card {
    border-top: 3px solid var(--color-primary);
}

.promo-page--solo #features .promo-card {
    border-top-color: var(--color-accent);
}

#features .promo-card:nth-child(2n) {
    border-top-color: var(--color-accent);
}

.promo-page--solo #features .promo-card:nth-child(2n) {
    border-top-color: var(--color-primary);
}

/* Audience panel: branded gradient instead of generic bg-dark.
   Built from the theme tokens (not fixed hex) so it follows the palette
   into dark mode too — mixed with black to stay dark enough for white
   text even against the lighter dark-mode primary/accent (#60A5FA /
   #4ADE80 are too light on their own for white-on-top contrast). */
.promo-audience {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 15px 40px color-mix(in srgb, var(--color-primary) 25%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 60%, black 40%) 0%,
        color-mix(in srgb, var(--color-primary) 35%, black 65%) 100%);
    color: #ffffff;
}

.promo-page--solo .promo-audience {
    box-shadow: 0 15px 40px color-mix(in srgb, var(--color-accent) 22%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-accent) 60%, black 40%) 0%,
        color-mix(in srgb, var(--color-accent) 35%, black 65%) 100%);
}

.promo-audience h2 {
    color: #ffffff;
}

.promo-audience p {
    color: rgba(255, 255, 255, 0.9);
}

.promo-check-icon {
    color: #ffffff;
}

/* Final CTA: branded gradient card, consistent with the hub's premium box.
   Same theme-token approach as .promo-audience above. */
.promo-cta {
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 60%, black 40%) 0%,
        color-mix(in srgb, var(--color-primary) 35%, black 65%) 100%);
    box-shadow: 0 20px 50px color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: #ffffff;
}

.promo-page--solo .promo-cta {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-accent) 60%, black 40%) 0%,
        color-mix(in srgb, var(--color-accent) 35%, black 65%) 100%);
    box-shadow: 0 20px 50px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.promo-cta h2,
.promo-cta p {
    color: #ffffff;
}

/* Mid-page CTA banner: a lightweight, repeated call-to-action between the
   feature explanation and the audience/how-it-works sections, so visitors
   scrolling on mobile are never far from the store links. */
.promo-mid-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.5rem;
}

.promo-mid-cta p {
    margin: 0;
    font-weight: 600;
    color: var(--text-color);
}

.promo-mid-cta .btn {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .promo-mid-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* Screenshot gallery: horizontal scroll-snap on mobile, centered row on
   desktop. object-fit + a fixed aspect-ratio keep the layout stable before
   the images load (avoids layout shift) even though source screenshots
   don't all share the exact same phone aspect ratio. */
.promo-screenshots {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.25rem 1rem;
    margin: 0 -0.25rem;
}

.promo-screenshots img {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 200px;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

@media (min-width: 768px) {
    .promo-screenshots {
        justify-content: center;
        overflow-x: visible;
        flex-wrap: wrap;
    }

    .promo-screenshots img {
        width: 220px;
    }
}

/* Spacing / responsive polish ------------------------------------------ */
@media (max-width: 767.98px) {
    .promo-concept {
        flex-direction: column;
        text-align: left;
        padding: 1.1rem 1.25rem;
    }

    .promo-audience .row > div:last-child {
        margin-top: 1.5rem;
    }
}