/**
 * Upcoming CTAs block - front-end styles.
 * Theme-agnostic: colors come from neutral tokens with `color-mix` fallbacks and,
 * where the block sits on a page that also loads cta-display.css, the shared
 * Action Center tokens. This block is enqueued on its own (the homepage may not
 * load cta-display.css), so the accent tokens and the `.cta-btn` button style are
 * defined here too, keeping the buttons visible without cta-display.css present.
 */
.cta-upcoming-block {
    --cta-accent: var(--wp--preset--color--primary, #2c6e49);
    --cta-on-accent: #ffffff;
    --cta-border: color-mix(in srgb, currentColor 20%, transparent);
    --cta-surface: color-mix(in srgb, currentColor 4%, transparent);
    --cta-muted: color-mix(in srgb, currentColor 65%, transparent);
}

/* Self-contained accent button (matches cta-display.css). Normal class specificity
   so it wins over generic theme button rules; override via --cta-accent. */
.cta-upcoming-block .cta-btn {
    display: inline-block;
    padding: 0.6em 1.2em;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    background: var(--cta-accent, #2c6e49);
    color: var(--cta-on-accent, #fff);
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cta-upcoming-block .cta-btn:hover,
.cta-upcoming-block .cta-btn:focus {
    background: color-mix(in srgb, var(--cta-accent, #2c6e49) 85%, black);
    color: var(--cta-on-accent, #fff);
    text-decoration: none;
}
.cta-upcoming-block .cta-btn:focus-visible {
    outline: 2px solid var(--cta-accent, #2c6e49);
    outline-offset: 2px;
}

.wp-block-cta-manager-upcoming-ctas {
    margin: 2rem 0;
}

.cta-upcoming-block {
    background: var(--cta-surface, color-mix(in srgb, currentColor 4%, transparent));
    border: 1px solid var(--cta-border, color-mix(in srgb, currentColor 20%, transparent));
    border-radius: 6px;
    padding: 1.5rem;
}

.cta-upcoming-block__header {
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cta-border, color-mix(in srgb, currentColor 20%, transparent));
}

.cta-upcoming-block__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: inherit;
}

.cta-upcoming-block__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .cta-upcoming-block__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cta-upcoming-block__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cta-upcoming-card {
    background: var(--cta-surface, color-mix(in srgb, currentColor 4%, transparent));
    border: 1px solid var(--cta-border, color-mix(in srgb, currentColor 20%, transparent));
    border-radius: 4px;
    padding: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-upcoming-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta-upcoming-card__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.cta-upcoming-card__title a {
    color: inherit;
    text-decoration: none;
}

.cta-upcoming-card__title a:hover,
.cta-upcoming-card__title a:focus {
    color: var(--cta-accent, #2c6e49);
}

.cta-upcoming-card__deadline {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--cta-muted, color-mix(in srgb, currentColor 65%, transparent));
}

/* Per-card action is a text link, not a button, so the block does not read as a
   wall of buttons. The one button in the block stays "View More Actions". */
.cta-upcoming-card__link {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    color: var(--cta-accent, #2c6e49);
    background: none;
    border: 0;
    padding: 0;
}
.cta-upcoming-card__link:hover,
.cta-upcoming-card__link:focus {
    text-decoration: underline;
}
.cta-upcoming-card__arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}
.cta-upcoming-card__link:hover .cta-upcoming-card__arrow,
.cta-upcoming-card__link:focus .cta-upcoming-card__arrow {
    transform: translateX(3px);
}

.cta-upcoming-block__empty {
    padding: 2rem;
    text-align: center;
    color: var(--cta-muted, color-mix(in srgb, currentColor 65%, transparent));
    font-style: italic;
}

/* Editor preview styles */
.block-editor-block-list__block .cta-upcoming-block {
    border-style: dashed;
}

/* View More: right-aligned. Button appearance comes from the .cta-btn rule above;
   only layout is set here. The block can sit inside a flex column wrapper, so the
   wrapper is full-width and the button is pushed right. */
.cta-upcoming-block__view-more-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 1.5rem;
}

.cta-upcoming-block__view-more-btn {
    width: fit-content;
}