/* =============================================================
   Carousel — the projects grid, laid out in a row.

   Kadence's Posts block renders <ul class="wp-block-kadence-posts
   kb-posts grid-cols"> with one <li class="kb-post-list-item"> per
   project. This file swaps that grid for a horizontal scroll-snap
   flex row. Nothing inside a tile is touched, which is how the
   portfolio hover and the site corner radius survive intact.

   Selectors deliberately carry ".wp-block-kadence-posts" next to
   ".pf-carousel": Kadence's own rule is ".wp-block-kadence-posts
   .grid-cols { display: grid }" at two classes, so one class of
   ours would lose on specificity wherever it is printed. Don't
   simplify them out.

   The values below are only fallbacks. The real ones are written
   onto the wrapper as inline custom properties by pf-carousel.php,
   driven by the Carrousel panel in the block sidebar.
   ============================================================= */

.pf-carousel-wrap {
  --pfc-visible: 3;
  --pfc-visible-tablet: 2;
  --pfc-visible-mobile: 1;
  --pfc-gap: 40px;
  --pfc-ink: #b07bd8;
  --pfc-snap: x mandatory;
  /* The dots sit under the track and are part of the wrapper's height, so an
     arrow at a plain 50% would ride low. Take the dots back out. */
  --pfc-dots-h: 0px;

  /* One number the track actually reads, re-pointed per breakpoint.
     Kadence's own breakpoints: mobile <=767, tablet 768-1024, desktop 1025+. */
  --pfc-cols: var(--pfc-visible-mobile);

  position: relative;
}

@media screen and (min-width: 768px) {
  .pf-carousel-wrap { --pfc-cols: var(--pfc-visible-tablet); }
}

@media screen and (min-width: 1025px) {
  .pf-carousel-wrap { --pfc-cols: var(--pfc-visible); }
}

/* ---------- the track ------------------------------------------------ */

.pf-carousel.wp-block-kadence-posts {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--pfc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: var(--pfc-snap);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* No scrollbar: the arrows and the dots are the affordance. Touch keeps
     its own momentum scrolling either way. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pf-carousel.wp-block-kadence-posts::-webkit-scrollbar { display: none; }

/* The scrolling region is focusable (tabindex on the <ul>), so it has to say
   so when it is focused. */
.pf-carousel.wp-block-kadence-posts:focus-visible {
  outline: 2px solid #c8a2e8;
  outline-offset: 4px;
}

.pf-carousel.wp-block-kadence-posts > .kb-post-list-item {
  flex: 0 0 calc((100% - (var(--pfc-cols) - 1) * var(--pfc-gap)) / var(--pfc-cols));
  min-width: 0;
  scroll-snap-align: start;
  list-style: none;
}

/* A tile in a grid can grow to the row's height; a tile in a row cannot lean
   on its neighbours, so it states its own. */
.pf-carousel.wp-block-kadence-posts > .kb-post-list-item > .entry.loop-entry {
  height: 100%;
}

/* Optional: the reel dissolves at both edges instead of ending on a hard cut. */
.pf-carousel-edge-fade .pf-carousel.wp-block-kadence-posts {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pfc-gap), #000 calc(100% - var(--pfc-gap)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--pfc-gap), #000 calc(100% - var(--pfc-gap)), transparent 100%);
}

/* ---------- arrows --------------------------------------------------- */

/* Hidden until the script says it is alive, and hidden again when every tile
   already fits — a control that does nothing is worse than no control. */
.pf-carousel-nav,
.pf-carousel-dots { display: none; }

.pf-carousel-ready:not(.pf-carousel-static) .pf-carousel-nav { display: flex; }
.pf-carousel-ready:not(.pf-carousel-static) .pf-carousel-dots { display: flex; }

.pf-carousel-arrows-none .pf-carousel-nav { display: none !important; }

.pf-carousel-has-dots { --pfc-dots-h: 28px; }

.pf-carousel-nav {
  position: absolute;
  top: calc((100% - var(--pfc-dots-h)) / 2);
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  /* A round button is not an image: it keeps its own radius and stays out of
     the site radius rule (pf-consistency). */
  border-radius: 50%;
  color: var(--pfc-ink);
  background: transparent;
  border: 1px solid rgba(245, 243, 247, .12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.pf-carousel-prev { left: 0; }
.pf-carousel-next { right: 0; }

/* The fill accent is 1.9:1 on the canvas — it only ever appears under white. */
.pf-carousel-nav:hover,
.pf-carousel-nav:focus-visible {
  color: #ffffff;
  border-color: var(--pfc-ink);
  background-color: rgba(100, 33, 135, .72);
}

.pf-carousel-nav:focus-visible {
  outline: 2px solid #c8a2e8;
  outline-offset: 2px;
}

.pf-carousel-nav[disabled] {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

.pf-carousel-nav svg { width: 24px; height: 24px; display: block; }

/* Clear glass, the refractive end of it — never stacked on other glass. */
.pf-carousel-arrows-glass .pf-carousel-nav {
  background: rgba(30, 26, 36, .45);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

.pf-carousel-arrows-glass .pf-carousel-nav:hover,
.pf-carousel-arrows-glass .pf-carousel-nav:focus-visible {
  background: rgba(100, 33, 135, .55);
}

@media screen and (max-width: 767px) {
  /* Touch already swipes. The arrows are there for the pointer. */
  .pf-carousel-arrows-desk .pf-carousel-nav { display: none !important; }
}

/* ---------- dots ----------------------------------------------------- */

.pf-carousel-dots {
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 8px;
  margin-top: 20px;
}

.pf-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 243, 247, .24);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.pf-carousel-dot:hover { background: var(--pfc-ink); }

.pf-carousel-dot[aria-selected="true"] {
  background: var(--pfc-ink);
  transform: scale(1.35);
}

.pf-carousel-dot:focus-visible {
  outline: 2px solid #c8a2e8;
  outline-offset: 3px;
}

/* ---------- motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pf-carousel.wp-block-kadence-posts { scroll-behavior: auto; }
  .pf-carousel-nav,
  .pf-carousel-dot { transition: none; }
}