/* ============================================================================
   PAGINATION — single source of truth.
   Canonical CSS for standard (.pag), small (.pag--sm) and compact (.pag-compact)
   pagination. Shared by comp-pagination.html, comp-region-nav.html and any
   future consumer. Pair with _pagination.js for the live truncation/render +
   keyboard + sliding-thumb controller. Import AFTER colors_and_type.css.

   Markup contract (wired by _pagination.js):
     <nav class="pag" data-total="12" data-current="1" [data-docs] [data-responsive]>…</nav>
     <div class="pag-compact" data-total="12" data-current="1" [data-responsive="compact"]>…</div>
   The controller renders the inner buttons/counter from the data-* attributes.
   ============================================================================ */

/* ── Motion tokens (compound-architecture contract) ──────────────────────────
   Read by _pagination.js per page-change (getComputedStyle on the nav); the
   Inspector rewrites them inline + the motion governor scales them. Declared as
   the system DEFAULT here — NEVER hardcode these in _pagination.js again.
   --pag-slide-dur: standard active-thumb glide · --pag-sweep-dur: compact wash
   sweep · --pag-num-dur: compact number slide · --pag-fade-dur: de-activation
   crossfade · --pag-ease: shared entrance easing. */
.pag, .pag-compact {
  --pag-slide-dur: 660ms; /* @kind other */
  --pag-sweep-dur: 1200ms; /* @kind other */
  --pag-num-dur: 800ms; /* @kind other */
  --pag-fade-dur: 660ms; /* @kind other */
  --pag-ease: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
}

.pag { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; position: relative; }
.pag button {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-raised);
  border-radius: 4px; cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  font: 500 14px var(--font-sans);
  color: var(--color-fg-default);
}
/* Hover only on real, clickable buttons — the current page (.active) and the
   boundary-disabled chevrons must not light up. Light primary-50 well + a
   primary-700 glyph (mirrors the compact hover), not just a border tint. */
.pag button:not(.active):not([disabled]):hover,
.pag button:not(.active):not([disabled])[data-state="hover"] {
  border-color: var(--gov-color-primary-500);
  background: var(--gov-color-primary-50);
  color: var(--gov-color-primary-700);
}
/* Pressed — deeper well + stronger border (mirrors segmented / compact).
   [data-state="pressed"] is what the focus playground stamps. */
.pag button:not(.active):not([disabled]):active,
.pag button:not(.active):not([disabled])[data-state="pressed"] {
  border-color: var(--gov-color-primary-700);
  background: var(--gov-color-primary-100);
  color: var(--gov-color-primary-700);
}
.pag button.active { background: var(--gov-color-primary-500); border-color: var(--gov-color-primary-500); color: white; cursor: default; }
.pag button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ── Sliding active thumb (page change) ──────────────────────────────────
   When the active page changes, a primary-500 thumb GLIDES from the old
   active button to the new one — the active "fill" visibly leaves the
   previous page and travels to the new page, rather than blink-jumping.
   Mirrors comp-segmented's transient-thumb technique (Web Animations API,
   anim.finished hand-off, snap-in) but the thumb sits ABOVE the buttons
   (z-index) because the pagination active fill is a dark primary-500 with
   white text — it can't read through the opaque white button faces the way
   the segmented control's light tint does. The thumb is created/destroyed
   per slide in JS; it's invisible by default. JS guards on
   prefers-reduced-motion (skips the slide entirely). */
.pag__thumb {
  position: absolute; top: 0; left: 0;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gov-color-primary-500);
  border: 1px solid var(--gov-color-primary-500);
  border-radius: 4px;
  color: #fff;
  font: 500 14px var(--font-sans);
  pointer-events: none;
  z-index: 5;                   /* above the white button faces + focus ring */
}
.pag--sm .pag__thumb { font-size: 12.5px; border-radius: 3px; }
/* While the thumb is in flight the destination button reads INACTIVE (white
   face) so the only blue fill on screen is the moving thumb; on landing the
   thumb is removed and `.is-sliding` dropped, snapping the real active fill
   in (button backgrounds have no transition, so the swap is instant — the
   --snap guard is belt-and-suspenders against any inherited transition). */
