/**
 * PC Kompas Trends - Responsive Styles
 *
 * Contains:
 * - All media queries for responsive design
 * - Dark/light mode support
 * - Accessibility enhancements
 * - Print styles
 *
 * @package PC_Kompas_Trends
 * @since 1.0.0
 */

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/**
 * Top deals responsive - Mobile: Single column
 */
@media (max-width: 768px) {
    .top-deals__list {
        grid-template-columns: 1fr;
    }

    .top-deals__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .deal-item {
        padding: 0.625rem;
        gap: 0.625rem;
    }

    .deal-item__image {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .deal-item__name {
        font-size: 0.8125rem;
    }

    .deal-item__price-new {
        font-size: 0.875rem;
    }
}

/* Top deals - Small mobile */
@media (max-width: 480px) {
    .deal-item__rank {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 0.625rem;
    }

    .deal-item__image {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .deal-item__category {
        display: none;
    }

    .deal-item__supplier {
        display: none;
    }
}

/* Chart responsive */
@media (max-width: 768px) {
    .trends-chart .pkt-price-chart__loading {
        min-height: 120px;
    }

    .trends-chart .pkt-price-chart__canvas-container {
        height: 180px !important;
    }
}

/**
 * Small screens (mobile/tablet, up to 768px)
 * - Single column layouts
 * - Reduced spacing
 */
@media (max-width: 768px) {
    .trends-page {
        padding: 16px 0 60px;
    }

    .trends-page__inner {
        padding: clamp(0.5rem, 3vw, 1rem);
    }

    .trends-header {
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }

    .trends-header__title {
        /* Mobile: minimum 1.5rem (24px), scales up to 1.75rem (28px) */
        font-size: clamp(1.5rem, 4vw + 0.5rem, 1.75rem);
    }

    .trends-header__intro {
        /* Mobile: minimum 1rem (16px) - must be larger than SEO body text (15px) */
        font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem);
    }

    /* Stats grid - 2 columns on mobile with better spacing */
    .trends-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .trends-stats__card {
        padding: 0.5rem;
    }

    .trends-stats__label {
        font-size: 0.6rem;
        white-space: normal;
        line-height: 1.2;
        min-height: 1.8em;
    }

    .trends-stats__value {
        font-size: 0.9rem;
    }

    /* Period buttons - smaller on mobile */
    .trends-period-selector {
        gap: clamp(0.25rem, 1vw, 0.375rem);
    }

    .trends-period-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
        min-height: 32px;
    }

    /* Category cards on mobile */
    .trends-categories__grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .trends-card {
        padding: 0.875rem;
    }

    .trends-card__header {
        gap: 0.75rem;
    }

    .trends-card__icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .trends-card__icon svg {
        width: 24px;
        height: 24px;
    }

    .trends-card__title {
        font-size: 1rem;
    }

    .trends-card__stat {
        font-size: 0.8rem;
        padding: 0.375rem 0;
    }

    /* Drop cards grid */
    .trends-drops__list {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(0.375rem, 2vw, 0.5rem);
    }

    .trends-drop-card {
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .trends-drop-card__image-container {
        aspect-ratio: 1 / 1;
    }

    .trends-drop-card__image {
        object-fit: contain;
    }

    .trends-drop-card__name {
        font-size: 0.75rem;
        -webkit-line-clamp: 1;
    }

    .trends-drop-card__brand {
        font-size: 0.625rem;
    }

    .trends-drop-card__prices {
        gap: 0.375rem;
        padding-top: 0.375rem;
    }

    .trends-drop-card__price-old {
        font-size: 0.6875rem;
    }

    .trends-drop-card__price-current {
        font-size: 0.8125rem;
    }

    .trends-drop-card__badge {
        min-width: 32px;
        min-height: 32px;
        padding: 0.25rem;
        font-size: 0.625rem;
    }

    /* Subcategory tabs */
    .trends-subcategory-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.375rem;
    }

    .trends-subcategory-item {
        padding: 0.375rem;
    }

    /* Chart height */
    .trends-chart .pkt-price-chart__canvas-container {
        height: clamp(150px, 40vw, 200px) !important;
    }

    .trends-drops__title {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }

    .trends-drops__subtitle {
        font-size: 0.75rem;
    }
}

/* ============================================================================
   COMPACT MOBILE BREAKPOINT (max-width: 640px) - Builder Pattern
   ============================================================================ */

