/* Capability gallery (chapter 04): theme tabs, a snap track, arrow controls.
   Proof-card styles live in gallery-proofs.css. */
.workflow-gallery { margin: 0 auto var(--gap-chapter); overflow: clip; scroll-margin-top: 82px; }
.gallery-heading { text-align: center; padding: 0 24px; max-width: 900px; margin: auto; }
.gallery-heading .chapter-mark { justify-content: center; }
.gallery-heading h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.12; }
.gallery-heading p { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 24px auto 0; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto 20px; }
.gallery-controls[hidden] { display: none; }
.gallery-controls button { width: 46px; height: 46px; border: 1px solid var(--border-2); background: var(--panel); color: var(--ink); border-radius: 50%; font-size: 20px; cursor: pointer; transition: background .2s, transform .2s; }
.gallery-controls button:hover { background: var(--sunk); transform: translateY(-2px); }
.gallery-controls button:disabled { opacity: .35; cursor: default; transform: none; }
.gallery-count { font: 11px var(--font-mono); color: var(--muted); min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
.gallery-track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px max(24px, calc((100vw - 540px) / 2)) 24px; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible, .gallery-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gallery-slide { flex: 0 0 540px; width: 540px; scroll-snap-align: center; min-width: 0; transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); opacity: .55; transform: scale(.9); transform-origin: center 42%; }
.gallery-slide.is-current { opacity: 1; transform: scale(1); }
.gallery-art { position: relative; display: grid; place-items: center; min-height: 460px; padding: 28px; overflow: hidden; isolation: isolate; background: var(--sunk); border-radius: 18px; border: 1px solid var(--border); }
.gallery-art::before { content: ''; position: absolute; inset: -18%; z-index: -1; background: radial-gradient(ellipse at 25% 20%, var(--wash-from), transparent 60%), radial-gradient(ellipse at 75% 75%, color-mix(in srgb, var(--muted) 24%, transparent), transparent 65%), linear-gradient(145deg, var(--wash-to), var(--body)); }
.gallery-art--security::before { background: radial-gradient(ellipse at 20% 15%, var(--accent-soft), transparent 55%), radial-gradient(ellipse at 80% 85%, var(--wash-from), transparent 60%), linear-gradient(160deg, var(--wash-to), var(--body)); }
.gallery-art--governance::before { background: radial-gradient(ellipse at 75% 20%, var(--wash-from), transparent 65%), radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--faint) 20%, transparent), transparent 60%), linear-gradient(30deg, var(--body), var(--wash-to)); }
.gallery-art--workflow::before { background: radial-gradient(ellipse at 25% 75%, var(--wash-from), transparent 60%), linear-gradient(125deg, var(--wash-to), var(--sunk)); }
.gallery-art--ai::before { background: radial-gradient(ellipse at 50% 10%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 60%), radial-gradient(ellipse at 20% 90%, var(--wash-from), transparent 60%), linear-gradient(200deg, var(--wash-to), var(--body)); }
.gallery-art--reporting::before { background: radial-gradient(ellipse at 85% 30%, var(--wash-from), transparent 60%), radial-gradient(ellipse at 15% 80%, var(--accent-soft), transparent 55%), linear-gradient(90deg, var(--sunk), var(--wash-to)); }
.gallery-tabs { position: relative; display: flex; justify-content: center; gap: 6px; margin: 36px auto 20px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.gallery-tabs::-webkit-scrollbar { display: none; }
.gallery-tabs button { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-2); background: transparent; color: var(--muted); font: 500 13px var(--font-sans, inherit); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gallery-tabs button:hover { color: var(--ink); }
.gallery-tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gallery-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-caption { padding-top: 26px; }
.gallery-caption .eyebrow { display: block; margin-bottom: 12px; }
.gallery-caption h3 { font-size: 27px; line-height: 1.18; }
.gallery-caption p { font-size: 15px; color: var(--muted); max-width: 46ch; line-height: 1.7; margin: 14px 0 0; }
.gallery-active .gallery-art::before { animation: gallery-wash 3.5s ease-out both; }
.gallery-active .gallery-proof { animation: proof-arrive .9s cubic-bezier(.22,1,.36,1) both; }
.gallery-active .proof-new, .gallery-active .proof-check { animation: proof-highlight 1.5s .7s ease both; }
@keyframes gallery-wash { from { transform: scale(1.05) translate(-2%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes proof-arrive { from { opacity: .5; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes proof-highlight { from { opacity: .3; } to { opacity: 1; } }
@media (max-width: 760px) { .gallery-tabs { justify-content: flex-start; margin-top: 32px; } .gallery-track { padding: 10px 24px 20px; gap: 16px; } .gallery-slide { width: calc(100vw - 48px); flex-basis: calc(100vw - 48px); } .gallery-art { padding: 18px; min-height: 400px; } .gallery-caption h3 { font-size: 24px; } .gallery-heading p { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .gallery-slide, .gallery-controls button { transition: none; } .gallery-active * { animation: none !important; } }

.gallery-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; opacity: .4; mask-image: linear-gradient(135deg, black, transparent 70%); }
.gallery-slide.is-current .gallery-art { border-color: var(--border-2); }