/* The blog slideshow under the nine newest posts (order 0245). Tokens from site.css.
   Without blog-reel.js: the slides sit in a row that scrolls sideways inside its own box.
   With it (.reel.is-ready): the current post is biggest in the middle, its neighbours either side. */

.blog-reel { padding-top: 0; }
.blog-reel__head { margin-bottom: var(--space-5); }
.blog-reel__head h2 { margin: .35rem 0 0; }

.reel { --reel-w: min(78vw, 560px); position: relative; }

/* The slides as a plain sideways row (no script). */
.reel__stage { position: relative; outline: none; border-radius: var(--radius-lg); }
.reel__stage:focus-visible { box-shadow: var(--focus); }
.reel__track {
  list-style: none; margin: 0; padding: .5rem .25rem 1rem; display: flex; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.reel__slide { flex: 0 0 var(--reel-w); scroll-snap-align: center; min-width: 0; }

.reel-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--c-ink);
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(16, 163, 138, .22), 0 18px 40px -22px rgba(8, 90, 76, .45);
}
.reel-card__media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-grey-100); }
.reel-card__media .post-media-label { position: absolute; top: .7rem; left: .7rem; z-index: 1; }
.reel-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.reel-card__body { display: grid; gap: .35rem; padding: var(--space-4) var(--space-4) var(--space-5); }
.reel-card__date { font-size: .8125rem; font-weight: 650; letter-spacing: .04em; color: var(--c-teal-strong); }
.reel-card__title { font-weight: 760; font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.25; letter-spacing: -.01em; }
.reel-card__go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; font-weight: 680; font-size: .9rem; color: var(--c-teal-deep); }
.reel-card:hover .reel-card__title { color: var(--c-teal-deep); }
.reel-card:focus-visible { outline: none; box-shadow: var(--focus); }

/* The slideshow (script). Every slide sits on the same centre line; the script sets --d, its
   place from the current one, and the stage's height. */
.reel.is-ready .reel__stage { height: var(--reel-h, 30rem); overflow: hidden; touch-action: pan-y; padding-block: .5rem; }
.reel.is-ready .reel__track { display: block; overflow: visible; padding: 0; height: 100%; position: relative; }
/* The side posts fade out towards the edges. */
.reel.is-ready .reel__track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.reel.is-ready .reel__slide {
  --d: 0; --a: 0;
  position: absolute; top: 0; left: 50%; width: var(--reel-w); margin-left: calc(var(--reel-w) / -2);
  transform: translateX(calc(var(--d) * var(--reel-step, 62%))) scale(calc(1 - var(--a) * .16));
  transform-origin: center center;
  opacity: calc(1 - var(--a) * .38);
  z-index: calc(10 - var(--a));
  transition: transform .8s cubic-bezier(.22, .7, .2, 1), opacity .8s ease, filter .8s ease;
  filter: saturate(calc(1 - var(--a) * .35));
  cursor: pointer;
}
.reel.is-ready .reel__slide[data-far] { opacity: 0; pointer-events: none; }
.reel.is-ready .reel__slide.is-current { cursor: auto; }
.reel.is-ready .reel__slide.is-current .reel-card { box-shadow: 0 0 0 1px rgba(16, 163, 138, .35), 0 28px 60px -26px rgba(8, 90, 76, .6); }
.reel.is-ready .reel__slide.is-current .reel-card__img { transform: scale(1.04); }
.reel.is-ready .reel__slide:not(.is-current) .reel-card__go { visibility: hidden; }
@media (min-width: 900px) { .reel { --reel-w: min(46vw, 600px); } .reel.is-ready .reel__slide { --reel-step: 70%; } }

/* Arrows, dots and pause, under the stage. */
.reel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.reel__controls[hidden] { display: none; }
.reel__btn {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  color: var(--c-teal-deep); background: #fff; border: 1.5px solid rgba(16, 163, 138, .55); box-shadow: var(--glow);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.reel__btn:hover { background: var(--c-teal-deep); color: #fff; box-shadow: var(--glow-strong); }
.reel__btn:active { transform: scale(.95); }
.reel__btn:focus-visible { outline: none; box-shadow: var(--focus); }
.reel__btn[data-reel-prev] .icon { transform: rotate(180deg); }
.reel__btn--play { width: 40px; height: 40px; margin-left: var(--space-2); }
.reel__pause { position: relative; width: 12px; height: 14px; }
.reel__pause::before, .reel__pause::after { content: ''; position: absolute; top: 0; width: 4px; height: 14px; border-radius: 1px; background: currentColor; }
.reel__pause::before { left: 1px; }
.reel__pause::after { right: 1px; }
.reel.is-paused-by-user .reel__pause::before {
  left: 2px; width: 0; height: 0; border-radius: 0; background: none;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor;
}
.reel.is-paused-by-user .reel__pause::after { display: none; }
.reel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; max-width: 60%; }
.reel__dot {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%;
}
.reel__dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 999px; background: var(--c-grey-300);
  transition: width .35s ease, background-color .35s ease;
}
.reel__dot:hover::before { background: var(--c-teal); }
.reel__dot[aria-current='true']::before { width: 24px; background: var(--c-teal-deep); }
.reel__dot:focus-visible { outline: none; box-shadow: var(--focus); }
@media (max-width: 639px) {
  /* Phones: arrows and pause on one row, the dots on their own row under them. */
  .reel__controls { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .reel__dots { order: 5; flex-basis: 100%; max-width: none; }
  .reel__btn { width: 44px; height: 44px; }
  .reel__btn--play { width: 38px; height: 38px; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reel.is-ready .reel__slide, .reel-card__img, .reel__dot::before { transition: none; }
  .reel.is-ready .reel__slide.is-current .reel-card__img { transform: none; }
}