/* ===== Text Slider plugin =====
   A Swiper carousel of editable text cards. All selectors scoped under
   [data-cb-type="text-slider"] so nothing leaks. Colors run through CSS
   variables so dark mode is just a variable override. */
[data-cb-type="text-slider"] {
    position: relative;
    width: 100%;
    --ts-accent: #1a1a1a;
    --ts-card-bg: #ffffff;
    --ts-card-border: #e5e7eb;
    --ts-radius: 12px;
    --ts-title: inherit;
    --ts-text: inherit;
    --ts-muted: color-mix(in srgb, currentColor 62%, transparent);
}

/* ── Dark mode (opt-in — commented out) ───────────────────────────────────
   Dark mode for a rendered block is the SITE's responsibility, not the plugin's.
   Every color above is a CSS variable, so redefine the palette below under
   whatever trigger your site uses — a class, [data-theme="dark"],
   @media (prefers-color-scheme: dark), etc. Uncomment and point the selector at
   your site's theme system.
   NOTE: `.dark` is also the ContentBuilder editor's own UI theme, so on a page
   that runs the editor, prefer a different class here.

.dark [data-cb-type="text-slider"] {
    --ts-accent: #f3f4f6;
    --ts-card-bg: #1f2937;
    --ts-card-border: #374151;
}
*/

/* The Swiper viewport. Side padding reserves gutters so the arrows sit OUTSIDE
   the cards (never over the content); bottom padding leaves room for the dots. */
[data-cb-type="text-slider"] .swiper {
    width: 100%;
    padding: 8px 40px 44px;
}

[data-cb-type="text-slider"] .swiper-slide {
    height: auto;          /* let autoHeight measure the tallest card */
    display: flex;
}

/* The editable text card. Border and Background are INDEPENDENT: the Background
   choice only sets the fill, so switching to Transparent keeps the border
   (consistent with the other card plugins, and simply more logical). Turn the
   border off entirely for plain rotating text. */
[data-cb-type="text-slider"] .text-slide {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 20px 24px;
    border: 1px solid var(--ts-card-border);
    border-radius: var(--ts-radius);
    box-sizing: border-box;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); */
}

/* Border off → plain text, no frame */
[data-cb-type="text-slider"][data-cb-border="false"] .text-slide {
    border: none;
}

[data-cb-type="text-slider"] .text-slide-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ts-title);
}

[data-cb-type="text-slider"] .text-slide-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ts-text);
}

/* The editable region shouldn't add its own box */
[data-cb-type="text-slider"] .text-slide .is-subblock {
    display: flex;
    flex-direction: column;
    gap: inherit;
    width: 100%;
}

/* ── Text alignment (data-cb-text-align) ──────────────────────────────────── */
[data-cb-type="text-slider"][data-cb-text-align="left"] .text-slide { text-align: left; align-items: flex-start; }
[data-cb-type="text-slider"][data-cb-text-align="center"] .text-slide { text-align: center; align-items: center; }
[data-cb-type="text-slider"][data-cb-text-align="right"] .text-slide { text-align: right; align-items: flex-end; }

/* ── Background = fill only (independent of the border above) ───────────────
   Transparent (default) = no fill; Solid = the fill color; Glass = the fill at
   reduced opacity + a backdrop blur (frosted). The border is unchanged by any of
   these — it's controlled by the Border toggle. */
[data-cb-type="text-slider"][data-cb-background="solid"] .text-slide {
    background: var(--ts-card-bg);
}
[data-cb-type="text-slider"][data-cb-background="glass"] .text-slide {
    background: color-mix(in srgb, var(--ts-card-bg) 55%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* ── Navigation arrows ─────────────────────────────────────────────────────
   Plain Swiper chevrons. Neutral by design: the arrow color inherits the text
   color (currentColor), NOT the accent — the accent is reserved for the pagination.
   No button styling — they just sit in the reserved side gutters so they clear the
   cards. Keeping them unstyled + neutral leaves the block unopinionated. */
[data-cb-type="text-slider"] .swiper-button-prev,
[data-cb-type="text-slider"] .swiper-button-next {
    --swiper-navigation-size: 26px;
    --swiper-navigation-color: currentColor;
    /* Center on the CARDS, not the .swiper box. The box is taller at the bottom
       (44px dot padding vs 8px top), so its center sits below the cards' center by
       (44 - 8) / 2 = 18px. This lifts the arrows back onto the cards — keep the 18px
       in sync with the .swiper vertical padding if that ever changes. */
    --swiper-navigation-top-offset: calc(50% - 18px);
}

/* ── Pagination bullets ────────────────────────────────────────────────────
   Active bullet uses --swiper-pagination-color (accent). */
[data-cb-type="text-slider"] .swiper-pagination-bullets {
    bottom: 8px;
}

/* ── Responsive ────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
    [data-cb-type="text-slider"] .text-slide {
        padding: 22px 20px;
    }
    [data-cb-type="text-slider"] .text-slide-title { font-size: 20px; }
    [data-cb-type="text-slider"] .text-slide-text { font-size: 15px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-cb-type="text-slider"] .swiper-wrapper {
        transition-duration: 0ms !important;
    }
}

/* ── No partial-slide peek ─────────────────────────────────────────────────
   The arrows sit inside .swiper's side padding, so .swiper's overflow:hidden clips
   at the padding edge and the neighbouring slide would otherwise peek into the
   gutter. Hide the slide before the active one, and every slide past the visible
   window (active + N, where N = Items Per View). Supports 1–5 items per view — the
   Items Per View setting is a 1–5 dropdown so it can't go out of range. All
   selectors are scoped to this plugin so they never touch other Swiper blocks. */
[data-cb-type="text-slider"] .swiper-slide { opacity: 1; }
[data-cb-type="text-slider"] .swiper-slide.swiper-slide-prev { opacity: 0; }
[data-cb-type="text-slider"][data-cb-slides-per-view="1"] .swiper-slide.swiper-slide-active + * { opacity: 0; }
[data-cb-type="text-slider"][data-cb-slides-per-view="2"] .swiper-slide.swiper-slide-active + * + * { opacity: 0; }
[data-cb-type="text-slider"][data-cb-slides-per-view="3"] .swiper-slide.swiper-slide-active + * + * + * { opacity: 0; }
[data-cb-type="text-slider"][data-cb-slides-per-view="4"] .swiper-slide.swiper-slide-active + * + * + * + * { opacity: 0; }
[data-cb-type="text-slider"][data-cb-slides-per-view="5"] .swiper-slide.swiper-slide-active + * + * + * + * + * { opacity: 0; }


/* ── Reclaim the padding when a control is hidden ───────────────────────────
   The .swiper padding only exists to make room for the controls: the sides for
   the arrows, the top/bottom for the dots. Drop each gutter when its control is
   off (longhands, so nav-off and pagination-off compose instead of clobbering).
   With the bottom dot-padding gone, the box is vertically symmetric again, so the
   arrows re-center at a plain 50% — this undoes the calc(50% - 18px) offset above,
   which only existed to compensate for that padding. */
[data-cb-type="text-slider"][data-cb-navigation="false"] .swiper { padding-left: 0; padding-right: 0 }
[data-cb-type="text-slider"][data-cb-pagination="false"] .swiper { padding-top: 0; padding-bottom: 0 }
[data-cb-type="text-slider"][data-cb-pagination="false"] .swiper-button-next { --swiper-navigation-top-offset: 50% }
[data-cb-type="text-slider"][data-cb-pagination="false"] .swiper-button-prev { --swiper-navigation-top-offset: 50% }