/*
 * WVARC Alerts & QSTs presentation.
 *
 * The alerts shortcode renders each CTA inside a direct child <p>, so desktop
 * alert cards use a two-column grid: title/content on the left and the action
 * on the right. Mobile remains stacked.
 */

.wvarc-calendar--alerts {
    display: grid;
    gap: 0.85rem;
}

.wvarc-calendar--alerts > .wvarc-calendar__alert {
    margin: 0 !important;
}

@media (min-width: 48rem) {
    .wvarc-calendar--alerts > .wvarc-calendar__alert:has(> p > .wp-element-button) {
        align-items: center;
        column-gap: clamp(1.25rem, 3vw, 3rem);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }

    .wvarc-calendar--alerts > .wvarc-calendar__alert:has(> p > .wp-element-button) > .wvarc-calendar__alert-title,
    .wvarc-calendar--alerts > .wvarc-calendar__alert:has(> p > .wp-element-button) > .wvarc-calendar__alert-content {
        grid-column: 1;
    }

    .wvarc-calendar--alerts > .wvarc-calendar__alert:has(> p > .wp-element-button) > .wvarc-calendar__alert-title {
        grid-row: 1;
    }

    .wvarc-calendar--alerts > .wvarc-calendar__alert:has(> p > .wp-element-button) > .wvarc-calendar__alert-content {
        grid-row: 2;
    }

    .wvarc-calendar--alerts > .wvarc-calendar__alert:has(> p > .wp-element-button) > p:has(> .wp-element-button) {
        align-self: center;
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
        margin: 0 !important;
    }

    .wvarc-calendar--alerts > .wvarc-calendar__alert > p > .wp-element-button {
        margin: 0 !important;
        white-space: nowrap;
    }
}

@media (max-width: 47.99rem) {
    .wvarc-calendar--alerts {
        gap: 0.7rem;
    }
}