/* Mobile-First Homepage Redesign */

/* 1. Reset horizontal overflow for mobile */
html, body {
    max-width: 100vw;
}

/* 2. Compact Typography and Spacing System */
:root {
    --al-mob-pad: 12px;
    --al-mob-gap: 8px;
    --al-mob-section: 24px;
}

/* 3. Hero Section (Compact) */
@media (max-width: 768px) {
    .al-hero {
        padding: var(--al-mob-section) var(--al-mob-pad);
        min-height: auto;
        padding-top: calc(var(--al-mob-section) + 52px); /* Add space for header */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .al-hero-content {
        max-width: 100%;
        margin: 0;
        text-align: center;
        padding: 0;
    }

    .al-hero-title {
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 12px;
    }
    
    .al-hero-sub {
        font-size: 14px;
        margin-bottom: 16px;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .al-hero-ctas {
        justify-content: center;
    }

    /* Hide large visuals on mobile hero */
    .al-hero-visuals {
        display: none !important; 
    }

    /* 4. Featured Poll */
    .al-featured-mobile-poll {
        width: 100%;
        margin: 0 0 var(--al-mob-section) 0;
        padding: 0 var(--al-mob-pad);
    }

    .al-featured-mobile-poll .al-poll-main-card {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        padding: 16px;
        background: #fff;
    }

    .al-featured-mobile-poll .al-poll-card-header {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .al-featured-mobile-poll .al-poll-question {
        font-size: 18px;
        margin-bottom: 12px;
        font-weight: 700;
    }
    
    .al-featured-mobile-poll .al-btn-vote {
        width: 100%;
        margin-top: 12px;
        padding: 12px;
        font-size: 14px;
        font-weight: 600;
        background: var(--al-accent);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .al-featured-mobile-poll .al-btn-vote.voted {
        background: #f0f0f0;
        color: #555;
    }

    /* 5. 3-Column Grids for Trending and Fresh */
    .al-card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--al-mob-gap);
        padding: 0 var(--al-mob-pad);
        width: 100%;
        box-sizing: border-box;
    }

    /* Mini-Card Design */
    .al-poll-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.05);
        height: 100%;
        width: 100%;
    }

    .al-card-thumb {
        width: 100%;
        aspect-ratio: 1.35 / 1;
        position: relative;
        overflow: hidden;
        display: block;
    }

    .al-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .al-card-body {
        padding: 8px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .al-card-title {
        font-size: 12px;
        line-height: 1.3;
        margin: 4px 0;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .al-card-meta-row {
        font-size: 9px;
        color: #777;
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;
    }

    /* Inline Vote Button */
    .al-inline-vote-btn {
        margin-top: auto;
        width: 100%;
        padding: 6px 0;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        background: var(--al-accent);
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .al-inline-vote-btn:disabled {
        opacity: 0.7;
    }

    .al-inline-vote-btn.voted {
        background: #f0f0f0;
        color: #333;
    }

    /* Hide the default results visualization on mini cards before vote */
    .al-poll-card .al-card-results {
        display: none;
    }
    
    .al-poll-card.has-voted .al-card-results {
        display: block;
        margin-top: 6px;
    }
    .al-poll-card.has-voted .al-card-result-label-row {
        font-size: 9px;
    }
    .al-poll-card.has-voted .al-progress-track {
        height: 4px;
    }

    /* Override Just Added styles */
    .al-ja-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--al-mob-gap) !important;
        padding: 0 var(--al-mob-pad) !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .al-ja-card {
        display: flex !important;
        flex-direction: column;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.05);
        height: 100%;
        width: 100%;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .al-ja-thumb {
        width: 100%;
        aspect-ratio: 1.35 / 1;
        position: relative;
        overflow: hidden;
        border-radius: 0 !important;
    }
    .al-ja-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .al-ja-content {
        padding: 8px !important;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    .al-ja-category {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }

    .al-ja-card-title {
        font-size: 12px !important;
        line-height: 1.3;
        margin: 4px 0 !important;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .al-ja-meta {
        font-size: 9px !important;
        color: #777;
        margin-bottom: 6px !important;
        display: flex;
        justify-content: space-between;
        flex-direction: row !important;
        gap: 0 !important;
    }

    /* 6. Section Spacing */
    .al-section, .al-just-added-section {
        padding-top: var(--al-mob-section) !important;
        padding-bottom: var(--al-mob-section) !important;
    }
    
    .al-trending-header-wrapper, .al-ja-header-row {
        padding: 0 var(--al-mob-pad);
        margin-bottom: 12px !important;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-direction: row !important;
    }
    
    .al-trending-title, .al-ja-title {
        font-size: 18px !important;
    }
    
    .al-trending-sub, .al-ja-subtitle {
        display: none !important; /* Keep it clean */
    }
    
    .al-trending-indicator {
        font-size: 10px !important;
    }
    
    .al-trending-header-left, .al-ja-header-left {
        width: auto !important;
    }
    
    .al-trending-view-all, .al-ja-view-all {
        font-size: 12px !important;
    }

    /* 7. LovePoints Compact Banner */
    .al-lp-journey-section {
        padding: var(--al-mob-section) var(--al-mob-pad) !important;
    }
    
    .al-lp-compact-banner {
        background: linear-gradient(135deg, #E0217A, #ff4d94);
        border-radius: 12px;
        padding: 16px;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
    }
    
    .al-lp-compact-banner h3 {
        font-size: 18px;
        margin-bottom: 4px;
        font-weight: 700;
        color: #fff;
    }
    
    .al-lp-compact-banner p {
        font-size: 13px;
        color: rgba(255,255,255,0.9);
        margin-bottom: 12px;
    }
    
    .al-lp-compact-btn {
        background: #fff;
        color: var(--al-accent);
        font-size: 13px;
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 700;
        text-decoration: none;
    }
    
    /* Hide old big LP journey */
    .al-lp-container, .al-exp-container {
        display: none !important;
    }

    /* 8. FAQ Accordion */
    .al-premium-faq {
        padding: var(--al-mob-section) var(--al-mob-pad) !important;
    }
    .al-faq-container {
        flex-direction: column !important;
    }
    .al-faq-left {
        width: 100% !important;
        margin-bottom: 16px;
    }
    .al-faq-right {
        width: 100% !important;
    }
    .al-faq-title {
        font-size: 20px !important;
    }
    .al-faq-item {
        margin-bottom: 8px;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 8px;
    }
    .al-faq-trigger {
        width: 100%;
        text-align: left;
        padding: 12px;
        background: #fff;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
    }
    .al-faq-content {
        padding: 0 12px 12px 12px;
        font-size: 13px;
        color: #555;
        display: none;
    }
    .al-faq-trigger[aria-expanded="true"] + .al-faq-content {
        display: block;
    }
    .al-faq-icon-wrap .al-faq-x { display: none; }
    .al-faq-trigger[aria-expanded="true"] .al-faq-icon-wrap .al-faq-plus { display: none; }
    .al-faq-trigger[aria-expanded="true"] .al-faq-icon-wrap .al-faq-x { display: inline-block; }
    
    /* 9. Header Constraints */
    .al-header {
        height: 56px !important;
        padding: 0 var(--al-mob-pad) !important;
    }
    .al-header-container {
        height: 100% !important;
    }
    .al-logo {
        font-size: 18px !important;
    }
    
    /* Hide desktop nav links on mobile */
    .al-navbar-center, .al-header-create, .al-header-lp, .al-header-status {
        display: none !important;
    }

    /* 10. Bottom Navigation spacing */
    body {
        padding-bottom: 70px !important;
    }
    
    /* Fixed Bottom Nav */
    .al-fixed-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64px;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.08);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    
    .al-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #777;
        text-decoration: none;
        font-size: 10px;
        font-weight: 500;
        flex: 1;
        height: 100%;
    }
    
    .al-bottom-nav-item svg {
        margin-bottom: 4px;
        transition: color 0.2s;
    }
    
    .al-bottom-nav-item.active {
        color: var(--al-accent);
    }
    
    .al-bottom-nav-item.create-btn svg {
        background: var(--al-accent);
        color: #fff;
        border-radius: 50%;
        padding: 4px;
        width: 28px;
        height: 28px;
        margin-bottom: 2px;
    }
    
    /* Hide Mobile Drawer Hamburger if bottom nav is used */
    .al-header-menu-btn {
        display: none !important;
    }
    
    /* Footer */
    .al-footer {
        padding: var(--al-mob-section) var(--al-mob-pad) 80px var(--al-mob-pad) !important;
    }
}