/*
 * Warm Refresh — patterns.css
 * Interaction patterns shared across pages: accordion (native <details>),
 * tabs, carousel/gallery, and the partner marquee. Every value below is a
 * token from tokens.css — no raw hex/px colours or shadows.
 *
 * CSS only. JS controllers for tabs/carousel live in
 * src/assets/js/components/{tabs,carousel}.js and are wired in per-page
 * (not globally) by the tasks that use them.
 */

/* ==========================================================================
   Accordion (native <details>/<summary> — used by /faq)
   ========================================================================== */

details {
  border-bottom: 1px solid var(--line);
  padding: var(--space-4) 0;
}

summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink-strong);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

summary::-webkit-details-marker {
  display: none;
}

summary:hover {
  color: var(--accent);
}

summary .chevron {
  color: var(--ink-muted);
  transition: transform var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
  flex: none;
}

details[open] summary .chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

details[open] > :not(summary) {
  color: var(--ink-soft);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs__list {
  display: inline-flex;
  background: var(--bg-surface-alt);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}

.tabs__tab {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  background: transparent;
  border: none;
  font: 600 14px/1.2 var(--font-sans);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.tabs__tab:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.tabs__tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}

.tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.tabs__panel {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.tabs__panel[hidden] {
  display: none;
}

/* ==========================================================================
   Carousel / gallery
   ========================================================================== */

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-3);
  /* Swipe/trackpad/keyboard scrolling all still work - this only hides the
     browser's own scrollbar chrome, which is redundant here (the prev/next
     buttons and dots below are the intended navigation) and reads as a
     stray native UI element sitting under an otherwise custom-styled
     carousel. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery img {
  scroll-snap-align: center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  cursor: zoom-in;
}

.gallery__nav {
  background: var(--bg-surface);
  color: var(--ink-strong);
  box-shadow: var(--shadow-sm);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.gallery__nav:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.gallery__nav:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.gallery__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.gallery__dot.is-active,
.gallery__dot[aria-current="true"] {
  background: var(--accent);
}

/* ==========================================================================
   Gallery lightbox (click a screenshot to zoom)
   Built as a native <dialog> by carousel.js — this supplies its appearance
   only. showModal() gives focus containment, Escape-to-close and a
   ::backdrop for free; carousel.js adds the click-outside-to-close and
   prev/next handling.
   ========================================================================== */

.lightbox {
  border: none;
  padding: 0;
  max-width: 92vw;
  max-height: 92vh;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(1, 22, 39, .85);
}

.lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius-md);
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  border: none;
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--ink-strong);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lightbox__close {
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
}

.lightbox__nav--prev {
  left: var(--space-4);
}

.lightbox__nav--next {
  right: var(--space-4);
}

/* ==========================================================================
   Partner marquee
   Note: the track's HTML must render the logo list 4 times back to back
   (not 2) — with only a handful of real partner logos, 2 copies are often
   narrow enough that an ultrawide viewport shows the whole track at once,
   making the repeat visible as an obvious "seam" rather than a continuous
   flow. 4 copies quadruples the distance before a repeat can appear in one
   view. The @keyframes end value below (-25%) is tied to that count: for N
   back-to-back copies the loop point is -100%/N, since that's where the
   pattern starts repeating itself. This file supplies styles only — the
   homepage task owns the markup and must implement the duplication.
   ========================================================================== */

.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}

.marquee__track img {
  filter: grayscale(1);
  opacity: .6;
  transition: filter var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.marquee__track img:hover {
  filter: none;
  opacity: 1;
}

/* prefers-reduced-motion: reset.css's global reduced-motion block forces
   animation-duration to 0.01ms for all elements (not just transitions),
   so .marquee__track's animation is already covered there — no
   marquee-specific override needed here. */