/* Konverta.ai: LinkedIn slide carousel (.slides). No dependencies; pairs with /assets/js/slides.js.
   Load on article pages that carry a carousel only.

   Markup (repeat one <li> per slide; first image eager, the rest loading="lazy"):
   <figure class="slides" data-slides aria-roledescription="carousel" aria-label="LinkedIn carousel: TITLE">
     <div class="slides-frame">
       <ol class="slides-track" tabindex="0" aria-label="Slides (use the arrow keys)">
         <li class="slides-slide" aria-roledescription="slide" aria-label="1 of N">
           <img src="/assets/img/posts/SLUG/carousel/01.webp" srcset="..01-540.webp 540w, ..01.webp 1080w"
                sizes="(min-width: 620px) 560px, calc(100vw - 48px)" width="1080" height="1350" alt="SLIDE TEXT" decoding="async">
         </li>
       </ol>
       <button type="button" class="slides-btn slides-prev" aria-label="Previous slide" hidden>..</button>
       <button type="button" class="slides-btn slides-next" aria-label="Next slide" hidden>..</button>
     </div>
     <div class="slides-bar" hidden>
       <p class="slides-count" aria-live="polite"><span data-slides-current>1</span> / N</p>
       <div class="slides-dots"></div>   (dots are generated by slides.js)
     </div>
     <figcaption class="slides-cap">Carousel originally posted on <a href="LINKEDIN_URL">LinkedIn</a>
       <a class="slides-pdf" href="/assets/docs/FILE.pdf" download>Download the carousel (PDF)</a></figcaption>
   </figure>
   Without JS the track still scrolls and snaps (swipe / scrollbar / arrow keys); the buttons and bar stay hidden. */

.slides, .prose figure.slides {
  --slides-max: 560px;
  --slides-frame: #060F1A;
  --slides-line: rgba(233, 239, 244, .16);
  --slides-text: #D3DCE3;
  --slides-muted: #93A3B1;
  --slides-accent: #7EE6EE;
  position: relative; width: 100%; max-width: var(--slides-max); margin: 2.25em auto; padding: 0;
}
.slides-frame {
  position: relative; padding: clamp(6px, 1.6vw, 12px); border-radius: 16px; background: var(--slides-frame);
  box-shadow: 0 0 0 1px var(--slides-line), 0 30px 60px -36px rgba(0, 0, 0, .9);
}

/* the track: horizontal scroll-snap */
.slides .slides-track {
  display: flex; margin: 0; padding: 0; list-style: none; gap: 0;
  aspect-ratio: 4 / 5; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  border-radius: 10px; background: #0B1826; outline: none;
}
.slides .slides-track:focus-visible { box-shadow: 0 0 0 2px var(--slides-frame), 0 0 0 4px var(--slides-accent); }
.js .slides .slides-track { scrollbar-width: none; }
.js .slides .slides-track::-webkit-scrollbar { display: none; }
@supports not (aspect-ratio: 4 / 5) { .slides .slides-track { height: calc(min(var(--slides-max), 100vw - 48px) * 1.25); } }

.slides .slides-track > .slides-slide {
  flex: 0 0 100%; width: 100%; margin: 0; padding: 0; scroll-snap-align: start; scroll-snap-stop: always; position: relative;
}
.slides .slides-track > .slides-slide::marker { content: none; }
.slides .slides-slide img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; margin: 0; background: #F4EFE6;
  -webkit-user-drag: none; user-select: none;
}

/* prev / next */
.slides-btn {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0; padding: 0;
  border: 1px solid var(--slides-line); border-radius: 50%; background: rgba(6, 15, 26, .82); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.slides-btn[hidden] { display: none; }
.slides-btn svg { width: 18px; height: 18px; }
.slides-prev { left: clamp(10px, 2.4vw, 18px); }
.slides-next { right: clamp(10px, 2.4vw, 18px); }
.slides-btn:hover { background: linear-gradient(120deg, #0FB4C3, #0F87D2); border-color: transparent; }
.slides-btn:focus-visible { outline: 3px solid var(--slides-accent); outline-offset: 2px; }
.slides-btn:disabled { opacity: 0; pointer-events: none; }

/* counter + dots */
.slides-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; padding-inline: 2px; }
.slides-bar[hidden] { display: none; }
.slides .slides-count { margin: 0; font-family: var(--font, system-ui, sans-serif); font-size: .8125rem; font-weight: 500; letter-spacing: .14em;
  font-variant-numeric: tabular-nums; color: var(--slides-muted); white-space: nowrap; }
.slides .slides-count span { color: var(--slides-text); }
.slides-dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.slides-dot { position: relative; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.slides-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px;
  background: rgba(233, 239, 244, .28); transition: width .25s ease, margin .25s ease, background .25s ease; }
.slides-dot:hover::before { background: rgba(233, 239, 244, .6); }
.slides-dot[aria-current="true"]::before { width: 18px; margin-left: -9px; background: linear-gradient(120deg, #0FB4C3, #0F87D2); }
.slides-dot:focus-visible { outline: 2px solid var(--slides-accent); outline-offset: -2px; border-radius: 6px; }

/* caption + PDF */
.slides .slides-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-top: .75rem;
  font-size: .8125rem; line-height: 1.5; color: var(--slides-muted); }
.slides .slides-cap a { color: var(--slides-accent); }
.slides .slides-pdf { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; white-space: nowrap; }
.slides .slides-pdf::before { content: ""; width: .9em; height: .9em; flex: none;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM5 19h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (max-width: 420px) {
  .slides-btn { width: 40px; height: 40px; margin-top: -20px; }
  .slides .slides-cap { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .slides .slides-track { scroll-behavior: auto; }
  .slides-btn, .slides-dot::before { transition: none; }
}

@media print {
  .slides { max-width: 70mm; break-inside: avoid; }
  .slides .slides-track { overflow: visible; aspect-ratio: auto; display: block; }
  .slides .slides-track > .slides-slide:not(:first-child), .slides-btn, .slides-bar { display: none !important; }
  .slides-frame { box-shadow: none; border: 1px solid #ccc; background: none; }
  .slides .slides-cap, .slides .slides-cap a { color: #000; }
}