/* ============================================================
   Guidalux – Universal Responsive System (responsive.css)
   ============================================================
   Comprehensive multi-tier responsiveness tested across:
   - 320px (Ultra-Compact Mobile / iPhone SE)
   - 375px (Compact Mobile / iPhone 12/13/14 Mini)
   - 414px (Standard Mobile / iPhone Plus/Max, Galaxy, Pixel)
   - 768px (Tablet Portrait / iPad)
   - 1024px (Tablet Landscape / iPad Pro / Small Laptops)
   - 1280px (Standard Desktop & Laptop)
   - 1440px (Wide Desktop)
   - 1920px (Full HD & Ultrawide)
   ============================================================ */

/* ==========================================================
   1. GLOBAL OVERFLOW & BASE DEFENSES
   ========================================================== */

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Ensure all tables are wrapped in touch-scrollable containers */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--pk-space-4);
  border-radius: var(--pk-radius-lg);
}

.table-responsive > .table {
  margin-bottom: 0;
  min-width: 540px;
}


/* ==========================================================
   2. ULTRA-COMPACT & COMPACT MOBILE (320px – 414px)
   ========================================================== */

@media (max-width: 575.98px) {

  /* Fluid Display Typography */
  h1, .h1, .display-4, .display-5, .display-6 {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    word-wrap: break-word;
  }

  h2, .h2 {
    font-size: clamp(1.25rem, 5vw, 1.6rem) !important;
    line-height: 1.3 !important;
  }

  h3, .h3 {
    font-size: 1.125rem !important;
  }

  .lead {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }

  /* Universal Container Padding */
  .container {
    padding-left: var(--pk-space-4) !important;
    padding-right: var(--pk-space-4) !important;
  }

  /* Header & Navbar */
  .brand-logo {
    font-size: 1.375rem !important;
  }

  .navbar {
    padding-top: var(--pk-space-2) !important;
    padding-bottom: var(--pk-space-2) !important;
  }

  .announcement-bar {
    font-size: 0.6875rem !important;
    padding: 4px 0 !important;
  }

  .announcement-badge {
    font-size: 0.625rem !important;
    padding: 1px 4px !important;
  }

  .header-search-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: var(--pk-space-2);
  }

  #nav-actions {
    flex-direction: column;
    width: 100%;
    align-items: stretch !important;
  }

  #nav-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Section Spacing on Mobile */
  .section-padding {
    padding-top: var(--pk-space-8) !important;
    padding-bottom: var(--pk-space-8) !important;
  }

  .section-padding-sm {
    padding-top: var(--pk-space-6) !important;
    padding-bottom: var(--pk-space-6) !important;
  }

  /* Touch-Friendly Buttons (Min 44px Tap Target) */
  .btn, .form-control, .form-select {
    min-height: 44px;
    font-size: var(--pk-text-sm);
  }

  .btn-sm {
    min-height: 36px;
    padding: 6px 12px !important;
  }

  /* Hero Sections & Banners */
  #hero, #deals-hero, #search-hero, #category-hero {
    padding-top: var(--pk-space-6) !important;
    padding-bottom: var(--pk-space-6) !important;
  }

  /* Cards & Grids (Single Full-Width Column) */
  .col-md-6, .col-lg-4, .col-xl-3 {
    width: 100% !important;
  }

  .card-body {
    padding: var(--pk-space-4) !important;
  }

  .product-card .product-price {
    font-size: 1.125rem !important;
  }

  /* Spotlight Cards Stack Vertically */
  #deals-spotlight-container .card,
  #blog-spotlight-container .card,
  #editors-spotlight .card {
    padding: var(--pk-space-4) !important;
  }

  /* Filter Toolbars Collapse Cleanly */
  #deals-toolbar, #category-filters-container, #search-toolbar {
    padding: var(--pk-space-3) !important;
  }

  #deals-toolbar .row > div,
  #category-filters-container .row > div {
    margin-bottom: var(--pk-space-2);
  }

  /* Compact Filter Button Groups (Touch Horizontal Scroll) */
  .btn-group[role="group"],
  #blog-content-type-filter,
  #search-type-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--pk-space-2);
    gap: var(--pk-space-1);
    scrollbar-width: none; /* Firefox */
  }

  .btn-group[role="group"]::-webkit-scrollbar,
  #blog-content-type-filter::-webkit-scrollbar,
  #search-type-filters::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .btn-group[role="group"] .btn,
  #blog-content-type-filter .btn,
  #search-type-filters .btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }

  /* Article / Review Pages */
  .article-rich-body {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  .article-meta {
    font-size: var(--pk-text-xs) !important;
    gap: 4px !important;
  }

  #author-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: var(--pk-space-4) !important;
  }

  #author-box .author-avatar {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: var(--pk-space-2);
  }

  /* Sidebars Stack Below Content */
  #article-sidebar,
  #review-sidebar,
  #guide-sidebar,
  #blog-sidebar,
  #deals-sidebar {
    margin-top: var(--pk-space-6) !important;
  }

  /* Ad Placeholders */
  .ad-slot {
    margin: var(--pk-space-4) 0 !important;
    padding: var(--pk-space-3) !important;
  }

  .ad-placeholder {
    padding: var(--pk-space-3) !important;
  }

  /* Footer 5-Column Collapse */
  #site-footer {
    padding-top: var(--pk-space-10) !important;
    padding-bottom: var(--pk-space-6) !important;
    margin-top: var(--pk-space-10) !important;
  }

  #site-footer .footer-heading {
    margin-bottom: var(--pk-space-2) !important;
  }

  #footer-social {
    justify-content: center !important;
    display: flex !important;
    gap: var(--pk-space-2);
    margin-top: var(--pk-space-3);
  }



  /* Floating Back to Top on Small Screens */
  #back-to-top {
    bottom: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
}


