/* ================= CAREERS 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 */
    --mobile-hero-title: clamp(2rem, 8vw, 2.8rem);             /* Hero main title */
    
    /* 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 */
    
    /* 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, 3rem);         /* Section padding */
  }

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

  .careers-hero__container,
  .careers-gallery__container {
    width: calc(100% - (var(--mobile-container-padding) * 2)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* ================= HERO SECTION MOBILE OPTIMIZATION ================= */
  .careers-hero {
    padding: var(--mobile-section-padding) 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .careers-hero__left {
    width: 100% !important;
    padding-top: var(--mobile-spacing-md) !important;
    text-align: left !important;
    align-items: flex-start !important;
    margin: 0 !important;
  }

  .careers-hero__title {
    font-size: var(--mobile-hero-title) !important;
    margin-top: var(--mobile-spacing-md) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    text-align: left !important;
  }

  .careers-hero__tagline {
    font-size: var(--mobile-text-large) !important;
    text-align: left !important;
    margin-bottom: var(--mobile-spacing-sm) !important;
  }

  .careers-hero__subtitle {
    font-size: var(--mobile-text-base) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    text-align: left !important;
  }

  .careers-hero__divider {
    justify-content: flex-start !important;
    margin-bottom: var(--mobile-spacing-lg) !important;
  }

  .careers-hero__right {
    width: 100% !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .careers-hero__form-card {
    width: 100% !important;
    padding: var(--mobile-spacing-lg) var(--mobile-spacing-md) !important;
    margin: 0 !important;
    border: clamp(12px, 3vw, 20px) solid #282828 !important;
  }
  .careers-hero__form-card::after {
    bottom: -13px !important;
    right: -25px !important;
    width: 13px !important;
    height: 13px !important;
  }

  .careers-hero__form-card::before {
    bottom: -13px !important;
    right: -13px !important;
    width: 13px !important;
    height: 13px !important;
  }

  .careers-hero__form-title {
    font-size: var(--mobile-title-tertiary) !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    text-align: left !important;
  }

  .careers-hero__form {
    gap: var(--mobile-spacing-md) !important;
    margin-top: var(--mobile-spacing-md) !important;
  }

  .careers-hero__form input,
  .careers-hero__form textarea,
  .careers-hero__form select,
  .careers-hero__form .form__input--file {
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md) !important;
    font-size: var(--mobile-form-text) !important;
    margin-bottom: var(--mobile-spacing-xs) !important;
  }

  .careers-hero__form textarea {
    min-height: 80px !important;
  }

  /* Form Corner Decorations */
  .careers-hero__form-corner {
    width: 16px !important;
    height: 16px !important;
    border-width: 1.5px !important;
  }

  .careers-hero__form-corner-arrow {
    width: 24px !important;
    height: 24px !important;
  }

  .careers-hero__form-inner-corner {
    width: 20px !important;
    height: 20px !important;
    top: 12px !important;
    right: 10px !important;
  }



  /* ================= WORK WITH US SECTION MOBILE OPTIMIZATION ================= */

  .work-with-us__container {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .work-with-us__team-highlights {
    margin: clamp(2rem, 5vw, 3rem) 0 !important;
  }
  
  .work-with-us__highlights-title {
    font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
    font-weight: 700 !important;
    margin: 0 0 clamp(1.5rem, 4vw, 2rem) 0 !important;
  }

  .work-with-us__stats-table {
    width: 100% !important;
    margin: 0 auto !important;
    background-color: var(--color-secondary) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  
  .work-with-us__stats-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }
  
  .work-with-us__stats-cell {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem) !important;
    text-align: left !important;
    position: relative !important;
    background-color: var(--color-secondary) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.8rem, 2vw, 1rem) !important;
  }
  
  /* Remove all existing red lines */
  .work-with-us__stats-cell::after {
    display: none !important;
  }
  
  /* Add vertical line between columns (between cell 1-2 and 3-4) */
  .work-with-us__stats-cell:nth-child(1)::before,
  .work-with-us__stats-cell:nth-child(2)::before,
  .work-with-us__stats-cell:nth-child(3)::before,
  .work-with-us__stats-cell:nth-child(4)::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 4% !important;
    right: 6% !important;
    height: 1px !important;
    background-color: #e63946 !important;
    display: block !important;
  }
  
  .work-with-us__stats-text {
    font-size: var(--mobile-text-base) !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    margin: 0 !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;
  }


  /* ================= GALLERY SECTION MOBILE OPTIMIZATION ================= */
  .careers-gallery {
    padding: var(--mobile-section-padding) 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .careers-gallery__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-spacing-md) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .careers-gallery__item {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 16/9 !important;
  }

  .careers-gallery__item--wide,
  .careers-gallery__item--narrow,
  .careers-gallery__item--medium,
  .careers-gallery__item--small,
  .careers-gallery__item--large {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
  }

  .careers-gallery__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .careers-gallery__vertical-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-spacing-md) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .careers-gallery__vertical-stack .careers-gallery__item {
    aspect-ratio: 16/9 !important;
  }
}

/* Small Mobile Devices (320px - 375px) */
@media (max-width: 375px) {
  :root {
    --mobile-container-padding: 16px !important;
    --mobile-section-padding: clamp(1.8rem, 6vw, 2.5rem) !important;
  }

  .careers-hero__form-card {
    padding: var(--mobile-spacing-md) var(--mobile-spacing-sm) !important;
  }

  .careers-hero__form input,
  .careers-hero__form textarea,
  .careers-hero__form select,
  .careers-hero__form .form__input--file {
    padding: var(--mobile-spacing-xs) var(--mobile-spacing-sm) !important;
  }

  .careers-gallery__grid,
  .careers-gallery__vertical-stack {
    gap: var(--mobile-spacing-sm) !important;
  }
}

