/* NOTE: CTA BAND (inc/new/sections/cta-band.php) */

.kmd-cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 24px;
}

.kmd-cta-band__content {
    display: flex;
    flex: 1 1 360px;
    flex-direction: column;
    gap: 4px;
}

.kmd-cta-band__title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.kmd-cta-band__text {
    font-size: 15px;
}

.kmd-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kmd-cta-band--dark {
    border: 1px solid var(--kmd-dark-line);
    background: var(--kmd-black);
    color: var(--kmd-white);
}

.kmd-cta-band--dark .kmd-cta-band__text {
    color: var(--kmd-dark-text);
}

.kmd-cta-band--accent {
    border: 2px solid var(--kmd-accent);
    background: var(--kmd-white);
    color: var(--kmd-ink);
}

.kmd-cta-band--accent .kmd-cta-band__text {
    color: var(--kmd-soft);
}

@media screen and (max-width: 479px) {
    .kmd-cta-band {
        padding: 20px 16px;
    }

    .kmd-cta-band__actions,
    .kmd-cta-band__actions .kmd-btn {
        width: 100%;
    }
}

/* NOTE: FULL WIDTH SECTION ('section' prop): the section gives the background, the band only the layout */

.kmd-cta-band-section {
    padding-block: 44px;
}

.kmd-cta-band--plain {
    padding: 0;
}

.kmd-cta-band--plain .kmd-cta-band__title {
    font-size: 24px;
}

.kmd-cta-band--plain .kmd-cta-band__text {
    font-size: 16px;
}

.kmd-section--dark .kmd-cta-band--plain .kmd-cta-band__text,
.kmd-section--ink .kmd-cta-band--plain .kmd-cta-band__text {
    color: #C7C7CC;
}

@media screen and (max-width: 479px) {
    .kmd-cta-band--plain {
        padding: 0;
    }
}