/* ============================================================
   iOS App Showcase — device gallery + jump-to-section nav
   (ios-showcase.css, 2026-07-14)

   Two components:
   1. .ios-showcase  — the iPhone device gallery (reusable, 2–4 phones)
   2. .section-jump-nav — slim chip row for in-page section navigation

   Tokens: /static/styles.css :root {}
   Design: Apple-HIG / Liquid-Glass dark glass, WCAG AA contrast.
   ============================================================ */

/* ── Jump-to-section nav ─────────────────────────────────────────── */

.section-jump-nav {
    background: rgba(13, 13, 23, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    position: sticky;
    /* Sticks BELOW the .navbar (69px tall, z-index 100), not on top of it —
       was covering the entire nav (logo, dropdowns, login) for keyboard/AT
       focus (WCAG 2.4.11). z-index also dropped below the navbar's as a
       safety net if the measured height ever drifts. */
    top: 69px;
    z-index: 90;
    padding: 0 16px;
}

.section-jump-nav__inner {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 1140px;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE 11 */
    padding: 10px 0;
    /* The hidden scrollbar left NO affordance that 2/3 of the chips sit
       off-screen on phones (ultracode 2026-07-25). The right-edge fade says
       "there's more" without bringing the scrollbar back. */
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
}
@media (min-width: 1180px) {
    /* Full row fits — no fade needed on desktop. */
    .section-jump-nav__inner { -webkit-mask-image: none; mask-image: none; }
}
.section-jump-nav__inner::-webkit-scrollbar { display: none; }

.section-jump-nav__chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b4b4cc;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 14px;
    text-decoration: none;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.section-jump-nav__chip:hover,
.section-jump-nav__chip:focus-visible {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(124, 58, 237, 0.55);
    color: #c4b5fd;
}

.section-jump-nav__chip:focus-visible {
    outline: 2px solid #f5b14a;
    outline-offset: 2px;
}

.section-jump-nav__chip--active {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(124, 58, 237, 0.55);
    color: #c4b5fd;
}

html[data-theme="light"] .section-jump-nav {
    background: rgba(255, 255, 255, 0.90);
    border-bottom-color: rgba(124, 58, 237, 0.18);
}
html[data-theme="light"] .section-jump-nav__chip {
    color: #4b5563;
    border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .section-jump-nav__chip:hover,
html[data-theme="light"] .section-jump-nav__chip:focus-visible,
html[data-theme="light"] .section-jump-nav__chip--active {
    background: rgba(124, 58, 237, 0.10);
    border-color: rgba(124, 58, 237, 0.45);
    color: #5b21b6;
}

/* ── iOS App Showcase section ────────────────────────────────────── */

.ios-showcase {
    background: linear-gradient(180deg,
        #0a0a0f 0%,
        rgba(124, 58, 237, 0.06) 40%,
        #0a0a0f 100%);
    padding: 80px 0 72px;
    border-top: 1px solid rgba(124, 58, 237, 0.14);
    border-bottom: 1px solid rgba(124, 58, 237, 0.14);
}

.ios-showcase .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 64px;
    align-items: center;
    max-width: 1140px;
}

/* Left: copy column */
.ios-showcase__copy { min-width: 0; }

.ios-showcase__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.42);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 18px;
}
.ios-showcase__live-badge::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ee7b7;
    box-shadow: 0 0 6px rgba(110, 231, 183, 0.6);
    flex-shrink: 0;
}

html[data-theme="light"] .ios-showcase__live-badge {
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.45);
}
html[data-theme="light"] .ios-showcase__live-badge::before {
    background: #10b981;
    box-shadow: none;
}

