/* =========================================================================
   webjongens — responsive fixes for the jds-texel static site
   All rules scoped to <= 991px so the desktop design (>= 992px) is untouched.
   ========================================================================= */

/* the mobile-only stacked lift panels are hidden on desktop (the original
   side-by-side image shows there instead) */
.wj-verhuur-split { display: none; }

@media (max-width: 991px) {

  /* 1. Diensten service list -----------------------------------------------
     The list sits in the .dienstenRechts column, a centered flex box that
     collapses to the text width on mobile (so the items looked tiny). Stretch
     that column and its children to the full width, drop the fixed desktop
     min-widths (800px base / 300px on Astroid "xs" phones), and wrap on whole
     words — only breaking a word if it is genuinely wider than the column. */
  .diensten .sppb-column.dienstenRechts {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  .diensten .dienstenRechts .sppb-column-addons,
  .diensten .dienstenRechts .sppb-addon,
  .diensten .dienstenRechts .sppb-addon-content,
  .diensten .dienstenRechts .sppb-addon-text,
  .diensten .dienstenRechts ul,
  .diensten .dienstenRechts li {
    width: 100% !important;
    max-width: 100% !important;
  }

  .diensten ul li,
  .diensten ul li h3,
  .astroid-device-xs .diensten ul li,
  .astroid-device-sm .diensten ul li,
  .astroid-device-xs .diensten ul li h3,
  .astroid-device-sm .diensten ul li h3 {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word;   /* keep words whole; break only if unavoidable */
    word-break: normal !important;
  }

  /* 2. Buttons -------------------------------------------------------------
     Astroid forces min-width:300px on buttons for xs/sm phones -> the contact
     buttons ran off screens narrower than ~340px. */
  .astroid-device-xs .sppb-btn,
  .astroid-device-sm .sppb-btn {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 3. Section images ------------------------------------------------------
     Desktop negative top-margins (welding helmet, rental photo) drag the
     image over the preceding text once columns stack. Reset, and keep images
     inside their column. */
  .sppb-addon-single-image img,
  .sppb-img-responsive {
    margin-top: 0 !important;
  }

  .sppb-section img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 4. Werkwijze / info column --------------------------------------------
     The purple SVG background (background-size:cover on desktop) switches to
     240% on mobile and stops covering, leaving white text on white, and its
     orange accent line lands over the text. Drop the SVG on mobile, fill the
     column with the SVG's own purple, and place a clean red line BELOW the
     Parweld ("camera") image at the bottom of the column. */
  .sppb-column.infoLinks {
    background-image: none !important;
    background-color: #472E5D !important;
  }

  .sppb-column.infoLinks .sppb-addon-single-image {
    border-bottom: 4px solid #FF420E;
    padding-bottom: 26px;
  }

  /* 5. Verhuur materieel — the two lift panels are baked into one image
     (verhuurmateriaal.png, 635x421). On mobile show them stacked full-width
     by revealing each half of the image in its own block; hide the original
     side-by-side image. (Desktop keeps the original image untouched.) */
  .wj-verhuur-orig { display: none !important; }

  /* the single-image container is inline-block and collapses to 0 once the
     original image is hidden — force just this one to full-width block */
  .sppb-addon-single-image-container:has(.wj-verhuur-split) {
    display: block !important;
    width: 100% !important;
  }

  .wj-verhuur-split {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .wj-vpanel {
    display: block;
    width: 100%;
    padding-bottom: 132.6%;               /* 421 / 317.5 -> one panel's aspect */
    background-image: url("../../../images/verhuurmateriaal.png");
    background-repeat: no-repeat;
    background-size: 200% auto;            /* full image = 2x the panel width  */
  }

  .wj-vpanel-l { background-position: left top; }
  .wj-vpanel-r { background-position: right top; margin-top: 14px; }

  /* the rental section has a fixed 350px height (desktop floating-image
     design); the stacked panels are taller, so let it grow on mobile and
     keep the panels from overlapping the purple section below. */
  #section-id-1626351023862 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* 6. Display headings ----------------------------------------------------
     Let large condensed display headings break instead of overflowing. */
  .sppb-addon-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}