.pag.is-sliding button.active {
  background: var(--color-bg-raised);
  border-color: var(--color-border-default);
  color: var(--color-fg-default);
}
.pag--snap button { transition: none !important; }

/* Focus ring — real keyboard nav (:focus-visible) + forced (.is-focus, which
   the focus playground stamps on every non-disabled button at once). The
   buttons are flex siblings with only a 4px gap and the active button carries
   a solid primary-500 fill, so a LATER sibling paints over the bottom/side of
   an EARLIER button's 5px ring (paint order = DOM order). z-index:1 lifts any
   focused face above its auto/0 siblings so the whole ring shows. The element
   that ACTUALLY has focus goes to z-index:2 so, in the playground (where every
   sibling is forced to .is-focus), its real ring renders on top of the forced
   rings on its neighbours. Mirrors comp-filter-group / comp-segmented. */
.pag button:focus-visible,
.pag button.is-focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 1;
  transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 140ms ease-out, color 100ms ease-out;
}
.pag button:focus-visible { z-index: 2; }
/* Dots take the SAME footprint as a page button so the numeric block keeps a
   constant total width across page changes — paired with the fixed-count
   render (see script) this stops the prev/next buttons from sliding under the
   user's cursor as the active page moves. Rendered as the `bi-three-dots`
   glyph (project rule: no unicode ellipsis) so the dots self-centre on the
   vertical axis instead of sitting on the text baseline. */
.pag .dots { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; color: var(--color-fg-tertiary); }
.pag .count { font-size: 13px; color: var(--color-fg-secondary); margin-left: 10px; font-variant-numeric: tabular-nums; }
/* Responsive: when the eyebrow can't sit inline it wraps to its own line and
   centers below the (also-centered) button group. `.pag--stacked` is toggled by
   the JS responsive driver (checkStacked) after measuring whether `.count`
   actually wrapped — so the buttons stay left-aligned until the eyebrow drops,
   then the whole control reads as a centered stack. */
/* ── Alignment + label placement + wrap (config knobs) ────────────────────────
   align: start (default) | center | end | justify (text & buttons to opposite
     ends via an auto-margin — only the label is pushed, the buttons stay clustered).
   labelPlacement: after (trailing, default) | before (leading) — the label's inline
     order relative to the buttons.
   When the label can't sit inline it WRAPS to its own full-width line
   (before→above, after→below) and BOTH lines align per `align` (justify→centred
     when wrapped). labelOverflow: wrap (default) | hide (drop the label instead). */

/* inline alignment of the whole control */
.pag.pag--center { justify-content: center; }
.pag.pag--end { justify-content: flex-end; }
/* Compact alignment can't ride `align-self` (the parent may be a plain block, not
   a flex container — e.g. the Inspector well). Make the inline-flex control a
   block-level fit-content box and centre/end it with auto margins, which works in
   BOTH a flex parent and a block parent. justify on compact is a no-op (the
   counter is structurally between the buttons) → reads as start. */
.pag-compact.pag--center,
.pag-compact.pag--end { display: flex; width: fit-content; }
.pag-compact.pag--center { margin-inline: auto; }
.pag-compact.pag--end { margin-inline-start: auto; }
/* justify keeps flex-start + an auto-margin so ONLY the label travels to the far
   end; the button cluster stays put (and wraps internally if it must — the
   reference "text left, buttons right, 12/› wrap below" layout). */
.pag--justify:not(.pag--label-before) .count { margin-left: auto; }
.pag--justify.pag--label-before .nav-prev { margin-left: auto; }

/* label placement: before = leading (ordered ahead of the buttons). */
.pag--label-before .count { order: -1; margin-left: 0; margin-right: 10px; }

/* stacked: the label wrapped onto its own full-width line (toggled by
   checkStacked). before→above, after→below; alignment follows `align`. */
