@extends('layout.app')
@section('content')
    <style>
        /* Upwork Premium Minimalist Scrollbar Design */
        .upwork-custom-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .upwork-custom-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .upwork-custom-scroll::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.08);
            border-radius: 20px;
        }
        .upwork-custom-scroll::-webkit-scrollbar-thumb:hover {
            background: #FF7101;
        }

        /* Smooth hardware-accelerated cubic transitions for elite UX feel */
        .drawer-transition {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
    </style>

    <!-- ========== Breadcrumb Section Start ========== -->
    <div class="container py-12">
        <div class="breadcrumb">
            <ul>
                <li>
                    <a href='/'>
                    <span class="inline-flex items-center justify-center">
                        <i class="hgi hgi-stroke hgi-home-01 text-[20px] leading-5"></i>
                    </span>Home
                    </a>
                </li>
                <li class="text-light-disabled-text">&#8226;</li>
                <li><span class="text-sm! leading-[22px]!">Blog page</span></li>
            </ul>
        </div>
    </div>
    <!-- ========== Breadcrumb Section End ========== -->

    <!-- ========== Blog Grid Section Start ========== -->
    <div class="pb-12">
        <div class="container">
            <div class="grid grid-cols-12 gap-6">
                <div class="xl:col-span-12 col-span-12">
                    <div class="flex items-center justify-between mb-12 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                        <div class="flex items-center gap-x-4">
                            <a href="#" class="w-10 h-10 rounded-full inline-flex items-center justify-center bg-primary cursor-pointer">
                            <span class="inline-flex items-center justify-center">
                                <i class="hgi hgi-stroke hgi-left-to-right-list-bullet text-2xl leading-6 text-white"></i>
                            </span>
                            </a>
                        </div>
                        <!-- sorting -->
                        <div class="relative min-w-[100px]">
                            <select id="sorting" class="filter-select label">
                                <option value="newest" selected>Newest First</option>
                                <option value="oldest">Oldest First</option>
                                <option value="most-viewed">Most Viewed</option>
                                <option value="most-commented">Most Commented</option>
                                <option value="a-z-order">A-Z Order</option>
                                <option value="z-a-order">Z-A Order</option>
                            </select>
                            <label for="sorting" class="nice-select-label">Sorting</label>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-y-6 pb-12">
                        <!-- Blog Card 1 -->
                        <div class="col-span-1 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            <div class="border border-gray-300 rounded-2xl p-6 hover:transform hover:translate-y-[-5px] hover:transition-all hover:ease-[cubic-bezier(0.02,0.01,0.47,1)] hover:duration-250 transition-all ease-[cubic-bezier(0.02,0.01,0.47,1)] duration-250 blog-single-item">
                                <div class="flex items-center flex-col lg:flex-row gap-10">
                                    <div class="w-full lg:max-w-[500px] h-[380px] blog-single-item-thumbnail">
                                        <img src="{{asset('assets/images/blog/bl01.jpg')}}" alt="blog-list-image" class="rounded-2xl w-full h-full object-cover"/>
                                    </div>
                                    <div class="flex flex-col gap-y-6 flex-1">
                                        <div class="flex flex-col gap-y-3 md:flex-row divide-x-0 md:divide-x divide-[rgba(145,158,171,0.24)]">
                                            <p class="text-light-secondary-text text-sm leading-[22px] inline-flex items-center gap-x-2 pr-0 md:pr-3 blog-single-item-post-time">
                                            <span class="inline-flex items-center justify-center">
                                                <i class="hgi hgi-stroke hgi-calendar-03 text-base leading-4 text-light-secondary-text"></i>
                                            </span>
                                                <span>12:40 PM, 15 May 2026</span>
                                            </p>
                                            <p class="text-light-secondary-text text-sm leading-[22px] inline-flex items-center gap-x-2 pl-0 md:pl-3 blog-single-item-comment">
                                            <span class="inline-flex items-center justify-center">
                                                <i class="hgi hgi-stroke hgi-chatting-01 text-base text-light-secondary-text"></i>
                                            </span>
                                                <span>Comment</span>
                                                <span>(10)</span>
                                            </p>
                                        </div>
                                        <div>
                                            <h5 class="text-light-primary-text hover:text-primary transition-colors duration-300 ease-in-out cursor-pointer mb-3 text-xl font-bold blog-single-item-title">
                                                Why Durability Beats Trends (Every Time)
                                            </h5>
                                            <p class="mb-5 line-clamp-3 text-gray-600 blog-single-item-description">
                                                Fast fashion runs on a simple promise: cheap clothes today, throw them away tomorrow. Three washes later, the fabric pills, the seams split, and the color fades.
                                            </p>
                                            <a class="btn btn-primary btn-large rounded-[60px] group py-2 pl-6 pr-3 gap-x-[18px] inline-flex items-center cursor-pointer select-none" data-blog-id="0">
                                                Read More
                                                <span class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                                <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                            </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Blog Card 2 -->
                        <div class="col-span-1 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            <div class="border border-gray-300 rounded-2xl p-6 hover:transform hover:translate-y-[-5px] hover:transition-all hover:ease-[cubic-bezier(0.02,0.01,0.47,1)] hover:duration-250 transition-all ease-[cubic-bezier(0.02,0.01,0.47,1)] duration-250 blog-single-item">
                                <div class="flex items-center flex-col lg:flex-row gap-10">
                                    <div class="w-full lg:max-w-[500px] h-[380px] blog-single-item-thumbnail">
                                        <img src="{{asset('assets/images/blog/bl02.jpg')}}" alt="blog-list-image" class="rounded-2xl w-full h-full object-cover"/>
                                    </div>
                                    <div class="flex flex-col gap-y-6 flex-1">
                                        <div class="flex flex-col gap-y-3 md:flex-row divide-x-0 md:divide-x divide-[rgba(145,158,171,0.24)]">
                                            <p class="text-light-secondary-text text-sm leading-[22px] inline-flex items-center gap-x-2 pr-0 md:pr-3 blog-single-item-post-time">
                                            <span class="inline-flex items-center justify-center">
                                                <i class="hgi hgi-stroke hgi-calendar-03 text-base leading-4 text-light-secondary-text"></i>
                                            </span>
                                                <span>12:40 PM, 15 May 2026</span>
                                            </p>
                                            <p class="text-light-secondary-text text-sm leading-[22px] inline-flex items-center gap-x-2 pl-0 md:pl-3 blog-single-item-comment">
                                            <span class="inline-flex items-center justify-center">
                                                <i class="hgi hgi-stroke hgi-chatting-01 text-base text-light-secondary-text"></i>
                                            </span>
                                                <span>Comment</span>
                                                <span>(24)</span>
                                            </p>
                                        </div>
                                        <div>
                                            <h5 class="text-light-primary-text hover:text-primary transition-colors duration-300 ease-in-out cursor-pointer mb-3 text-xl font-bold blog-single-item-title">
                                                Dressing For Confidence – No Caps Needed
                                            </h5>
                                            <p class="mb-5 line-clamp-3 text-gray-600 blog-single-item-description">
                                                There is a term psychologists use: enclothed cognition. It means the clothes you wear change how your brain works. Put on a stiff suit, and you think more abstractly.
                                            </p>
                                            <a class="btn btn-primary btn-large rounded-[60px] group py-2 pl-6 pr-3 gap-x-[18px] inline-flex items-center cursor-pointer select-none" data-blog-id="1">
                                                Read More
                                                <span class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                                <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                            </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Blog Card 3 -->
                        <div class="col-span-1 wow animate__animated animate__fadeInUp" data-wow-delay="0.2s">
                            <div class="border border-gray-300 rounded-2xl p-6 hover:transform hover:translate-y-[-5px] hover:transition-all hover:ease-[cubic-bezier(0.02,0.01,0.47,1)] hover:duration-250 transition-all ease-[cubic-bezier(0.02,0.01,0.47,1)] duration-250 blog-single-item">
                                <div class="flex items-center flex-col lg:flex-row gap-10">
                                    <div class="w-full lg:max-w-[500px] h-[380px] blog-single-item-thumbnail">
                                        <img src="{{asset('assets/images/blog/bl03.jpg')}}" alt="blog-list-image" class="rounded-2xl w-full h-full object-cover"/>
                                    </div>
                                    <div class="flex flex-col gap-y-6 flex-1">
                                    <span class="w-fit text-warning-dark bg-[rgba(255,193,7,0.16)] px-2 py-px inline-flex rounded-full text-xs leading-[18px] blog-single-item-category">
                                        Category Name
                                    </span>
                                        <div class="flex flex-col gap-y-3 md:flex-row divide-x-0 md:divide-x divide-[rgba(145,158,171,0.24)]">
                                            <p class="text-light-secondary-text text-sm leading-[22px] inline-flex items-center gap-x-2 pr-0 md:pr-3 blog-single-item-post-time">
                                            <span class="inline-flex items-center justify-center">
                                                <i class="hgi hgi-stroke hgi-calendar-03 text-base leading-4 text-light-secondary-text"></i>
                                            </span>
                                                <span>12:40 PM, 09 Feb 2027</span>
                                            </p>
                                            <p class="text-light-secondary-text text-sm leading-[22px] inline-flex items-center gap-x-2 pl-0 md:pl-3 blog-single-item-comment">
                                            <span class="inline-flex items-center justify-center">
                                                <i class="hgi hgi-stroke hgi-chatting-01 text-base text-light-secondary-text"></i>
                                            </span>
                                                <span>Comment</span>
                                                <span>(04)</span>
                                            </p>
                                        </div>
                                        <div>
                                            <h5 class="text-light-primary-text hover:text-primary transition-colors duration-300 ease-in-out cursor-pointer mb-3 text-xl font-bold blog-single-item-title">
                                                How To Care For Your Apparel (Because They Work)
                                            </h5>
                                            <p class="mb-5 line-clamp-3 text-gray-600 blog-single-item-description">
                                                Your clothes put in the hours. Denim that outlasts seasons. Tees that hold their shape. Sneakers that keep gripping. In return, they need one thing: proper care.
                                            </p>
                                            <a class="btn btn-primary btn-large rounded-[60px] group py-2 pl-6 pr-3 gap-x-[18px] inline-flex items-center cursor-pointer select-none" data-blog-id="2">
                                                Read More
                                                <span class="size-8 bg-white inline-flex items-center justify-center rounded-full rotate-[-40deg] transform group-hover:rotate-0 transition-all duration-300">
                                                <i class="hgi hgi-stroke hgi-arrow-right-02 text-xl text-primary-darker"></i>
                                            </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- =================================================== -->
    <!-- UPWORK NATIVE DASHBOARD STYLE SIDE SHEET DRAWER   -->
    <!-- =================================================== -->
    <div id="blogModal" class="fixed inset-0 flex justify-end" style="display: none; opacity: 0; transition: opacity 0.25s ease; z-index: 999">

        <!-- Premium Backdrop Matte Overlay -->
        <div id="modalOverlay" class="absolute inset-0 bg-black/30 backdrop-blur-[3px]"></div>

        <!-- Right Side Attached Sheet Layout (Clean Upwork Specs) -->
        <div id="modalBox" class="relative bg-white w-full max-w-xl h-full shadow-[-10px_0_40px_rgba(0,0,0,0.08)] flex flex-col z-10 transform translate-x-full drawer-transition border-l border-gray-100">

            <!-- Sticky Top Workspace Navigation Bar -->
            <div class="px-6 py-5 flex items-center justify-between border-b border-gray-100 bg-white sticky top-0 z-20">
                <div class="flex items-center gap-x-2.5">
                    <span class="h-2 w-2 rounded-full bg-[#f15a24] animate-pulse"></span>
                    <span class="text-[11px] font-bold uppercase tracking-widest font-mono" style="color: #f15a24">Blog Details</span>
                </div>
                <!-- Sleek Interactive Upwork Control Toggle Button -->
                <button id="closeModalBtn" class="p-2 text-gray-400 hover:text-[#f15a24] hover:bg-orange-50 rounded-xl transition-all border border-transparent hover:border-orange-100">
                    <i class="hgi hgi-stroke hgi-close-01 text-lg"></i>
                </button>
            </div>

            <!-- Scrollable Workspace Canvas -->
            <div class="p-6 md:p-8 overflow-y-auto flex-1 upwork-custom-scroll space-y-8 bg-white">

                <!-- Main Header Node Layout -->
                <div class="space-y-3">
                    <h2 id="modalHeader" class="text-xl md:text-2xl font-bold tracking-tight leading-tight" style="color: #f15a24">
                        Main Blog Title
                    </h2>
                    <div class="w-12 h-[2px] bg-[#f15a24]"></div>
                </div>

                <!-- Primary Analytical Content Segment -->
                <div class="text-sm text-gray-700 leading-7 font-normal">
                    <p id="modalDescription" class="whitespace-pre-line"></p>
                </div>

                <!-- Structural Grid Sections For Advanced Parameters -->
                <div class="space-y-6 pt-4 border-t border-gray-100">

                    <!-- Parameter Block 1 -->
                    <div id="section1" class="space-y-2 transition-all">
                        <h4 id="modalSubHeader" class="text-xs font-bold tracking-wide uppercase" style="color: var(--color-primary)">Sub Header 1</h4>
                        <p id="modalSubDescription" class="text-sm text-gray-500 leading-6 whitespace-pre-line"></p>
                    </div>

                    <!-- Parameter Block 2 -->
                    <div id="section2" class="space-y-2 transition-all pt-4 border-t border-gray-50">
                        <h4 id="modalSubHeader2" class="text-xs font-bold tracking-wide uppercase" style="color: var(--color-primary)">Sub Header 2</h4>
                        <p id="modalSubDescription2" class="text-sm text-gray-500 leading-6 whitespace-pre-line"></p>
                    </div>

                    <!-- Parameter Block 3 -->
                    <div id="section3" class="space-y-2 transition-all pt-4 border-t border-gray-50">
                        <h4 id="modalSubHeader3" class="text-xs font-bold tracking-wide uppercase" style="color: var(--color-primary)">Sub Header 3</h4>
                        <p id="modalSubDescription3" class="text-sm text-gray-500 leading-6 whitespace-pre-line"></p>
                    </div>
                </div>
            </div>

            <!-- Absolute Base Control Drawer Footer -->
            <div class="px-6 py-4 bg-gray-50/80 border-t border-gray-100 flex justify-end gap-x-3 items-center sticky bottom-0 bg-white z-20">
                <button id="closeModalFooterBtn" style="color: white; background: var(--color-primary)" class="px-5 py-2.5 hover:bg-[#f15a24] text-white font-medium text-xs uppercase tracking-wider rounded-lg transition-all duration-150 shadow-sm">
                    Dismiss View
                </button>
            </div>
        </div>
    </div>@endsection

@push('scripts')
    <script>
        const staticBlogsData = [
            {
                header: "Why Durability Beats Trends (Every Time)",
                description: "Fast fashion runs on a simple promise: cheap clothes today, throw them away tomorrow. Three washes later, the fabric pills, the seams split, and the color fades. You buy another shirt and the cycle repeats, slowly draining your wallet one twenty-dollar bill at a time. The problem is not the price tag. The problem is the replacement rate. When a garment fails after a few weeks, you are not saving money. You are renting clothes at a terrible rate.",
                subHeader: "The Math of Quality",
                subDescription: "Let us calculate what you actually pay. Cost-Per-Wear (CPW) is simple: price divided by the number of times you wear the item. Here is how cheap clothes compare to durable ones.\n\nItem | Purchase Price | Est. Wears | Cost-Per-Wear\nTrend T-Shirt | $20 | 5 | $4.00\nDurable T-Shirt | $50 | 100 | $0.50\nBudget Jeans | $40 | 24 | $1.66\nPremium Denim | $120 | 156 | $0.77\n\nThe expensive shirt is cheaper by a factor of eight. The durable jeans cost less than half per wear. Every time you replace a failed garment, you pay again. Durability is not a luxury. It is a discount that compounds.",
                subHeader2: "Three Markers of Longevity",
                subDescription2: "You do not need a degree in textiles. You need to check three things before buying.\n\n1. Stitching: Look at the seams. Double needle stitching runs in parallel lines. Single stitching is one thread waiting to snap. Turn the garment inside out. If you see loose threads or uneven spacing, put it back. Quality seams have tight, consistent tension.\n\n2. Fabric weight: Lightweight fabric feels soft in the store, but wears thin fast. Hold the material up to the light. If you see through it easily, so will your elbows and knees. Heavy cotton, denim above 12 ounces, and canvas are worth the extra ounces. They break in, not break down.\n\n3. Hardware: Zippers, buttons, and rivets fail before the fabric does. Metal zippers outlast plastic. Reinforced button stitching keeps buttons attached. Rivets at stress points prevent tearing. Pro tip: Look for YKK on the zipper pull.",
                subHeader3: "The Style Power Move",
                subDescription3: "Trends are a trap. Every season brings new cuts, new colors, and new pressure to replace what you already own. That chore coat from last year did not stop working. It just stopped being featured on your feed. But here is where durability becomes a style asset.\n\nThe person who wears a well-made white t-shirt, raw denim, and leather boots looks better than the person chasing every micro-trend. Their clothes fit well, age well, and do not scream for attention. Durability creates consistency. Consistency creates confidence.\n\nBuying durable clothing is not boring. It is efficient. You spend less time shopping, less money replacing, and less energy thinking about what to wear. Your closet becomes a set of reliable tools instead of a pile of broken promises. The next time someone asks why you wear the same jacket for three years, tell them the truth. You can afford to fly somewhere interesting with the money you saved. That is a power move.",
            },
            {
                header: "Dressing For Confidence – No Caps Needed",
                description: "There is a term psychologists use: enclothed cognition. It means the clothes you wear change how your brain works. Put on a stiff suit, and you think more abstractly. Wear something that fits poorly, and you feel less capable. The garment does not just cover you. It programs you. Most style advice misses this point entirely. It focuses on other people: what they see, what they think, what trend you should follow next. That is backwards. Confidence starts with how you feel in your own clothes before anyone else looks at you.",
                subHeader: "Comfort Is Quiet Confidence",
                subDescription: "Physical ease creates social presence. When your waistband digs in or your collar chokes or your shoes pinch, your brain allocates attention to those discomforts. You fidget. You become a spectator of your own reflection instead of a participant in the room. You cross your arms without realizing why. That is not shyness. That is your nervous system reacting to bad clothing. The opposite is also true. When clothes move with you, breathe with you, and stay where they belong, your brain relaxes. You stand taller. You make eye contact longer. You speak with fewer hesitations. Confidence is not an emotion you manufacture. It is the absence of distraction. Comfortable clothing clears the path.",
                subHeader2: "Fit Above Everything Else",
                subDescription2: "A $20 shirt that fits your shoulders and tucks cleanly into your pants looks better than a $200 shirt that bunches or sags. This is not an opinion. It is geometry. Fabric that follows your body lines creates visual order. Fabric that fights your body creates visual noise. People notice the noise before they notice the label. Fit means three things. Shoulder seams hit your natural shoulder bone, not halfway down your arm. Sleeve cuffs end at your wrist bone, not your thumb. Torso length covers your belt line when you raise your arms. These measurements do not care about brand names or price tags. Get them right, and any shirt works. Get them wrong, and no shirt works.",
                subHeader3: "The Capsule Foundation",
                subDescription3: "Decision fatigue is real. Every choice you make about what to wear drains energy you could spend on actual work. A capsule foundation is not a uniform. It is a small set of well-fitting basics that work together without thinking. No need to copy famous minimalists. Just pick five tops that fit well and rotate them. Keep your pants neutral. Limit your shoes to two pairs that work with everything. This is not a creativity killer. It is a mental shortcut that frees your brain for harder problems. The goal is not to look like everyone else. The goal is to look like yourself without effort. When your outfit becomes automatic, your presence becomes intentional. That is real confidence. No pep talk required. Just clothes that work, so you do not have to think about them.",
            },
            {
                header: "How To Care For Your Apparel (Because They Work)",
                description: "Your clothes put in the hours. Denim that outlasts seasons. Tees that hold their shape. Sneakers that keep gripping. In return, they need one thing: proper care. Not laundry detergent commercials. Just basic maintenance. Consider this your user manual.",
                subHeader: "The Golden Rule: Kill Heat, Not Your Clothes",
                subDescription: "Heat is the number one cause of garment death. High dryer temperatures break down elastic fibers, shrink cotton, melt synthetic blends, and fade dyes. A $100 shirt ruined in forty minutes. What to do instead: Wash cold. Always. Cold water preserves fabric structure and color. Then air dry. Hang shirts and pants on a drying rack or line. Tumble dry on no heat if you must, but flat drying is better. Your clothes will last three times longer. That is not an opinion. That is textile science.",
                subHeader2: "Wash Less, Wear More",
                subDescription2: "<p>Most people wash too often. Constant agitation wears out seams, fades colors, and distorts fit. The rule is simple: wash only when dirty or smelly. Here is a fabric-by-fabric guide.<br /> ⦁ Denim: Wash every 5 to 10 wears. Spot clean stains. Hang to air out between wears. Freeze jeans to kill odors if needed.<br /> ⦁ Cotton tees and shirts: Wash every 3 to 4 wears unless visibly soiled. Turn inside out to protect prints.<br /> ⦁ Synthetics (polyester, nylon): Wash every 2 to 3 wears. Sweat clings to synthetics, so they need more frequent washing.<br /> ⦁ Wool and knits: Wash only when necessary. Air out after each wear. Hand washes cold with gentle soap.<br /> Spot cleaning extends life. A damp cloth and mild soap remove most small stains without a full wash cycle.</p>",
                subHeader3: "The Essential Care Kit",
                subDescription3: "<p>Three tools keep your clothes looking fresh without expensive dry cleaning.<br /> ⦁ Fabric de piller – Removes those tiny lint balls that form on sweaters and cotton blends. A battery-operated de-piller costs under fifteen dollars. Run it over problem areas every few months.<br /> ⦁ Stain pen or stick – Treat spills immediately before they set. Keep one in your bag or car. Blot, do not rub. Rubbing spreads the stain.<br /> ⦁ Handheld steamer – Wrinkles age clothes faster than wear. A steamer relaxes fabric without the heat damage of an iron. Works on everything from tees to jackets.<br /> That is it. No fancy products. No complicated cycles. Cold wash. Air dry. Store correctly. Care kit on hand. Your clothes will outlast trends, seasons, and probably your patience. They earned it</p>",
            },
        ];

        function openModal(data) {
            // Structural DOM Content Injector Node Loops
            document.getElementById('modalHeader').innerText = data.header || '';
            document.getElementById('modalDescription').innerText = data.description || '';

            function handleSection(sectionId, headerId, descId, headerVal, descVal) {
                const sectionEl = document.getElementById(sectionId);
                if (headerVal || descVal) {
                    sectionEl.style.display = 'block';
                    document.getElementById(headerId).innerText = headerVal || '';

                    // innerText ki jagah innerHTML use karein taake tags render hon
                    document.getElementById(descId).innerHTML = descVal || '';
                } else {
                    sectionEl.style.display = 'none';
                }
            }

            handleSection('section1', 'modalSubHeader', 'modalSubDescription', data.subHeader, data.subDescription);
            handleSection('section2', 'modalSubHeader2', 'modalSubDescription2', data.subHeader2, data.subDescription2);
            handleSection('section3', 'modalSubHeader3', 'modalSubDescription3', data.subHeader3, data.subDescription3);

            const modal = document.getElementById('blogModal');
            const modalBox = document.getElementById('modalBox');

            modal.style.display = 'flex';

            // Hard reset the inner content viewport tracking loop position
            document.querySelector('.upwork-custom-scroll').scrollTop = 0;

            setTimeout(() => {
                modal.style.opacity = '1';
                modalBox.style.transform = 'translateX(0)'; // Linear slide from absolute right
            }, 30);

            document.body.style.overflow = 'hidden';
        }

        function closeModal() {
            const modal = document.getElementById('blogModal');
            const modalBox = document.getElementById('modalBox');

            modal.style.opacity = '0';
            modalBox.style.transform = 'translateX(100%)'; // Retract panel out of grid visibility bound

            setTimeout(() => {
                modal.style.display = 'none';
                document.body.style.overflow = '';
            }, 300);
        }

        // Safe Engine Execution Handler Loops
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('[data-blog-id]').forEach(button => {
                button.addEventListener('click', (e) => {
                    e.preventDefault();
                    const blogId = button.getAttribute('data-blog-id');
                    const selectedBlogData = staticBlogsData[blogId];

                    if (selectedBlogData) {
                        openModal(selectedBlogData);
                    }
                });
            });

            document.getElementById('closeModalBtn').addEventListener('click', closeModal);
            document.getElementById('closeModalFooterBtn').addEventListener('click', closeModal);
            document.getElementById('modalOverlay').addEventListener('click', closeModal);

            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') closeModal();
            });
        });
    </script>
@endpush