/* =========================================================
   L11
   - Desktop/tablet professional card layout stays horizontal/full-width.
   - Only the MOBILE professional list becomes a swipe carousel.
   - Programme and Group card styling is not changed here.
========================================================= */


/* ---------------------------------------------------------
   DESKTOP FIX
   An older canonical rule still forced professional cards back to
   ~340px. This selector deliberately matches that specificity and
   restores the full-width desktop card we designed.
---------------------------------------------------------- */

@media (min-width: 761px) {

  #bsSchedulingPage .bs-speciality-group {
    width: 100% !important;
  }

  #bsSchedulingPage .bs-speciality-group .bs-professional-grid-static {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;

    width: 100% !important;
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    gap: 12px !important;

    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  #bsSchedulingPage
  .bs-speciality-group
  .bs-professional-grid-static
  > .bs-professional-card--rich.bs-professional-card--matrix {
    flex: none !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    scroll-snap-align: none !important;
  }

  /* Swipe controls are mobile-only. */
  #bsSchedulingPage
  .bs-speciality-group
  > .kinara-swipe-controls {
    display: none !important;
  }

}


/* ---------------------------------------------------------
   MOBILE PROFESSIONAL CAROUSEL
   Restore horizontal scrolling + existing real arrow controls.
---------------------------------------------------------- */

@media (max-width: 760px) {

  #bsSchedulingPage .bs-speciality-group {
    position: relative !important;

    width: 100% !important;

    padding-bottom: 46px !important;

    overflow: visible !important;
  }

  #bsSchedulingPage
  .bs-speciality-group
  .bs-professional-grid-static {
    display: flex !important;
    flex-flow: row nowrap !important;

    justify-content: flex-start !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 12px !important;

    margin: 0 !important;
    padding: 7px 8px 10px !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 8px !important;

    overscroll-behavior-inline: contain !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;
  }

  #bsSchedulingPage
  .bs-speciality-group
  .bs-professional-grid-static::-webkit-scrollbar {
    display: none !important;
  }

  /*
    One card occupies most, but not all, of the viewport.
    The visible edge of the next card gives an additional swipe cue.
  */
  #bsSchedulingPage
  .bs-speciality-group
  .bs-professional-grid-static
  > .bs-professional-card--rich.bs-professional-card--matrix {
    flex: 0 0 91vw !important;

    width: 91vw !important;
    min-width: 286px !important;
    max-width: 390px !important;

    margin: 0 !important;

    scroll-snap-align: center !important;
    scroll-snap-stop: normal !important;
  }

  /*
    Existing L4 controls provide:
    ←  Swipe cards  →
    They now sit directly beneath each speciality carousel.
  */
  #bsSchedulingPage
  .bs-speciality-group.kinara-carousel-host {
    padding-bottom: 48px !important;
  }

  #bsSchedulingPage
  .bs-speciality-group.kinara-carousel-host
  > .kinara-swipe-controls {
    display: grid !important;

    bottom: 1px !important;
  }

  /* Keep the cards compact even though they are now swipeable. */
  #bsSchedulingPage .bs-professional-card--matrix {
    min-height: 0 !important;

    padding: 7px 8px !important;

    border-radius: 15px !important;
  }

  #bsSchedulingPage .bs-prof-card-avatar {
    width: 48px !important;
    height: 48px !important;
  }

  #bsSchedulingPage .bs-prof-card-cell {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  #bsSchedulingPage .bs-prof-card-identity {
    min-height: 50px !important;
  }

  #bsSchedulingPage .bs-prof-card-practice,
  #bsSchedulingPage .bs-prof-card-access {
    margin-top: 2px !important;
    padding-top: 6px !important;
  }

  #bsSchedulingPage .bs-prof-card-more,
  #bsSchedulingPage .bs-prof-card-actions {
    margin-top: 2px !important;
    padding-top: 6px !important;
  }

  #bsSchedulingPage .bs-prof-bio-preview {
    max-height: 2.25em !important;

    font-size: .64rem !important;
    line-height: 1.14 !important;
  }

}


/* Very narrow phones */
@media (max-width: 360px) {

  #bsSchedulingPage
  .bs-speciality-group
  .bs-professional-grid-static
  > .bs-professional-card--rich.bs-professional-card--matrix {
    flex-basis: 92vw !important;

    width: 92vw !important;
    min-width: 276px !important;
  }

  #bsSchedulingPage .bs-prof-card-avatar {
    width: 44px !important;
    height: 44px !important;
  }

}