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

/* ================= MOBILE RESPONSIVE STYLES (max-width: 767px) ================= */
@media (min-width: 768px) {
  .expertise__title--mobile {
    display: none !important;
  }
}

@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;
  }

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

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

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

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

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

  .reinforcement-bar__desc {
    font-size: var(--mobile-text-base) !important;
    line-height: 1.6 !important;
    margin-top: var(--mobile-spacing-sm) !important;
    color: var(--color-secondary) !important;
    margin-bottom: 0 !important;
  }

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

  .reinforcement-bar__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;
  }

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

  .reinforcement-bar__content {
    padding: 0 !important;
  }

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

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

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

    /* ================= EXPERTISE SECTION MOBILE OPTIMIZATION ================= */
    .expertise {
      padding: var(--mobile-section-padding) 0 0 0 !important;
      background-color: #282828 !important;
      color: #fff !important;
      overflow: hidden !important;
    }
    
    .expertise .expertise__container {
      width: calc(100% - (var(--mobile-container-padding) * 2)) !important;
      max-width: none !important;
      margin: 0 auto !important;
      padding: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      gap: 0 !important;
    }
    
    .expertise .expertise__content {
      order: 1 !important;
      width: 100% !important;
      flex: none !important;
      margin-bottom: 0 !important;
      position: relative !important;
      z-index: 3 !important;
    }
    
    /* ========== EXPERTISE TITLE WITH RESPONSIVE CORNER SVG ========== */
    .expertise__title {
      font-size: var(--mobile-title-primary) !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
      color: #fff !important;
      position: relative !important;
      display: inline-block !important;
      max-width: 96% !important;
      margin: 0 !important;
      word-break: break-word !important;
      text-align: left !important;
    }
    
    .expertise__title--mobile {
      display: inline-block !important;
      font-size: var(--mobile-title-primary) !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
      color: #fff !important;
      position: relative !important;
      max-width: 96% !important;
      margin: 0 !important;
      word-break: break-word !important;
      text-align: left !important;
    }
    
    /* ========== EXPERTISE CORNER SVG POSITIONING ========== */
    .expertise__corner-svg {
      position: absolute !important;
      top: clamp(-16px, -4vw, -10px) !important;
      right: clamp(-5px, -1vw, 0px) !important;
      width: clamp(24px, 6vw, 32px) !important;
      height: clamp(24px, 6vw, 32px) !important;
      z-index: 3 !important;
    }
    
    .expertise .expertise__content .expertise__title--desktop {
      display: none !important;
    }
    
    .expertise .expertise__content .expertise__title--mobile {
      display: inline-block !important;
    }
    
    .expertise__content .expertise__title.expertise__title--desktop {
      display: none !important;
    }
    
    .expertise__content .expertise__title.expertise__title--mobile {
      display: inline-block !important;
    }
    
    /* ========== EXPERTISE IMAGE OPTIMIZATION ========== */
    .expertise .expertise__image {
      order: 2 !important;
      width: 100% !important;
      max-width: 100% !important;
      flex: none !important;
      display: flex !important;
      justify-content: flex-end !important;
      align-items: flex-start !important;
      margin-top: clamp(-85px, -17vw, -50px) !important;
      margin-bottom: 0 !important;
      position: relative !important;
      z-index: 2 !important;
    }
    
    .expertise .expertise__svg {
      width: 100% !important;
      max-width: clamp(280px, 75vw, 350px) !important;
      height: auto !important;
      object-fit: contain !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;
  }

  .reinforcement-bar__card {
    padding: var(--mobile-spacing-md) !important;
  }

  .reinforcement-bar__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;
  }

  .reinforcement-bar__card {
    padding: var(--mobile-spacing-lg) !important;
  }

  .reinforcement-bar__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;
  }

  .reinforcement-bar__card {
    padding: var(--mobile-spacing-xl) !important;
  }

  .reinforcement-bar__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) {
  .reinforcement-bar__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;
  }

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

  .reinforcement-bar__content {
    width: 100% !important;
    max-width: 100% !important;
  }

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