/**
 * list.css — List view and ministry list row/card styles,
 * tag pills, and opportunity rating.
 */

/* ── Student list view — block flow so items stack at natural height and scroll ── */
#view-list {
    display: block;
    overflow-y: auto;
}

/* ── Ministry styles ── */
.ministry-opp-list { display: block; }

/* ── Opportunity card — shared chrome ── */
.list-row-item,
.ministry-row-item {
    margin: 0.5rem 0.75rem;
    border: 1px solid var(--color-primary-200);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px var(--color-black-6);
    transition: box-shadow 0.15s, background-color 0.15s;
}

/* ── Student list card: horizontal accent-bar | body | button ── */
.list-row-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
}

/* ── Ministry card: horizontal accent-bar | body | actions ── */
.ministry-row-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
}

/* ── Ministry card: actions column (right edge) ── */
.opp-card-actions-col {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
    padding-right: 1rem;
}

.list-row-item,
.ministry-row-item {
    cursor: pointer;
}

.list-row-item:hover,
.ministry-row-item:hover {
    background-color: var(--color-primary-50);
    box-shadow: 0 2px 8px var(--color-black-10);
}


/* ── Student list card: left accent bar (5 px, color set inline) ── */
.opp-card-accent {
    width: 5px;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Student list card: main body ── */
.opp-card-body {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    row-gap: 0.5rem;
}

/* ── Student list card: row 1 — title + tag pills inline ── */
.opp-card-row1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sdg-icon-badge {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    box-shadow: 0 1px 2px var(--color-black-10);
    object-fit: cover;
}

.sdg-icon-badge-inline {
    margin-left: auto;
}

/* ── Student list card: Details button column (right edge) ── */
.opp-card-btn-col {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 1rem;
}

/* ── Section header above Upcoming / Older groups ── */
.opp-list-section-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-400);
    padding: 0.75rem 0.75rem 0.25rem;
}

/* ── Card header (legacy, kept for reference) ── */
.opp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.opp-card-row1 > span:first-child {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.3;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Title inside the two-column top section ── */
.opp-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.3;
}

/* ── Heart rating cluster ── */
.opp-heart-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.opp-heart-rating > span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-error-text);
    white-space: nowrap;
    margin-left: 0.1rem;
}

/* ── Predicted rating badge ── */
.opp-predicted-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-predicted-muted);
    border: 1px dashed var(--color-predicted-muted);
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
    margin-left: 0.25rem;
    white-space: nowrap;
    line-height: 1.2;
}

/* ── Signup count label (ministry list only) ── */
.opp-signup-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Ended label (subtle, replaces the old red warning badge) ── */
.opp-ended-label {
    display: inline-block;
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-500);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ── Tag pills row ── */
.opp-card-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}


/* ── Row 3: Info (left) + Action button/icons (right) ── */
.opp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.opp-card-body > p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    line-height: 1.4;
}

/* ── Tag pill ── */
.tag-pill {
    display: inline-block;
    font-size: 0.7rem;
    background-color: var(--color-primary-100);
    color: var(--color-navy);
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
}

/* ── Ministry Edit + Delete button cluster ── */
.opp-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}