/* Guide carousel: a looping row of screenshots for the user guide.
   Native scrolling with scroll-snap does the moving; guide-carousel.js adds
   the loop, the buttons, the "N of M" counter, arrow keys, and mouse drag.
   The row runs edge to edge of the screen (the root clips overflow-x), while
   the counter and buttons stay on the page column. overflow-x lives on the
   track and nowhere else (never on html or body).
   Without the script, or with reduced motion, it is a plain scroll-snap row
   whose first screen lines up with the page column.
   Loaded only on /user-guide, via the $orx_guides block in _shell-head. */

.gc {
  --gc-ink: #1F1E1D;
  --gc-soft: #5C574F;
  --gc-hair: #DCD8CF;
  --gc-tint: #F6F4EF;
  --gc-slide: min(1040px, 78vw);
  --gc-gap: 28px;
  /* Distance from the screen edge to the page column (.ug-wrap). */
  --gc-gutter: max(32px, calc((100vw - 1216px) / 2));
  margin: 48px 0 0;
}

.gc__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.gc__count { margin: 0; font: 500 14px/20px "Inter", system-ui, sans-serif; color: var(--gc-soft); font-variant-numeric: tabular-nums; }
.gc__count b { font-weight: 600; color: var(--gc-ink); }

/* Buttons only do something once the script runs. */
.gc__nav { display: none; gap: 8px; }
.gc.is-ready .gc__nav { display: flex; }
.gc__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--gc-hair); border-radius: 999px;
  background: #fff; color: var(--gc-ink);
  cursor: pointer; touch-action: manipulation;
  transition: background-color .12s, border-color .12s;
}
@media (hover: hover) { .gc__btn:hover { background: var(--gc-tint); border-color: #C9C4B9; } }
.gc__btn:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 3px; }

.gc__track {
  position: relative;          /* slides measure offsetLeft from here */
  display: flex;
  gap: var(--gc-gap);
  /* Full bleed: out of the page column to both screen edges. */
  margin-inline: calc(50% - 50vw);
  padding: 4px var(--gc-gutter) 8px;
  scroll-padding-inline: var(--gc-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gc__track::-webkit-scrollbar { display: none; }
.gc__track:focus { outline: none; }
.gc__track:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: -2px; }

.gc__slide {
  flex: 0 0 var(--gc-slide);
  margin: 0;
  min-width: 0;
  scroll-snap-align: start;
}
.gc__shot {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gc-tint);
  box-shadow: 0 0 0 1px rgba(31, 30, 29, .08), 0 18px 40px -24px rgba(31, 30, 29, .28);
}
.gc__shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900;
  -webkit-user-drag: none; user-select: none;
}
.gc__shot:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 3px; }

.gc__cap { margin: 20px 0 0; max-width: 75ch; }
.gc__title { margin: 0 0 6px; font: 600 18px/26px "Inter", system-ui, sans-serif; color: var(--gc-ink); }
.gc__text { margin: 0; font-size: 16px; line-height: 1.65; color: #3D3A35; }

/* Looping (script on, motion allowed): the current screen sits centred with
   its neighbours showing at both sides; the side screens and their captions
   step back so the eye stays on the middle one. */
.gc.is-loop .gc__track { padding-inline: 0; scroll-padding-inline: 0; }
.gc.is-loop .gc__slide { scroll-snap-align: center; scroll-snap-stop: always; }
.gc.is-loop .gc__slide:not(.is-current) { cursor: pointer; }
.gc.is-loop .gc__slide .gc__shot,
.gc.is-loop .gc__slide .gc__cap { transition: opacity .35s ease; }
.gc.is-loop .gc__slide:not(.is-current) .gc__shot { opacity: .55; }
.gc.is-loop .gc__slide:not(.is-current) .gc__cap { opacity: 0; }
@media (hover: hover) { .gc.is-loop .gc__slide:not(.is-current):hover .gc__shot { opacity: .8; } }

/* A single screen: no row, no buttons; it simply sits on the page column. */
.gc.is-single .gc__track { margin-inline: 0; padding-inline: 0; overflow: visible; }
.gc.is-single .gc__slide { flex-basis: 100%; max-width: 1040px; }
.gc.is-single .gc__bar { display: none; }

/* The gutter tracks the .ug-wrap side padding: 16px phone, 24px tablet. */
@media (max-width: 1023px) { .gc { --gc-gutter: 24px; } }

/* Phones: slides are 84vw with the neighbours peeking at both edges. */
@media (max-width: 767px) {
  .gc { --gc-slide: 84vw; --gc-gap: 12px; margin-top: 32px; }
  .gc__bar { margin-bottom: 14px; }
  .gc__cap { margin-top: 14px; }
  .gc__title { font-size: 17px; line-height: 24px; }
  .gc__text { font-size: 15px; line-height: 1.6; }
}
@media (max-width: 639px) { .gc { --gc-gutter: 16px; } }

/* Mouse drag (Pointer Events in guide-carousel.js). */
@media (hover: hover) and (pointer: fine) {
  .gc.is-ready .gc__track { cursor: grab; }
}
.gc__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .gc__btn, .gc__slide .gc__shot, .gc__slide .gc__cap { transition: none !important; }
}