/* Medium Mobile Devices (376px - 480px) */
@media (min-width: 376px) and (max-width: 480px) {
  :root {
    --mobile-container-padding: 18px !important;
    --mobile-section-padding: clamp(2rem, 6.5vw, 2.8rem) !important;
  }

  .careers-hero__form-card {
    padding: var(--mobile-spacing-lg) var(--mobile-spacing-md) !important;
  }

  .careers-gallery__grid,
  .careers-gallery__vertical-stack {
    gap: var(--mobile-spacing-md) !important;
  }
}

/* Large Mobile Devices (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --mobile-container-padding: 24px !important;
    --mobile-section-padding: clamp(2.2rem, 7vw, 3rem) !important;
  }

  .careers-hero__form-card {
    padding: var(--mobile-spacing-xl) var(--mobile-spacing-lg) !important;
  }

  .careers-gallery__grid,
  .careers-gallery__vertical-stack {
    gap: var(--mobile-spacing-lg) !important;
  }
}

/* ================= MOBILE LAYOUT PROTECTION ================= */
@media (max-width: 767px) {
  /* Ensure mobile layout is never broken */
  .careers-hero__container {
    display: flex !important;
    flex-direction: column !important;
  }

  .careers-hero__left,
  .careers-hero__right {
    width: 100% !important;
  }

  /* Prevent horizontal overflow */
  .careers-hero,
  .careers-gallery {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .careers-hero__container *,
  .careers-gallery__container * {
    box-sizing: border-box !important;
  }
}

/* ================= EXPERTISE SECTION MOBILE SUB-BREAKPOINTS ================= */

/* Extra Small Mobile Devices (320px - 375px) */
@media (max-width: 375px) {
  
  .expertise__title {
    max-width: 98% !important;
    font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
  }
  
  .expertise__corner-svg {
    top: clamp(-12px, -3vw, -7px) !important;
    right: clamp(-8px, -2vw, -2px) !important;
    width: clamp(22px, 5.5vw, 28px) !important;
    height: clamp(22px, 5.5vw, 28px) !important;
  }
  
  .expertise .expertise__image {
    margin-top: clamp(-75px, -15vw, -45px) !important;
  }
  
  .expertise .expertise__svg {
    max-width: clamp(250px, 70vw, 300px) !important;
  }
}

/* Small Mobile Devices (376px - 414px) */
@media (min-width: 376px) and (max-width: 414px) {
  
  .expertise__title {
    max-width: 95% !important;
    font-size: clamp(1.25rem, 4.1vw, 1.55rem) !important;
  }
  
  .expertise__corner-svg {
    top: clamp(-13px, -3.2vw, -8px) !important;
    right: clamp(-7px, -1.8vw, -1px) !important;
    width: clamp(23px, 5.7vw, 29px) !important;
    height: clamp(23px, 5.7vw, 29px) !important;
  }
  
  .expertise .expertise__image {
    margin-top: clamp(-80px, -16vw, -47px) !important;
  }
  
  .expertise .expertise__svg {
    max-width: clamp(260px, 72vw, 320px) !important;
  }
}

/* Medium Mobile Devices (415px - 480px) */
@media (min-width: 415px) and (max-width: 480px) {
  
  .expertise__title {
    max-width: 93% !important;
    font-size: clamp(1.3rem, 4.2vw, 1.6rem) !important;
  }
  
  .expertise__corner-svg {
    top: clamp(-14px, -3.4vw, -8px) !important;
    right: clamp(-6px, -1.6vw, 0px) !important;
    width: clamp(24px, 5.8vw, 30px) !important;
    height: clamp(24px, 5.8vw, 30px) !important;
  }
  
  .expertise .expertise__image {
    margin-top: clamp(-83px, -16.5vw, -48px) !important;
  }
  
  .expertise .expertise__svg {
    max-width: clamp(270px, 73vw, 330px) !important;
  }
}

/* Large Mobile Devices (481px - 600px) */
@media (min-width: 481px) and (max-width: 600px) {
  
  .expertise__title {
    max-width: 91% !important;
    font-size: clamp(1.35rem, 4.3vw, 1.65rem) !important;
  }
  
  .expertise__corner-svg {
    top: clamp(-14px, -3.6vw, -9px) !important;
    right: clamp(-5px, -1.4vw, 1px) !important;
    width: clamp(25px, 6vw, 31px) !important;
    height: clamp(25px, 6vw, 31px) !important;
  }
  
  .expertise .expertise__image {
    margin-top: clamp(-85px, -17vw, -50px) !important;
  }
  
  .expertise .expertise__svg {
    max-width: clamp(275px, 74vw, 340px) !important;
  }
}

/* Extra Large Mobile Devices (601px - 767px) */
@media (min-width: 601px) and (max-width: 767px) {
  
  .expertise__title {
    max-width: 88% !important;
    font-size: clamp(1.4rem, 4.4vw, 1.7rem) !important;
  }
  
  .expertise__corner-svg {
    top: clamp(-15px, -3.8vw, -9px) !important;
    right: clamp(-4px, -1.2vw, 2px) !important;
    width: clamp(26px, 6.2vw, 32px) !important;
    height: clamp(26px, 6.2vw, 32px) !important;
  }
  
  .expertise .expertise__image {
    margin-top: clamp(-90px, -18vw, -55px) !important;
  }
  
  .expertise .expertise__svg {
    max-width: clamp(285px, 76vw, 360px) !important;
  }
}