.pag--stacked .count { flex-basis: 100%; margin-left: 0; margin-right: 0; margin-top: 6px; text-align: left; }
.pag--label-before.pag--stacked .count { margin-top: 0; margin-bottom: 6px; }
.pag--stacked { justify-content: flex-start; }
.pag--center.pag--stacked,
.pag--justify.pag--stacked { justify-content: center; }
.pag--end.pag--stacked { justify-content: flex-end; }
.pag--center.pag--stacked .count,
.pag--justify.pag--stacked .count { text-align: center; }
.pag--end.pag--stacked .count { text-align: right; }
/* cancel the justify auto-margins once stacked (both lines just centre). */
.pag--justify.pag--stacked .count,
.pag--justify.pag--stacked .nav-prev { margin-left: 0; }

/* labelOverflow: hide — drop the label instead of wrapping it. */
.pag--label-hidden .count { display: none; }

.pag--sm button { width: 28px; height: 28px; font-size: 12.5px; border-radius: 3px; }
.pag--sm .dots { width: 28px; height: 28px; font-size: 14px; }

.pag-compact {
  /* align-items: stretch so every child (buttons + the .where counter) is the
     same height and the inner 1px dividers therefore span top-to-bottom — the
     .where counter is shorter than the buttons otherwise and its separator
     stopped short of the edges. */
  display: inline-flex; align-items: stretch;
  align-self: flex-start;       /* inline-flex still stretches to the column's
     width under the .col flex parent — pin it to its content width. */
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  /* overflow stays visible so an inner button's focus ring isn't clipped by
     the rounded container; the end buttons round their own outer corners. */
  background: var(--gov-color-neutral-0);
}
.pag-compact button {
  all: unset; cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  padding: 8px 12px; font: 500 14px var(--font-sans);
  color: var(--color-fg-default);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-right: 1px solid var(--color-border-default);
  box-sizing: border-box;
}
.pag-compact button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.pag-compact button:last-child { border-right: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.pag-compact button:not([disabled]):hover,
.pag-compact button:not([disabled])[data-state="hover"] { background: var(--gov-color-primary-50); color: var(--gov-color-primary-700); }
.pag-compact button:not([disabled]):active,
.pag-compact button:not([disabled])[data-state="pressed"] { background: var(--gov-color-primary-100); color: var(--gov-color-primary-700); }
.pag-compact button[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Focus ring — same recipe as standard pagination; buttons are flex siblings
   so z-index lifts the ring above neighbours (the container no longer clips).
   `.is-focus` mirrors `:focus-visible` so the focus playground's forced-focus
   state shows a ring here too (every FORCE_* component must carry it). */
.pag-compact button:focus-visible,
.pag-compact button.is-focus {
  outline: none;
  box-shadow: var(--shadow-focus);
  position: relative; z-index: 1;
  transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), color 100ms ease-out;
}
/* The truly-focused button lifts above forced-focus siblings (the playground
   stamps .is-focus on every button at once) so its real ring paints on top. */
.pag-compact button:focus-visible { z-index: 2; }

/* Clear the 1px divider flanking the FOCUSED button so the focus ring reads as
   one clean shape instead of being crossed by a leftover gray line — mirrors
   comp-segmented. The focused button's OWN border-right plus the border-right
   of whatever sits immediately to its left (the .where counter, or an adjacent
   button) go `transparent`; transparent keeps the 1px box so layout is
   unchanged. */
.pag-compact button:focus-visible,
.pag-compact button.is-focus,
.pag-compact .where:has(+ button:focus-visible),
.pag-compact .where:has(+ button.is-focus),
.pag-compact button:has(+ button:focus-visible),
.pag-compact button:has(+ button.is-focus) { border-right-color: transparent; }

.pag-compact .where { display: inline-flex; align-items: center; font-size: 13px; color: var(--color-fg-secondary); font-variant-numeric: tabular-nums; padding: 0 14px; border-right: 1px solid var(--color-border-default); position: relative; overflow: hidden; }
.pag-compact .where strong { color: var(--color-fg-default); font-weight: 500; }

/* ── Pronounced directional chevron on hover / focus ─────────────────────────
   Mirrors the Related-row arrow (toned to fit the control): the prev / next
   glyph GROWS + thickens and nudges toward the row edge for clear feedback on
   hover AND keyboard focus. transform-origin is the OUTER edge so the growth
   pushes AWAY from the adjacent label in the compact text variant — and because
   `transform` never reflows, the "Předchozí" / "Další" text is not moved at all.
   Boundary-disabled chevrons stay inert. Shared by .pag and .pag-compact; the
   global reduced-motion policy collapses the transition. */
.pag .nav-prev > i.bi, .pag .nav-next > i.bi,
.pag-compact .nav-prev > i.bi, .pag-compact .nav-next > i.bi {
  transform: translateX(0) scale(1);
  -webkit-text-stroke: 0 currentColor;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-text-stroke-width 180ms ease-out;
}
.pag .nav-prev > i.bi, .pag-compact .nav-prev > i.bi { transform-origin: left center; }
.pag .nav-next > i.bi, .pag-compact .nav-next > i.bi { transform-origin: right center; }
.pag .nav-prev:not([disabled]):is(:hover, [data-state~="hover"], :focus-visible, .is-focus) > i.bi,
.pag-compact .nav-prev:not([disabled]):is(:hover, [data-state~="hover"], :focus-visible, .is-focus) > i.bi {
  transform: translateX(-2px) scale(1.35);
  -webkit-text-stroke-width: 0.6px;
}
.pag .nav-next:not([disabled]):is(:hover, [data-state~="hover"], :focus-visible, .is-focus) > i.bi,
.pag-compact .nav-next:not([disabled]):is(:hover, [data-state~="hover"], :focus-visible, .is-focus) > i.bi {
  transform: translateX(2px) scale(1.35);
  -webkit-text-stroke-width: 0.6px;
}

/* ── Compact: sliding background under the counter ───────────────────────
   On a page change a soft primary-50 wash SWEEPS through the "n / total"
   counter in the direction of travel (left→right for Next, right→left for
   Prev) while the number itself slides in from the incoming side — the same
   directional "thumb in motion" language as the segmented switch, scaled to
   the single counter slot. Both layers are animated via the Web Animations
   API from JS, which skips them under prefers-reduced-motion (the number
   then just updates in place). */
.pag-compact .where__sweep {
  position: absolute; inset: 0; z-index: 0;
  background: var(--gov-color-primary-50);
  opacity: 0; pointer-events: none;
}
/* The counter reserves the width of its WIDEST possible value (set per-render
   in JS — `equalizeCompact`) so a single→double digit change in the current
   page ("9 / 12" → "10 / 12") never reflows the segment. Centred within that
   reserved box. The two nav buttons are equalised to the same width there too,
   so the whole control reads symmetric. */
/* inline-BLOCK (not inline-flex) so normal whitespace around <strong> in a label
   template is preserved — a flex container trims whitespace between flex items,
   which ate the spaces around the bolded page number ("4/ 12", "Stránka4z 12").
   text-align centres the content within the reserved (equalised) min-width;
   vertical centring comes from the parent `.where { align-items:center }`. */
.pag-compact .where__num { position: relative; z-index: 1; display: inline-block; text-align: center; white-space: nowrap; }

/* ── Minimal compact variant (buttons only, no counter) ───────────────────────
   Just the prev/next buttons (used at the tightest responsive widths, or set
   explicitly via the "none" compact label). With no counter to sweep, a page
   change washes a soft primary-50 stripe across the OPPOSITE button — clipped to
   that button by an inner clip layer so the button's own focus ring (box-shadow,
   which an overflow:hidden on the button would clip) stays intact. */
.pag-compact--minimal button { position: relative; }
.pag-compact--minimal button > i.bi { position: relative; z-index: 1; }
.pag-sweep-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; pointer-events: none; }
.pag-btn-sweep { position: absolute; inset: 0; background: var(--gov-color-primary-50); opacity: 0; }