/**
/* Hi-Kataloog™ Responsive Styles
 * Handles mobile, tablet, and desktop layouts
 * Version: 0.8.0
 * 
 * NOTE: Tab navigation styles moved to hk-catalog-navigation.css v4.0+
 * This file handles only non-tab responsive elements.
 */

/* ============================================
   SORTING CONTAINER RESPONSIVE
   ============================================ */

.hk-sorting-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
}

.hk-sorting-container label {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

.hk-sort-dropdown {
  flex: 1;
  max-width: 200px;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  background: white;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hk-sort-dropdown:hover {
  border-color: rgba(0,0,0,0.2);
}

.hk-sort-dropdown:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

@media (max-width: 480px) {
  .hk-sorting-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hk-sort-dropdown {
    max-width: none;
  }
}

/* ============================================================================
   MOBILE FILTER MENU
   ============================================================================ */

.hk-mobile-menu-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f5f5f5;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 16px;
    width: 100%;
}

.hk-mobile-menu-toggle:hover {
    background: #e5e5e5;
    border-color: #111;
}

.hk-mobile-menu-toggle.is-active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.hk-mobile-menu-toggle.is-active .hk-menu-arrow {
    transform: rotate(180deg);
}

.hk-menu-arrow {
    margin-left: auto;
    transition: transform 0.3s;
}

.hk-mobile-filters {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.hk-mobile-filters.is-open {
    max-height: 500px;
}

@media (max-width: 768px) {
    .hk-mobile-menu-toggle {
        display: flex;
    }
}


/* ============================================================================
   ORIENTATION HINT
   ============================================================================ */

.hk-orientation-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 32px;
    border-radius: 16px;
    text-align: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.hk-orientation-hint.is-visible {
    opacity: 1;
}

.hk-orientation-hint svg {
    animation: hkRotateDevice 2s ease-in-out infinite;
    margin-bottom: 16px;
}

@keyframes hkRotateDevice {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(90deg);
    }
}

.hk-orientation-hint p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}


