/* Content rotater — i2t3 component styles
 * Three layouts (rotator_layout): default (row of angled snippets),
 * textwithimage (image beside heading/text), collapsedtext (angled snippets
 * overlaid on an image). Pure CSS; transform set inline per snippet.
 */

.i2t3-contentrotater__item {
    display: inline-block;
    margin: 0;
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    transform-origin: center;
}

/* textwithimage */
.i2t3-contentrotater__img { width: 100%; height: auto; display: block; }
.i2t3-contentrotater--rounded .i2t3-contentrotater__img { border-radius: .75rem; }
.i2t3-contentrotater__heading { margin-bottom: .75rem; }
.i2t3-contentrotater__text > :last-child { margin-bottom: 0; }

/* textwithimage — rotated text column (Karma: rotate-sm-l-90 base + degree).
 * The slanted effect only applies from the sm breakpoint up; on mobile the
 * column stays upright and readable. Total angle = -90deg + degree. */
.i2t3-contentrotater__rotated { transform-origin: center; }
@media (min-width: 576px) {
    .i2t3-contentrotater--textwithimage .i2t3-contentrotater__rotated {
        transform: rotate(calc(-90deg + var(--i2t3-contentrotater-degree, 0deg)));
    }
}

/* collapsedtext (badges over image) */
.i2t3-contentrotater__stage { position: relative; display: inline-block; max-width: 100%; }
.i2t3-contentrotater__badge {
    position: absolute;
    display: inline-block;
    padding: .35rem .75rem;
    background: var(--i2t3-surface, #fff);
    border-radius: .35rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
    font-size: clamp(.9rem, 2vw, 1.4rem);
    white-space: nowrap;
}
/* --free: position comes entirely from the inline top/left/right values the
 * editor entered per snippet (free positioning, Karma parity). */

/* --auto: no manual coordinates — distribute snippets cyclically so they never
 * stack/overlap, regardless of how many items there are (fixes the >4 bug). */
.i2t3-contentrotater__badge--auto:nth-of-type(8n+1) { top: 8%;  left: 5%; }
.i2t3-contentrotater__badge--auto:nth-of-type(8n+2) { bottom: 10%; right: 6%; }
.i2t3-contentrotater__badge--auto:nth-of-type(8n+3) { top: 12%; right: 8%; }
.i2t3-contentrotater__badge--auto:nth-of-type(8n+4) { bottom: 14%; left: 8%; }
.i2t3-contentrotater__badge--auto:nth-of-type(8n+5) { top: 40%; left: 10%; }
.i2t3-contentrotater__badge--auto:nth-of-type(8n+6) { top: 45%; right: 12%; }
.i2t3-contentrotater__badge--auto:nth-of-type(8n+7) { top: 70%; left: 35%; }
.i2t3-contentrotater__badge--auto:nth-of-type(8n+8) { top: 25%; left: 40%; }