/* ================= STEEL PRODUCTS PAGE MOBILE RESPONSIVE STYLES ================= */

/* ================= MOBILE RESPONSIVE STYLES (max-width: 767px) ================= */

@media (max-width: 767px) {
  :root {
    /* ========== MOBILE TYPOGRAPHY SCALE ========== */
    
    /* Section Titles & Headings */
    --mobile-title-primary: clamp(1.6rem, 4.8vw, 2.2rem);       /* Main section titles */
    --mobile-title-secondary: clamp(1.3rem, 3.8vw, 1.8rem);     /* Sub-section titles */
    --mobile-title-tertiary: clamp(1.1rem, 3.2vw, 1.4rem);      /* Card/component titles */
    
    /* Body Text & Content */
    --mobile-text-large: clamp(0.9rem, 2.8vw, 1rem);           /* Large body text */
    --mobile-text-base: clamp(0.8rem, 2.4vw, 0.9rem);          /* Standard body text */
    --mobile-text-small: clamp(0.7rem, 2.1vw, 0.8rem);         /* Small text, captions */
    --mobile-subtitle: clamp(1rem, 3.5vw, 1.3rem);             /* Section subtitles */
    
    /* Interactive Elements */
    --mobile-button-text: clamp(0.75rem, 2.5vw, 0.85rem);      /* Button text */
    --mobile-form-text: clamp(0.8rem, 2.4vw, 0.9rem);          /* Form inputs */
    
    /* Decorative & UI Elements */
    --mobile-svg-small: clamp(14px, 3.5vw, 18px);              /* Small SVGs/icons */
    --mobile-svg-medium: clamp(18px, 4.5vw, 22px);             /* Medium SVGs */
    --mobile-divider-width: clamp(160px, 45vw, 200px);         /* Divider width */
    
    /* Spacing Scale */
    --mobile-spacing-xs: clamp(0.3rem, 1.2vw, 0.5rem);         /* Extra small spacing */
    --mobile-spacing-sm: clamp(0.5rem, 1.8vw, 0.7rem);         /* Small spacing */
    --mobile-spacing-md: clamp(0.7rem, 2.8vw, 1rem);           /* Medium spacing */
    --mobile-spacing-lg: clamp(1rem, 4vw, 1.4rem);             /* Large spacing */
    --mobile-spacing-xl: clamp(1.2rem, 5vw, 1.8rem);           /* Extra large spacing */
    --mobile-spacing-xxl: clamp(1.8rem, 7vw, 2.5rem);          /* Section spacing */
    
    /* Container & Layout */
    --mobile-container-padding: clamp(16px, 4vw, 24px);        /* Side padding */
    --mobile-section-padding: clamp(2rem, 8vw, 3.5rem);        /* Section padding */
  }

  /* ========== GLOBAL MOBILE CONTAINER SYSTEM ========== */
  .container {
    width: calc(100% - (var(--mobile-container-padding) * 2)) !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .steel-products {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: var(--mobile-section-padding) 0 !important;
  }

  /* ========== SECTION HEADER OPTIMIZATION ========== */
  .steel-products__header {
    margin-bottom: var(--mobile-spacing-xl) !important;
    padding: 0 var(--mobile-container-padding) !important;
  }

  .steel-products__title {
    font-size: var(--mobile-title-primary) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    line-height: 1.2 !important;
  }

  .steel-products__divider {
    width: var(--mobile-divider-width) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
  }

  .steel-products__subtitle {
    font-size: var(--mobile-text-base) !important;
    line-height: 1.5 !important;
  }

  /* ========== PRODUCT CARDS OPTIMIZATION ========== */
  .steel-products__list {
    gap: var(--mobile-spacing-xl) !important;
    padding: 0 var(--mobile-container-padding) !important;
  }

  .steel-products__card {
    flex-direction: column !important;
    padding: var(--mobile-spacing-lg) !important;
    gap: var(--mobile-spacing-lg) !important;
    min-height: auto !important;
    box-shadow: none !important;
  }

  .steel-products__image {
    width: 100% !important;
    height: clamp(200px, 50vw, 280px) !important;
    min-height: clamp(180px, 45vw, 260px) !important;
    box-shadow: none !important;
  }

  .steel-products__content {
    padding: 0 !important;
  }

  .steel-products__card-title {
    font-size: var(--mobile-title-tertiary) !important;
    margin-bottom: var(--mobile-spacing-sm) !important;
  }

  .steel-products__desc {
    font-size: var(--mobile-text-base) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
  }

  .steel-products__btn {
    font-size: var(--mobile-button-text) !important;
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md) !important;
    box-shadow: none !important;
  }
}

/* ================= SMALL MOBILE OPTIMIZATION (320px - 375px) ================= */
@media (max-width: 375px) {
  :root {
    --mobile-title-primary: clamp(1.4rem, 4.5vw, 1.8rem) !important;
    --mobile-title-tertiary: clamp(1rem, 3vw, 1.2rem) !important;
    --mobile-text-base: clamp(0.75rem, 2.2vw, 0.85rem) !important;
    --mobile-container-padding: 16px !important;
    --mobile-divider-width: clamp(140px, 40vw, 180px) !important;
  }

  .steel-products__card {
    padding: var(--mobile-spacing-md) !important;
  }

  .steel-products__image {
    height: clamp(180px, 45vw, 240px) !important;
    min-height: clamp(160px, 40vw, 220px) !important;
  }
}

/* ================= MEDIUM MOBILE OPTIMIZATION (376px - 480px) ================= */
@media (min-width: 376px) and (max-width: 480px) {
  :root {
    --mobile-title-primary: clamp(1.5rem, 4.8vw, 2rem) !important;
    --mobile-title-tertiary: clamp(1.1rem, 3.2vw, 1.3rem) !important;
    --mobile-text-base: clamp(0.8rem, 2.4vw, 0.9rem) !important;
    --mobile-container-padding: 20px !important;
    --mobile-divider-width: clamp(150px, 42vw, 190px) !important;
  }

  .steel-products__card {
    padding: var(--mobile-spacing-lg) !important;
  }

  .steel-products__image {
    height: clamp(200px, 48vw, 260px) !important;
    min-height: clamp(180px, 43vw, 240px) !important;
  }
}

/* ================= LARGE MOBILE OPTIMIZATION (481px - 767px) ================= */
@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --mobile-title-primary: clamp(1.8rem, 5vw, 2.2rem) !important;
    --mobile-title-tertiary: clamp(1.2rem, 3.5vw, 1.4rem) !important;
    --mobile-text-base: clamp(0.85rem, 2.6vw, 0.95rem) !important;
    --mobile-container-padding: 24px !important;
    --mobile-divider-width: clamp(180px, 48vw, 200px) !important;
  }

  .steel-products__card {
    padding: var(--mobile-spacing-xl) !important;
  }

  .steel-products__image {
    height: clamp(220px, 52vw, 280px) !important;
    min-height: clamp(200px, 48vw, 260px) !important;
  }
}

/* ================= MOBILE LAYOUT PROTECTION ================= */
/* CRITICAL: Ensure mobile layout is never broken by conflicting styles */
@media (max-width: 767px) {
  .steel-products__card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  .steel-products__image {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    box-shadow: none !important;
  }

  .steel-products__content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .steel-products__btn {
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
}