/*
 * Kirin Intelligent Data Carousel: scoped styles.
 * Carousel rules are prefixed .kc / .kc__ ; the full-screen reader is prefixed .kc-lb (it is moved to <body> when opened).
 * Override from Additional CSS if needed, e.g.  .kc { --kc-cyan: #19d3e0; }
 */

.kc {
  --kc-cyan: #28ebf5;
  --kc-ink: #eaf9fb;
  --kc-cw: clamp(230px, 54vw, 760px);                 /* face width (fallback: viewport based) */
  --kc-bg: #000;                                      /* band colour (shortcode: bg="#000000") */
  --kc-pad: 0px;                                      /* extra space above and below (shortcode: padding="0") */
  --kc-ch: calc(var(--kc-cw) / 1.8969);               /* face height: the slides are 2576 x 1358 */
  --kc-ap: calc(var(--kc-cw) * var(--kc-apf, 0.866) * 1.04);   /* apothem: how far each face sits from the centre */

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--kc-pad) 0;
  background: var(--kc-bg);
  color: var(--kc-ink);
  overflow-x: clip;
  container-type: inline-size;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
@supports (width: 1cqw) {
  .kc { --kc-cw: clamp(230px, 56cqw, 760px); }          /* sized to the band it sits in, not the whole screen */
}

/* full width: break out of a narrow content column (no transforms, so nothing else is affected) */
.kc.kc--bleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
html.kc-on { overflow-x: clip; }
/* no padding above or below the band: a Group block that holds only the carousel loses its own top and bottom padding (the spacing between blocks is left alone) */
.wp-block-group:has(> .kc--flush), .wp-block-group:has(> .wp-block-shortcode > .kc--flush), .wp-block-group:has(> .wp-block-group__inner-container > .kc--flush) { padding-top: 0 !important; padding-bottom: 0 !important; }
.kc *, .kc *::before, .kc *::after { box-sizing: border-box; }
.kc:focus-visible { outline: none; }
.kc:focus-visible .kc__stage { outline: 2px solid var(--kc-cyan); outline-offset: -4px; border-radius: 18px; }   /* keyboard focus: a thin ring around the ring, not the whole block */

/* ---- the 3D ring ------------------------------------------------------------------------------------------------ */
.kc .kc__stage {
  position: relative;
  height: calc(var(--kc-ch) * 1.5);
  perspective: calc(var(--kc-cw) * 2.6);
  perspective-origin: 50% 44%;
  margin: 0 auto;
  touch-action: pan-y;               /* the page still scrolls vertically; horizontal moves turn the ring */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.kc .kc__stage.is-drag { cursor: grabbing; }
.kc .kc__stage::after {              /* soft light under the ring */
  content: ""; position: absolute; left: 50%; bottom: 2%; width: calc(var(--kc-cw) * 1.35); height: calc(var(--kc-ch) * 0.18);
  transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(40, 235, 245, 0.34), rgba(40, 235, 245, 0) 70%);
  filter: blur(10px); pointer-events: none;
}
.kc .kc__ring {
  position: absolute; left: 50%; top: 46%;
  width: var(--kc-cw); height: var(--kc-ch);
  margin: calc(var(--kc-ch) / -2) 0 0 calc(var(--kc-cw) / -2);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--kc-ap) * -1)) rotateX(var(--kc-tx, 0deg)) rotateY(var(--kc-ry, 0deg));
  will-change: transform;
}
.kc .kc__face {
  position: absolute; inset: 0; margin: 0; padding: 0;
  border-radius: calc(var(--kc-cw) * 0.016);
  overflow: hidden;
  background: #041c26;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * var(--kc-step, 60deg))) translateZ(var(--kc-ap));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 26px 60px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.kc .kc__face img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.kc .kc__shade { position: absolute; inset: 0; background: #00080c; opacity: var(--kc-dim, 0); pointer-events: none; }
.kc .kc__face.is-front { box-shadow: 0 0 0 1px rgba(40, 235, 245, 0.35), 0 0 46px rgba(40, 235, 245, 0.22), 0 26px 60px rgba(0, 0, 0, 0.5); }

/* ---- controls --------------------------------------------------------------------------------------------------- */
.kc .kc__ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(8px, 2vw, 22px); padding: 0 12px; }
.kc .kc__nav {
  flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: 400 28px/1 system-ui, sans-serif; color: var(--kc-cyan);
  background: rgba(3, 26, 35, 0.85); border: 1px solid rgba(40, 235, 245, 0.35);
  transition: background .2s, border-color .2s, transform .2s;
}
.kc .kc__nav span { display: block; transform: translateY(-2px); }
.kc .kc__nav:hover { background: rgba(8, 60, 76, 0.95); border-color: var(--kc-cyan); }
.kc .kc__nav:active { transform: scale(0.94); }
.kc .kc__hint {
  margin: 0; padding: 9px 16px; border-radius: 999px; max-width: 30em; text-wrap: balance;
  font-size: 13px; line-height: 1.4; color: #cfeff3; background: rgba(3, 26, 35, 0.85); border: 1px solid rgba(40, 235, 245, 0.2);
}
.kc .kc__dots { display: inline-flex; gap: 12px; margin: 14px 0 clamp(14px, 2vw, 24px); padding: 9px 14px; border-radius: 999px; background: rgba(3, 26, 35, 0.85); border: 1px solid rgba(40, 235, 245, 0.2); }
.kc .kc__dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; border: 1.5px solid rgba(205, 238, 243, 0.55); transition: background .25s, box-shadow .25s, border-color .25s; }
.kc .kc__dot.is-active { background: var(--kc-cyan); border-color: var(--kc-cyan); box-shadow: 0 0 10px var(--kc-cyan); }
.kc button:focus-visible { outline: 2px solid var(--kc-cyan); outline-offset: 3px; }

