/* ============================================================
   PILLARS DESIGN MODE
   - Infinite horizontal scroll
   - 5 items visible in PC view (flex: 20%)
   - 3 items visible in Mobile view (flex: 33.33%)
   ============================================================ */

.pillars-scroll-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100vh;
    width: 100%;
    /* Remove scroll-snap-type to allow for manual infinite wrap logic */
    scroll-behavior: auto;
    align-items: center;
    gap: 0;
    background: var(--theme-bg-gradient);
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
}

.pillars-scroll-container::-webkit-scrollbar {
    display: none;
}

/* --- Base Pillar Item (Desktop Default) --- */
.pillar-item {
    flex: 0 0 20%;
    height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Keeps everything anchored to the bottom */
    position: relative;
    transition: all 0.4s ease;
}

/* Mobile View: 3 items */
/* --- Mobile Specific Optimizations --- */
@media (max-width: 768px) {
    .pillar-item {
        flex: 0 0 50%;
        /* 2 items visible instead of 3 tiny ones */
        height: 70vh;
    }

    .pillar-column {
        height: 35%;
        /* Shorter base for mobile */
    }

    .pillar-image-container {
        height: 25%;
        /* Smaller food images to match */
    }

    .item-name-pillar-btn {
        font-size: 0.8rem;
        min-width: 100px;
    }

    .pillar-image-container img {
        filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
    }

    .pillar-info {
        bottom: 5vh;
        /* Raise the button slightly */
    }



    /* Adjust the scale range in JS or CSS for tighter mobile spacing */
    .pillar-item:not(.focused) {
        opacity: 0.6;
    }
}

/* 1. Define the Pillar height first */
/* 2. The Pillar (The Base) */
.pillar-column {
    position: relative;
    /* Changed from absolute to flow naturally */
    width: 80%;
    /* Slightly narrower than the item */
    height: 40%;
    /* Reduced height so it's a 'pedestal' */
    background: url('./Pillar.svg') no-repeat center bottom;
    background-size: contain;
    z-index: 2;
    margin-bottom: 2vh;
    /* Space for the button at the very bottom */
    transition: filter 0.3s ease;
}

body.light-mode .pillar-column {
    filter: brightness(1.2) contrast(0.9);
}

/* Update the image container to sit on the pillar */
/* 2. Position the image container relative to the pillar's top */
/* 3. The Image (Placed directly above the pillar) */
.pillar-image-container {
    position: relative;
    /* Changed from absolute to sit on top of the column */
    width: 100%;
    /* Controlled width */
    height: 30%;
    /* Defined height area for the food */
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Forces image to touch the bottom of this box (the pillar top) */
    margin-bottom: -80px;
    /* Slight overlap so it looks like it's touching */
}

.pillar-image-container img {
    max-width: 85%;
    /* Prevents the 'way big' look */
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.6));
}

/* 4. The Button Info */
.pillar-info {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
    padding-bottom: 5vh;
    bottom: 3vh;
    /* <--- Add this line to move it upward */
}

.item-name-btn {
    position: relative;
    z-index: 5;
    margin-top: 20px;
    padding: 10px 25px;
    background: var(--theme-float-bg);
    color: var(--theme-float-text);
    border: 1px solid var(--primary);
    border-radius: 25px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.item-name-pillar-btn {
    background: var(--theme-float-bg);
    color: var(--theme-float-text);
    border: 1px solid var(--primary);
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, background 0.3s, color 0.3s;
    white-space: nowrap;
    /* Keep name on one line */
    display: inline-block;
    width: auto;
    /* Allow button to grow for the name */
    min-width: 120px;
}

.item-name-pillar-btn:hover {
    transform: scale(1.05);
    background: #fff;
}

/* Focused Pillar State */
.pillar-item.focused {
    transform: scale(1.3) translateY(-2vh) translateZ(50px);
    z-index: 100;
}

.pillars-scroll-container.blurred .pillar-item:not(.focused) {
    filter: blur(8px) brightness(0.4);
    pointer-events: none;

}