/**
 * Landing page mobile/tablet layout (≤1024px).
 * Loaded last — overrides all generic .hero rules.
 * Activated via html.landing-hero-mobile (set in head before paint).
 */

/* Prevent horizontal overflow from orbit glow / shader on mobile browsers */
html.landing-hero-mobile {
    overflow-x: clip;
    max-width: 100%;
}

html.landing-hero-mobile body.landing-page {
    overflow-x: clip;
    max-width: 100%;
    min-height: auto;
}

/* Hidden on desktop; shown as background watermark on mobile landing */
.landing-mobile-bg-favicon {
    display: none;
}

html.landing-hero-mobile body.landing-page .landing-mobile-bg-favicon {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

html.landing-hero-mobile body.landing-page .landing-mobile-bg-favicon img {
    position: absolute;
    left: 50%;
    top: clamp(7.5rem, 28dvh, 14rem);
    transform: translate(-50%, -50%);
    width: min(52vw, 220px);
    height: min(52vw, 220px);
    object-fit: contain;
    border-radius: 50%;
    opacity: 0.22;
    filter: drop-shadow(0 0 48px rgba(249, 115, 22, 0.4)) drop-shadow(0 0 96px rgba(139, 92, 246, 0.25));
}

html.landing-hero-mobile body.landing-page .landing-nav {
    position: fixed !important;
    top: 0;
    left: 0.875rem;
    right: 0.875rem;
    width: auto;
    margin: 0;
    padding: calc(0.5rem + env(safe-area-inset-top, 0px)) 0.75rem 0.5rem 0.875rem;
    border-radius: 50px;
    border: 1px solid var(--border-glass);
    background: linear-gradient(145deg, var(--sidebar-link-bg) 0%, var(--bg-glass) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -6px 14px var(--glass-inset-dark), 0 4px 14px var(--glass-shadow);
    z-index: 1000;
}

html.landing-hero-mobile body.landing-page #landing-hero {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: calc(var(--landing-nav-offset, 3.75rem) + 0.5rem) 1rem 1rem !important;
    align-items: unset !important;
    justify-content: unset !important;
    overflow: visible !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero-content {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero-visual,
html.landing-hero-mobile body.landing-page #landing-hero .hero-orbit-visual {
    order: 0 !important;
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0.75rem auto 0.125rem !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero h1 {
    font-size: clamp(1.4375rem, 5vw, 1.875rem) !important;
    line-height: 1.12 !important;
    margin: 0 0 0.375rem !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    text-align: center !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero-content > p:not(.hero-trust) {
    font-size: 0.8125rem !important;
    line-height: 1.5 !important;
    margin: 0 0 0.625rem !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 22rem !important;
    margin: 0 auto 0.375rem !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero-buttons .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

html.landing-hero-mobile body.landing-page #landing-hero .hero-trust {
    font-size: 0.625rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 22rem !important;
    color: var(--text-muted) !important;
}

html.landing-hero-mobile body.landing-page #orbiting-skills-root.hero-orbit-mount {
    display: block !important;
    box-sizing: content-box !important;
    width: min(calc(100vw - 3rem), var(--hero-orbit-size, 220px)) !important;
    height: min(calc(100vw - 3rem), var(--hero-orbit-size, 220px)) !important;
    max-width: min(calc(100vw - 3rem), var(--hero-orbit-size, 220px)) !important;
    max-height: min(calc(100vw - 3rem), var(--hero-orbit-size, 220px)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.landing-hero-mobile body.landing-page #orbiting-skills-root.hero-orbit-mount .orbiting-skills-root {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

html.landing-hero-mobile body.landing-page #orbiting-skills-root.hero-orbit-mount .orbiting-skills-root > div,
html.landing-hero-mobile body.landing-page #orbiting-skills-root.hero-orbit-mount .orbiting-skills-root > div.relative.flex {
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tighter layout on phones (<768px) */
@media (max-width: 767px) {
    html.landing-hero-mobile body.landing-page .landing-nav {
        left: 0.625rem;
        right: 0.625rem;
        padding: calc(0.4375rem + env(safe-area-inset-top, 0px)) 0.625rem 0.4375rem 0.75rem;
    }

    html.landing-hero-mobile body.landing-page .landing-nav .logo img,
    html.landing-hero-mobile body.landing-page .landing-nav .site-logo {
        max-height: 48px;
    }

    html.landing-hero-mobile body.landing-page #landing-hero {
        padding-inline: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }

    html.landing-hero-mobile body.landing-page #landing-hero .hero-inner {
        gap: 0.875rem !important;
    }

    html.landing-hero-mobile body.landing-page #landing-hero .hero-visual,
    html.landing-hero-mobile body.landing-page #landing-hero .hero-orbit-visual {
        margin-top: 1rem !important;
    }

    html.landing-hero-mobile body.landing-page #landing-hero .hero-content {
        margin-top: 1.25rem !important;
    }

    html.landing-hero-mobile body.landing-page .landing-mobile-bg-favicon img {
        top: clamp(6.5rem, 24dvh, 12rem);
        width: min(48vw, 200px);
        height: min(48vw, 200px);
    }

    html.landing-hero-mobile body.landing-page .section {
        padding: 2.5rem 0.875rem;
    }

    html.landing-hero-mobile body.landing-page .section-subtitle {
        margin-bottom: 2rem;
    }

    html.landing-hero-mobile body.landing-page #platform .hero-bento-brand-logo {
        max-width: min(130px, 58vw) !important;
        max-height: 1.75rem !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        margin-inline: auto;
        display: block;
    }

    html.landing-hero-mobile body.landing-page #platform .hero-bento-card {
        max-width: min(100%, 20rem);
        margin-inline: auto;
    }

    html.landing-hero-mobile body.landing-page .contact-page-main,
    html.landing-hero-mobile body.landing-page .blog-page-main {
        padding-top: calc(var(--landing-nav-offset, 3.75rem) + 2rem);
    }
}