/* =====================================================
   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 - use left/right instead of padding */
    /* First group: last column needs right offset (nav button on right) */
    .history-slider.hover-enabled .history-track-group[data-group-index="0"] .history-column:last-of-type:hover [data-hover-content] {
        right: 50px;
    }

    /* Last group: first column needs left offset (nav button on left) */
    .history-slider.hover-enabled .history-track-group:last-of-type .history-column[data-column-index="0"]:hover [data-hover-content] {
        left: 80px;
    }

    /* For middle groups - both edges need space */
    .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) {

    /* Make columns use flex to position content */
    .history-column {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Year-label container at fixed bottom position */
    .history-year-label {
        display: flex;
        flex-direction: column;
    }
}

/* =====================================================
   MOBILE STYLES - Single column stack (max-width: 767px)
   ===================================================== */
@media (max-width: 767px) {
    .history-slider {
        overflow: visible !important;
    }

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

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



    /* Mobile column sizing */
    .history-column {
        width: 100% !important;
        min-height: 280px !important;
        max-height: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .history-column:last-child {
        border-bottom: none;
    }

    /* Mobile: hide hover content by default */
    .history-column [data-hover-content] {
        opacity: 0 !important;
        transform: translateY(10px) !important;
        transition: all 0.4s ease-out;
    }

    /* Mobile: show year/label by default */
    .history-column .history-year,
    .history-column .history-label {
        opacity: 1 !important;
        transition: opacity 0.3s ease;
    }

    /* Mobile EXPANDED state - tap to reveal content */
    .history-column.mobile-expanded {
        min-height: 400px !important;
    }

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

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

    /* Mobile: show backdrop on expanded */
    .history-slider .history-column.mobile-expanded .history-hover-backdrop {
        opacity: 1 !important;
    }

    /* Mobile content scaling */
    .history-column [data-hover-content] img,
    .history-column [data-hover-content] video {
        max-width: 280px !important;
        max-height: 180px !important;
    }

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

    /* Mobile group title styling */
    .history-title-label {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        padding: 1rem;
        z-index: 30;
    }

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

    /* Hide nav button on mobile */
    .history-nav-btn {
        display: none;
    }

    /* Group background repeats for each entry */
    .history-track-group>img {
        position: absolute;
        inset: 0;
    }
}

/* =====================================================
   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 - JS adds .column-full-width class */
    .history-column.column-full-width {
        width: 100% !important;
    }

    /* Tablet: disable CSS hover effects - only tap works */
    .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;
    }

    /* Disable the group-hover effects on tablet */
    .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;
    }

    /* Tablet content scaling */
    .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;
    }

    /* Tablet title styling - keep absolute to not interfere with 2-column grid */
    .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;
    }

    /* Hide nav button on tablet */
    .history-nav-btn {
        display: none;
    }
}