/* ================================================
   RESPONSIVE SPACING FIXES
   Global fixes for spacing issues on mobile devices
   ================================================ */

/* ================================================
   GLOBAL CONTAINER SPACING
   ================================================ */

@media (max-width: 767px) {
  /* Ensure all containers have proper horizontal padding */
  .container,
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Ensure sections have proper spacing */
  section {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Add spacing between sections */
  section + section {
    margin-top: 0;
  }
}

/* ================================================
   SECTION SPACING FIXES
   ================================================ */

@media (max-width: 767px) {
  /* About page sections */
  .about-main-section,
  .image-showcase-section,
  .values-section,
  .rd-section,
  .mission-section,
  .engagements-section,
  .brands-section {
    padding: 40px 0 !important;
  }
  
  /* Product page sections */
  .product-main-section {
    padding: 30px 0 !important;
  }
  
  /* Réduire l'espace entre sections produits sur mobile */
  .product-main-section + .product-main-section {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
  
  .product-grid-section {
    padding: 40px 0 !important;
  }
  
  /* Home page sections */
  .about-home-section,
  .values-home-section,
  .brands-home-section,
  .why-choose-production-section,
  .cta-home-section {
    padding: 40px 0 !important;
  }
  
  /* Related categories */
  .related-categories-section {
    padding: 40px 0 !important;
  }
}

/* ================================================
   CARD AND ELEMENT SPACING
   ================================================ */

@media (max-width: 767px) {
  /* Cards need proper spacing */
  .value-card,
  .rd-card,
  .brand-card,
  .engagement-item,
  .product-card-custom {
    margin-bottom: 20px !important;
  }
  
  /* Grid gaps */
  .values-grid,
  .categories-grid,
  .product-grid {
    gap: 20px !important;
  }
  
  /* Row spacing */
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .row > * {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
  }
}

/* ================================================
   TEXT AND CONTENT SPACING
   ================================================ */

@media (max-width: 767px) {
  /* Headings spacing */
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px !important;
  }
  
  /* Paragraphs spacing */
  p {
    margin-bottom: 15px !important;
  }
  
  /* Lists spacing */
  ul, ol {
    margin-bottom: 15px !important;
    padding-left: 20px;
  }
  
  /* Content wrappers */
  .about-text-content,
  .product-info-wrapper {
    padding: 20px 0 !important;
  }
  
  /* Showcase content - needs horizontal padding on mobile */
  .showcase-content {
    padding: 30px 20px !important;
    text-align: center !important;
  }
  
  .showcase-content h2 {
    margin-bottom: 20px !important;
  }
  
  .showcase-content p {
    margin-bottom: 18px !important;
    text-align: left !important;
  }
}

/* ================================================
   BUTTON AND FORM ELEMENT SPACING
   ================================================ */

@media (max-width: 767px) {
  /* Buttons spacing */
  .btn,
  button,
  .tab-button {
    margin-bottom: 10px;
    margin-right: 5px;
  }
  
  /* Form elements */
  .form-group,
  .form-control,
  input,
  textarea,
  select {
    margin-bottom: 15px !important;
  }
  
  /* Tabs buttons container */
  .tabs-buttons {
    gap: 8px !important;
    margin-bottom: 20px !important;
  }
}

/* ================================================
   IMAGE SPACING
   ================================================ */

@media (max-width: 767px) {
  /* Images need spacing */
  img {
    margin-bottom: 15px;
  }
  
  /* Image containers - remove bottom space */
  .about-image-container,
  .product-image-container,
  .showcase-image,
  .showcase-image-container,
  .category-card,
  .combined-image-item,
  .product-card-custom {
    margin-bottom: 20px !important;
    line-height: 0 !important;
    font-size: 0 !important;
  }
  
  /* Text cards should NOT have line-height: 0 */
  .value-card,
  .brand-card,
  .rd-card,
  .engagement-item {
    margin-bottom: 20px !important;
    line-height: normal !important;
    font-size: initial !important;
  }
  
  /* Réduire la taille des images produits sur mobile */
  .product-image-container {
    padding: 15px !important;
  }
  
  .main-product-image {
    max-height: 220px !important;
    height: 220px !important;
    max-width: 100% !important;
  }
  
  /* Fix for images in containers - remove bottom space */
  .about-image-container img,
  .product-image-container img,
  .showcase-image-container img,
  .main-product-image,
  .category-image,
  .combined-image-item img,
  .product-card-custom img,
  .brand-card img,
  .value-card img,
  .variant-thumbnail {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: bottom !important;
  }
}

/* ================================================
   GLOBAL IMAGE SPACING FIX
   Fixes for removing empty space below images in all containers
   ================================================ */

/* Fix for all image containers - remove bottom space */
.product-image-container,
.about-image-container,
.showcase-image-container,
.category-card,
.combined-image-item,
.product-card-custom {
    line-height: 0;
    font-size: 0;
}

/* Value cards, brand cards, rd cards should NOT have line-height: 0 */
.value-card,
.brand-card,
.rd-card,
.engagement-item {
    line-height: normal;
    font-size: initial;
}

/* Fix for all images - remove bottom space */
.product-image-container img,
.about-image-container img,
.showcase-image-container img,
.main-product-image,
.category-image,
.combined-image-item img,
.product-card-custom img,
.brand-card img,
.value-card img,
.variant-thumbnail {
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    border: none;
}

/* Specific fix for product image containers */
.product-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix for category cards */
.category-card {
    line-height: 0;
}

/* Fix for volume cards with images */
.volume-card img {
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

/* ================================================
   GRID AND FLEX LAYOUTS
   ================================================ */

@media (max-width: 767px) {
  /* Flex containers */
  .about-content-wrapper,
  .product-layout,
  .engagement-item {
    gap: 20px !important;
    flex-direction: column;
  }
  
  /* Grid layouts */
  .combined-image-grid,
  .features-grid-combined,
  .values-grid {
    gap: 20px !important;
  }
  
  /* Product layout */
  .product-layout {
    gap: 30px !important;
  }
}

/* ================================================
   SPECIFIC COMPONENT FIXES
   ================================================ */

@media (max-width: 767px) {
  /* Product card body */
  .product-card-body {
    padding: 20px 15px !important;
    gap: 15px !important;
  }
  
  /* Product icon */
  .product-icon {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
  }
  
  /* Variant thumbnails */
  .variant-thumbnails-container {
    gap: 10px !important;
    padding: 15px !important;
    margin-top: 20px !important;
  }
  
  /* Volumes grid */
  .volumes-grid {
    gap: 15px !important;
    margin-bottom: 25px !important;
  }
  
  /* Volume card */
  .volume-card {
    padding: 20px 15px !important;
  }
  
  /* S'assurer que l'animation hover fonctionne sur mobile aussi */
  .volume-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(26, 58, 92, 0.15) !important;
    border-color: #1a3a5c !important;
  }
  
  /* Tabs content */
  .tabs-content {
    padding: 15px 0 !important;
    margin-top: 20px !important;
  }
  
  /* Breadcrumb */
  .breadcrumb-custom {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
  }
}

/* ================================================
   HEADER AND HERO SPACING
   ================================================ */

@media (max-width: 767px) {
  /* Hero sections */
  section.about-us-hero,
  .product-hero-section {
    padding: 60px 0 40px !important;
  }
  
  .hero-content {
    padding: 80px 0 60px !important;
  }
  
  /* Ensure no gap after header */
  .header-area + section,
  #shared-header + section {
    margin-top: 0 !important;
  }
}

