/* =====================================================
   HISTORY SLIDER - Base Styles (Desktop 1280px+)
   ===================================================== */
.history-slider-track {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.history-column {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Hide scrollbars in columns by default, show custom scrollbar on description */
.history-column * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.history-column *::-webkit-scrollbar {
    display: none;
}

/* Custom scrollbar for description */
.history-description {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.history-description::-webkit-scrollbar {
    display: block;
    width: 4px;
}

.history-description::-webkit-scrollbar-track {
    background: transparent;
}

.history-description::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* Pulsing animation for nav buttons */
@keyframes pulse-size {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

.history-nav-btn {
    animation: pulse-size 2s ease-in-out infinite;
}

.history-nav-btn:hover {
    animation: none;
    transform: scale(1.1);
}

/* =====================================================
   DESKTOP: HOVER EFFECTS (only when .hover-enabled on parent)
   ===================================================== */
@media (min-width: 1280px) {

    /* Base widths */
    .history-track-group[data-col-count="4"] .history-column {
        width: 25%;
    }

    .history-track-group[data-col-count="5"] .history-column {
        width: 20%;
    }

    .history-track-group[data-col-count="6"] .history-column {
        width: 16.67%;
    }

    /* Base state - content hidden */
    .history-column .history-hover-backdrop {
        opacity: 0;
    }

    .history-column [data-hover-content] {
        opacity: 0;
        transform: translateY(10px);
    }

    .history-column .history-year,
    .history-column .history-label {
        opacity: 1;
    }

    /* ========== HOVER ENABLED MODE ========== */

    /* 4 columns: shrink others, expand hovered */
    .history-slider.hover-enabled .history-track-group[data-col-count="4"]:has(.history-column:hover) .history-column {
        width: 22.67%;
    }

    .history-slider.hover-enabled .history-track-group[data-col-count="4"]:has(.history-column:hover) .history-column:hover {
        width: 35%;
    }

    /* 5 columns */
    .history-slider.hover-enabled .history-track-group[data-col-count="5"]:has(.history-column:hover) .history-column {
        width: 17%;
    }

    .history-slider.hover-enabled .history-track-group[data-col-count="5"]:has(.history-column:hover) .history-column:hover {
        width: 32%;
    }

    /* 6 columns */
    .history-slider.hover-enabled .history-track-group[data-col-count="6"]:has(.history-column:hover) .history-column {
        width: 14%;
    }

    .history-slider.hover-enabled .history-track-group[data-col-count="6"]:has(.history-column:hover) .history-column:hover {
        width: 30%;
    }

    /* Normalized description text for 4 and 5 column groups */
    .history-slider.hover-enabled .history-track-group[data-col-count="4"] [data-hover-content] p {
        font-size: 20px;
    }

    .history-slider.hover-enabled .history-track-group[data-col-count="5"] [data-hover-content] p {
        font-size: 18px;
    }

    /* Hover state - show content (only when hover-enabled) */
    .history-slider.hover-enabled .history-column:hover .history-hover-backdrop {
        opacity: 1;
    }

    .history-slider.hover-enabled .history-column:hover [data-hover-content] {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Hide default year and label on hover (since they're now in hover content) */
    .history-slider.hover-enabled .history-column:hover .history-year,
    .history-slider.hover-enabled .history-column:hover .history-label {
        opacity: 0;
    }

    /* Add offset for nav button space on edge columns */
    .history-slider.hover-enabled .history-track-group[data-group-index="0"] .history-column:last-of-type:hover [data-hover-content] {
        right: 50px;
    }

    .history-slider.hover-enabled .history-track-group:last-of-type .history-column[data-column-index="0"]:hover [data-hover-content] {
        left: 80px;
    }

    .history-slider.hover-enabled .history-track-group:not([data-group-index="0"]):not(:last-of-type) .history-column[data-column-index="0"]:hover [data-hover-content] {
        left: 80px;
    }

    .history-slider.hover-enabled .history-track-group:not([data-group-index="0"]):not(:last-of-type) .history-column:last-of-type:hover [data-hover-content] {
        right: 50px;
    }
}

/* Desktop base widths (no hover state) */
@media (min-width: 1280px) {
    .history-track-group[data-col-count="4"] .history-column {
        width: 25%;
    }

    .history-track-group[data-col-count="5"] .history-column {
        width: 20%;
    }

    .history-track-group[data-col-count="6"] .history-column {
        width: 16.67%;
    }
}

/* =====================================================
   YEAR ALIGNMENT - Year and label positioned at bottom
   ===================================================== */
@media (min-width: 1280px) {
    .history-column {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .history-year-label {
        display: flex;
        flex-direction: column;
    }
}


/* =====================================================
   MOBILE CARD SLIDER (<768px) - Swipeable cards
   ===================================================== */
.history-mobile-slider {
    touch-action: pan-y;
}

.history-mob-track {
    will-change: transform;
    cursor: grab;
}

.history-mob-track.is-dragging {
    cursor: grabbing;
    transition: none !important;
}

/* Card sizing: 68vw wide with 2vw margin on each side = visible neighbors */
.history-mob-card {
    width: 68vw;
    margin: 0 2vw;
    transform: scale(0.9);
    opacity: 0.5;
    filter: brightness(0.6);
    transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}

.history-mob-card.is-active {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
}

/* Expanded overlay */
.history-mob-card-expanded {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Inline dropdown list */
.history-mob-dropdown-list {
    transition: max-height 0.4s ease;
}

.history-mob-dropdown-btn svg.is-rotated {
    transform: rotate(180deg);
}

/* Dot active state */
.history-mob-dot.is-active {
    background: white !important;
    transform: scale(1.4);
}


/* =====================================================
   TABLET STYLES - 2 columns with tap-to-expand (768-1279px)
   ===================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
    .history-slider {
        overflow: hidden;
    }

    .history-slider-track {
        transform: none !important;
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }

    .history-track-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100% !important;
    }

    /* Tablet: 2 columns base */
    .history-column {
        min-height: 320px !important;
        width: 50% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Handle odd number of columns */
    .history-column.column-full-width {
        width: 100% !important;
    }

    /* Tablet: disable CSS hover effects */
    .history-column [data-hover-content] {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.4s ease-out;
    }

    .history-column .history-year,
    .history-column .history-label {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .history-column:hover [data-hover-content] {
        opacity: 0 !important;
        transform: translateY(10px) !important;
    }

    .history-column:hover .history-hover-backdrop {
        opacity: 0 !important;
    }

    .history-column:hover .history-year,
    .history-column:hover .history-label {
        opacity: 1 !important;
    }

    /* EXPANDED state for tap interaction on tablet */
    .history-column.expanded {
        width: 100% !important;
        min-height: 450px !important;
    }

    .history-slider .history-column.expanded [data-hover-content] {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .history-slider .history-column.expanded .history-year,
    .history-slider .history-column.expanded .history-label {
        opacity: 0 !important;
    }

    .history-slider .history-column.expanded .history-hover-backdrop {
        opacity: 1 !important;
    }

    .history-column [data-hover-content] img,
    .history-column [data-hover-content] video {
        max-width: 320px !important;
        max-height: 220px !important;
    }

    .history-column [data-hover-content] p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .history-title-label {
        position: absolute !important;
        top: 1rem !important;
        left: 1rem !important;
        padding: 0.75rem;
        z-index: 30;
    }

    .history-title-label h2 {
        font-size: 18px !important;
    }

    .history-nav-btn {
        display: none;
    }
}