/**
 * PG Slider - Frontend Styles
 *
 * @author    PG
 * @copyright 2025 PG
 * @license   Proprietary
 */

/* ============================================
   CSS Variables - Color Palette
   ============================================ */
:root {
    /* Text Colors */
    --pgslider-ink-blue: #0B0049;
    --pgslider-off-white: #FFFDF6;

    /* Brand Colors */
    --pgslider-purple-ink: #504E99;
    --pgslider-gray-blue: #C9CCE5;
    --pgslider-burgundy: #772944;
    --pgslider-red: #BC254D;
    --pgslider-vibrant-red: #F42C46;

    /* Green Tones */
    --pgslider-dark-patina: #006069;
    --pgslider-patina-green: #64BED2;
    --pgslider-soft-blue: #CCE8F2;

    /* Warm Tones */
    --pgslider-golden: #E9BD7A;
    --pgslider-beige: #E9E0C7;
    --pgslider-light-yellow: #FFF2CD;

    /* Typography */
    --pgslider-font-family: 'Ufficio', sans-serif;

    /* Theme: Dark (dark elements on light backgrounds) */
    --pgslider-dark-text: var(--pgslider-ink-blue);
    --pgslider-dark-text-secondary: var(--pgslider-purple-ink);
    --pgslider-dark-overlay-bg: rgba(11, 0, 73, 0.7);
    --pgslider-dark-nav-bg: rgba(11, 0, 73, 0.9);
    --pgslider-dark-nav-hover: var(--pgslider-purple-ink);
    --pgslider-dark-dot: var(--pgslider-purple-ink);
    --pgslider-dark-dot-active: var(--pgslider-ink-blue);

    /* Theme: Light (light elements on dark backgrounds) */
    --pgslider-light-text: var(--pgslider-off-white);
    --pgslider-light-text-secondary: var(--pgslider-light-yellow);
    --pgslider-light-overlay-bg: rgba(255, 253, 246, 0.7);
    --pgslider-light-nav-bg: rgba(255, 253, 246, 0.9);
    --pgslider-light-nav-hover: var(--pgslider-beige);
    --pgslider-light-dot: var(--pgslider-beige);
    --pgslider-light-dot-active: var(--pgslider-off-white);
}

/* ============================================
   Base Styles
   ============================================ */

/* Container */
.pgslider-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    overflow: hidden;
}

.pgslider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 21:9 aspect ratio for desktop */
    aspect-ratio: 21 / 9;
}

/* Slider track */
.pgslider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%;
}

/* Individual slide */
.pgslider-slide {
    position: relative;
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pgslider-slide .pgslider-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Image as background - hidden img tag */
.pgslider-image {
    display: none;
}

.pgslider-image img {
    display: none;
}

/* Overlay background layer */
.pgslider-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* Content overlay - Default (Dark theme on slide level) */
.pgslider-content {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    padding: 0 40px;
    text-align: left;
    font-family: var(--pgslider-font-family);
    z-index: 2;
}

.pgslider-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    font-family: var(--pgslider-font-family);
}

.pgslider-subtitle {
    font-size: 1.25rem;
    margin: 0;
    font-family: var(--pgslider-font-family);
}

/* Dark theme (default) - dark text on light background */
.pgslider-slide[data-theme="dark"] .pgslider-title,
.pgslider-slide[data-theme="dark"] .pgslider-subtitle {
    color: #0B0049;
}

/* Light theme - light text on dark background */
.pgslider-slide[data-theme="light"] .pgslider-title,
.pgslider-slide[data-theme="light"] .pgslider-subtitle {
    color: #FFFDF6;
}

/* Navigation - Slide titles with progress bars */
.pgslider-navigation {
    position: absolute;
    bottom: 20px;
    left: 40px;
    right: 40px;
    display: flex;
    gap: 30px;
    z-index: 10;
}

.pgslider-nav-item {
    flex: 1;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.pgslider-nav-item:hover {
    opacity: 0.8;
}

.pgslider-nav-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 8px;
    font-family: var(--pgslider-font-family);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.5s ease-in-out;
}

/* Navigation colors based on active slide theme */
.pgslider-container[data-active-theme="dark"] .pgslider-nav-title {
    color: #0B0049;
}

.pgslider-container[data-active-theme="light"] .pgslider-nav-title {
    color: #FFFDF6;
}

.pgslider-progress-bar {
    width: 100%;
    height: 5px;
    background: var(--pgslider-gray-blue);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.pgslider-progress-fill {
    height: 100%;
    background: #0B0049;
    width: 0;
    border-radius: 0;
}


/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    /* Change aspect ratio to 4:3 for mobile */
    .pgslider-wrapper {
        aspect-ratio: 4 / 3;
    }

    .pgslider-title {
        font-size: 1.75rem;
    }

    .pgslider-subtitle {
        font-size: 1rem;
    }

    .pgslider-content {
        bottom: 80px;
        padding: 0 20px;
    }

    /* Mobile navigation - scrollable, shows 2 items */
    .pgslider-navigation {
        left: 20px;
        right: 20px;
        bottom: 10px;
        gap: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    /* Hide scrollbar for Chrome, Safari, Opera */
    .pgslider-navigation::-webkit-scrollbar {
        display: none;
    }

    .pgslider-nav-item {
        flex: 0 0 calc(50% - 7.5px); /* 2 items visible, accounting for gap */
        min-width: calc(50% - 7.5px);
    }

    .pgslider-nav-title {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }

    .pgslider-progress-bar {
        height: 4px;
    }
}

@media (max-width: 480px) {
    .pgslider-title {
        font-size: 1.5rem;
    }

    .pgslider-subtitle {
        font-size: 0.875rem;
    }

    .pgslider-content {
        bottom: 60px;
        padding: 0 20px;
    }

    .pgslider-navigation {
        gap: 10px;
    }

    .pgslider-nav-title {
        font-size: 0.7rem;
    }
}

/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pgslider-slide.active {
    animation: slideIn 0.5s ease-in-out;
}