/* Step markers: one button per screen, an icon and a short label. Hidden on
   phones and until the script runs (they only work with it). */
.gc__steps { display: none; }

/* Tablet and up (Eric, 2026-10-13): the row stops at the page column's edges
   instead of bleeding to the screen. Without the loop (no script, reduced
   motion) one slide fills the column. With the loop the current slide is
   88% of the column, centred, and its neighbours peek in at both sides,
   fading out at the column edges so the row reads as one that continues.
   The fade is a mask, not an overlay, so it suits both section bands (#fff
   and #FCFBF8) and never blocks a click on a peeking slide.
   Phones keep the peeking edge-to-edge row. */
@media (min-width: 768px) {
  .gc { --gc-slide: 100%; --gc-gutter: 0px; }
  .gc__track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .gc.is-loop { --gc-slide: 88%; --gc-gap: 20px; }
  .gc.is-loop .gc__track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  /* The mask already fades the peeking screens, so dim them less. */
  .gc.is-loop .gc__slide:not(.is-current) .gc__shot { opacity: .8; }
  .gc__bar { gap: 12px; }
  .gc__count { flex: 0 0 auto; }
  .gc__nav { flex: 0 0 auto; }
  .gc.is-ready .gc__steps {
    position: relative;        /* markers measure offsetLeft from here */
    display: flex; flex: 1 1 auto; min-width: 0; gap: 4px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; overscroll-behavior-x: contain;
    padding: 4px;              /* room for the focus ring inside the scroller */
  }
  .gc__steps::-webkit-scrollbar { display: none; }
  /* Centred when they fit, start-aligned (nothing clipped) when they scroll. */
  .gc__step:first-child { margin-left: auto; }
  .gc__step:last-child { margin-right: auto; }
  .gc__steps.is-more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .gc__steps.is-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
  .gc__steps.is-more-start.is-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }

  .gc__step {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px 0 10px;
    border: 1px solid transparent; border-radius: 999px;
    background: none; color: var(--gc-soft);
    font: 500 14px/20px "Inter", system-ui, sans-serif; white-space: nowrap;
    cursor: pointer; touch-action: manipulation;
    transition: background-color .12s, border-color .12s, color .12s;
  }
  @media (hover: hover) { .gc__step:hover { color: var(--gc-ink); background: var(--gc-tint); } }
  .gc__step:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: -2px; }
  .gc__step[aria-current="step"] { color: var(--gc-ink); background: #fff; border-color: var(--gc-hair); box-shadow: 0 1px 2px rgba(31, 30, 29, .06); }
  .gc__step[aria-current="step"] .gc__ico { color: #2F5C55; }
  .gc__ico { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; }
  .gc__svg { display: block; width: 20px; height: 20px; stroke-width: 1.5px; }
  .gc__svg * { vector-effect: non-scaling-stroke; }
  .gc__num {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 20px; height: 20px;
    border: 1.5px solid currentColor; border-radius: 999px;
    font: 600 11px/1 "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .gc__step { transition: none; }
}