/* Build Section - Responsive Design for Small Screens */

/* Equal height for side-by-side layouts */
@media screen and (min-width: 768px) and (max-width: 1440px) {
  .build-content {
    display: flex;
    align-items: stretch !important;
  }

  .build-image,
  .build-text {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  .build-image img,
  .build-image picture {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .build-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* Dynamic height scaling based on viewport */
@media screen and (max-width: 1024px) {
  .build-section {
    /* Dynamically reduce padding as screen gets smaller */
    padding: clamp(0.75rem, 3vw, 3rem) clamp(0.5rem, 2vw, 2rem);
  }

  /* For stacked layout on very small screens */
  @media (max-width: 767px) {
    .build-image {
      /* Height scales with viewport width */
      height: clamp(100px, 30vw, 200px) !important;
      max-height: clamp(100px, 30vw, 200px) !important;
      min-height: unset !important;
    }
  }

  .build-image img,
  .build-image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .build-text {
    /* Auto height to fit content */
    height: auto;
    min-height: unset;
    max-height: none;
    /* Padding scales with viewport */
    padding: clamp(0.5rem, 2vw, 3rem);
  }

  .build-text h2 {
    /* Font size scales smoothly */
    font-size: clamp(0.9rem, 3.5vw, 2.5rem);
    margin-bottom: clamp(0.25rem, 1.5vw, 1.5rem);
  }

  .build-text p {
    /* Font size scales smoothly */
    font-size: clamp(0.7rem, 2vw, 1.125rem);
    line-height: 1.4;
    margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
  }
}

/* Small desktop/large tablet screens (1024px - 1440px) */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .build-section {
    padding: 3rem 2rem;
  }

  .build-section .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .build-content {
    gap: 2rem;
    align-items: stretch; /* Changed from center to stretch */
  }

  .build-image {
    flex: 0 0 45%;
    max-width: 45%;
    height: auto !important;
    align-self: stretch;
  }

  .build-image img,
  .build-image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .build-text {
    flex: 0 0 55%;
    max-width: 55%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
  }

  .build-text h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
  }

  .build-text p {
    font-size: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    line-height: 1.6;
  }
}

/* Medium screens (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .build-section {
    padding: 2rem 1.5rem;
  }

  .build-section .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 100%;
  }

  .build-content {
    flex-direction: row;
    gap: 1.5rem;
    align-items: stretch; /* Changed from center to stretch */
  }

  .build-image {
    flex: 0 0 40%;
    max-width: 40%;
    height: auto !important;
    align-self: stretch;
  }

  .build-image img,
  .build-image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .build-text {
    flex: 0 0 60%;
    max-width: 60%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    align-self: stretch;
  }

  .build-text h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    line-height: 1.3;
  }

  .build-text p {
    font-size: 0.95rem;
    padding-left: 0;
    padding-right: 0;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }

  .build-text .learn-more-btn {
    align-self: flex-start;
    font-size: 0.9rem;
    padding: 0.5rem 1.5rem;
  }
}

