/* public/css/cs-gallery.css — "See it in action" / "When automatic isn't enough" gallery sections
   + the "So what's the catch?" honesty section between them.

   Round 11 REBUILD (owner ruling: "small-image scroll is wrong" -- supersedes round 10's static
   grid-of-small-cards entirely). Each section is now a hero-sized CAROUSEL (one example visible at
   a time, same min(92vw,1100px)/80vh letterbox as the live demo's own #cs-stage-frame) driven by
   cs-gallery.js. The wipe-viewer/side-by-side/compare-toggle VISUALS are REUSED DIRECTLY from
   cs-demo.css's own classes (.cs-wipe, .cs-wipe-frame, .cs-wipe-canvas-original/-result,
   .cs-wipe-divider, .cs-wipe-label, .cs-side-by-side, .cs-side-pane, .cs-side-canvas,
   .cs-compare-toggle, .cs-compare-btn) -- same component, not a re-implementation; those rules already carry fallback
   values on every var(--cc-*, ...) specifically so they render correctly outside .cc-root's
   subtree (see that file's own header comment) -- these carousel sections live at the top level of
   <main>, not inside .cc-root, and pick up the fallback hex values automatically. This file adds
   ONLY: the carousel shell (viewport/track/slide/frame sizing/arrows/counter), the "catch" section,
   and a couple of small img-specific supplements (object-fit/drag-prevention) that <canvas> never
   needed. Still zero engine/wasm involvement (§22) -- see cs-gallery.js's own file-header comment. */

.cs-gallery-section {
    padding: clamp(20px, 4vw, 40px);
    margin-top: 32px;
    border: 1px solid var(--site-border);
    border-radius: 22px;
    background: var(--site-panel);
}

.cs-gallery-heading {
    margin: 0 0 4px;
    font-size: clamp(22px, 3vw, 30px);
    text-align: center;
}

.cs-gallery-label-tag {
    display: block;
    margin: 0 0 18px;
    color: var(--site-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

.cs-gallery-intro {
    max-width: 640px;
    margin: 0 auto 26px;
    color: var(--site-muted);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.cs-gallery-caption {
    margin: 6px 0 0;
    color: var(--site-text);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cs-gallery-tool {
    margin: 2px 0 0;
    color: var(--site-muted);
    font-size: 12px;
    text-align: center;
}

.cs-gallery-tool strong {
    color: var(--site-text);
}

.cs-gallery-credit {
    margin: 20px 0 0;
    color: var(--site-muted);
    font-size: 11px;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------
   Carousel shell
   --------------------------------------------------------------------------------------------- */

.cs-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.cs-carousel-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.cs-carousel-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.cs-carousel-track {
    display: flex;
    transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .cs-carousel-track {
        transition: none;
    }
}

.cs-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Sized inline (width + --cs-carousel-h) by cs-gallery.js's sizeSlideFrame(), mirroring
   #cs-stage-frame.is-sized exactly (cs-demo.css) -- fixed height in Wipe mode, auto in
   Side-by-side (a mode switch may grow OR shrink the frame; the "no jump" concern that motivated
   the live demo's stricter growth-downward-only rule applies to its own primary interactive hero,
   not to supplementary gallery content). */
.cs-carousel-frame {
    width: 100%;
    margin: 0 auto;
}

.cs-carousel-frame.is-sized {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--cs-carousel-h, auto);
}

.cs-carousel-frame.is-sized.is-side-mode {
    height: auto;
}

.cs-carousel-frame.is-sized > .cs-wipe,
.cs-carousel-frame.is-sized > .cs-wipe .cs-wipe-frame {
    width: 100%;
    height: 100%;
    max-width: 100%;
    flex: 1 1 auto;
}

/* <img> supplement to the reused .cs-wipe-canvas-original/-result positioning rules (cs-demo.css)
   -- those size a <canvas> (whose bitmap is already pixel-exact) to 100%/100%; an <img> needs
   object-fit to fill that same box without distortion, plus native-drag/long-press-save prevention
   so a pointerdown on the image starts OUR wipe drag rather than the browser's own "drag this
   image" gesture (canvas has no such native behavior to begin with). `cover`, not `contain`: the
   frame's own aspect ratio is computed FROM this exact image (computeStageFrameSize, imported from
   cs-demo.js) so the two already match almost exactly -- cover guarantees a seamless fill with no
   possible 1px letterbox sliver from sub-pixel rounding. */
img.cs-wipe-canvas-original,
img.cs-wipe-canvas-result {
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.cs-carousel-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--site-border);
    background: var(--site-panel);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cs-carousel-arrow:hover:not(:disabled) {
    background: color-mix(in srgb, var(--site-text) 8%, var(--site-panel));
}

.cs-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.cs-carousel-arrow-glyph {
    display: block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.cs-carousel-arrow-prev .cs-carousel-arrow-glyph {
    border-right: 11px solid var(--site-text);
    margin-right: 2px;
}

.cs-carousel-arrow-next .cs-carousel-arrow-glyph {
    border-left: 11px solid var(--site-text);
    margin-left: 2px;
}

.cs-carousel-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cs-carousel-counter {
    color: var(--site-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Round 11 (owner live-testing 22:32): side-flanking arrows get cut off once the image takes up
   ~the full column width. SAME 700px breakpoint as the companion side-by-side-orientation fix in
   cs-demo.css (owner's own "same breakpoint you pick for the arrows" instruction) -- this file
   owns the breakpoint value, that one just matches it. Pure CSS reflow, no DOM change/JS needed:
   .cs-carousel-viewport (a flex item of .cs-carousel-stage, default source order between the two
   arrow buttons) gets flex-basis:100%, which alone forces a flex-wrap line break regardless of
   the arrows' own widths; `order` then puts BOTH arrows on the wrapped-to line below the image,
   side by side, directly above .cs-carousel-controls (counter/toggle) -- "a row below the image,
   next to the position indicator" (the picked option: conventional, and the row sits immediately
   above the counter either way). Desktop (>700px) is untouched -- arrows keep flanking the image
   there since they fit without overlaying/cropping at the hero-frame's own width cap
   (min(92vw,1100px) always leaves room outside it above 700px). Touch targets stay 44px either
   way (.cs-carousel-arrow, unchanged). */
@media (max-width: 700px) {
    .cs-carousel-stage {
        flex-wrap: wrap;
        justify-content: center;
    }

    .cs-carousel-viewport {
        flex-basis: 100%;
    }

    .cs-carousel-arrow-prev {
        order: 2;
    }

    .cs-carousel-arrow-next {
        order: 3;
    }
}

/* ---------------------------------------------------------------------------------------------
   "So what's the catch?" honesty section (marketing plan §5 Step 4) -- copy-led, sits between the
   automatic carousel and the correction carousel below.
   --------------------------------------------------------------------------------------------- */

.cs-catch-section {
    max-width: 680px;
    margin: 32px auto 0;
    text-align: center;
}

.cs-catch-heading {
    margin: 0 0 8px;
    font-size: clamp(22px, 3vw, 28px);
}

.cs-catch-lead {
    margin: 0 0 10px;
    color: var(--site-text);
    font-size: 16px;
    font-weight: 600;
}

.cs-catch-copy {
    margin: 0;
    color: var(--site-muted);
    font-size: 14px;
    line-height: 1.6;
}