/* Swiper overrides: detail pages "Procedure" carousel (#proceduce-row) */

/* Desktop/tablet: render as the normal grid (Swiper destroyed in JS >=768px). */

@media (min-width: 768px) {
  /*
    The Swiper markup (`.swiper-wrapper` / `.swiper-slide`) remains in the HTML.
    Even after `swiper.destroy()`, Swiper’s base CSS keeps the wrapper as a single
    flex row, which collapses the procedure cards into 1 horizontal strip.

    Force the wrapper back into a wrapping grid on desktop/tablet.
  */
  .procedure_wrapper
    #proceduce-row.proceduce-carousel
    .proceduce-swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* matches `.procedure_wrapper .row` in main.css */
  }

  .procedure_wrapper #proceduce-row.proceduce-carousel .swiper-slide.column {
    flex: 0 0 auto;
    width: 33.33333%;
    padding: 0 15px; /* matches `.procedure_wrapper .column` padding in main.css */
  }
}

@media (max-width: 767px) {
  .procedure_wrapper
    #proceduce-row.proceduce-carousel
    .proceduce-swiper-wrapper {
    align-items: stretch;
  }

  /*
    Old Slick behavior (mobile):
    - swapped `.column` -> `.item`
    - `.procedure_wrapper .item { padding: 0 8px; }` in main.css
    - centerMode + centerPadding(20px)
  */
  .procedure_wrapper #proceduce-row.proceduce-carousel .swiper-slide.column {
    /* override main.css grid width: 33.333% (applies under 1299px) */
    width: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 8px;
  }

  /* Let Swiper’s fractional slidesPerView create the “peek”. */
}