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

   .ios-showcase — the iPhone device gallery (reusable, 2–4 phones)

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

/* ── 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.75rem; /* >=12px floor for low-vision (was 10.4px) */
    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 (≤700px): the desktop "fan" of overlapping, rotated phones
   collides on a phone — the long device captions crush into a narrow strip
   beside the phones (Joe's 2026-08-03 mobile report). Stack the phones cleanly
   in a vertical column: no overlap, no rotation, each phone centred with its
   caption directly below it, caption width clamped to the viewport.
   Breakpoint 1280px: the desktop "fan" of rotated phones + captions over-runs its
   half-column by ~40px at every width — only wide-desktop page margins (≥1281px)
   absorb that without a sideways scroll (71px scroll at 1024, 22px at 1180 were the
   symptoms, 2026-08-03). So stack cleanly for everything up to large desktop. */
@media (max-width: 1280px) {
    .device-gallery {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .device-gallery > .device-frame,
    .device-gallery > .device-frame:first-child,
    .device-gallery > .device-frame:nth-child(2),
    .device-gallery > .device-frame:nth-child(3),
    .device-gallery > .device-frame:nth-child(4) {
        position: static;
        order: 0;
        max-width: 230px;
        width: 100%;
        margin: 0;
        transform: none;
        opacity: 1;
        z-index: auto;
        display: block;   /* un-hide any phone hidden by the old fan rules */
        flex-shrink: 1;
    }
    .device-frame__caption { max-width: min(320px, 86vw) !important; }
    .device-gallery::after { display: none; }  /* drop the fan's ambient glow blob */
}

/* 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);
}