/*!
 * H-Scrolls CSS - Shared by all H-scroll components
 * Version: 2.0.0
 * Optimized for performance
 * 
 * Changelog:
 * v2.0.0 - Updated for improved navigation behavior
 * v1.0.0 - Initial implementation
 */

/* Design tokens are loaded directly by the component */

/* Base H-Scroll Styles */
.hscroll-section {
    margin: 0 0 40px 0;
    position: relative;
}


/* H-Scroll Section Headers - Match cards full-width positioning */
.hscroll-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    padding: 0; /* Remove padding to match grid headers */
    position: relative;
    /* Break out of parent containers to match cards width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.hscroll-section-title-link {
    text-decoration: none;
    transition: all 0.3s ease;
}

.hscroll-section-title-link:hover {
    transform: translateY(-2px);
}

.hscroll-section-title {
    /* All styling handled by design system H2 styles */
    transition: all 0.3s ease;
    cursor: pointer;
    margin-left: 20px; /* Add left spacing to title - matches grid titles */
}

.hscroll-section-title-link:hover .hscroll-section-title {
    /* Hover effects handled by design system H2 styles */
    transform: scale(1.05);
}

/* Search Container - Now handled by search component */
.hscroll-search-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Scroll Container */
.hscroll-scroll-container {
    overflow: visible;
    position: relative;
    margin: 0;
    padding: 0;
}

.hscroll-horizontal-cards {
    display: flex;
    gap: 38px;
    padding: 40px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
}

/* Hide scrollbar completely */
.hscroll-horizontal-cards::-webkit-scrollbar {
    display: none;
}

/* Navigation Arrows */
.hscroll-scroll-nav {
    position: absolute;
    bottom: 10%;
    transform: translateY(0);
    background: none;
    border: none;
    color: #ff69b4;
    font-size: 3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    font-weight: bold;
    padding: 20px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -2px 0 0 #000,
        2px 0 0 #000,
        0 -2px 0 #000,
        0 2px 0 #000,
        0 0 15px rgba(255, 105, 180, 0.8);
}

/* Desktop: Make arrows 4.5rem and keep bottom positioning */
@media (min-width: 769px) {
    .hscroll-scroll-nav {
        font-size: 4.5rem;
        min-width: 40px;
        min-height: 40px;
        bottom: 10%;
    }
}

.hscroll-scroll-nav:hover {
    color: #ff1493;
    transform: scale(1.2);
    text-shadow: 
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -2px 0 0 #000,
        2px 0 0 #000,
        0 -2px 0 #000,
        0 2px 0 #000,
        0 0 25px rgba(255, 105, 180, 1);
}

.hscroll-scroll-left {
    left: 10px;
}

.hscroll-scroll-right {
    right: 10px;
}

.hscroll-scroll-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Card Styling - Critical for horizontal scroll */
.hscroll-horizontal-cards .performer-card,
.hscroll-horizontal-cards .scene-card {
    flex: 0 0 auto;
    margin: 0;
    position: relative;
}

/* Studio cards need flex properties to allow natural sizing */
.hscroll-horizontal-cards .studio-card {
    flex: 0 0 auto;  /* Don't grow, don't shrink, use natural size */
    margin: 0;
    position: relative;
    min-width: unset;  /* Remove any min-width constraints */
    max-width: none;   /* Remove any max-width constraints */
}