/*
 * CIPIT Opportunities: the list and the details on an opportunity's page.
 * Colours follow the Elegante theme's tokens, then cipitcustom's, then plain defaults.
 */

.cipit-opps-block,
.cipit-opps,
.cipit-opp-single {
    --opp-brand: var(--el-brand, var(--primary-color, #C4161C));
    --opp-brand-dark: var(--el-brand-dark, var(--primary-dark, #9E0F16));
    --opp-ink: var(--el-ink, #1A1618);
    --opp-body: var(--el-body, #55504F);
    --opp-muted: var(--el-muted, #6F696C);
    --opp-line: var(--el-line, rgba(0, 0, 0, .09));
    --opp-paper: var(--c-paper, #fff);
    --opp-tint: var(--el-tint, rgba(196, 22, 28, .08));
    --opp-chip: var(--el-chip, #F4F1F2);
    --opp-shadow: var(--el-shadow, 0 1px 3px rgba(0, 0, 0, .06));
    --opp-shadow-hover: var(--el-shadow-hover, 0 8px 24px -12px rgba(0, 0, 0, .2));
}

/* List ------------------------------------------------------------------------ */

.cipit-opps {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cipit-opps > li {
    margin: 0;
    padding: 0;
}

.cipit-opps > li::before {
    content: none;
}

.cipit-opp {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 24px;
    padding: 28px 32px;
    border: 1px solid var(--opp-line);
    border-radius: 16px;
    /* Rings as on the newsletter card, fading into the card. opportunities.js gives every open card
       the same centre (--opp-ring-x/y, measured from the card), so one set of rings runs through
       the whole list; without it each card is ringed from its own right edge. */
    background:
        radial-gradient(circle var(--opp-ring-fade, 420px) at var(--opp-ring-x, 100%) var(--opp-ring-y, 50%), transparent 0, var(--opp-paper) 100%),
        repeating-radial-gradient(circle at var(--opp-ring-x, 100%) var(--opp-ring-y, 50%), transparent 0 20px, color-mix(in srgb, var(--opp-brand) 8%, transparent) 20px 21px),
        var(--opp-paper);
    box-shadow: var(--opp-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* The theme's card hover: lift, deeper shadow, faint brand border. */
.cipit-opp:hover {
    transform: var(--el-card-lift, translateY(-4px));
    border-color: var(--el-card-line-hover, color-mix(in srgb, var(--opp-brand) 28%, transparent));
    box-shadow: var(--opp-shadow-hover);
}

/* Keyboard focus on the title link outlines the whole card. */
.cipit-opp:focus-within:has(.cipit-opp__title a:focus-visible) {
    outline: 2px solid var(--opp-brand);
    outline-offset: 3px;
}

.cipit-opp.is-closed {
    background: transparent; /* no rings: closed ones stay quiet */
    box-shadow: none;
}

/* Type icon: same tinted circle as the other cards on the page, level with the type label. */
.cipit-opp__icon {
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--opp-tint);
    color: var(--opp-brand);
    font-size: 18px;
}

.cipit-opp.is-closed .cipit-opp__icon {
    background: var(--opp-chip);
    color: var(--opp-muted);
}

.cipit-opp__main {
    min-width: 0;
}

.cipit-opp__actions {
    margin-left: 16px;
}

.cipit-opp__type {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--opp-brand);
}

.cipit-opp.is-closed .cipit-opp__type {
    color: var(--opp-muted);
}

.cipit-opp__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.018em;
    font-weight: 700;
    text-wrap: balance;
}

.cipit-opp__title a {
    color: var(--opp-ink);
    text-decoration: none;
    outline: none;
}

/* The title link covers the card, so the whole card opens the opportunity. */
.cipit-opp__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.cipit-opp:hover .cipit-opp__title a {
    color: var(--opp-brand);
}

.cipit-opp__summary {
    max-width: 68ch;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--opp-body);
}

.cipit-opp__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--opp-body);
}

.cipit-opp__facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.cipit-opp__facts li::before {
    content: none;
}

.cipit-opp__facts i {
    width: 14px;
    font-size: 13px;
    text-align: center;
    color: var(--opp-muted);
}

.cipit-opp__left {
    color: var(--opp-muted);
}

.cipit-opp__status {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 13px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.cipit-opp__status.is-open {
    background: var(--opp-chip);
    color: var(--opp-ink);
}

.cipit-opp__status.is-soon {
    background: var(--opp-tint);
    color: var(--opp-brand-dark);
}

.cipit-opp__status.is-closed {
    background: var(--opp-chip);
    color: var(--opp-muted);
}

/* Above the stretched title link, so Apply stays its own link. */
.cipit-opp__actions {
    position: relative;
    z-index: 1;
    display: flex;
}

/* Buttons (also under an opportunity's text, where the theme may style links in the prose). */
.cipit-opps a.cipit-opp__btn,
.cipit-opp-single a.cipit-opp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid color-mix(in srgb, var(--opp-brand) 30%, transparent);
    border-radius: 22px;
    background: transparent;
    color: var(--opp-brand);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.cipit-opps a.cipit-opp__btn:hover,
.cipit-opp-single a.cipit-opp__btn:hover {
    border-color: var(--opp-brand);
    background: var(--opp-brand);
    color: #fff;
}

.cipit-opps a.cipit-opp__btn--primary,
.cipit-opp-single a.cipit-opp__btn--primary {
    border-color: var(--opp-brand);
    background: var(--opp-brand);
    color: #fff;
}

.cipit-opps a.cipit-opp__btn--primary:hover,
.cipit-opp-single a.cipit-opp__btn--primary:hover {
    border-color: var(--opp-brand-dark);
    background: var(--opp-brand-dark);
}

.cipit-opp__btn i {
    font-size: 13px;
}

.cipit-opps-heading {
    margin: 48px 0 18px;
    font-size: 22px;
    letter-spacing: -.02em;
    color: var(--opp-ink);
}

.cipit-opps-empty {
    margin: 0;
    padding: 24px 26px;
    border: 1px solid var(--opp-line);
    border-radius: 16px;
    background: var(--opp-paper);
    color: var(--opp-body);
}

@media (max-width: 700px) {
    .cipit-opp {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 22px 20px;
    }

    .cipit-opp__icon {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .cipit-opp__actions {
        margin: 4px 0 0;
    }

    .cipit-opp__title {
        font-size: 18px;
    }
}

/* An opportunity's page ---------------------------------------------------------- */

/* Facts: one row split by hairlines; a 2 x 2 grid when narrow. In the row the location takes the
   spare width and wraps, the type wraps when long, and the deadline and status stay on one line.
   The right end is left clear for ripples, as on the newsletter box (from 520px wide). */
.cipit-opp-single {
    container-type: inline-size;
}

.cipit-opp-single .cipit-opp-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin: 0 0 28px;
    padding: 20px;
    border: 1px solid var(--opp-line);
    border-radius: 16px;
    background:
        radial-gradient(circle 300px at 100% 50%, transparent 0, var(--opp-paper) 100%),
        repeating-radial-gradient(circle at 100% 50%, transparent 0 20px, color-mix(in srgb, var(--opp-brand) 8%, transparent) 20px 21px),
        var(--opp-paper);
}

@container (min-width: 520px) {
    .cipit-opp-single .cipit-opp-facts {
        padding-right: clamp(20px, 26%, 220px);
    }
}

@container (min-width: 760px) {
    .cipit-opp-single .cipit-opp-facts {
        display: flex;
        gap: 0;
        padding: 20px clamp(20px, 18%, 220px) 20px 0;
    }

    .cipit-opp-single .cipit-opp-facts > div {
        flex: 0 1 auto;
        padding: 0 24px;
    }

    .cipit-opp-single .cipit-opp-facts__type {
        max-width: 200px;
    }

    .cipit-opp-single .cipit-opp-facts__location {
        flex: 1 1 0;
    }

    /* Without a location, the gap goes after the last column rather than inside one. */
    .cipit-opp-single .cipit-opp-facts:not(:has(.cipit-opp-facts__location)) > div {
        flex: 1 1 auto;
    }

    .cipit-opp-single .cipit-opp-facts__deadline dd,
    .cipit-opp-single .cipit-opp-facts__status dd {
        white-space: nowrap;
    }

    .cipit-opp-single .cipit-opp-facts > div + div {
        border-left: 1px solid var(--opp-line);
    }
}

.cipit-opp-single .cipit-opp-facts > div {
    min-width: 0;
    margin: 0;
}

.cipit-opp-single .cipit-opp-facts dt {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--opp-muted);
}

.cipit-opp-single .cipit-opp-facts dt i {
    font-size: 12px;
    color: inherit;
}

.cipit-opp-single .cipit-opp-facts dd {
    margin: 0;
    line-height: 1.45;
    text-align: left; /* the theme justifies article text */
    hyphens: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--opp-ink);
    overflow-wrap: anywhere; /* a long unbroken value (a URL, an email) wraps instead of spilling out */
    text-wrap: pretty;
}

/* Status reads as text with a dot, level with the other values (the list keeps its pills). */
.cipit-opp-single .cipit-opp-facts .cipit-opp__status {
    display: inline-flex;
    gap: 8px;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
}

.cipit-opp-single .cipit-opp-facts .cipit-opp__status::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.cipit-opp-single .cipit-opp-facts .cipit-opp__status.is-open {
    color: var(--opp-ink);
}

.cipit-opp-single .cipit-opp-facts .cipit-opp__status.is-open::before {
    background: #1E8A4C;
}

.cipit-opp-single .cipit-opp-facts .cipit-opp__status.is-soon {
    color: var(--opp-brand-dark);
}

.cipit-opp-single .cipit-opp-facts .cipit-opp__status.is-closed {
    color: var(--opp-muted);
}

.cipit-opp-single .cipit-opp-closed {
    margin: -12px 0 28px;
    font-weight: 600;
    color: var(--opp-body);
}

.cipit-opp-single .cipit-opp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0 0;
}

.cipit-opp-single .cipit-opp-back {
    margin: 24px 0 0;
    font-size: 14px;
}

.cipit-opp-single .cipit-opp-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--opp-brand);
    font-weight: 600;
    text-decoration: none;
}

.cipit-opp-single .cipit-opp-back i {
    font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .cipit-opp {
        transition: none;
    }

    .cipit-opp:hover {
        transform: none;
    }
}