.kc .kc__sr, .kc-lb .kc-lb__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- full-screen reader ----------------------------------------------------------------------------------------- */
html.kc-lock { overflow: hidden !important; }
.kc-lb { position: fixed; inset: 0; z-index: 100000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #eaf9fb; -webkit-tap-highlight-color: transparent; }
.kc-lb[hidden] { display: none; }
.kc-lb *, .kc-lb *::before, .kc-lb *::after { box-sizing: border-box; }
.kc-lb .kc-lb__bg { position: absolute; inset: 0; background: rgba(1, 8, 12, 0.96); opacity: 0; transition: opacity .3s ease; }
.kc-lb.is-open .kc-lb__bg { opacity: 1; }
.kc-lb .kc-lb__body {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: pan-y;
}
.kc-lb .kc-lb__img {
  display: block; width: auto; height: auto; max-width: min(96vw, 2000px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
  border-radius: 10px; box-shadow: 0 30px 120px rgba(0, 0, 0, 0.6); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.kc-lb .kc-lb__text { display: none; }
.kc-lb .kc-lb__btn {
  position: absolute; z-index: 3; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font: 400 30px/1 system-ui, sans-serif; color: #28ebf5; background: rgba(3, 26, 35, 0.88); border: 1px solid rgba(40, 235, 245, 0.4);
}
.kc-lb .kc-lb__btn:hover { background: rgba(8, 60, 76, 0.96); border-color: #28ebf5; }
.kc-lb .kc-lb__btn:focus-visible { outline: 2px solid #28ebf5; outline-offset: 3px; }
.kc-lb .kc-lb__close { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); font-size: 34px; }
.kc-lb .kc-lb__prev { left: max(14px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.kc-lb .kc-lb__next { right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
.kc-lb .kc-lb__count {
  position: absolute; z-index: 3; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; letter-spacing: 0.08em; color: #cfeff3; background: rgba(3, 26, 35, 0.88); border: 1px solid rgba(40, 235, 245, 0.25); pointer-events: none;
}

/* short screens (phones on their side): counter moves to the corner so the slide can use the full height */
@media (max-height: 520px) {
  .kc-lb .kc-lb__img { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .kc-lb .kc-lb__count { left: 14px; bottom: auto; top: max(14px, env(safe-area-inset-top)); transform: none; }
}

/* phones held upright: the slide on top, the same words as readable text underneath (rotate the phone for the full-width slide) */
@media (max-width: 760px) and (orientation: portrait) {
  .kc-lb .kc-lb__body { justify-content: flex-start; align-items: stretch; overflow-y: auto; padding: 0 0 max(24px, env(safe-area-inset-bottom)); }
  .kc-lb .kc-lb__img { width: 100%; max-width: 100%; max-height: none; border-radius: 0; margin-top: 0; box-shadow: none; flex: none; }
  .kc-lb .kc-lb__text { display: block; width: 100%; max-width: 640px; margin: 0 auto; padding: 22px 20px 20px; color: #d9f3f6; font-size: 17px; line-height: 1.55; outline: none; }
  .kc-lb .kc-lb__text ol { margin: 0; padding-left: 1.5em; }
  .kc-lb .kc-lb__text li { margin: 0 0 18px; }
  .kc-lb .kc-lb__text strong { display: block; color: #fff; font-size: 18px; margin-bottom: 4px; }
  .kc-lb .kc-lb__prev, .kc-lb .kc-lb__next { display: none; }                  /* swipe left or right instead */
  .kc-lb .kc-lb__count { left: 14px; bottom: auto; top: max(14px, env(safe-area-inset-top)); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kc .kc__nav, .kc .kc__dot { transition: none; }
  .kc-lb .kc-lb__bg { transition: none; }
}