.ios-showcase__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.ios-showcase__heading .grad {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ios-showcase__lead {
    font-size: 1.05rem;
    color: #c4c4d4;
    line-height: 1.65;
    margin: 0 0 24px;
}
.ios-showcase__lead strong { color: #fff; }

html[data-theme="light"] .ios-showcase__lead { color: #374151; }
html[data-theme="light"] .ios-showcase__lead strong { color: #111827; }

/* Capability list — built vs in-dev */
.ios-showcase__caps {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ios-showcase__cap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #b4b4c8;
}
.ios-showcase__cap-dot {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 1px;
    font-size: 0.65rem;
    font-weight: 800;
}
.ios-showcase__cap-dot--live {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.ios-showcase__cap-dot--dev {
    background: rgba(245, 158, 11, 0.13);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
html[data-theme="light"] .ios-showcase__cap { color: #4b5563; }
html[data-theme="light"] .ios-showcase__cap-dot--live { color: #047857; background: rgba(16,185,129,0.10); }
html[data-theme="light"] .ios-showcase__cap-dot--dev  { color: #b45309; background: rgba(245,158,11,0.12); }

.ios-showcase__dev-note {
    font-size: 0.82rem;
    color: #8585a3;
    line-height: 1.55;
    border-left: 2px solid rgba(124, 58, 237, 0.4);
    padding-left: 12px;
    margin-bottom: 28px;
}
html[data-theme="light"] .ios-showcase__dev-note { color: #595f6b; }

.ios-showcase__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Right: device gallery column */
.ios-showcase__gallery-col {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* ── Reusable .device-gallery component ──────────────────────────
   Holds 2, 3, or 4 .device-frame children in a tasteful arrangement.
   The :first-child is the "hero" phone (slightly larger, centred);
   subsequent phones tilt slightly and step back with lower z-index.
   Add more real screenshots later by dropping in extra .device-frame
   children — the gallery scales gracefully. */
.device-gallery {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;          /* overlap controlled by margin on children */
    position: relative;
}

/* First child = HERO phone — forward, upright, largest */
.device-gallery > .device-frame:first-child {
    position: relative;
    z-index: 3;
    max-width: 230px;
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.65))
            drop-shadow(0 0 0 rgba(124, 58, 237, 0));
    flex-shrink: 0;
}

/* Second child = companion phone — behind, slight tilt right, smaller */
.device-gallery > .device-frame:nth-child(2) {
    position: relative;
    z-index: 2;
    max-width: 195px;
    margin-left: -52px;
    transform: translateY(24px) rotate(5deg);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55));
    flex-shrink: 0;
    opacity: 0.90;
}

/* Third child (future): tilt left of the hero */
.device-gallery > .device-frame:nth-child(3) {
    position: relative;
    z-index: 2;
    max-width: 185px;
    margin-right: -48px;
    order: -1;        /* push to the left of the hero */
    transform: translateY(28px) rotate(-5deg);
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
    opacity: 0.88;
}

/* Fourth child: behind the companion, more tilt */
.device-gallery > .device-frame:nth-child(4) {
    position: relative;
    z-index: 1;
    max-width: 175px;
    margin-left: -48px;
    transform: translateY(36px) rotate(8deg);
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45));
    flex-shrink: 0;
    opacity: 0.80;
}

/* Screen corners already clipped by .device-frame__screen's border-radius;
   the gallery phones share the same 36px for a consistent look */
.device-gallery .device-frame__screen { border-radius: 36px; }

/* Purple ambient glow beneath the gallery */
.device-gallery::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60px;
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .ios-showcase .container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .ios-showcase__cta-row { justify-content: center; }
    .ios-showcase__caps { align-items: flex-start; }
    .ios-showcase__dev-note { text-align: left; }
    .ios-showcase__gallery-col { order: -1; }  /* gallery above copy on mobile */
}

/* Mobile gallery: stack phones with smaller max-widths */
@media (max-width: 600px) {
    .device-gallery > .device-frame:first-child { max-width: 180px; }
    .device-gallery > .device-frame:nth-child(2) {
        max-width: 150px;
        margin-left: -40px;
        transform: translateY(20px) rotate(5deg);
    }

    /* On very small screens, hide the companion phone to avoid crowding */
    @media (max-width: 420px) {
        .device-gallery > .device-frame:nth-child(2) { display: none; }
        .device-gallery > .device-frame:first-child { max-width: 220px; }
    }
}

/* Reduced motion: drop the tilt/translate */
@media (prefers-reduced-motion: reduce) {
    .device-gallery > .device-frame { transform: none !important; }
}

/* Scroll-margin so sticky jump-nav doesn't hide the section heading on jump.
   #meet-lenny already has scroll-margin-top:84px in homepage.css — not overridden. */
#ios-app       { scroll-margin-top: var(--sticky-chrome-height, 130px); }
#groupware     { scroll-margin-top: var(--sticky-chrome-height, 130px); }
#vision-system { scroll-margin-top: var(--sticky-chrome-height, 130px); }
#heard         { scroll-margin-top: var(--sticky-chrome-height, 130px); }
#travel        { scroll-margin-top: var(--sticky-chrome-height, 130px); }
#community     { scroll-margin-top: var(--sticky-chrome-height, 130px); }
#modules       { scroll-margin-top: var(--sticky-chrome-height, 130px); }

/* light theme section background */
html[data-theme="light"] .ios-showcase {
    background: linear-gradient(180deg, #f6f7f9 0%, rgba(124,58,237,0.05) 40%, #f6f7f9 100%);
    border-color: rgba(124, 58, 237, 0.12);
}