/* =========================
   Event Promo
   Scoped only to .event-promo
   ========================= */

.event-promo {
    --promo-text: var(--titan-blue);
    --promo-accent: var(--titan-orange-ati);
    --promo-accent-alt: var(--bright-blue);
    --promo-surface: #ffffff;
    --promo-surface-soft: var(--bright-bg);
    --promo-border: rgba(0, 0, 0, 0.12);
    --promo-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    --promo-radius: 1rem;
    --promo-max-width: 1100px;
    width: min(100%, var(--promo-max-width));
    margin: 2rem auto 3rem;
    background: var(--promo-surface);
    color: var(--promo-text);
    border: 1px solid var(--promo-border);
    border-radius: var(--promo-radius);
    box-shadow: var(--promo-shadow);
    overflow: hidden;
}

    .event-promo * {
        box-sizing: border-box;
    }

    /* =========================
   Header / hero
   ========================= */

    .event-promo header {
        background: linear-gradient(rgba(10, 38, 74, 0.9), rgba(10, 38, 74, 0.88)), var(--promo-text);
        color: #fff;
        
    }

    .event-promo header p{
        padding:20px;
        text-align:center;
        margin:0 auto;
    }

    .event-promo header p em{
        font-size:1.2rem;
    }

    .event-promo .branding {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 1.5rem;
        padding: 1.25rem 1.5rem;
        background: rgba(255, 255, 255, 0.96);
    }

        .event-promo .branding img {
            display: block;
            max-width: min(100%, 300px);
            height: auto;
            object-fit: contain;
        }

    .event-promo .overview {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(220px, 300px);
        gap: 2rem;
        align-items: center;
        padding: 2rem 1.5rem;
    }

    .event-promo .synopsis {
        display: grid;
        gap: 1rem;
    }

        .event-promo .synopsis h2 {
            margin: 0;
            color: var(--promo-accent);
            font-size: clamp(2.2rem, 5vw, 4rem);
            line-height: 0.95;
            font-weight: 800;
            letter-spacing: -0.03em;
        }

        .event-promo .synopsis strong {
            display: block;
            max-width: 18ch;
            color: #ffffff;
            font-size: clamp(1.25rem, 2.6vw, 2.5rem);
            line-height: 1.08;
            font-weight: 800;
            text-transform: uppercase;
        }

    .event-promo .overview > article {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
    }

        .event-promo .overview > article img {
            display: block;
            width: 100%;
            max-width: 280px;
            aspect-ratio: 3 / 4;
            height: auto;
            object-fit: cover;
            object-position: center;
            border-radius: 0.75rem;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
            background: var(--promo-surface-soft);
        }

        .event-promo .overview > article p {
            margin: 0;
            text-align: center;
        }

        .event-promo .overview > article em {
            display: block;
            color: var(--promo-surface-soft);
            font-size: 1rem;
            line-height: 1.45;
            font-style: normal;
        }

    /* =========================
   Event details
   ========================= */

    .event-promo .event-details {
        padding: 1.75rem 1.5rem 2rem;
        background: var(--promo-surface-soft);
    }

        .event-promo .event-details h2 {
            margin: 0 0 1rem;
            color: var(--promo-text);
            font-size: clamp(1.35rem, 2vw, 1.8rem);
            line-height: 1.2;
            font-weight: 800;
        }

            .event-promo .event-details h2 + dl,
            .event-promo .event-details h2 + ul {
                margin-top: 0;
            }

        .event-promo .event-details dl {
            margin: 0 0 2rem;
            padding: 1rem 1.1rem;
            background: #ffffff;
            border-left: 5px solid var(--promo-accent-alt);
            border-radius: 0.75rem;
        }

        .event-promo .event-details dt {
            margin: 0;
            color: var(--promo-text);
            font-weight: 800;
        }

        .event-promo .event-details dd {
            margin: 0.15rem 0 0.9rem;
            color: var(--promo-text);
            line-height: 1.45;
        }

            .event-promo .event-details dd:last-child {
                margin-bottom: 0;
            }

        .event-promo .event-details ul {
            margin: 0 0 1.75rem;
            padding-left: 1.25rem;
        }

        .event-promo .event-details li {
            margin-bottom: 0.9rem;
            line-height: 1.55;
        }

            .event-promo .event-details li:last-child {
                margin-bottom: 0;
            }

            .event-promo .event-details li::marker {
                color: var(--promo-accent);
            }

        /* RSVP */
        .event-promo .event-details > p {
            margin: 0;
            text-align: center;
        }

    

/* =========================
   Tablet / mobile
   ========================= */

@media (max-width: 768px) {
    .event-promo {
        margin: 1.5rem auto 2rem;
    }

        .event-promo .branding,
        .event-promo .overview,
        .event-promo .event-details {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .event-promo .overview {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            text-align: left;
        }

        .event-promo .synopsis strong {
            max-width: none;
        }

        .event-promo .overview > article img {
            max-width: 240px;
        }
}

@media (max-width: 375px) {
    .event-promo .branding {
        justify-content: center;
    }

        .event-promo .branding img {
            max-width: 100%;
        }

    .event-promo .synopsis h2 {
        font-size: 2rem;
    }

    .event-promo .synopsis strong {
        font-size: 1.15rem;
    }

    .event-promo .overview > article img {
        max-width: 210px;
    }

    .event-promo .overview > article em,
    .event-promo .event-details dt,
    .event-promo .event-details dd,
    .event-promo .event-details li,
    .event-promo .action-link {
        font-size: 0.98rem;
    }
}