/*
 * peepme-slaider. The engine is the browser's own scrolling with scroll-snap;
 * slider.js adds only arrows, dots and keys.
 *
 * A site paints it with custom properties, on :root or on .pms:
 *   --pms-gap  --pms-radius  --pms-ratio
 *   --pms-ink  --pms-muted  --pms-surface  --pms-border  --pms-media
 *   --pms-accent  --pms-accent-ink  --pms-dot  --pms-focus
 * Every use carries its fallback, so none of them has to be set.
 * --pms-per-view comes from the markup (SliderOptions::perView()).
 */

.pms { container-type: inline-size; color: var(--pms-ink, #1f2328); }

.pms-track {
  --pms-shown: var(--pms-per-view, 3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--pms-shown) - 1) * var(--pms-gap, 1rem)) / var(--pms-shown));
  gap: var(--pms-gap, 1rem);
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
/* A tablet row holds at most two; a phone always one and a bit, so the next one peeks in. */
@container (max-width: 64rem) { .pms-track { --pms-shown: min(var(--pms-per-view, 3), 2); } }
@container (max-width: 40rem) { .pms-track { grid-auto-columns: calc((100% - var(--pms-gap, 1rem)) / 1.15); } }
@media (prefers-reduced-motion: no-preference) { .pms-track { scroll-behavior: smooth; } }

/* With the script there are arrows; without it the scrollbar is the control. */
.pms[data-pms-ready] .pms-track { scrollbar-width: none; }
.pms[data-pms-ready] .pms-track::-webkit-scrollbar { display: none; }

.pms-slide {
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--pms-surface, #fff);
  border: 1px solid var(--pms-border, #d9d9d9);
  border-radius: var(--pms-radius, 1rem);
}
.pms-slide__media { margin: 0; aspect-ratio: var(--pms-ratio, 16 / 10); background: var(--pms-media, #f2f3f3); }
.pms-slide__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pms-slide__body { padding: 1rem 1.2rem 1.2rem; }
.pms-slide__title { margin: 0 0 .25rem; font-size: 1rem; }
.pms-slide__text { margin: 0; font-size: .9rem; color: var(--pms-muted, #5c6166); }
.pms-slide__link { color: inherit; text-decoration: none; }
/* The whole slide answers the click; the link stays one link for a screen reader. */
.pms-slide__link::after { content: ""; position: absolute; inset: 0; }
.pms-slide__link:focus-visible { outline: none; }
.pms-slide:has(.pms-slide__link:focus-visible) { outline: 3px solid var(--pms-focus, var(--pms-accent, #1f4d45)); outline-offset: -3px; }

.pms-nav { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; }
.pms-nav[hidden] { display: none; }
.pms-dots { display: flex; flex-wrap: wrap; }
.pms-dot { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer; }
.pms-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 1rem; background: var(--pms-dot, #c5c9cc); transition: width .25s, background-color .25s; }
.pms-dot[aria-current="true"]::before { width: 1.4rem; background: var(--pms-accent, #1f4d45); }
.pms-arrows { display: flex; gap: .5rem; margin-left: auto; }
.pms-arrow {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--pms-border, #d9d9d9); border-radius: 50%;
  background: var(--pms-surface, #fff); color: var(--pms-ink, #1f2328);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
/* Only where there is a real pointer: on a touch screen :hover sticks after the tap. */
@media (hover: hover) { .pms-arrow:hover:not(:disabled) { background: var(--pms-accent, #1f4d45); border-color: var(--pms-accent, #1f4d45); color: var(--pms-accent-ink, #fff); } }
.pms-arrow:disabled { opacity: .35; cursor: default; }
.pms-track:focus-visible, .pms-dot:focus-visible, .pms-arrow:focus-visible { outline: 3px solid var(--pms-focus, var(--pms-accent, #1f4d45)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pms-dot::before, .pms-arrow { transition: none; } }