/* ==========================================================================
   NACS Show 2026 - Portal Cards Widget (single card, themed)
   Themes: A (Navy), B (Green), C (Blue), D (Gradient)
   ========================================================================== */

.portal-cards-widget {
    --pcw-bg: var(--nacs-color-navy, #00205B);
    --pcw-text: var(--nacs-color-white, #FFFFFF);
    --pcw-btn-bg: #88DBDF;
    --pcw-btn-text: var(--nacs-color-navy, #00205B);

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    min-height: 250px;
    padding: 24px;
    border-radius: 16px;
    background: var(--pcw-bg);
    color: var(--pcw-text);
    font-family: var(--nacs-font-gotham, 'Gotham', 'Gotham SSm A', 'Gotham SSm B', sans-serif);
    overflow: hidden;
}

/* ----------- Theme A: Navy ------------------------------------------------ */
.portal-cards-widget--theme-a {
    --pcw-bg: var(--nacs-color-navy, #00205B);
    --pcw-btn-bg: #88DBDF;
    --pcw-btn-text: var(--nacs-color-navy, #00205B);
}

/* ----------- Theme B: Green ----------------------------------------------- */
.portal-cards-widget--theme-b {
    --pcw-bg: var(--nacs-color-green, #00A82D);
    --pcw-btn-bg: var(--nacs-color-yellow, #FAE100);
    --pcw-btn-text: var(--nacs-color-navy, #00205B);
}

/* ----------- Theme C: Blue ------------------------------------------------ */
.portal-cards-widget--theme-c {
    --pcw-bg: var(--nacs-color-blue, #004C97);
    --pcw-btn-bg: #88DBDF;
    --pcw-btn-text: var(--nacs-color-navy, #00205B);
}

/* ----------- Theme D: Gradient (Navy -> Teal-Blue) ----------------------- */
.portal-cards-widget--theme-d {
    --pcw-btn-bg: #88DBDF;
    --pcw-btn-text: var(--nacs-color-navy, #00205B);
    background: linear-gradient(135deg, #00205B 0%, #2D8DA8 100%);
}

/* ----------- Title -------------------------------------------------------- */
.portal-cards-widget__top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-cards-widget__title {
    margin: 0;
    font-family: var(--nacs-font-gotham, 'Gotham', 'Gotham SSm A', 'Gotham SSm B', sans-serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    color: var(--pcw-text);
}

/* ----------- Description -------------------------------------------------- */
.portal-cards-widget__desc {
    margin: 0;
    font-family: var(--nacs-font-gotham, 'Gotham', 'Gotham SSm A', 'Gotham SSm B', sans-serif);
    font-weight: 325;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--pcw-text);
}

/* ----------- Action Button ------------------------------------------------ */
.portal-cards-widget__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 24px;
    height: 56px;
    padding: 0 24px;
    border-radius: 360px;
    background: var(--pcw-btn-bg);
    color: var(--pcw-btn-text) !important;
    font-family: var(--nacs-font-gotham, 'Gotham', 'Gotham SSm A', 'Gotham SSm B', sans-serif);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.portal-cards-widget__btn:hover,
.portal-cards-widget__btn:focus-visible {
    filter: brightness(0.95);
    color: var(--pcw-btn-text);
    text-decoration: none;
}

.portal-cards-widget__btn:focus-visible {
    outline: 2px solid var(--nacs-color-white, #FFFFFF);
    outline-offset: 2px;
}

.portal-cards-widget__btn-text {
    display: inline-block;
}

.portal-cards-widget__btn-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ----------- Responsive -------------------------------------------------- */
@@media (max-width: 768px) {
    .portal-cards-widget {
        max-width: 100%;
        min-height: 360px;
    }

    .portal-cards-widget__title {
        font-size: 28px;
        line-height: 36px;
    }
}