/* ================================================
   SMALL MOBILE (480px and below)
   ================================================ */

@media (max-width: 480px) {
  /* Even tighter spacing on very small screens */
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Sections */
  .about-main-section,
  .image-showcase-section,
  .values-section,
  .rd-section,
  .mission-section,
  .engagements-section,
  .brands-section,
  .product-main-section,
  .product-grid-section {
    padding: 30px 0 !important;
  }
  
  /* Réduire l'espace entre sections produits sur très petits écrans */
  .product-main-section + .product-main-section {
    padding-top: 15px !important;
    margin-top: 0 !important;
  }
  
  /* Cards */
  .value-card,
  .rd-card,
  .brand-card {
    padding: 25px 20px !important;
    margin-bottom: 15px !important;
  }
  
  /* Showcase content - even tighter on very small screens */
  .showcase-content {
    padding: 25px 18px !important;
    text-align: center !important;
  }
  
  .showcase-content h2 {
    font-size: 24px !important;
    margin-bottom: 18px !important;
  }
  
  .showcase-content p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
  
  /* Product cards */
  .product-card-body {
    padding: 15px 12px !important;
  }
  
  /* Headings */
  h1 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }
  
  h2 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  
  h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  
  /* Hero */
  section.about-us-hero,
  .product-hero-section {
    padding: 50px 0 30px !important;
  }
  
  .hero-content {
    padding: 60px 0 40px !important;
  }
}

/* ================================================
   TABLET (768px - 991px)
   ================================================ */

@media (min-width: 768px) and (max-width: 991px) {
  /* Medium spacing for tablets */
  .about-main-section,
  .image-showcase-section,
  .values-section,
  .rd-section,
  .mission-section,
  .engagements-section,
  .brands-section {
    padding: 60px 0 !important;
  }
  
  .product-main-section {
    padding: 40px 0 !important;
  }
  
  /* Réduire l'espace entre sections produits sur tablette */
  .product-main-section + .product-main-section {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
  
  /* Grid gaps */
  .values-grid,
  .categories-grid {
    gap: 25px !important;
  }
}

/* ================================================
   UTILITY CLASSES FOR SPACING
   ================================================ */

@media (max-width: 767px) {
  .mb-mobile-20 {
    margin-bottom: 20px !important;
  }
  
  .mb-mobile-30 {
    margin-bottom: 30px !important;
  }
  
  .mt-mobile-20 {
    margin-top: 20px !important;
  }
  
  .mt-mobile-30 {
    margin-top: 30px !important;
  }
  
  .p-mobile-15 {
    padding: 15px !important;
  }
  
  .px-mobile-15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}