.ars-cta,
.ars-cta * { box-sizing: border-box; }

.ars-cta {
    width: 100%;
    max-width: var(--arscta-max-width);
    margin-inline: auto;
    color: var(--arscta-title);
    font-family: inherit;
}

.ars-cta__surface {
    position: relative;
    display: flex;
    min-height: var(--arscta-min-height);
    align-items: stretch;
    overflow: hidden;
    border: var(--arscta-border-width) solid var(--arscta-border);
    border-radius: var(--arscta-radius);
    background-color: var(--arscta-bg-1);
    background-image: var(--arscta-image), linear-gradient(var(--arscta-gradient-angle), var(--arscta-bg-1), var(--arscta-bg-2));
    background-repeat: no-repeat;
    background-position: var(--arscta-image-position), center;
    background-size: var(--arscta-image-size), cover;
    isolation: isolate;
}

.ars-cta.shadow-none .ars-cta__surface { box-shadow: none; }
.ars-cta.shadow-soft .ars-cta__surface { box-shadow: 0 12px 30px rgba(28, 21, 45, .10); }
.ars-cta.shadow-medium .ars-cta__surface { box-shadow: 0 20px 45px rgba(28, 21, 45, .16); }
.ars-cta.shadow-strong .ars-cta__surface { box-shadow: 0 28px 60px rgba(28, 21, 45, .25); }

.ars-cta__overlay {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--arscta-overlay);
    opacity: var(--arscta-overlay-opacity);
    pointer-events: none;
}

.ars-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    align-items: center;
    padding: var(--arscta-pad-y) var(--arscta-pad-x);
}

.ars-cta--content-start .ars-cta__inner { justify-content: flex-start; }
.ars-cta--content-center .ars-cta__inner { justify-content: center; }
.ars-cta--content-end .ars-cta__inner { justify-content: flex-end; }

.ars-cta__content {
    width: min(100%, var(--arscta-content-max));
    text-align: right;
}

.ars-cta--align-center .ars-cta__content { text-align: center; }
.ars-cta--align-left .ars-cta__content { text-align: left; }

.ars-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--arscta-eyebrow);
    font-size: var(--arscta-eyebrow-size);
    font-weight: 800;
    line-height: 1.5;
}

.ars-cta__eyebrow > span {
    width: 24px;
    height: 4px;
    border-radius: 99px;
    background: currentColor;
    transform: skewX(-18deg);
}

.ars-cta--align-center .ars-cta__eyebrow { justify-content: center; }
.ars-cta--align-left .ars-cta__eyebrow { flex-direction: row-reverse; }

.ars-cta__title {
    margin: 0;
    color: var(--arscta-title);
    font-size: var(--arscta-title-size);
    font-weight: 850;
    line-height: 1.28;
    letter-spacing: -.02em;
}

.ars-cta__description {
    margin-top: 13px;
    color: var(--arscta-description);
    font-size: var(--arscta-description-size);
    line-height: 1.9;
}

.ars-cta__description > :first-child { margin-top: 0; }
.ars-cta__description > :last-child { margin-bottom: 0; }
.ars-cta__description a { color: inherit; text-decoration: underline; }

.ars-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--arscta-button-gap);
    margin-top: 24px;
}

.ars-cta--buttons-start .ars-cta__buttons { justify-content: flex-start; }
.ars-cta--buttons-center .ars-cta__buttons { justify-content: center; }
.ars-cta--buttons-end .ars-cta__buttons { justify-content: flex-end; }

.ars-cta__button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: var(--arscta-button-pad-y) var(--arscta-button-pad-x);
    border: 1px solid var(--arscta-btn-border);
    border-radius: var(--arscta-button-radius);
    color: var(--arscta-btn-text);
    background: var(--arscta-btn-bg);
    box-shadow: none;
    font-size: var(--arscta-button-size);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ars-cta__button--outline { background: transparent; }
.ars-cta__button--ghost { border-color: transparent; background: transparent; }
.ars-cta__button--secondary { filter: saturate(.85); }
.ars-cta__button-icon { display: inline-flex; width: 19px; height: 19px; flex: 0 0 19px; }
.ars-cta__button-icon svg { display: block; width: 100%; height: 100%; }

