/* ============================================
   Responsive Utilities & Media Queries
   Version: 2.0 - Enhanced Mobile & Tablet Support
   ============================================ */

/* ============================================
   Mobile First Breakpoints
   ============================================ */
/*
  Mobile: 320px - 767px (default)
  Tablet: 768px - 1023px
  Desktop: 1024px - 1439px
  Large Desktop: 1440px+
*/

/* ============================================
   Extra Small Mobile Styles (< 375px)
   ============================================ */
@media (max-width: 374px) {
  /* Very small screens - extra compact */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 16px !important; }

  /* Hero badges - single column */
  .d-flex.flex-wrap.gap-2 {
    gap: 0.5rem !important;
  }

  .badge {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  /* Buttons - full width */
  .btn-eco-primary,
  .btn-eco-secondary,
  .btn-eco-light,
  .btn-eco-outline,
  .btn-eco-outline-light {
    width: 100%;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.9rem !important;
  }

  /* Footer Social Icons - Extra small screens */
  .social-link-enhanced {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .d-flex.gap-2.mt-4.flex-wrap {
    gap: 0.35rem !important;
  }

  /* Stats - smaller text */
  [style*="font-size: 3.5rem"] {
    font-size: 2rem !important;
  }
}

/* ============================================
   Mobile Specific Styles (< 768px)
   ============================================ */
@media (max-width: 767px) {
  /* Typography */
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }

  /* Spacing */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Navigation */
  .navbar-collapse {
    background-color: #fff;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .navbar-nav .nav-link {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  /* Logo - Two Line Layout */
  .navbar-brand div[style*="flex-direction: column"] span:first-child {
    font-size: 1.125rem !important;
  }

  .navbar-brand div[style*="flex-direction: column"] span:last-child {
    font-size: 0.75rem !important;
  }

  .navbar-brand > div[style*="width: 45px"] {
    width: 38px !important;
    height: 38px !important;
  }

  /* Top Header Bar - Stack on mobile */
  [style*="background: var(--eco-forest-dark)"] .row {
    text-align: center;
  }

  [style*="background: var(--eco-forest-dark)"] .d-flex.flex-wrap.gap-3 {
    flex-direction: column;
    gap: 0.5rem !important;
  }

  /* Section Spacing */
  .section-spacing {
    padding: 3rem 0 !important;
  }

  .section-spacing-sm {
    padding: 2rem 0 !important;
  }

  /* Hero Section */
  section[style*="padding: 5rem 0"] {
    padding: 3rem 0 !important;
  }

  section[style*="padding: 4rem 0"] {
    padding: 2.5rem 0 !important;
  }

  /* Hero Badges - Better wrapping */
  .d-flex.flex-wrap.gap-2 {
    justify-content: center !important;
  }

  /* Hero buttons - stack vertically */
  .d-flex.flex-wrap.gap-3.justify-content-center {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem !important;
  }

  .d-flex.flex-wrap.gap-3.justify-content-center .btn-eco-light,
  .d-flex.flex-wrap.gap-3.justify-content-center .btn-eco-outline-light,
  .d-flex.flex-wrap.gap-3.justify-content-center .btn-eco-primary,
  .d-flex.flex-wrap.gap-3.justify-content-center a[class*="btn-"] {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Simplified Cards */
  .card-simple {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  /* Product image cards */
  .card-simple[style*="padding: 0"] div[style*="height: 180px"] {
    height: 150px !important;
  }

  /* Icon Simple */
  .icon-simple {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
  }

  .icon-simple i {
    font-size: 1.5rem;
  }

  /* Grid System - Stack on Mobile */
  .grid-clean {
    gap: 1rem;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Stats Section - Better mobile sizing */
  [style*="font-size: 3.5rem"] {
    font-size: 2.5rem !important;
  }

  /* Certifications */
  .certification-badge {
    margin-bottom: 1.5rem;
  }

  .certification-badge img {
    height: 50px;
  }

  /* CTA Section */
  .cta-section {
    padding: 3rem 0;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-buttons .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Footer */
  .footer, .footer-enhanced {
    padding: 2.5rem 0 1rem;
  }

  .footer .col-md-3,
  .footer-enhanced .col-md-3,
  .footer-enhanced .col-md-2 {
    margin-bottom: 2rem;
  }

  .social-links {
    justify-content: center;
  }

  /* Footer Social Icons - 6 icons layout */
  .social-link-enhanced {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  .d-flex.gap-2.mt-4.flex-wrap {
    gap: 0.4rem !important;
    justify-content: flex-start;
  }

  /* Footer bottom links - stack on mobile */
  .footer-enhanced [class*="col-md-6"].text-md-end {
    text-align: center !important;
  }

  .footer-enhanced [class*="col-md-6"].text-md-end a {
    display: block;
    margin: 0.5rem 0 !important;
  }

  /* Tables - Horizontal scroll */
  .table-responsive {
    font-size: 14px;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 500px;
  }

  /* Forms */
  .form-label {
    font-size: 14px;
  }

  .form-control, .form-select {
    font-size: 16px; /* Prevent iOS zoom */
    padding: 0.75rem;
  }

  /* Product Detail Sections - Mobile Layout */
  .row[style*="align-items: center"] > .col-md-5,
  .row[style*="align-items: center"] > .col-md-7 {
    margin-bottom: 1.5rem;
  }

  /* Swiper/Slider Mobile Adjustments */
  .swiper-button-next,
  .swiper-button-prev {
    width: 30px !important;
    height: 30px !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 14px !important;
  }

  .swiper-pagination {
    bottom: 45px !important;
  }

  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }

  .swiper-pagination-bullet-active {
    width: 18px;
  }

  .slider-label {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }

  /* Category badges on product cards */
  [style*="position: absolute"][style*="top: 1.5rem"] {
    top: 1rem !important;
    left: 1rem !important;
    right: auto !important;
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Content padding in product sections */
  div[style*="padding: 2.5rem"] {
    padding: 1.5rem !important;
  }

  /* Product page breadcrumb */
  .breadcrumb {
    font-size: 0.85rem;
    flex-wrap: wrap;
  }

  .breadcrumb-item {
    margin-bottom: 0.25rem;
  }

  /* Contact page map */
  #map {
    height: 300px !important;
  }

  /* FAQ accordions */
  .accordion-button {
    font-size: 0.95rem;
    padding: 1rem;
  }

  .accordion-body {
    padding: 1rem;
    font-size: 0.9rem;
  }

  /* Language switcher */
  .language-switcher {
    width: 100%;
    margin-top: 1rem !important;
  }

  .language-switcher .dropdown,
  .language-switcher .btn {
    width: 100%;
  }

  /* Request Quote button in nav */
  .navbar-collapse .btn-eco-primary {
    width: 100%;
    margin-top: 1rem !important;
    margin-left: 0 !important;
  }

  /* Heading descriptions */
  .heading-secondary {
    font-size: 0.95rem !important;
    margin-bottom: 2rem !important;
  }

  /* Global Markets section icons */
  .card-simple .icon-simple {
    width: 50px;
    height: 50px;
  }

  /* Lists inside cards */
  .card-simple ul.list-unstyled.small {
    font-size: 0.85rem;
  }
}

/* ============================================
   Tablet Specific Styles (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Typography */
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 22px !important; }

  /* Section Spacing */
  .section-spacing {
    padding: 4rem 0 !important;
  }

  /* Hero Section */
  section[style*="padding: 5rem 0"] h1 {
    font-size: 40px !important;
  }

  /* Grid System - 2 Columns on Tablet */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stats - 2x2 grid */
  [style*="font-size: 3.5rem"] {
    font-size: 3rem !important;
  }

  /* Stats */
  .stat-number {
    font-size: 2.5rem;
  }

  /* Product cards */
  .card-simple {
    padding: 1.75rem;
  }

  /* Contact page map */
  #map {
    height: 400px !important;
  }

  /* Product detail rows - maintain side-by-side */
  .row .col-md-5,
  .row .col-md-7 {
    margin-bottom: 0;
  }

  /* Swiper adjustments */
  .swiper-button-next,
  .swiper-button-prev {
    width: 32px !important;
    height: 32px !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 16px !important;
  }

  /* Footer columns */
  .footer-enhanced .col-md-2,
  .footer-enhanced .col-md-3 {
    margin-bottom: 1.5rem;
  }
}

/* ============================================
   Desktop Specific Styles (1024px+)
   ============================================ */
@media (min-width: 1024px) {
  /* Container Width */
  .container {
    max-width: 1200px;
  }

  /* Navigation Dropdown */
  .dropdown-menu {
    margin-top: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  /* Grid System - Full Columns on Desktop */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

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

  /* Section Spacing */
  .section-spacing {
    padding: 5rem 0 !important;
  }
}

/* ============================================
   Large Desktop (1440px+)
   ============================================ */
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }

  /* Hero Section - Larger Typography */
  section[style*="padding: 5rem 0"] h1 {
    font-size: 4rem !important;
  }

  /* Larger Cards on Big Screens */
  .card-simple {
    padding: 2.5rem;
  }

  .icon-simple {
    width: 72px;
    height: 72px;
  }

  .icon-simple i {
    font-size: 2rem;
  }
}

/* ============================================
   Landscape Mode (Mobile/Tablet)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  section[style*="padding: 5rem 0"] {
    padding: 2rem 0 !important;
  }

  .section-spacing {
    padding: 2rem 0 !important;
  }

  .navbar {
    padding: 0.5rem 0;
  }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   Print Optimization
   ============================================ */
@media print {
  @page {
    margin: 2cm;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 { font-size: 18pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 14pt; }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  .navbar,
  .footer,
  .cta-section,
  .btn,
  .social-links,
  .language-switcher {
    display: none !important;
  }

  .container {
    max-width: 100%;
  }
}

/* ============================================
   High DPI / Retina Displays
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Use higher resolution images if available */
  .hero-section {
    background-size: cover;
  }
}

/* ============================================
   Dark Mode Support (Optional)
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode support */
  /*
  :root {
    --primary-white: #1a1a1a;
    --text-dark: #f0f0f0;
    --text-light: #b0b0b0;
  }

  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  */
}

