/**
 * PKCM Case - Custom Overrides (1024px tablet/desktop adaptive fixes)
 * This file is loaded independently and overrides compiled Tailwind styles.
 */

/* 1. Global safety against horizontal overflow */
html,
body {
  overflow-x: clip !important;
}

.pkcm,
.pkcm-frame-1,
.pkcm-frame-2,
.pkcm-frame-3,
.pkcm-frame-4 {
  overflow-x: clip;
}

/* 2. Responsive overrides for screens between 1024px (lg) and 1279px (xl) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* Fix two-column step blocks (04 Preparing, 05 Logistic, 06 Salers, 07 Rent) */
  .pkcm-preparing > div,
  .pkcm-logistic > div,
  .pkcm-salers > div,
  .pkcm-rent > div {
    gap: 24px !important;
    align-items: center !important;
  }

  /* Reset fixed 770px text width and allow flexible shrinkage within container */
  .pkcm-preparing > div > div,
  .pkcm-logistic > div > div,
  .pkcm-salers > div > div,
  .pkcm-rent > div > div {
    max-width: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  /* Prevent images with lg:max-w-none from overflowing the 960px container */
  .preparing-img,
  .logistic-img,
  .salers-img,
  .rent-img {
    max-width: 300px !important;
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  /* Block 06 (Salers): ensure badges row fits comfortably within the text column */
  .pkcm-salers .hidden.md\:flex {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .pkcm-salers .hidden.md\:flex > p {
    padding: 6px 8px !important;
    font-size: 13px !important;
    line-height: 18px !important;
    border-radius: 8px !important;
  }
  .pkcm-salers .hidden.md\:flex > img {
    width: 14px !important;
    height: auto !important;
  }

  /* Block 02 & 03 (Key points) */
  .pkcm-key > div {
    gap: 24px !important;
  }
  .pkcm-key > div > div {
    max-width: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  .pkcm-key > div > div:last-child {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Block 08 & 09 (Agreement & Guarantee) */
  .pkcm-agreement > div {
    gap: 24px !important;
  }
  .pkcm-agreement > div > div {
    max-width: none !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  .pkcm-agreement img[src*="garantee-img"],
  .pkcm-agreement img[alt*="Garantee"] {
    max-width: 100% !important;
    height: auto !important;
  }
}