/* =========================================================
   Clinica Joelle — clinic photo slider
   Loaded only on singular views whose content contains
   .clinic-slider (see joelle_enqueue_assets).
   ========================================================= */

/* Runs off the right edge of the window but keeps an inset on the left — the
   same idiom .ps-cta already uses for the "Let's Talk" band, so the page has
   one consistent way of breaking out of the content column. */
.clinic-slider {
  position: relative;
  /* Break out to the window's left edge (50% - 50vw), then come back in by
     the inset. Edit only the clamp — bigger = more gap on the left. Measured
     from the window, not from the content column, which is why a plain
     margin-left looked like it did nothing. */
  margin-left: calc(50% - 45vw + clamp(16px, 3vw, 64px));
  margin-right: calc(50% - 50vw);
  background: #000;
  color: #fff;
  padding: clamp(40px, 6vw, 72px) 0;
}

/* A scroll-snap track rather than a JS-positioned carousel: swipe and
   trackpad scrolling work with no script at all, and the arrows below are
   an enhancement on top rather than the only way through. */
.clinic-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.clinic-slides::-webkit-scrollbar { display: none; }

.clinic-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0 clamp(52px, 8vw, 120px);
  text-align: center;
}

.clinic-slide .wp-block-image { margin: 0; }
/* Height-driven, like the reference: every slide is the same height and the
   width follows the photo's own shape, so portrait and landscape shots can
   sit in the same slider without either being cropped. */
.clinic-slide img {
  height: min(560px, 58vh);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.clinic-slide h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: #fff;
  margin: 22px 0 10px;
}
.clinic-slide p {
  max-width: 760px;
  margin: 0 auto;
  color: #e6e1da;
  font-size: .95rem;
  line-height: 1.6;
}

/* Arrows are injected by clinic-slider.js, so they never exist without the
   behaviour behind them. Sat against the panel edges, level with the image. */
/* A chevron and nothing else. GeneratePress styles every <button> with its
   own background, border, padding and radius, and those show up as a box the
   moment the arrow takes focus after a click — so they're all unset here. */
.clinic-arrow {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  position: absolute;
  /* Level with the middle of the photo: panel padding, plus half the frame
     height, less half the button. */
  top: calc(clamp(40px, 6vw, 72px) + min(280px, 29vh) - 22px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease;
}
.clinic-arrow:hover,
.clinic-arrow:focus { background: none; background-color: transparent; box-shadow: none; }
.clinic-arrow:hover { opacity: 1; }
/* No ring on a mouse click, but keyboard users still get one. */
.clinic-arrow:focus { outline: none; }
.clinic-arrow:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 6px; }
.clinic-arrow[disabled] { opacity: .25; cursor: default; }
.clinic-arrow-prev { left: clamp(4px, 2vw, 28px); }
.clinic-arrow-next { right: clamp(4px, 2vw, 28px); }
.clinic-arrow svg { width: 26px; height: 26px; }

@media (max-width: 781px) {
  .clinic-slider { margin-left: calc(50% - 50vw); }
  .clinic-slide { padding: 0 44px; }
  .clinic-arrow { top: 28vw; }
}