/* callout.css — a full-width band with a heading, a line of text and up to two
 * buttons. Authors reach for it as the end-of-post call to action.
 *
 * Yours: edit it, or delete the file if your authors never use one.
 * The button shape lives in shared.css, because the CTA widget uses it too.
 */

.velocity-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--paper);
}

.velocity-callout-heading {
    max-width: 85%;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.velocity-callout-subheading {
    max-width: 85%;
    margin: 0.5rem 0 0;
    font-size: 1rem;
    text-align: center;
}

.velocity-callout-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

/* The primary button sits on the band, so it takes the quieter colour —
   a primary-on-primary button would disappear into the background. */
.velocity-callout-btn {
    background: var(--ink);
    color: var(--paper);
}

/* The second button is an outline of the band's own text colour. */
.velocity-callout-btn.secondary {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--accent);
}

@media (max-width: 640px) {
    .velocity-callout-heading,
    .velocity-callout-subheading {
        max-width: 100%;
    }

    .velocity-callout-heading {
        font-size: 1.25rem;
    }

    /* Stacked, because two buttons side by side on a phone are each too narrow
       to read and too close together to tap. */
    .velocity-callout-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
}