/*
 * mod_jpc_coverflow - default styles (cover-flow carousel, pure CSS scroll-snap).
 *
 * Easy to override: change the --jpc-cf-* tokens below from your template CSS, from the module's
 * "Custom CSS" box ({module} = this module), or replace the rules. Literal values live only in the token block.
 * The carousel works without JavaScript (the buttons and the autoplay are an enhancement).
 */

.jpc-coverflow {
  /* tokens */
  --jpc-cf-card: clamp(9rem, 24vw, 17rem);
  --jpc-cf-gap: clamp(0.5rem, 3vw, 2.5rem);
  --jpc-cf-pad-block: 1.5rem;
  --jpc-cf-perspective: 1400px;
  --jpc-cf-ratio: 2 / 3;
  --jpc-cf-radius: 3px;
  --jpc-cf-shadow: 0 6px 24px #0008;
  --jpc-cf-text: #fff;
  --jpc-cf-text-soft: #ffffffd9;
  --jpc-cf-btn-bg: #000c;
  --jpc-cf-btn-bg-hover: var(--color-link, #276A37);
  --jpc-cf-btn-size: 2.75rem;
  --jpc-cf-btn-offset: 0.75rem;
  --jpc-cf-btn-top: 40%;
  --jpc-cf-focus: var(--color-gold-on-dark, #E3BC4B);
  --jpc-cf-tilt: 32deg;
  --jpc-cf-scale-side: 0.78;
  --jpc-cf-opacity-side: 0.45;
  --jpc-cf-title-size: 1.1rem;
  --jpc-cf-meta-size: 0.875rem;
  --jpc-cf-scroll: smooth;
  --jpc-cf-btn-font: 1.2rem;
  --jpc-cf-lh-title: 1.2;
  --jpc-cf-lh-meta: 1.3;
  --jpc-cf-caption-stack: 0.15rem;
  --jpc-cf-caption-gap: 0.6rem;
  --jpc-cf-outline: 3px;

  position: relative;
  overflow: hidden;
  color: var(--jpc-cf-text);
}

.jpc-coverflow__track {
  display: flex;
  gap: var(--jpc-cf-gap);
  margin: 0;
  padding: var(--jpc-cf-pad-block) calc(50% - var(--jpc-cf-card) / 2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: var(--jpc-cf-scroll);
  scrollbar-width: none;
  perspective: var(--jpc-cf-perspective);
}
.jpc-coverflow__track::-webkit-scrollbar { display: none; }
.jpc-coverflow__track:focus-visible { outline: var(--jpc-cf-outline) solid var(--jpc-cf-focus); outline-offset: -3px; }

.jpc-coverflow__item { flex: 0 0 var(--jpc-cf-card); scroll-snap-align: center; }

.jpc-coverflow__link { display: block; color: inherit; text-decoration: none; }
.jpc-coverflow__link:focus-visible { outline: var(--jpc-cf-outline) solid var(--jpc-cf-focus); outline-offset: 4px; }

.jpc-coverflow__cover {
  display: block;
  width: 100%;
  aspect-ratio: var(--jpc-cf-ratio);
  object-fit: cover;
  border-radius: var(--jpc-cf-radius);
  box-shadow: var(--jpc-cf-shadow);
}

.jpc-coverflow__caption { display: grid; gap: var(--jpc-cf-caption-stack); margin-top: var(--jpc-cf-caption-gap); text-align: center; }
.jpc-coverflow__title { font-size: var(--jpc-cf-title-size); line-height: var(--jpc-cf-lh-title); }
.jpc-coverflow__meta { font-size: var(--jpc-cf-meta-size); line-height: var(--jpc-cf-lh-meta); color: var(--jpc-cf-text-soft); }

.jpc-coverflow__btn {
  position: absolute;
  top: var(--jpc-cf-btn-top);
  z-index: 5;
  width: var(--jpc-cf-btn-size);
  height: var(--jpc-cf-btn-size);
  border: 0;
  border-radius: var(--jpc-cf-radius);
  background: var(--jpc-cf-btn-bg);
  color: var(--jpc-cf-text);
  font-size: var(--jpc-cf-btn-font);
  cursor: pointer;
}
.jpc-coverflow__btn:hover, .jpc-coverflow__btn:focus-visible { background: var(--jpc-cf-btn-bg-hover); }
.jpc-coverflow__btn:focus-visible { outline: var(--jpc-cf-outline) solid var(--jpc-cf-focus); outline-offset: 2px; }
.jpc-coverflow__btn--prev { left: var(--jpc-cf-btn-offset); }
.jpc-coverflow__btn--next { right: var(--jpc-cf-btn-offset); }

/* Cover-flow tilt: the card in the middle faces forward, the side cards turn away. */
@supports (animation-timeline: view()) {
  .jpc-coverflow__item {
    animation: jpc-cf-tilt linear both;
    animation-timeline: view(inline);
    animation-range: entry 0% exit 100%;
  }
  @keyframes jpc-cf-tilt {
    0%   { transform: rotateY(var(--jpc-cf-tilt)) scale(var(--jpc-cf-scale-side)); opacity: var(--jpc-cf-opacity-side); }
    50%  { transform: none; opacity: 1; z-index: 2; }
    100% { transform: rotateY(calc(-1 * var(--jpc-cf-tilt))) scale(var(--jpc-cf-scale-side)); opacity: var(--jpc-cf-opacity-side); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .jpc-coverflow { --jpc-cf-scroll: auto; }
  .jpc-coverflow__item { animation: none; }
}