/* ==========================================================================
   CAROUSEL STRUCTURAL ARCHITECTURE (Pure Native Code)
   ========================================================================== */

:root {
    --body-padding: 2rem;
    --card-width: min(85vw, 300px);
}

.carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
    
    width: 100%;
    max-width: 1600px;
    margin: 2rem auto;
    padding: 1.5rem;
    box-sizing: border-box;
    justify-content: safe center;

    /* --- THE LATEST NATIVE CSS FIX --- */
    /* 1. Give them all the same anchor name */
    anchor-name: --trip-carousel; 
    
    /* 2. THE FENCE: Prevents identical anchor names from colliding globally! */
    anchor-scope: --trip-carousel; 
}

/* --- NATIVE HOVER SCROLLING ARROWS --- */
.carousel::scroll-button(left) {
    content: "❮";
    position-area: left;
    /* Pushes arrow safely outward on desktop */
    transform: translateX(calc(2 * var(--body-padding)));
}

.carousel::scroll-button(right) {
    content: "❯";
    position-area: right;
    /* Pushes arrow safely outward on desktop */
    transform: translateX(calc(-2 * var(--body-padding)));
}

.carousel::scroll-button(*) {
    position: absolute;
    position-anchor: --trip-carousel;
    z-index: 10;
    font-size: 1.5rem;
    display: grid;
    place-items: center;
    width: 3rem;
    aspect-ratio: 1 / 1;
    color: #333;
    background: #ffffff;
    border:0;
    border-radius: 100%;
    cursor: pointer;
    visibility: hidden;
    transition: scale 0.2s ease, opacity 0.2s ease;
}

.carousel::scroll-button(*):not(:disabled):hover {
    scale: 1.05;
}

.carousel:hover::scroll-button(*) {
    visibility: visible;
}

/* AUTOMATIC BUTTON HIDING */
.carousel:not(:overflowing)::scroll-button(*) {
    display: none !important;
    visibility: hidden !important;
}

/* --- THE COMPONENT CARDS --- */
.carousel-card {
    flex: 0 0 var(--card-width); 
    position: relative;
    overflow: hidden;
    scroll-snap-align: center; 
    box-sizing: border-box;
    border-radius: 1rem;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, box-shadow 0.3s ease;
}

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

/* ==========================================================================
   VARIABLE COUNT HOVER LOGIC
   ========================================================================== */

.carousel:hover .carousel-card { opacity: 0.75; }
.carousel .carousel-card:hover,
.carousel .carousel-card:focus-within {
    transform: scale(1.04);
    opacity: 1 !important;
    z-index: 5;
    /*box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);*/
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Fixes the Mobile Horizontal Scroll)
   ========================================================================== */

@media screen and (min-width: 1025px) {
    .carousel {
        margin: 3rem auto;
        padding: 1rem;            
        gap: 1rem;                
    }
}

@media screen and (max-width: 1024px) {
    .carousel {
        padding: 1.5rem 1.5rem;
        gap: 1.25rem;
        justify-content: flex-start; 
    }

    .carousel::scroll-button(left) {
        transform: translateX(calc(1 * var(--body-padding)));
    }
    .carousel::scroll-button(right) {
        transform: translateX(calc(-1 * var(--body-padding)));
    }
}

@media screen and (max-width: 600px) {
    :root {
        --card-width: 100%;
    }

    .carousel {
        margin: 1.5rem auto;
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .carousel:hover .carousel-card { opacity: 1; }
    .carousel .carousel-card:hover {
        transform: none;
        box-shadow: none;
    }

    .carousel::scroll-button(*) {
        visibility: visible !important;
        display: grid !important;
        opacity: 0.85;
        scale: 0.8;               
    }

    /* THE MOBILE FIX: 
       Instead of pushing the arrows OUTSIDE the anchor (which causes horizontal scroll), 
       we pull them INSIDE the edge of the screen so the viewport remains intact. */
    .carousel::scroll-button(left) {
        position-area: left; 
        transform: translateX(4rem); /* Pulls inside the left edge */
    }
    .carousel::scroll-button(right) {
        position-area: right;
        transform: translateX(-4rem); /* Pulls inside the right edge */
    }
}