/* ============================================
   Product Page Specific Responsive Fixes
   ============================================ */
@media (max-width: 767px) {
  /* Product detail sections - Image above content */
  .row.align-items-center > [class*="col-md-5"],
  .row.align-items-center > [class*="col-md-7"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Image containers on mobile */
  [style*="position: relative"][style*="width: 100%"][style*="height: 100%"] {
    height: auto !important;
    min-height: 250px;
    margin-bottom: 1.5rem;
  }

  /* Swiper container on mobile */
  .swiper {
    height: 280px !important;
  }

  /* Product content sections padding */
  [style*="padding: 2.5rem"] {
    padding: 1.25rem !important;
  }

  /* Hero image on mobile - hide on product pages */
  .col-lg-6.d-none.d-lg-block {
    display: none !important;
  }

  /* Product feature lists */
  .list-unstyled li {
    margin-bottom: 0.75rem !important;
  }

  /* Related Products grid */
  .grid-3.text-center .card-simple,
  .grid-4.text-center .card-simple {
    text-align: center;
  }

  /* Spec tables */
  .table {
    font-size: 0.85rem;
  }

  .table td, .table th {
    padding: 0.5rem;
  }

  /* FAQ section */
  .accordion-item {
    margin-bottom: 0.5rem;
  }

  /* Contact form */
  .form-enhanced .form-control,
  .form-enhanced .form-select {
    padding: 0.875rem;
  }
}

/* ============================================
   Tablet Product Page Fixes
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
  /* Product detail - 50/50 split on tablet */
  .row.align-items-center > .col-md-5 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row.align-items-center > .col-md-7 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Swiper height on tablet */
  .swiper {
    height: 320px !important;
  }
}

/* ============================================
   Special Layout Classes for Mobile
   ============================================ */

/* Helper class for mobile-first order */
@media (max-width: 767px) {
  .mobile-order-first {
    order: -1 !important;
  }

  .mobile-order-last {
    order: 999 !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }

  .mobile-mb-3 {
    margin-bottom: 1.5rem !important;
  }

  .mobile-hide {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .tablet-show {
    display: block !important;
  }
}

/* ============================================
   Image & Media Responsive
   ============================================ */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive video embeds */
.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-responsive iframe,
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   Touch Scroll Hint (Mobile UX)
   ============================================ */
@media (max-width: 767px) {
  .table-responsive::after {
    content: "← Scroll →";
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--eco-slate);
    padding: 0.5rem;
    opacity: 0.7;
  }
}