/* ==========================================================
   3. TABLET DEVICES (576px – 767px)
   ========================================================== */

@media (min-width: 576px) and (max-width: 767.98px) {

  /* Fluid Typography */
  h1, .h1 {
    font-size: 2rem !important;
  }

  h2, .h2 {
    font-size: 1.5rem !important;
  }

  /* 2-Column Grid Layouts */
  #deals-list .col-md-6,
  #blog-article-grid .col-md-6,
  #search-products-grid .col-md-6,
  #search-content-grid .col-md-6,
  #search-deals-grid .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Header Actions */
  .header-search-wrapper {
    min-width: 200px;
  }

  /* Sidebars Stack Below */
  #article-sidebar,
  #review-sidebar,
  #guide-sidebar,
  #blog-sidebar,
  #deals-sidebar {
    margin-top: var(--pk-space-8);
  }
}


/* ==========================================================
   4. LAPTOPS & TABLET LANDSCAPE (768px – 991px)
   ========================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

  /* 2 or 3 Column Feeds */
  #deals-list .col-md-6,
  #blog-article-grid .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .header-search-wrapper {
    min-width: 220px;
  }

  /* Sidebars Stack Gracefully */
  #article-sidebar,
  #review-sidebar,
  #guide-sidebar,
  #blog-sidebar,
  #deals-sidebar {
    margin-top: var(--pk-space-10);
  }
}


/* ==========================================================
   5. DESKTOP & LARGE MONITORS (992px – 1439px)
   ========================================================== */

@media (min-width: 992px) {

  /* Sticky Sidebar Layout */
  .sticky-top {
    position: sticky !important;
    top: 90px !important;
    z-index: var(--pk-z-sticky);
  }

  /* Side-by-Side Reading Ergonomics */
  .col-lg-8 {
    padding-right: var(--pk-space-6);
  }

  .article-rich-body {
    max-width: 100%;
    font-size: 1.0625rem;
    line-height: 1.85;
  }
}


/* ==========================================================
   6. EXTRA LARGE & ULTRAWIDE MONITORS (1440px – 1920px+)
   ========================================================== */

@media (min-width: 1400px) {

  .container {
    max-width: 1360px !important;
  }

  /* Balanced Editorial Scale */
  :root {
    --pk-h1: 2.75rem;
    --pk-h2: 2rem;
    --pk-h3: 1.5rem;
  }

  .section-padding {
    padding-top: var(--pk-space-16);
    padding-bottom: var(--pk-space-16);
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1440px !important;
  }
}


/* ==========================================================
   7. HIGH-DPI / RETINA DISPLAYS & TOUCH HYGIENE
   ========================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card, .btn, .form-control, .form-select {
    border-width: 1px;
  }
}

/* Touch vs Fine Pointer Distinction */
@media (hover: none) {
  /* Prevent sticky hover states on mobile touch */
  .card:hover,
  .category-card:hover,
  .deal-card:hover,
  .product-card:hover,
  .blog-card:hover,
  .article-card:hover {
    transform: none !important;
    box-shadow: var(--pk-shadow-xs) !important;
  }

  .card:hover .card-img-top,
  .card:hover .blog-card-img-wrapper img,
  .card:hover .article-img-wrapper img,
  .card:hover .deal-img-wrapper img,
  .card:hover .product-img-wrapper img {
    transform: none !important;
  }
}