/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
    .hk-archive-wrapper {
        padding: 0 16px;
    }
    
    .hk-archive-title {
        font-size: 2rem;
    }
    
    .hk-catalog-grid.hk-view-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 20px;
    }
    
    .hk-catalog-hero__content {
        gap: 32px;
    }
    
    .hk-catalog-hero__thumbnail {
        max-width: 300px;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    .hk-archive-header {
        margin-bottom: 32px;
    }
    
    .hk-archive-title {
        font-size: 1.75rem;
    }
    
    .hk-archive-controls {
        padding: 16px;
    }
    
    .hk-archive-search {
        margin-bottom: 16px;
    }
    
    .hk-search-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .hk-archive-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .hk-filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .hk-filter-select {
        width: 100%;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .hk-view-toggle {
        margin-left: 0;
        justify-content: center;
    }
    
    .hk-catalog-grid.hk-view-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .hk-view-list .hk-catalog-card__inner {
        grid-template-columns: 1fr;
    }
    
    .hk-view-list .hk-catalog-card__actions {
        flex-direction: row;
        padding: 0 20px 20px;
    }
    
    /* Single Catalog Mobile */
    .hk-catalog-hero {
        padding: 24px 0 40px;
    }
    
    .hk-catalog-hero__content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .hk-catalog-hero__thumbnail {
        max-width: 100%;
        position: static;
    }
    
    .hk-catalog-title {
        font-size: 1.5rem;
    }
    
    .hk-catalog-meta {
        flex-direction: column;
        gap: 12px;
    }
    
    .hk-catalog-actions {
        flex-direction: column;
    }
    
    .hk-btn {
        width: 100%;
        justify-content: center;
    }
    
    .hk-related-section {
        padding: 40px 0;
    }
    
    .hk-section-title {
        font-size: 1.5rem;
    }
    
    .hk-products-grid,
    .hk-catalogs-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
    
    /* PDF Viewer Mobile */
    .hk-spread-container {
        flex-direction: column;
    }
    
    .hk-nav-arrow {
        width: 40px;
        height: 40px;
    }
    
    .hk-toolbar {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .hk-tool-btn,
    .hk-float-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    
    .hk-zoom-level {
        font-size: 13px;
    }
    
    .hk-control-group {
        gap: 4px;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    .hk-archive-title {
        font-size: 1.5rem;
    }
    
    .hk-breadcrumbs {
        font-size: 13px;
        gap: 6px;
    }
    
    .hk-catalog-card__title {
        font-size: 1.1rem;
    }
    
    .hk-category-tag,
    .hk-category-badge {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .hk-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
        padding: 0 8px;
    }
    
    .hk-products-grid,
    .hk-catalogs-grid {
        grid-template-columns: 1fr;
    }
    
    .hk-share-buttons {
        grid-template-columns: 1fr;
    }
    
    .hk-modal__content {
        width: 95%;
        max-width: none;
    }
}


/* ============================================================================
   LANDSCAPE ORIENTATION (Mobile)
   ============================================================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .hk-catalog-hero {
        padding: 16px 0 24px;
    }
    
    .hk-catalog-hero__thumbnail {
        max-width: 200px;
    }
    
    .hk-catalog-title {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    
    .hk-catalog-description {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .hk-toolbar {
        padding: 4px 8px;
    }
    
    .hk-tool-btn {
        min-width: 36px;
        min-height: 36px;
    }
}


/* ============================================================================
   TOUCH DEVICE SPECIFIC
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hk-catalog-card:hover {
        transform: none;
    }
    
    /* Larger touch targets */
    .hk-btn,
    button,
    a.hk-view-btn {
        min-height: 44px;
    }
    
    /* Remove hover animations */
    .hk-catalog-card:hover .hk-catalog-card__thumbnail img {
        transform: none;
    }
    
    /* Active state feedback */
    .hk-catalog-card:active {
        opacity: 0.8;
    }
    
    .hk-btn:active {
        transform: scale(0.98);
    }
}


/* ============================================================================
   SAFE AREAS (iOS Notch support)
   ============================================================================ */

@supports (padding: env(safe-area-inset-left)) {
    .hk-toolbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .hk-floating-actions {
        top: max(16px, env(safe-area-inset-top));
        right: max(16px, env(safe-area-inset-right));
    }
    
    .hk-scroll-top {
        bottom: max(24px, env(safe-area-inset-bottom));
        right: max(24px, env(safe-area-inset-right));
    }
}


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

@media print {
    .hk-archive-controls,
    .hk-pagination,
    .hk-scroll-top,
    .hk-floating-actions,
    .hk-toolbar,
    .hk-btn--secondary,
    .hk-share-btn {
        display: none !important;
    }
    
    .hk-catalog-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .hk-catalog-card__actions {
        display: none;
    }
}


/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */

@media (prefers-contrast: high) {
    .hk-catalog-card,
    .hk-btn,
    .hk-filter-select {
        border: 2px solid currentColor;
    }
    
    .hk-lazy-loading {
        background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(0,0,0,0.1) 10px,
            rgba(0,0,0,0.1) 20px
        );
    }
}


/* ============================================================================
   DARK MODE (System Preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .hk-archive-wrapper {
        background: #1a1a1a;
        color: #e5e5e5;
    }
    
    .hk-catalog-card,
    .hk-archive-controls {
        background: #2a2a2a;
        border-color: #3a3a3a;
    }
    
    .hk-catalog-card__title a,
    .hk-archive-title {
        color: #fff;
    }
    
    .hk-filter-select,
    .hk-search-input {
        background: #2a2a2a;
        border-color: #3a3a3a;
        color: #e5e5e5;
    }
    
    .hk-btn--primary {
        background: #fff;
        color: #111;
    }
    
    .hk-btn--secondary {
        background: #3a3a3a;
        color: #e5e5e5;
    }
}