/* ============================================
   PMLENS-Elementics — Responsive Styles
   Ref: documentation/spec-official/3.PMLENS-Elementics-theme-style-guide.md §7
   ============================================ */

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
    .core-identity {
        flex-direction: row;
    }
    .core-item {
        flex: 1;
        border-bottom: none;
        border-right: 1px solid var(--pmlens-border);
    }
    .core-item:last-child {
        border-right: none;
    }

    .main-grid {
        grid-template-columns: 1.5fr 1fr;
    }

    .book-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey-detail-layout {
        grid-template-columns: 2fr 1fr;
    }

    .footer-inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        text-align: left;
    }
    .footer-brand {
        flex: 1;
        min-width: 250px;
    }
    .footer-links {
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-sm);
    }
    .footer-copyright {
        width: 100%;
        text-align: center;
    }

}

/* --- Desktop Small (1024px+) --- */
@media (min-width: 1024px) {
    .book-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .single-post-title {
        font-size: 2.75rem;
    }

    .timeline-page-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: var(--space-2xl);
    }
}

/* --- Desktop Large (1400px+) --- */
@media (min-width: 1400px) {
    .timeline-page-layout {
        grid-template-columns: 1fr 340px;
        gap: var(--space-3xl);
    }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
    .single-post-title {
        font-size: 1.75rem;
    }
    .single-post-author {
        gap: 8px;
    }
    .single-post-author-avatar {
        width: 36px;
        height: 36px;
    }
    .single-post-nav {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .main-nav {
        display: none !important;
    }

    .hamburger {
        display: inline-flex !important;
    }

    /* Hide desktop inline search on mobile — drawer handles it */
    .header-search-desktop {
        display: none !important;
    }

    /* Hide sidebar search on mobile — drawer handles it */
    .timeline-sidebar .card:first-child,
    .timeline-sidebar .search-form {
        display: none !important;
    }

    /* Hide any stray search forms on mobile */
    .search-form {
        display: none !important;
    }

    .header-inner {
        height: 48px !important;
        padding: 0 12px !important;
    }
    .header-actions {
        gap: 2px !important;
    }

    .site-title {
        font-size: 1rem !important;
    }

    .hp-hero-wrap {
        padding: 40px 0;
    }
    .hp-hero-title {
        font-size: 1.875rem;
    }
    .hp-hero-sub {
        font-size: 1rem;
    }
    .hp-pinned {
        grid-template-columns: 1fr;
    }
    .hp-pinned-cover {
        max-width: 220px;
    }
    .hp-pinned-info h2 {
        font-size: 1.375rem;
    }

    .hp-featured-card {
    grid-template-columns: 1fr 2fr;
    }
    .hp-featured-cover {
        max-width: 200px;
    }
    .hp-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .hp-featured-row {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        margin-bottom: var(--space-3xl);
    }    
    .book-card-link {
        display:grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--space-2xl);  
    }
}

/* --- Tablet/Desktop: adjust for larger screens --- */
@media (min-width: 768px) {
    .like-buttons {
        justify-content: center;
    }
}



.mobile-menu-icon .line {
    height: 1px;
    margin-bottom:3px;
}

@media (max-width: 1220px) {
    .el-menu-box__nav .menu.nav-menu {
        display: none !important;
    }
    .el-menu-box__search {
        display: none !important;
    }
    .el-menu-box {
        padding-top: 10px !important;
        grid-template-columns: 0fr auto 1fr !important;
    }
}