.events-page main > .section-content:not(#events-hero) {
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.events-section {
    min-height: auto;
}

.events-grid-shell {
    padding: var(--space-xl);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-accent);
    border-radius: calc(var(--radius) - 2px);
    box-shadow: var(--shadow-soft);
}

.events-grid-shell h2 {
    margin: 0;
    color: var(--color-text-black);
    text-align: left;
    text-shadow: none;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    align-items: stretch;
    gap: var(--space-xl);
}

.event-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-sm);
    text-align: left;
    position: relative;
    overflow: hidden; /* Creates a new stacking context so the watermark stays behind the card content. */
    isolation: isolate;
    margin-bottom: 0;
    padding: var(--space-lg);
    background:
        linear-gradient(180deg, var(--color-bg-main-rgba-05), var(--color-bg-main-rgba-96)),
        linear-gradient(135deg, var(--color-bg-secondary-rgba-38), var(--color-accent-rgba-92));
    border: 1px solid var(--color-accent);
    border-radius: calc(var(--radius) - 2px);
    box-shadow: var(--shadow-soft);
}

.event-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, var(--color-white-rgba-08), transparent 58%),
        center / 150px no-repeat url("../images/Logo-Only-Veterans-Phalanx-256.png");
    opacity: 0.40;
    pointer-events: none;
    z-index: 0;
}

.event-card > * {
    position: relative;
    z-index: 1;
}

.event-card .card-title,
.event-card p {
    width: 100%;
}

.event-card .card-title {
    margin-bottom: 0;
    line-height: 1.25;
}

.event-card p {
    margin: 0;
}

.event-card a {
    color: var(--color-text-main);
    font-weight: var(--txt-bold);
    text-decoration: none;
}

.event-card a:hover,
.event-card a:focus-visible {
    color: var(--color-accent2);
}

.events-section h2 {
    margin-bottom: var(--space-lg);
}

.events-page #events-hero p {
    max-width: 60ch;
    margin-inline: auto;
}

@media (max-width: 900px) {
    .events-page main > .section-content:not(#events-hero) {
        padding: var(--space-lg);
    }

    .events-grid-shell {
        padding: var(--space-lg);
    }

    .events-grid {
        grid-template-columns: 1fr;
    }
}