.elementor-8281 .elementor-element.elementor-element-b188986{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-42px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8281 .elementor-element.elementor-element-ce0a096{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.82;--margin-top:-55px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:63px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8281 .elementor-element.elementor-element-ce0a096:not(.elementor-motion-effects-element-type-background), .elementor-8281 .elementor-element.elementor-element-ce0a096 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-8281 .elementor-element.elementor-element-ce0a096::before, .elementor-8281 .elementor-element.elementor-element-ce0a096 > .elementor-background-video-container::before, .elementor-8281 .elementor-element.elementor-element-ce0a096 > .e-con-inner > .elementor-background-video-container::before, .elementor-8281 .elementor-element.elementor-element-ce0a096 > .elementor-background-slideshow::before, .elementor-8281 .elementor-element.elementor-element-ce0a096 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8281 .elementor-element.elementor-element-ce0a096 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(354deg, #02010100 47%, #000000 100%);}.elementor-8281 .elementor-element.elementor-element-5cc94b1{--display:flex;--min-height:658px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:1;--margin-top:-61px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8281 .elementor-element.elementor-element-5cc94b1:not(.elementor-motion-effects-element-type-background), .elementor-8281 .elementor-element.elementor-element-5cc94b1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ankidacomic.com/wp-content/uploads/2026/03/Wow_signal.jpg");background-position:center center;background-size:cover;}.elementor-8281 .elementor-element.elementor-element-5cc94b1::before, .elementor-8281 .elementor-element.elementor-element-5cc94b1 > .elementor-background-video-container::before, .elementor-8281 .elementor-element.elementor-element-5cc94b1 > .e-con-inner > .elementor-background-video-container::before, .elementor-8281 .elementor-element.elementor-element-5cc94b1 > .elementor-background-slideshow::before, .elementor-8281 .elementor-element.elementor-element-5cc94b1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-8281 .elementor-element.elementor-element-5cc94b1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, #02010100 0%, #000000 86%);}.elementor-8281 .elementor-element.elementor-element-3aa5a6d{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-8281 .elementor-element.elementor-element-3aa5a6d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8281 .elementor-element.elementor-element-bf5ce1c{text-align:center;}.elementor-8281 .elementor-element.elementor-element-bf5ce1c .elementor-heading-title{font-family:"futura-pt", Poppins;font-size:60px;font-weight:500;letter-spacing:10px;}.elementor-8281 .elementor-element.elementor-element-e6698a4{width:var( --container-widget-width, 82.342% );max-width:82.342%;--container-widget-width:82.342%;--container-widget-flex-grow:0;text-align:center;}.elementor-8281 .elementor-element.elementor-element-e6698a4 > .elementor-widget-container{padding:0px 0px 11px 0px;}.elementor-8281 .elementor-element.elementor-element-e6698a4.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-8281 .elementor-element.elementor-element-e6698a4 .elementor-heading-title{font-family:"futura-pt", Poppins;font-size:19px;}.elementor-8281 .elementor-element.elementor-element-e3596c7{--divider-border-style:solid;--divider-color:#05E2C1;--divider-border-width:5px;}.elementor-8281 .elementor-element.elementor-element-e3596c7 .elementor-divider-separator{width:20%;margin:0 auto;margin-center:0;}.elementor-8281 .elementor-element.elementor-element-e3596c7 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-8281 .elementor-element.elementor-element-6bcd70d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-8px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8281 .elementor-element.elementor-element-6bcd70d:not(.elementor-motion-effects-element-type-background), .elementor-8281 .elementor-element.elementor-element-6bcd70d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-8281 .elementor-element.elementor-element-6bcd70d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8281 .elementor-element.elementor-element-3ffc0c2 .elementor-button{background-color:transparent;fill:#000000;color:#000000;background-image:linear-gradient(180deg, #02010100 0%, #F2295B00 100%);border-style:solid;border-width:2px 2px 2px 2px;border-color:#000000;border-radius:0px 0px 0px 0px;padding:8px 8px 8px 8px;}.elementor-8281 .elementor-element.elementor-element-3ffc0c2{width:auto;max-width:auto;}@media(min-width:768px){.elementor-8281 .elementor-element.elementor-element-3aa5a6d{--width:51.31%;}.elementor-8281 .elementor-element.elementor-element-6bcd70d{--width:100%;}}@media(max-width:1024px){.elementor-8281 .elementor-element.elementor-element-5cc94b1{--min-height:730px;}.elementor-8281 .elementor-element.elementor-element-bf5ce1c .elementor-heading-title{font-size:40px;}.elementor-8281 .elementor-element.elementor-element-e6698a4 .elementor-heading-title{font-size:17px;}}@media(max-width:767px){.elementor-8281 .elementor-element.elementor-element-5cc94b1{--min-height:693px;}.elementor-8281 .elementor-element.elementor-element-bf5ce1c .elementor-heading-title{font-size:30px;}.elementor-8281 .elementor-element.elementor-element-e6698a4 .elementor-heading-title{font-size:15px;}}/* Start custom CSS for html, class: .elementor-element-e985b73 */<div class="archive-glass-layout">
    <aside class="glass-sidebar">
        <h2 class="sidebar-title">Archive</h2>
        
        <div class="search-box-min">
            <svg class="s-icon" width="16" height="16" viewBox="0 0 20 20" fill="none">
                <circle cx="9" cy="9" r="7" stroke="white" stroke-width="2"/>
                <path d="M14 14L18 18" stroke="white" stroke-width="2"/>
            </svg>
            <input type="text" id="archiveSearch" placeholder="Find by title or date..." onkeyup="filterArchive()">
        </div>

        <div class="timeline-header">
            <span class="label">Date</span>
            <button id="resetGrid" onclick="restoreFullGrid()" style="display:none; background:none; border:none; color:#00d4bd; font-size:10px; cursor:pointer; font-weight:700; padding:0; text-transform:uppercase;">
                ← Show All
            </button>
            <select id="sortToggle" onchange="buildSidebar()">
                <option value="newest">Newest</option>
                <option value="oldest">Oldest</option>
            </select>
        </div>

        <ul id="sidebarTimeline" class="sidebar-list"></ul>
    </aside>

    <main class="grid-area">
        <div id="gridContainer">
            [archive_grid cat="the-beacon"]
        </div>

        <div id="archivePagination" class="pagination-container"></div>
    </main>
</div>

<style>
    /* 1. BASE LAYOUT */
    .archive-glass-layout { 
        display: grid; 
        grid-template-columns: 320px 1fr; 
        background: #000; 
        min-height: auto !important; 
        font-family: "futura-pt", sans-serif !important; 
    }

    .glass-sidebar { 
        padding: 50px 30px; 
        border-right: 1px solid #111; 
        position: sticky; 
        top: 0; 
        height: 100vh; 
        box-sizing: border-box; 
        z-index: 10; 
    }
    
    .sidebar-title { color: #fff; font-size: 38px; margin-bottom: 30px; font-weight: 500; letter-spacing: -0.02em; }
    
    .search-box-min { position: relative; margin-bottom: 40px; }
    .s-icon { position: absolute; left: 12px; top: 12px; opacity: 0.5; }
    #archiveSearch { 
        width: 100%; background: #0f0f0f; border: 1px solid #222; 
        padding: 12px 10px 12px 40px; border-radius: 6px; color: #fff; 
        outline: none; font-family: "futura-pt", sans-serif; 
    }

    .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .label { color: #444; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
    #sortToggle { background: transparent; color: #666; border: none; font-size: 10px; text-transform: uppercase; cursor: pointer; }

    .sidebar-list { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; }
    .sidebar-list::-webkit-scrollbar { width: 3px; }
    .sidebar-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
    .sidebar-item { padding: 15px 0; border-bottom: 1px solid #111; cursor: pointer; }
    .s-date { color: #00d4bd; font-size: 9px; font-weight: 800; display: block; margin-bottom: 4px; text-transform: uppercase; }
    .s-title { color: #888; font-size: 14px; transition: 0.3s; font-weight: 400; }
    .sidebar-item:hover .s-title { color: #fff; }

    /* 2. GRID SYSTEM - FORCED TIGHTNESS */
    .grid-area { 
        padding: 60px 40px 20px 40px !important; /* Reduced bottom padding */
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: flex-start !important;
        height: auto !important;
    }
    
    #gridContainer { 
        width: 100%; 
        max-width: 1300px; 
        margin-bottom: 0px !important; /* Removed gap below grid */
        flex-grow: 0 !important;
    }

    #gridContainer > div, 
    .natgeo-grid { 
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 30px; 
        width: 100%; 
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 3. CARD FORMATTING (Kept original) */
    .natgeo-card { 
        background: rgba(255, 255, 255, 0.03); 
        border: 1px solid rgba(255, 255, 255, 0.1); 
        backdrop-filter: blur(15px); 
        border-radius: 8px; 
        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }
    
    .natgeo-card:hover { transform: translateY(-10px); border-color: rgba(0, 212, 189, 0.3); background: rgba(255, 255, 255, 0.06); }
    .card-img-container { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #111; position: relative; }
    .card-img-container img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
    .card-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
    .card-title-text { color: #fff; font-size: 20px; line-height: 1.3; margin: 0 0 20px 0; font-weight: 500; letter-spacing: -0.01em; }
    .card-footer-action { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 15px; color: #888; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; }

    /* 4. ENHANCED PAGINATION - SNAPPED */
    .pagination-container { 
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important; 
        gap: 12px; 
        margin-top: 15px !important; /* Tightened gap to card grid */
        padding-top: 0 !important;
        padding-bottom: 60px; 
        width: 100%;
    }

    .page-btn { 
        background: #111; border: 1px solid #222; color: #555; 
        padding: 10px 18px; cursor: pointer; border-radius: 50px; 
        font-size: 13px; font-weight: 700; transition: 0.3s;
        min-width: 45px;
    }
    .page-btn:hover:not(:disabled) { border-color: #444; color: #fff; }
    .page-btn.active { border-color: #00d4bd; color: #00d4bd; background: #000; box-shadow: inset 0 0 8px rgba(0, 212, 189, 0.1); }
    .page-btn:disabled { opacity: 0.15; cursor: not-allowed; }
    .page-dots { color: #333; font-weight: 900; letter-spacing: 2px; }

    /* RESPONSIVE (Kept original) */
    @media (max-width: 1100px) { #gridContainer > div, .natgeo-grid { grid-template-columns: repeat(2, 1fr) !important; } }
    @media (max-width: 768px) {
        .archive-glass-layout { display: flex; flex-direction: column; }
        .glass-sidebar { width: 100% !important; height: auto; position: relative; border-right: none; border-bottom: 1px solid #111; }
        #gridContainer > div, .natgeo-grid { grid-template-columns: 1fr !important; }
        .grid-area { padding: 30px 20px; }
    }
</style>

<script>
let currentPage = 1;
const postsPerPage = 9; 
let originalGridSnapshot = ''; 

function buildSidebar() {
    const list = document.getElementById('sidebarTimeline');
    const cards = Array.from(document.querySelectorAll('.natgeo-card'));
    const sort = document.getElementById('sortToggle').value;
    if(sort === 'oldest') cards.reverse();
    list.innerHTML = '';
    cards.forEach(card => {
        const li = document.createElement('li');
        li.className = 'sidebar-item';
        // Logic to find title from your specific card structure
        const titleText = card.querySelector('.card-title-text').innerText;
        const dateText = card.querySelector('.card-meta span').innerText;
        li.innerHTML = `<span class="s-date">${dateText}</span><span class="s-title">${titleText}</span>`;
        li.onclick = () => isolateChosenCard(card);
        list.appendChild(li);
    });
}

function updateGridView() {
    const cards = Array.from(document.querySelectorAll('.grid-item-wrapper'));
    const start = (currentPage - 1) * postsPerPage;
    const end = start + postsPerPage;

    cards.forEach((card, index) => {
        card.style.display = (index >= start && index < end) ? 'block' : 'none';
    });
    handlePagination();
}

function handlePagination() {
    const cards = Array.from(document.querySelectorAll('.grid-item-wrapper'));
    const totalPages = Math.ceil(cards.length / postsPerPage);
    const container = document.getElementById('archivePagination');
    container.innerHTML = '';
    if (totalPages <= 1) return;

    const range = 1;
    const prevBtn = document.createElement('button');
    prevBtn.innerHTML = '←'; prevBtn.className = 'page-btn';
    prevBtn.disabled = (currentPage === 1);
    prevBtn.onclick = () => { currentPage--; updateGridView(); };
    container.appendChild(prevBtn);

    for (let i = 1; i <= totalPages; i++) {
        if (i === 1 || i === totalPages || (i >= currentPage - range && i <= currentPage + range)) {
            const btn = document.createElement('button');
            btn.innerText = i;
            btn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
            btn.onclick = () => { currentPage = i; updateGridView(); };
            container.appendChild(btn);
        } else if (i === currentPage - range - 1 || i === currentPage + range + 1) {
            const dots = document.createElement('span');
            dots.innerText = '...'; dots.className = 'page-dots';
            container.appendChild(dots);
        }
    }

    const nextBtn = document.createElement('button');
    nextBtn.innerHTML = '→'; nextBtn.className = 'page-btn';
    nextBtn.disabled = (currentPage === totalPages);
    nextBtn.onclick = () => { currentPage++; updateGridView(); };
    container.appendChild(nextBtn);
}

function filterArchive() {
    let val = document.getElementById('archiveSearch').value.toLowerCase();
    const wrappers = document.querySelectorAll('.grid-item-wrapper');
    const pag = document.getElementById('archivePagination');
    if (val === "") {
        restoreFullGrid();
    } else {
        pag.style.display = 'none';
        wrappers.forEach(wrap => {
            const match = wrap.innerText.toLowerCase().includes(val);
            wrap.style.display = match ? 'block' : 'none';
        });
    }
}

function isolateChosenCard(selectedCard) {
    const gridContainer = document.getElementById('gridContainer');
    const pagination = document.getElementById('archivePagination');
    const resetBtn = document.getElementById('resetGrid');
    if (!originalGridSnapshot) originalGridSnapshot = gridContainer.innerHTML;
    gridContainer.innerHTML = '';
    pagination.style.display = 'none';
    const cardClone = selectedCard.closest('.grid-item-wrapper').cloneNode(true);
    cardClone.style.display = 'block'; 
    gridContainer.appendChild(cardClone);
    if(resetBtn) resetBtn.style.display = 'block';
}

function restoreFullGrid() {
    const gridContainer = document.getElementById('gridContainer');
    const pagination = document.getElementById('archivePagination');
    const resetBtn = document.getElementById('resetGrid');
    if (originalGridSnapshot) {
        gridContainer.innerHTML = originalGridSnapshot;
        pagination.style.display = 'flex';
        resetBtn.style.display = 'none';
        updateGridView(); 
    }
}

window.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        buildSidebar();
        updateGridView(); 
    }, 500);
});
</script>/* End custom CSS */