/* 
 * MOBILE PERFECTION 2026
 * Comprehensive Responsiveness for iBooKey Global
 */

/* 1. Global Reset for Mobile Overflow */
html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

.container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* 2. Responsive Typography */
h1 {
    font-size: clamp(2.2rem, 8vw, 4rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
}

h2 {
    font-size: clamp(1.8rem, 6vw, 3rem) !important;
    line-height: 1.2 !important;
}

p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* 3. Editorial Hero Responsiveness */
.editorial-hero {
    padding: 8rem 0 4rem !important;
    min-height: auto !important;
}

.editorial-hero .container>div {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    text-align: center !important;
}

.editorial-hero .container>div>div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-text-large {
    margin-bottom: 2rem !important;
}

.hero-visual-abstract {
    height: 350px !important;
    margin-top: 2rem !important;
}

.hero-visual-card {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 280px !important;
}

/* 4. Metrics Strip stacking */
.editorial-hero .container>div:last-child {
    flex-direction: column !important;
    gap: 3rem !important;
    align-items: center !important;
    text-align: center !important;
}

.editorial-hero .container>div:last-child>div {
    display: flex;
    flex-direction: column;
    gap: 2rem !important;
}

/* 5. Strategic Philosophy & About Page Elements */
.stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 2rem 0 !important;
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

.article-container {
    padding: 6rem 20px 4rem !important;
}

.article-title {
    font-size: 2.2rem !important;
}

.pullquote {
    margin: 3rem 0 !important;
    padding: 2rem 0 !important;
    font-size: 1.5rem !important;
}

.article-body h2 {
    font-size: 1.8rem !important;
    margin-top: 3rem !important;
}

/* 5. Strategic Philosophy */
section[style*="background: var(--lux-off-white)"] h2 {
    font-size: 2.2rem !important;
}

section[style*="background: var(--lux-off-white)"] p {
    font-size: 1.6rem !important;
}

section[style*="background: var(--lux-off-white)"] div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

/* 6. Podcast Section Fixes */
.podcast-hero .container>div {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    text-align: center !important;
}

.podcast-hero div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 1rem !important;
}

.podcast-hero .btn-platform {
    width: 100% !important;
    justify-content: center !important;
}

section[style*="padding: 10rem 0"] .container>h2.section-title+div {
    grid-template-columns: 1fr !important;
}

/* 7. Contact Page Fixes */
.contact-hero {
    padding: 8rem 0 4rem !important;
}

.form-card {
    padding: 2.5rem !important;
    margin-top: -2rem !important;
}

.form-card form>div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

section[style*="padding-bottom: 12rem"] .container>div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    text-align: center !important;
}

/* 6. Gray-Gold Frame (Podcast) */
.gray-gold-frame .container {
    grid-template-columns: 1fr !important;
    gap: 4rem !important;
}

.podcast-cover-art {
    width: 100% !important;
    max-width: 350px !important;
    height: 450px !important;
    margin: 0 auto !important;
}

/* 7. Methodology Overdrive */
section[style*="background: #fcfcfc"] .container>div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

section[style*="background: #fcfcfc"] .container>div[style*="display: grid"]>div:first-child {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
}

/* 8. Global Dynamics (SVG fixes) */
.viz-wrapper {
    height: 500px !important;
}

.hub-main {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Hide other hubs on small mobile or stack them */
@media (max-width: 600px) {
    .hub-point:not(.hub-main) {
        display: none !important;
    }

    .arc-line {
        display: none !important;
    }
}

.global-dynamics-section .container>div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
}

/* 9. Header Mobile Adjustments */
@media (max-width: 1024px) {
    #main-nav {
        display: none !important;
    }

    .site-header .container {
        padding: 0 20px !important;
    }

    .header-cta-luxury {
        padding: 10px 20px !important;
        font-size: 10px !important;
    }
}

/* Mobile Toggle Styles */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 12000;
}

.mobile-toggle span {
    width: 25px;
    height: 2px;
    background: #111;
    transition: 0.3s;
}

@media (max-width: 1024px) {
    .mobile-toggle {
        display: flex;
    }
}

/* 10. Mobile Menu Panel */
#mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    z-index: 11500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 6rem 2rem 2rem;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu-overlay.active {
    transform: translateY(0);
}

#mobile-menu-overlay a {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #111;
    text-decoration: none;
    text-transform: uppercase;
    font-style: italic;
}

/* 11. Generic Grid Stack for Mobile */
@media (max-width: 991px) {

    div[style*="display: grid"][style*="grid-template-columns: repeat(2, 1fr)"],
    div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    div[style*="display: grid"][style*="grid-template-columns: 1fr 2fr"],
    div[style*="display: grid"][style*="grid-template-columns: 1.2fr 0.8fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Footer Fix for 4-column Grid */
    .site-footer .container>div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        margin-bottom: 4rem !important;
        text-align: center;
    }

    .site-footer p {
        margin: 0 auto 2rem !important;
    }

    .site-footer .footer-link {
        justify-content: center;
        text-align: center;
    }
}