/* Small tablets (640px - 767px) */
@media screen and (min-width: 640px) and (max-width: 767px) {
  .build-section {
    padding: 1.5rem 1rem;
    background-color: #ececec;
  }

  .build-section .container {
    padding: 0;
    max-width: 100%;
  }

  .build-content {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .build-image {
    max-width: 100%;
    height: clamp(120px, 25vw, 180px) !important;
    width: 100%;
  }

  .build-image img,
  .build-image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .build-text {
    max-width: 100%;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .build-text h2 {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    margin-bottom: 0.75rem;
  }

  .build-text p {
    font-size: clamp(0.85rem, 2.5vw, 0.9rem);
    padding: 0;
    line-height: 1.4;
    margin-bottom: 1rem;
  }

  .build-text .learn-more-btn {
    display: inline-block;
    font-size: 0.9rem;
    padding: 0.5rem 1.25rem;
    margin: 0 auto;
  }
}

/* Very small screens (below 640px) - already handled by mobile.css */
/* But add some fixes for consistency */
@media screen and (max-width: 639px) {
  .build-section {
    padding: 1rem 0.75rem !important;
    min-height: auto !important;
  }

  .build-content {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .build-image {
    width: 100% !important;
    height: clamp(100px, 25vw, 180px) !important;
    min-height: unset !important;
    max-height: unset !important;
  }

  .build-image img,
  .build-image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .build-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .build-text {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 1rem 0.75rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .build-text h2 {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
  }

  .build-text p {
    font-size: clamp(0.8rem, 3.5vw, 0.9rem) !important;
    line-height: 1.35 !important;
    margin-bottom: 0.75rem !important;
    padding: 0 !important;
  }

  .build-text .learn-more-btn,
  .build-text a.learn-more-btn {
    display: inline-block !important;
    margin: 0.5rem auto !important;
    text-align: center !important;
  }
}

/* Ensure proper aspect ratio and prevent overflow */
@media screen and (max-width: 1440px) {
  .build-image picture,
  .build-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Prevent text overflow */
  .build-text {
    overflow: hidden;
    word-wrap: break-word;
  }

  .build-text h2,
  .build-text p {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Fine-tune for laptop screens (1280px - 1440px) */
@media screen and (min-width: 1280px) and (max-width: 1440px) {
  .build-text {
    padding: 4rem;
  }

  .build-text h2 {
    font-size: 2.25rem;
  }

  .build-text p {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Ultra-wide but small height (common laptop screens) */
@media screen and (min-width: 1366px) and (max-height: 800px) {
  .build-section {
    padding: 2rem 3rem;
  }

  .build-image {
    height: clamp(200px, 25vw, 300px) !important;
  }

  .build-image img,
  .build-image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .build-text {
    padding: 3rem;
  }

  .build-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .build-text p {
    font-size: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Additional fixes for button centering on all small screens */
@media screen and (max-width: 1023px) {
  /* For side-by-side layout */
  @media (min-width: 768px) {
    .build-content {
      display: flex;
      align-items: stretch !important;
      min-height: 200px;
    }

    .build-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      text-align: left;
    }
  }

  /* For stacked layout */
  @media (max-width: 767px) {
    .build-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  .build-text .learn-more-btn,
  .build-text a.learn-more-btn,
  .build-section .learn-more-btn {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    text-align: center;
  }

  /* Override any conflicting styles from mobile.css */
  .build-section .build-text .learn-more-btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Specific height fixes for mobile portrait orientation */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .build-section {
    padding: 1rem 0.75rem;
  }

  .build-image {
    height: clamp(100px, 25vw, 180px);
    min-height: unset;
    max-height: unset;
  }

  .build-text {
    padding: 0.75rem;
    min-height: auto;
    height: auto;
  }

  .build-text h2 {
    font-size: clamp(1rem, 4.5vw, 1.35rem);
    margin-bottom: 0.5rem;
  }

  .build-text p {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    margin-bottom: 0.75rem;
  }
}

/* Very small screens height optimization */
@media screen and (max-width: 480px) {
  .build-section {
    padding: 0.75rem 0.5rem !important;
  }

  .build-image {
    height: clamp(80px, 25vw, 150px) !important;
    min-height: unset !important;
    max-height: none !important;
  }

  .build-image img,
  .build-image picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .build-text {
    padding: 0.75rem 0.5rem !important;
  }

  .build-text h2 {
    font-size: 1rem !important;
    margin-bottom: 0.4rem !important;
  }

  .build-text p {
    font-size: 0.75rem !important;
    margin-bottom: 0.6rem !important;
  }

  .build-text .learn-more-btn {
    font-size: 0.75rem !important;
    padding: 0.4rem 1rem !important;
  }
}

/* Override mobile.css fixed heights - MUST BE LAST */
@media screen and (max-width: 767px) {
  .build-image {
    height: clamp(80px, 20vw, 200px) !important;
    min-height: unset !important;
    max-height: none !important;
    width: 100% !important;
  }

  .build-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}