/* ============================================================
   WHY CHOOSE US — COMPRESS FIX
   The image column had flex-shrink:0 + width:42% which
   prevented it from shrinking at any zoom level.
   This file fixes that so the whole section compresses
   naturally like every other section on the page.
   ============================================================ */

/* ---- Base fix: allow image column to shrink ---- */
.why-content-right {
  flex-shrink: 1 !important;
  width: 42% !important;
  max-width: 500px !important;
  min-width: 0 !important;
}

.why-content-card {
  min-height: unset !important;
}

.why-content-bottom-row {
  min-height: unset !important;
  max-height: 500px !important;
}

.why-image-container {
  min-height: unset !important;
  max-height: 500px !important;
}

.why-image-container img {
  max-height: 500px !important;
  object-fit: cover !important;
}

/* ---- Desktop (>1024px): normal layout, image max 42% ---- */
@media (min-width: 1025px) {
  .why-content-right {
    width: 42% !important;
    max-width: 42% !important;
    flex-shrink: 1 !important;
    padding-right: 32px !important;
  }

  .why-content-middle {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 64px !important;
  }

  .why-image-container {
    min-height: 300px !important;
    max-height: 480px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .why-image-container img {
    max-height: 480px !important;
    border-radius: 16px !important;
  }

  .why-content-bottom-row {
    max-height: 480px !important;
  }
}

/* ---- Tablet (768px–1024px): tighten ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .why-content-right {
    width: 40% !important;
    max-width: 40% !important;
    flex-shrink: 1 !important;
  }

  .why-content-middle {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .why-image-container {
    min-height: 220px !important;
  }

  /* Tabs: always horizontal row on tablet */
  .why-tab-navigation {
    flex-direction: row !important;
    border-left: none !important;
    border-top: none !important;
    justify-content: space-between !important;
    gap: 0 !important;
    overflow-x: auto !important;
  }

  .why-tab-btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    text-align: center !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 3px solid transparent !important;
    font-size: clamp(11px, 1.2vw, 14px) !important;
    padding: 12px 4px !important;
    white-space: nowrap !important;
    min-height: unset !important;
  }

  .why-tab-btn.active {
    border-bottom-color: #0C3365 !important;
    border-left-color: transparent !important;
  }

  .why-tab-btn[data-why-tab="skilling-development"] {
    margin-left: 0 !important;
  }
}

/* ---- Between 768px and 991px: override responsive.css column layout ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .why-content-bottom-row {
    flex-direction: row !important;
  }

  .why-tab-navigation {
    flex-direction: row !important;
  }

  .why-tab-btn {
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
  }

  .why-tab-btn.active {
    border-left-color: transparent !important;
    border-bottom-color: #0C3365 !important;
  }
}