/**
 * PC Kompas Trends Page Styles - Main Entry
 *
 * This is the main entry file for trends page styles.
 * Component styles are split into partials loaded via PHP:
 *
 * - partials/_trends-header.css     - Page header, breadcrumb
 * - partials/_trends-categories.css - Category cards, grid
 * - partials/_trends-drops.css      - Price drops, deals
 * - partials/_trends-charts.css     - Charts, period selector, tabs
 * - partials/_trends-responsive.css - Media queries, dark/light mode
 *
 * This file contains:
 * - Page container & layout
 * - Loading, error, empty states
 * - Animations
 * - Utility classes
 * - SSR fallback styles
 * - SEO content section
 *
 * Uses CSS variables exclusively for colors (no hardcoded colors)
 * Responsive design with mobile-first approach using clamp()
 * Dark/light mode support via theme variables
 *
 * @package PC_Kompas_Trends
 * @since 1.0.0
 */

/* ============================================================================
   PAGE CONTAINER & LAYOUT
   ============================================================================ */

.trends-page {
    width: 100%;
    background: var(--bg-primary);
    padding: 24px 0 80px;
    overflow-x: hidden;
}

.trends-page__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.trends-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-height: 300px;
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.trends-loading__spinner {
    display: block;
    width: clamp(2.5rem, 5vw, 3.5rem);
    height: clamp(2.5rem, 5vw, 3.5rem);
    animation: trends-spin 1s linear infinite;
    color: var(--accent);
    flex-shrink: 0;
}

.trends-loading__text {
    font-size: clamp(0.95rem, 1.5vw, 1.125rem);
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================================================
   ERROR STATE
   ============================================================================ */

.trends-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-height: 250px;
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.trends-error__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 6vw, 4rem);
    height: clamp(3rem, 6vw, 4rem);
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error);
    border-radius: var(--radius-lg);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    flex-shrink: 0;
}

.trends-error__title {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 clamp(0.5rem, 1vw, 0.75rem) 0;
}

.trends-error__message {
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    color: var(--text-secondary);
    margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
    max-width: 500px;
    line-height: 1.6;
}

.trends-error__actions {
    display: flex;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    flex-wrap: wrap;
    justify-content: center;
}

.trends-error__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.trends-error__btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.trends-error__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.trends-error__btn--secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.trends-error__btn--secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    transform: translateY(-2px);
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.trends-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    min-height: 300px;
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.trends-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(3rem, 6vw, 4rem);
    height: clamp(3rem, 6vw, 4rem);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: var(--radius-lg);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    flex-shrink: 0;
}

.trends-empty__title {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 clamp(0.5rem, 1vw, 0.75rem) 0;
}

.trends-empty__message {
    font-size: clamp(0.95rem, 1.4vw, 1.125rem);
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
    line-height: 1.6;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

/**
 * Spinner Rotation Animation
 * - Continuous 360-degree rotation
 * - 1 second duration for smooth appearance
 * - Linear timing function for consistent speed
 * - Respects prefers-reduced-motion
 */
@keyframes trends-spin {
    to {
        transform: rotate(360deg);
    }
}

/**
 * Fade-in Animation
 * - Used when transitioning from loading to content
 */
@keyframes trends-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/**
 * Slide-up Animation
 * - Used for card entrance effects
 */
@keyframes trends-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   UTILITY / VISIBILITY
   ============================================================================ */

/**
 * x-cloak - Alpine.js visibility utility
 * Prevents flash of uninitialized content
 */
[x-cloak] {
    display: none !important;
}

/* ============================================================================
   SSR FALLBACK SECTIONS
   Server-side rendered content for no-JS browsers
   Hidden automatically when Alpine.js initializes (x-show="false")
   ============================================================================ */

/**
 * SSR sections are visible by default (for no-JS users)
 * Alpine.js will hide them via x-show="false" when it loads
 */
.top-deals--ssr,
.trends-categories--ssr,
.trends-detail--ssr {
    /* Default visible - Alpine will hide via x-show="false" */
}

/**
 * Hide Alpine-powered duplicates when SSR is visible (no-JS)
 * This uses :has() to detect if Alpine hasn't initialized
 * Fallback: Alpine sections use x-cloak which hides until Alpine loads
 */
@supports not selector(:has(*)) {
    /* For browsers without :has() support, rely on x-cloak alone */
}

/**
 * Euro symbol prefix for SSR prices
 * Alpine.js version uses formatPrice() which adds the symbol
 */
.top-deals--ssr .deal-item__price-old::before,
.top-deals--ssr .deal-item__price-new::before,
.trends-categories--ssr .trends-card__stat-value::before,
.trends-detail--ssr .trends-drop-card__price-old::before,
.trends-detail--ssr .trends-drop-card__price-current::before {
    content: '\20AC';
    margin-right: 0.125em;
}

/**
 * SSR section matches the Alpine version styling
 * No additional styles needed - uses same class structure
 */

/**
 * Hidden utility
 * For conditional visibility
 */
.trends-hidden {
    display: none !important;
}

.trends-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================================
   SEO CONTENT SECTION
   SEO content styling is now handled centrally by pc-kompas-faq plugin
   (seo-content.css with .catalog-seo-content wrapper)
   This section has been removed to avoid style conflicts.
   ============================================================================ */