/* Shared dimensions keep artwork and text-only announcements aligned. */
.cpc-announcement-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    flex: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #102f50;
    position: relative;
    box-sizing: border-box;
}

.cpc-announcement-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.highlight-card:hover .cpc-announcement-media img {
    transform: scale(1.025);
}

/* ==========================================================================
   Typographic Mini-Poster (Intentional Fallback when no graphic is uploaded)
   ========================================================================== */
.cpc-announcement-media--poster {
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 1.15rem 1.25rem 1.15rem;
    color: #f0f6fc;
    background: radial-gradient(120% 110% at 90% 10%, rgba(64, 153, 255, 0.28) 0%, transparent 60%),
                radial-gradient(100% 100% at 10% 90%, rgba(212, 160, 23, 0.18) 0%, transparent 55%),
                linear-gradient(155deg, #0f3056 0%, #07192c 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-align: left;
    user-select: none;
    isolation: isolate;
}

/* Background Church Architectural Art */
.cpc-poster__art {
    position: absolute;
    right: -16px;
    bottom: -24px;
    width: 170px;
    height: 198px;
    pointer-events: none;
    opacity: 0.35;
    color: #8bbcef;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.cpc-poster__art-svg {
    width: 100%;
    height: 100%;
}

.highlight-card:hover .cpc-poster__art {
    transform: scale(1.06) translateY(-4px);
    opacity: 0.52;
}

/* Poster Header */
.cpc-poster__header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

/* Calendar Date Ticket Badge */
.cpc-poster__date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0.3rem 0.55rem 0.25rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    line-height: 1;
    flex-shrink: 0;
}

.cpc-poster__date-month {
    font: 800 0.62rem/1 'Manrope', sans-serif;
    letter-spacing: 0.14em;
    color: #ffd166;
    text-transform: uppercase;
}

.cpc-poster__date-day {
    font: 800 1.22rem/1.05 'Manrope', sans-serif;
    color: #ffffff;
    margin-top: 2px;
}

.cpc-poster__date-dow {
    font: 700 0.54rem/1 'Manrope', sans-serif;
    letter-spacing: 0.12em;
    color: #9ec5f2;
    text-transform: uppercase;
    margin-top: 2px;
}

.cpc-poster__date-badge--ongoing {
    padding: 0.38rem 0.6rem;
    min-width: 48px;
}

.cpc-poster__date-badge--ongoing .cpc-poster__date-month {
    font: 800 0.64rem/1 'Manrope', sans-serif;
    letter-spacing: 0.14em;
    color: #ffd166;
}

.cpc-poster__date-badge--ongoing .cpc-poster__date-dow {
    font: 700 0.54rem/1 'Manrope', sans-serif;
    letter-spacing: 0.12em;
    color: #9ec5f2;
    margin-top: 3px;
}

/* Brand in Header */
.cpc-poster__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 750 0.66rem/1 'Manrope', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

.cpc-poster__brand-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffd166;
    box-shadow: 0 0 6px #ffd166;
}

/* Poster Body / Typography Display */
.cpc-poster__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0.75rem 0 0.25rem;
    width: 100%;
}

.cpc-poster__title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    width: 100%;
    transition: color 0.2s ease;
}

.highlight-card:hover .cpc-poster__title {
    color: #93c5fd !important;
}

.cpc-poster__title--lg {
    font-size: 1.38rem;
    line-height: 1.24;
}

.cpc-poster__title--md {
    font-size: 1.2rem;
    line-height: 1.26;
}

.cpc-poster__title--sm {
    font-size: 1.05rem;
    line-height: 1.28;
}

/* ==========================================================================
   Responsive: Hybrid Mobile Adaptation
   ========================================================================== */
@media (max-width: 640px) {
    .cpc-announcement-media--poster {
        aspect-ratio: auto;
        min-height: 64px;
        padding: 0.65rem 0.95rem;
        justify-content: center;
    }

    .cpc-poster__body {
        display: none !important;
    }

    .cpc-poster__header {
        align-items: center;
        margin: 0;
    }

    .cpc-poster__art {
        width: 100px;
        height: 120px;
        right: -8px;
        bottom: -16px;
        opacity: 0.16;
    }
}

/* ==========================================================================
   Light Theme Styling
   ========================================================================== */
body.theme-white .cpc-announcement-media {
    background: #edf2f8;
}

body.theme-white .cpc-announcement-media--poster {
    background: linear-gradient(150deg, #fbfcfe 0%, #edf3fa 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 82, 163, 0.1), 0 1px 3px rgba(0, 0, 0, 0.03);
    color: #0b2d54;
}

body.theme-white .cpc-poster__date-badge {
    background: #ffffff;
    border: 1px solid rgba(0, 82, 163, 0.16);
    box-shadow: 0 2px 8px rgba(11, 45, 84, 0.07);
}

body.theme-white .cpc-poster__date-month {
    color: #b57a07; /* CPC Gold */
}

body.theme-white .cpc-poster__date-day {
    color: #0c335e; /* Navy */
}

body.theme-white .cpc-poster__date-dow {
    color: #586c80;
}

body.theme-white .cpc-poster__date-badge--ongoing {
    background: #ffffff;
    border: 1px solid rgba(0, 82, 163, 0.16);
}

body.theme-white .cpc-poster__date-badge--ongoing .cpc-poster__date-month {
    color: #0052a3;
}

body.theme-white .cpc-poster__date-badge--ongoing .cpc-poster__date-dow {
    color: #586c80;
}

body.theme-white .cpc-poster__brand {
    color: #1a4270;
}

body.theme-white .cpc-poster__brand-dot {
    background: #c99a3a;
    box-shadow: 0 0 5px rgba(201, 154, 58, 0.4);
}

body.theme-white .cpc-poster__title {
    color: #0b2d54 !important;
    text-shadow: none !important;
}

body.theme-white .highlight-card:hover .cpc-poster__title {
    color: #0052a3 !important;
}

body.theme-white .cpc-poster__art {
    color: #0052a3;
    opacity: 0.09;
}

body.theme-white .highlight-card:hover .cpc-poster__art {
    opacity: 0.16;
}

/* Event List Page Adjustments */
.events-page .evt-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.events-page .evt-card .cpc-announcement-media {
    border-radius: 8px;
}

@media (max-width: 560px) {
    .events-page .evt-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .events-page .evt-card .cpc-announcement-media {
        max-width: 100%;
    }
}

/* These cards use dark glass in blue mode; override the global pale-card rule. */
body.theme-blue .highlight-card .highlight-card__title { color: #fff !important; }
body.theme-blue .highlight-card .highlight-card__description { color: #d6e5f5 !important; }
body.theme-white .highlight-card .highlight-card__title { color: #1d2e42 !important; }
body.theme-white .highlight-card .highlight-card__description { color: #586c80 !important; }

/* Option B: Avoid Title Duplication
   When an announcement has no uploaded graphic, the typographic poster prominently
   presents the title in the top banner. On desktop viewports, visually hide the redundant
   body title (preserving accessibility for screen readers via sr-only pattern),
   while allowing it to display on mobile screens where the poster collapses into a compact date ticket. */
@media (min-width: 641px) {
    .highlight-card--no-image .highlight-card__title {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .highlight-card--no-image .highlight-card__content {
        justify-content: flex-start;
    }

    .highlight-card--no-image .highlight-card__description {
        -webkit-line-clamp: 3;
    }
}