/* Call to action — i2t3 component styles
 * Content + 1-2 buttons. Layout: inline / centered / split.
 * Style: plain / bordered / featured. Background colour, width (band/full) and
 * parallax come from the global i2t3 layout system — not re-implemented here.
 */

.i2t3-cta__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.i2t3-cta__headline {
    margin: 0 0 .5rem;
}

.i2t3-cta__text > :last-child {
    margin-bottom: 0;
}

.i2t3-cta__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Layout: inline — text left, buttons pushed right */
.i2t3-cta--inline .i2t3-cta__body {
    flex: 1 1 60%;
}
.i2t3-cta--inline .i2t3-cta__actions {
    margin-left: auto;
}

/* Layout: centered — stacked and centred */
.i2t3-cta--centered .i2t3-cta__inner {
    flex-direction: column;
    text-align: center;
}
.i2t3-cta--centered .i2t3-cta__actions {
    justify-content: center;
}

/* Layout: split — body ~2/3, actions ~1/3 right-aligned */
.i2t3-cta--split .i2t3-cta__body {
    flex: 1 1 62%;
}
.i2t3-cta--split .i2t3-cta__actions {
    flex: 1 1 30%;
    justify-content: flex-end;
}

/* Style variants */
.i2t3-cta--bordered .i2t3-cta__inner,
.i2t3-cta--featured .i2t3-cta__inner,
.i2t3-cta--color-featured .i2t3-cta__inner,
.i2t3-cta--with-arrow .i2t3-cta__inner,
.i2t3-cta--footer .i2t3-cta__inner {
    padding: 1.5rem 2rem;
    border-radius: .5rem;
}
.i2t3-cta--bordered .i2t3-cta__inner {
    border: 1px solid var(--i2t3-border-color, #dee2e6);
}

/* featured = soft accent tint + top accent border (Karma "outlines-featured") */
.i2t3-cta--featured .i2t3-cta__inner {
    background: var(--i2t3-cta-featured-bg, rgba(13, 110, 253, .06));
    border-top: 3px solid var(--i2t3-cta-accent, #0d6efd);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .06);
}

/* color-featured = solid accent background + inverted (white) text (Karma "color-featured") */
.i2t3-cta--color-featured .i2t3-cta__inner {
    background: var(--i2t3-cta-accent, #0d6efd);
    box-shadow: 0 .5rem 1.5rem rgba(var(--i2t3-cta-accent-rgb, 13, 110, 253), .25);
}
.i2t3-cta--color-featured .i2t3-cta__headline,
.i2t3-cta--color-featured .i2t3-cta__text,
.i2t3-cta--color-featured .i2t3-cta__text :where(h1, h2, h3, h4, h5, h6, p, a) {
    color: #fff;
}

/* with-arrow = bordered band, button trailed by a curved up-left arrow (Karma "with-arrow") */
.i2t3-cta--with-arrow .i2t3-cta__inner {
    border: 1px solid var(--i2t3-border-color, #dee2e6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

/* footer = footer-style band: triangle tab on top, pulled into the footer below */
.i2t3-cta--footer .i2t3-cta__inner {
    position: relative;
    padding: 3rem 2rem;
    margin-bottom: -3rem;
    background: var(--i2t3-cta-featured-bg, rgba(13, 110, 253, .06));
    text-align: center;
}
.i2t3-cta--footer .i2t3-cta__inner::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--i2t3-cta-accent, #0d6efd);
}
.i2t3-cta--footer .i2t3-cta__inner {
    flex-direction: column;
}
.i2t3-cta--footer .i2t3-cta__actions {
    justify-content: center;
    margin-left: 0;
}

/* Arrow glyph next to the primary button (with-arrow / footer) */
.i2t3-cta__action-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.i2t3-cta__arrow {
    width: 2rem;
    height: 2rem;
    margin-left: .25rem;
    background-color: currentColor;
    color: var(--i2t3-cta-accent, #0d6efd);
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 18 L16 6 M9 6 L16 6 L16 13'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 18 L16 6 M9 6 L16 6 L16 13'/%3E%3C/svg%3E");
}
@media (max-width: 767.98px) {
    .i2t3-cta__arrow {
        display: none;
    }
}

/* Sharp (square) corners (Karma enableSharpBorder) */
.i2t3-cta--sharp .i2t3-cta__inner {
    border-radius: 0;
}
.i2t3-cta--sharp .btn {
    border-radius: 0;
}

@media (max-width: 575.98px) {
    .i2t3-cta__actions {
        width: 100%;
    }
    .i2t3-cta--inline .i2t3-cta__actions,
    .i2t3-cta--split .i2t3-cta__actions {
        margin-left: 0;
        justify-content: flex-start;
    }
}