/*
 * Call Out widget.
 *
 * Everything here is a starting point the Style tab can override: the wrapper's
 * own padding and background, the media's size, and the two buttons. Without it
 * the widget renders as bare text, which is why the defaults are stated rather
 * than left to the theme.
 */
.ekl-callout-wrapper {
    @apply bg-ekl-neutral-50 rounded-[10px] px-[30px] py-[40px];
}

/* The media sits on its own line above the title, wherever the text is aligned. */
.ekl-callout-media {
    @apply mb-[20px] leading-none;
}

.ekl-callout-icon {
    @apply inline-flex items-center justify-center leading-none;

    i {
        @apply block text-[48px] leading-none text-ekl-brand;
    }

    svg {
        @apply block h-[48px] w-[48px] fill-ekl-brand;
    }
}

.ekl-callout-image {
    @apply inline-block;

    img {
        @apply block h-auto max-w-full;
    }
}

.ekl-callout-title {
    @apply m-0 mb-[12px] text-[32px] font-bold leading-[1.3] text-ekl-secondary;
}

.ekl-callout-description {
    @apply m-0 mb-[25px] text-[16px] leading-[1.7] text-ekl-neutral-700;
}

.ekl-callout-buttons {
    @apply flex flex-wrap items-center gap-[15px];
}

.ekl-callout-btn,
.ekl-callout-btn-secondary {
    @apply inline-flex items-center justify-center gap-[8px] rounded-[6px] px-[28px] py-[14px] text-[16px] font-semibold leading-none transition-all duration-300 ease-in-out;

    i,
    svg {
        @apply block;
    }

    svg {
        @apply h-[1em] w-[1em] fill-current;
    }
}

.ekl-callout-btn {
    @apply bg-ekl-hover text-white hover:bg-[#a82a55] hover:text-white;
}

/* The second button is the quieter of the two, so it is outlined, not filled. */
.ekl-callout-btn-secondary {
    @apply border border-solid border-ekl-hover bg-transparent text-ekl-hover hover:bg-ekl-hover hover:text-white;
}

/* Style presets (see card.css for how they are written). */
.ek-call-out:where([class*="ekl-preset-"]) {
    .ekl-callout-wrapper {
        background: var(--ekl-ps-bg);
        border: var(--ekl-ps-border);
        border-radius: var(--ekl-ps-radius);
        box-shadow: var(--ekl-ps-shadow);
    }

    .ekl-callout-title {
        color: var(--ekl-ps-fg);
    }

    .ekl-callout-description {
        color: var(--ekl-ps-muted);
    }

    .ekl-callout-icon {
        color: var(--ekl-ps-accent);

        i {
            color: var(--ekl-ps-accent);
        }

        svg {
            fill: var(--ekl-ps-accent);
        }
    }

    .ekl-callout-btn,
    .ekl-callout-btn:visited {
        background-color: var(--ekl-ps-accent);
        color: var(--ekl-ps-on-accent);
    }

    .ekl-callout-btn-secondary,
    .ekl-callout-btn-secondary:visited {
        background-color: transparent;
        border-color: var(--ekl-ps-accent);
        color: var(--ekl-ps-accent);
    }

    .ekl-callout-btn:hover,
    .ekl-callout-btn:focus,
    .ekl-callout-btn:active {
        background-color: var(--ekl-ps-accent);
        box-shadow: inset 0 0 0 2px var(--ekl-ps-on-accent);
        color: var(--ekl-ps-on-accent);
    }

    .ekl-callout-btn-secondary:hover,
    .ekl-callout-btn-secondary:focus,
    .ekl-callout-btn-secondary:active {
        background-color: var(--ekl-ps-accent);
        color: var(--ekl-ps-on-accent);
    }
}