/**
 * CM What We Do Carousel - the layout and the looks. Every colour and space is a --cm-wwc-* variable: defaults from config.php
 * (build_global_css_properties), a site's own values from its site-specific.css. Sizes are the cm-fse classes. Two-selector rule.
 * The cards are one flex row inside a scrolling viewport: each card is 1/N of the row, N = --cm-wwc-visible (centralized.js: the whole cards
 * that fit at the width "--cm-wwc-across on a 1920 display" gives; before the script runs N is 1, or --cm-wwc-across from the wide tier, so
 * the first paint is close). More cards than fit: the editor canvas and a reduced-motion visitor scroll the row by hand; the page runs the
 * carousel (the script scrolls the viewport one card at a time, endlessly leftward over inert copies of the first cards; scroll-snap keeps whole
 * cards in view) and adds a small centred Pause / Play text link under the row.
 * The block is a container (cm-cqi-container): its own width drives the two tiers below (808px = the block's width on an 851px page, the zu tier).
 */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel,
.wp-block-w4ya-cm-whatwedo-carousel {
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    background: var(--cm-wwc-bg);
    color: var(--cm-wwc-text);
    padding: var(--cm-wwc-section-pad) 0;
    letter-spacing: normal; /* the z width classes set a tracking (.zt90 letter-spacing) the cards must not inherit */
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel *,
.wp-block-w4ya-cm-whatwedo-carousel * { box-sizing: border-box; }

/* The header row: words left, the call to action right; the call to action drops under the tagline on phones */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__head,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cm-wwc-gap);
    margin-bottom: var(--cm-wwc-gap);
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__head > *,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__head > * { margin: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__kicker,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__kicker {
    margin: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cm-wwc-accent);
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__title,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__title { margin: 0.2em 0 0; color: var(--cm-wwc-text); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__tagline,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__tagline { margin: 0.5em 0 0; max-width: 40em; line-height: 1.5; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__cta,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__cta { color: var(--cm-wwc-accent); font-weight: 600; white-space: nowrap; text-decoration: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__cta--link,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__cta--link { border-bottom: 2px solid var(--cm-wwc-accent); padding-bottom: 2px; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__cta--button,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__cta--button {
    display: inline-flex;
    align-items: center;
    padding: 0.75em 1.4em;
    border-radius: var(--cm-wwc-radius-sm);
    background: var(--cm-wwc-accent);
    color: var(--cm-wwc-button-text);
    border: 2px solid var(--cm-wwc-accent);
}

/* The viewport scrolls the row (whole cards, snapped); its small padding leaves room for the focus ring and the hover lift */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--cm-wwc-ring);
    margin: calc(var(--cm-wwc-ring) * -1);
    scroll-snap-type: x mandatory;
    scroll-padding: var(--cm-wwc-ring);
    scrollbar-width: thin;
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport--carousel,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport--carousel { scrollbar-width: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport--carousel::-webkit-scrollbar,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport--carousel::-webkit-scrollbar { display: none; }

/* The row: every card 1/N of the width, equal heights; auto margins on the end cards centre a short row and collapse to zero when
   the row overflows (justify-content: center would spill the overflow to both sides and hide the first card).
   --cm-wwc-visible is derived, not a value: one card before the script sizes the row (the wide tier below starts from --cm-wwc-across). */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__grid,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__grid {
    --cm-wwc-visible: 1;
    display: flex;
    align-items: stretch;
    gap: var(--cm-wwc-gap);
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card:first-child,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card:first-child { margin-left: auto; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card:last-child,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card:last-child { margin-right: auto; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - (var(--cm-wwc-visible) - 1) * var(--cm-wwc-gap)) / var(--cm-wwc-visible));
    min-width: 0;
    scroll-snap-align: start;
    background: var(--cm-wwc-card-bg);
    border: 1px solid var(--cm-wwc-border);
    border-radius: var(--cm-wwc-radius);
    overflow: hidden; /* the heading band's top corners follow the card's */
    color: var(--cm-wwc-text);
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s;
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card > *,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card > * { margin: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card--linked:hover,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card--linked:hover { border-color: var(--cm-wwc-accent); transform: translateY(calc(var(--cm-wwc-lift) * -1)); }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card--linked:focus-visible,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card--linked:focus-visible { outline: 3px solid var(--cm-wwc-accent); outline-offset: 1px; } /* 4px: inside --cm-wwc-ring with the lift */

/* The heading band across the top of the card; a card's own colours come inline from its settings */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__heading,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__heading {
    padding: var(--cm-wwc-band-pad) var(--cm-wwc-card-pad);
    background: var(--cm-wwc-band-bg);
    color: var(--cm-wwc-band-text);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__body,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__body { display: flex; flex: 1; flex-direction: column; gap: 0.7em; padding: var(--cm-wwc-card-pad); }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__body > *,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__body > * { margin: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__text,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__text { line-height: 1.45; } /* the rule follows the text; the link label alone sits at the foot */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__bullets,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__bullets { list-style: none; padding: 0.6em 0 0; border-top: 1px solid var(--cm-wwc-rule); }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__bullet,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__bullet { position: relative; padding: 0.2em 0 0.2em 1.2em; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__bullet::before,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__bullet::before {
    content: "";
    position: absolute;
    left: 0.15em;
    top: 0.75em;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: var(--cm-wwc-dot);
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__go,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__go { margin-top: auto; padding-top: 0.4em; font-weight: 600; color: var(--cm-wwc-accent); }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__go span,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__go span { white-space: nowrap; }

/* The carousel's "Pause carousel" / "Play carousel" link (a button added by centralized.js on the page while the carousel runs), small and centred under the row */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__pause,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__pause {
    display: block;
    margin: 0.6em auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cm-wwc-accent);
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__pause:focus-visible,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__pause:focus-visible { outline: 3px solid var(--cm-wwc-accent); outline-offset: 1px; }

/* The canvas placeholders: no card yet, or fewer than three (the page prints nothing there) */
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__placeholder,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__placeholder { border: 1px dashed var(--cm-wwc-border); border-radius: var(--cm-wwc-radius); padding: var(--cm-wwc-card-pad); opacity: 0.7; text-align: center; }
.editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport + .cm-wwc__placeholder,
.wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__viewport + .cm-wwc__placeholder { margin-top: var(--cm-wwc-gap); }

/* The wide tier, by the block's own width (808px = 95% of the 851px zu page tier): the header row turns horizontal, the section pads more,
   and the first paint starts from the cards-across choice */
@container (min-width: 808px) {
    .editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__head,
    .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel,
    .wp-block-w4ya-cm-whatwedo-carousel { padding: var(--cm-wwc-section-pad-wide) 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__grid,
    .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__grid { --cm-wwc-visible: var(--cm-wwc-across); }
}

@media (prefers-reduced-motion: reduce) {
    .editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card,
    .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card,
    .editor-styles-wrapper .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card--linked:hover,
    .wp-block-w4ya-cm-whatwedo-carousel .cm-wwc__card--linked:hover { transition: none; transform: none; }
}