@media (max-width: 640px) {
    /* Header left-aligned */
    .trends-header {
        text-align: left;
    }

    .trends-header__title {
        /* 640px: 1.375rem (22px) - clear hierarchy over body text */
        font-size: 1.375rem;
        font-weight: 600;
    }

    .trends-header__intro {
        /* 640px: 1rem (16px) - larger than SEO body text (15px) */
        font-size: 1rem;
    }

    /* Period selector as toolbar */
    .trends-period-selector {
        display: flex;
        gap: 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border);
    }

    .trends-period-selector::-webkit-scrollbar {
        display: none;
    }

    .trends-period-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        min-height: 44px;
        white-space: nowrap;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    /* Category tabs horizontal scroll */
    .trends-category-tabs {
        display: flex;
        gap: 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .trends-category-tabs::-webkit-scrollbar {
        display: none;
    }

    .trends-category-tab {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .trends-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
    }

    .trends-stats__card {
        padding: 0.375rem;
    }

    .trends-stats__label {
        font-size: 0.55rem;
        letter-spacing: 0;
    }

    .trends-stats__value {
        font-size: 0.8rem;
    }

    .trends-period-btn {
        padding: 0.25rem 0.375rem;
        font-size: 0.65rem;
        min-height: 28px;
    }

    .trends-header__title {
        /* 480px (small phones): 1.25rem (20px) - still larger than body */
        font-size: 1.25rem;
    }

    .trends-header__intro {
        /* 480px: 0.9375rem (15px) - same as SEO body, slightly smaller than title */
        font-size: 0.9375rem;
    }

    /* Category cards stay single column */
    .trends-categories__grid {
        gap: 0.625rem;
    }

    .trends-card__stat {
        font-size: 0.75rem;
    }

    /* Drop cards single column */
    .trends-drops__list {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .trends-drop-card {
        flex-direction: row;
        padding: 0.5rem;
    }

    .trends-drop-card__image-container {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .trends-drop-card__info {
        flex: 1;
        min-width: 0;
    }
}

/**
 * Medium screens (tablet, 641px to 1023px)
 * - 2 column grids
 * - Balanced spacing
 */
@media (min-width: 641px) and (max-width: 1023px) {
    .trends-categories__grid,
    .trends-drops__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .trends-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/**
 * Large screens (desktop, 1024px+)
 * - Multi-column layouts
 * - Full spacing
 */
@media (min-width: 1024px) {
    .trends-categories__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .trends-drops__list {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.5rem;
    }

    .trends-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .trends-subcategory-items {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .trends-drop-card__image-container {
        aspect-ratio: 1 / 1;
    }
}

/**
 * Extra large screens (1440px+)
 * - Optimal viewing experience
 */
@media (min-width: 1440px) {
    .trends-page__inner {
        padding: 0 24px;
    }

    .trends-drops__list {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
    }
}

/* ============================================================================
   DARK/LIGHT MODE SUPPORT
   ============================================================================ */

/**
 * Dark Mode Overrides
 * - Darker backgrounds for better contrast
 * - Lighter text colors
 * - Adjusted shadows for depth
 */
.dark .trends-card,
html.dark .trends-card,
.dark .trends-stats__card,
html.dark .trends-stats__card,
.dark .trends-drop-card,
html.dark .trends-drop-card {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

.dark .trends-period-btn:hover,
html.dark .trends-period-btn:hover,
.dark .trends-subcategory-btn:hover,
html.dark .trends-subcategory-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

/**
 * Light Mode Overrides
 * - Light backgrounds with subtle borders
 * - Dark text for readability
 */
.light .trends-card,
html.light .trends-card,
.light .trends-stats__card,
html.light .trends-stats__card,
.light .trends-drop-card,
html.light .trends-drop-card {
    background: var(--bg-secondary);
    border-color: var(--border);
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/**
 * Reduced motion - disable animations
 * Respects prefers-reduced-motion for users with motion sensitivity
 */
@media (prefers-reduced-motion: reduce) {
    .trends-card,
    .trends-drop-card,
    .trends-period-btn,
    .trends-subcategory-btn,
    .trends-error__btn,
    .trends-drop-card__cta,
    .trends-breadcrumb__link {
        transition: none;
    }

    .trends-card:hover,
    .trends-drop-card:hover,
    .trends-drop-card__cta:hover,
    .trends-error__btn:hover {
        transform: none;
    }

    .trends-loading__spinner {
        animation: none;
    }
}

/**
 * Focus visible - keyboard navigation
 * Clear focus indicators for keyboard users
 * Ensures accessibility compliance (WCAG 2.4.7)
 */
.trends-breadcrumb__link:focus-visible,
.trends-period-btn:focus-visible,
.trends-subcategory-btn:focus-visible,
.trends-error__btn:focus-visible,
.trends-drop-card__cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/**
 * High contrast mode
 * Enhance borders and text for vision impairments
 */
@media (prefers-contrast: more) {
    .trends-period-btn,
    .trends-subcategory-btn,
    .trends-card,
    .trends-stats__card,
    .trends-drop-card {
        border-width: 2px;
    }

    .trends-stats__value {
        font-weight: 900;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

/**
 * Print-friendly styles
 * - Simplify layout for printed output
 * - Remove interactive elements
 * - Use readable colors
 */
@media print {
    .trends-page {
        padding: 1rem;
    }

    .trends-loading,
    .trends-error,
    .trends-empty {
        display: none;
    }

    .trends-period-selector,
    .trends-subcategories {
        display: none;
    }

    .trends-card,
    .trends-stats__card,
    .trends-drop-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #cccccc;
    }

    .trends-card:hover,
    .trends-drop-card:hover {
        transform: none;
        box-shadow: none;
    }

    .trends-drops__list {
        break-inside: avoid;
    }

    .trends-drop-card__image {
        max-width: 100%;
        height: auto;
    }

    .trends-drop-card__cta {
        display: none;
    }
}

/* ============================================================================
   SEO CONTENT RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .seo-content {
        max-width: 100%;
    }

    .seo-content .alignleft,
    .seo-content .alignright {
        float: none;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .seo-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seo-content a,
    .seo-content tbody tr {
        transition: none;
    }
}