.ars-cta.has-hover .ars-cta__button:hover,
.ars-cta.has-hover .ars-cta__button:focus-visible {
    color: var(--arscta-btn-hover-text);
    background: var(--arscta-btn-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(0,0,0,.16);
}

.ars-cta__decor {
    position: absolute;
    z-index: 0;
    display: block;
    border-radius: 50%;
    border: 1px solid var(--arscta-accent);
    opacity: .25;
    pointer-events: none;
}

.ars-cta__decor--one {
    top: -70px;
    left: -55px;
    width: 190px;
    height: 190px;
    box-shadow: inset 0 0 0 36px rgba(255, 255, 255, .05);
}

.ars-cta__decor--two {
    right: -45px;
    bottom: -55px;
    width: 135px;
    height: 135px;
    background: var(--arscta-accent);
    opacity: .12;
}

.ars-cta__accent {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: var(--arscta-accent);
    pointer-events: none;
}

/* Dark banner inspired by the reference site. */
.ars-cta--dark-banner .ars-cta__surface {
    background-image: var(--arscta-image), linear-gradient(90deg, var(--arscta-bg-1), var(--arscta-bg-2));
}

/* Gradient layout. */
.ars-cta--gradient .ars-cta__surface {
    background-image: var(--arscta-image), linear-gradient(var(--arscta-gradient-angle), var(--arscta-bg-1), var(--arscta-bg-2));
}
.ars-cta--gradient .ars-cta__overlay { opacity: var(--arscta-overlay-opacity); }

/* Outlined layout. */
.ars-cta--outlined .ars-cta__surface {
    background-image: var(--arscta-image);
    background-position: var(--arscta-image-position);
    background-size: var(--arscta-image-size);
    background-color: var(--arscta-bg-1);
}
.ars-cta--outlined .ars-cta__overlay { opacity: var(--arscta-overlay-opacity); }
.ars-cta--outlined .ars-cta__accent { width: 5px; }

/* Floating card layout. */
.ars-cta--floating-card { padding: 18px; }
.ars-cta--floating-card .ars-cta__surface {
    background-image: linear-gradient(var(--arscta-gradient-angle), var(--arscta-bg-1), var(--arscta-bg-2));
}
.ars-cta--floating-card .ars-cta__inner {
    margin: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: max(8px, calc(var(--arscta-radius) - 8px));
    background: rgba(0, 0, 0, .16);
    backdrop-filter: blur(8px);
}

/* Split image layout. */
.ars-cta--split-image .ars-cta__surface {
    display: grid;
    grid-template-columns: minmax(0, calc(100% - var(--arscta-image-width))) minmax(0, var(--arscta-image-width));
    background-image: linear-gradient(var(--arscta-gradient-angle), var(--arscta-bg-1), var(--arscta-bg-2));
}

.ars-cta--split-image.ars-cta--image-right .ars-cta__media { order: -1; }
.ars-cta--split-image.ars-cta--image-right .ars-cta__inner { order: 2; }
.ars-cta--split-image.ars-cta--image-left .ars-cta__inner { order: 1; }
.ars-cta--split-image.ars-cta--image-left .ars-cta__media { order: 2; }

.ars-cta__media {
    min-height: var(--arscta-min-height);
    background-image: var(--arscta-image);
    background-repeat: no-repeat;
    background-position: var(--arscta-image-position);
    background-size: var(--arscta-image-size);
}

.ars-cta--split-image .ars-cta__overlay { grid-column: 1 / -1; }
.ars-cta--split-image .ars-cta__decor,
.ars-cta--split-image .ars-cta__accent { grid-column: 1 / -1; }

@media (max-width: 782px) {
    .ars-cta__inner { padding: var(--arscta-pad-y-mobile) var(--arscta-pad-x-mobile); }
    .ars-cta__title { font-size: var(--arscta-title-size-mobile); }
    .ars-cta__description { font-size: var(--arscta-description-size-mobile); }
    .ars-cta__eyebrow { font-size: var(--arscta-eyebrow-size-mobile); }
    .ars-cta__button { font-size: var(--arscta-button-size-mobile); }

    .ars-cta--split-image .ars-cta__surface {
        display: flex;
        flex-direction: column;
    }
    .ars-cta--split-image .ars-cta__media {
        width: 100%;
        min-height: 210px;
        order: 1 !important;
    }
    .ars-cta--split-image .ars-cta__inner { order: 2 !important; }
    .ars-cta--split-image.hide-image-mobile .ars-cta__media { display: none; }

    .ars-cta.buttons-full-mobile .ars-cta__buttons { flex-direction: column; }
    .ars-cta.buttons-full-mobile .ars-cta__button { width: 100%; }
    .ars-cta__decor--one { width: 130px; height: 130px; }
    .ars-cta__decor--two { width: 100px; height: 100px; }
    .ars-cta--floating-card { padding: 8px; }
    .ars-cta--floating-card .ars-cta__inner { margin: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .ars-cta__button { transition: none; }
    .ars-cta.has-hover .ars-cta__button:hover,
    .ars-cta.has-hover .ars-cta__button:focus-visible { transform: none; }
}
