/* =============================================
   UI Patterns CSS Variables and Base Styles
   ============================================= */

:root {
    /* Carousel Pattern */
    --pattern-carousel-height: 400px;
    --pattern-carousel-radius: 16px;
    --pattern-carousel-transition: 0.5s;
    --pattern-carousel-nav-size: 48px;
    --pattern-carousel-nav-bg: rgba(255, 255, 255, 0.9);
    --pattern-carousel-nav-hover-bg: white;
    --pattern-carousel-nav-color: #1f2937;
    --pattern-carousel-nav-offset: 1rem;
    --pattern-carousel-indicator-size: 12px;
    --pattern-carousel-indicator-gap: 0.5rem;
    --pattern-carousel-indicator-offset: 1.5rem;
    --pattern-carousel-indicator-bg: rgba(255, 255, 255, 0.5);
    --pattern-carousel-indicator-hover-bg: rgba(255, 255, 255, 0.75);
    --pattern-carousel-indicator-active-bg: white;

    /* Horizontal Scroll Pattern */
    --pattern-scroll-gap: 1.5rem;
    --pattern-scroll-gap-mobile: 1rem;
    --pattern-scroll-nav-size: 44px;
    --pattern-scroll-nav-bg: white;
    --pattern-scroll-nav-hover-bg: #f9fafb;
    --pattern-scroll-nav-border: #e5e7eb;
    --pattern-scroll-nav-color: #374151;
    --pattern-scroll-progress-bg: #e5e7eb;
    --pattern-scroll-progress-fill: #6d28d9;
    --pattern-scroll-fade-color: white;

    /* Show More Pattern */
    --pattern-showmore-duration: 0.4s;
    --pattern-showmore-gradient-color: white;
    --pattern-showmore-btn-radius: 25px;
    --pattern-showmore-btn-color: #6d28d9;
    --pattern-showmore-btn-hover: #5b21b6;

    /* Tabs Pattern */
    --pattern-tabs-bg: #f3f4f6;
    --pattern-tabs-color: #6b7280;
    --pattern-tabs-hover-bg: #e5e7eb;
    --pattern-tabs-hover-color: #374151;
    --pattern-tabs-active-bg: #6d28d9;
    --pattern-tabs-active-color: white;
    --pattern-tabs-radius: 25px;
    --pattern-tabs-border: #e5e7eb;
    --pattern-tabs-hover-border: #d1d5db;
    --pattern-tabs-active-border: #6d28d9;
    --pattern-tabs-item-width: 300px;
    --pattern-tabs-gap: 1.5rem;
    --pattern-tabs-empty-color: #9ca3af;

    /* Accordion Pattern */
    --pattern-accordion-gap: 0.75rem;
    --pattern-accordion-bg: white;
    --pattern-accordion-radius: 12px;
    --pattern-accordion-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --pattern-accordion-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    --pattern-accordion-expanded-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --pattern-accordion-header-hover: rgba(0, 0, 0, 0.02);
    --pattern-accordion-icon-color: #9ca3af;
    --pattern-accordion-icon-active: #6d28d9;
    --pattern-accordion-divider: #f3f4f6;
    --pattern-accordion-border: #e5e7eb;
    --pattern-accordion-border-active: #6d28d9;
    --pattern-accordion-max-height: 1000px;

    /* Featured List Pattern */
    --pattern-featured-gap: 1.5rem;
    --pattern-featured-list-gap: 1rem;
    --pattern-featured-accent: linear-gradient(180deg, #6d28d9 0%, #7c3aed 100%);

    /* Ticker/Marquee Pattern */
    --pattern-ticker-duration: 20s;
    --pattern-ticker-height: 48px;
    --pattern-ticker-bg: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --pattern-ticker-color: white;
    --pattern-ticker-gap: 3rem;
    --pattern-ticker-pause-on-hover: paused;

    /* Flip Card Pattern */
    --pattern-flip-duration: 0.6s;
    --pattern-flip-perspective: 1000px;
    --pattern-flip-front-bg: white;
    --pattern-flip-back-bg: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    --pattern-flip-back-color: white;
    --pattern-flip-radius: 16px;
    --pattern-flip-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    /* Modal Gallery Pattern */
    --pattern-gallery-overlay-bg: rgba(0, 0, 0, 0.95);
    --pattern-gallery-nav-size: 50px;
    --pattern-gallery-nav-bg: rgba(255, 255, 255, 0.1);
    --pattern-gallery-nav-hover-bg: rgba(255, 255, 255, 0.2);
    --pattern-gallery-nav-color: white;
    --pattern-gallery-indicator-bg: rgba(255, 255, 255, 0.3);
    --pattern-gallery-indicator-active-bg: white;
}

/* Dark theme overrides */
[data-theme="dark"] {
    --pattern-carousel-nav-bg: rgba(31, 41, 55, 0.9);
    --pattern-carousel-nav-hover-bg: #374151;
    --pattern-carousel-nav-color: white;

    --pattern-scroll-nav-bg: #374151;
    --pattern-scroll-nav-hover-bg: #4b5563;
    --pattern-scroll-nav-border: #4b5563;
    --pattern-scroll-nav-color: white;
    --pattern-scroll-progress-bg: #4b5563;
    --pattern-scroll-fade-color: #1f2937;

    --pattern-showmore-gradient-color: #1f2937;

    --pattern-tabs-bg: #374151;
    --pattern-tabs-color: #9ca3af;
    --pattern-tabs-hover-bg: #4b5563;
    --pattern-tabs-hover-color: white;
    --pattern-tabs-border: #4b5563;

    --pattern-accordion-bg: #374151;
    --pattern-accordion-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --pattern-accordion-header-hover: rgba(255, 255, 255, 0.05);
    --pattern-accordion-divider: #4b5563;
    --pattern-accordion-border: #4b5563;

    --pattern-flip-front-bg: #374151;
}

/* =============================================
   Utility Classes for UI Patterns
   ============================================= */

/* Scroll snap utilities */
.scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.scroll-snap-start {
    scroll-snap-align: start;
}

.scroll-snap-center {
    scroll-snap-align: center;
}

/* Hide scrollbar utilities */
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Animation utilities */
.animate-fade-in {
    animation: patternFadeIn 0.3s ease;
}

.animate-slide-up {
    animation: patternSlideUp 0.3s ease;
}

.animate-slide-down {
    animation: patternSlideDown 0.3s ease;
}

@keyframes patternFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes patternSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes patternSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ticker/Marquee animation */
@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Flip animation */
@keyframes flipIn {
    0% {
        transform: perspective(var(--pattern-flip-perspective)) rotateY(90deg);
    }
    100% {
        transform: perspective(var(--pattern-flip-perspective)) rotateY(0);
    }
}

/* Card hover effects */
.pattern-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pattern-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Focus states for accessibility */
.pattern-focus-ring:focus-visible {
    outline: 2px solid var(--pattern-tabs-active-bg, #6d28d9);
    outline-offset: 2px;
}

/* Responsive container widths for patterns */
@media (max-width: 640px) {
    :root {
        --pattern-carousel-height: 280px;
        --pattern-carousel-nav-size: 40px;
        --pattern-scroll-gap: 1rem;
        --pattern-tabs-item-width: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --pattern-carousel-height: 320px;
        --pattern-featured-gap: 1rem;
    }
}

/* ===== Share fallback dialog (injected on <body> by share.js; must be global) ===== */
.ps-share-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.ps-share-sheet {
    width: 100%; max-width: 420px;
    background: var(--theme-surface, #fff);
    color: var(--theme-text-primary, #0f172a);
    border-radius: var(--ps-radius-xl, 18px);
    box-shadow: var(--ps-shadow-lg, 0 20px 48px rgba(15, 23, 42, 0.28));
    overflow: hidden;
}
.ps-share-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1.1rem;
    font-weight: 700; font-size: 1rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}
.ps-share-close {
    border: none; background: transparent; cursor: pointer;
    font-size: 1rem; line-height: 1; color: var(--theme-text-secondary, #64748b);
    padding: 0.25rem 0.4rem; border-radius: 8px;
}
.ps-share-close:hover { background: var(--ps-neutral-100, #f1f5f9); }
.ps-share-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem; padding: 1.1rem;
}
.ps-share-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    border: none; background: transparent; cursor: pointer;
    text-decoration: none; padding: 0.4rem 0.2rem; border-radius: 12px;
    color: var(--theme-text-secondary, #475569); font: inherit;
}
.ps-share-item:hover { background: var(--ps-neutral-100, #f1f5f9); }
.ps-share-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
}
.ps-share-lbl { font-size: 0.72rem; font-weight: 600; text-align: center; }
@media (max-width: 480px) {
    .ps-share-overlay { align-items: flex-end; padding: 0; }
    .ps-share-sheet { max-width: 100%; border-radius: 18px 18px 0 0; }
    .ps-share-grid { grid-template-columns: repeat(4, 1fr); }
}