/* The My Projects page: one row per project (cover, name and subline, then the
   step button and the ⋮), under the same saved-view tabs and toolbar as the
   rest of SkillBridge. Rows are one height and nothing in them wraps, but on
   a phone the line under the name may take a second line so a stop is never
   cut off; a training row grows too, by its grade line and its What to Work
   On tips. The step
   button is SB's split button (components/signup-groups.css) and the ⋮ is the
   global icon button at its 44px size, the step button's height. Rows read like
   the Sign Up board's: its title and subline sizes and ink. The cover fills the
   row's height inside its padding. New Project and Edit Details are a global
   drawer; its Cancel and Create wear the step button's face, as every button
   on the page does. */

/* The page never scrolls: the body card takes the rest of the screen
   (.global-page-fill, main.css) and hands its height down this flex column, so
   the rows scroll in their own box and the count stays put as the card's
   footer, the People list's treatment (.workers-list-scroll, workers.css). */
.opportunities-projects__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.opportunities-projects__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.opportunities-projects__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* The tint, as on the global grid: the row's rule is drawn in the hover grey. */
.opportunities-projects__row:hover {
    background: var(--color-action-tint);
}

/* An editor is open on the photos: the whole row puts its Edit popup back. */
.opportunities-projects__row.is-locked {
    cursor: pointer;
}

.opportunities-projects__cell {
    min-width: 0;
    white-space: nowrap;
}

.opportunities-projects__cell--name {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* The cover's one grid cell is the box itself, so a photo of any shape fills
   it and is cropped to it. An auto-sized cell let a portrait photo keep its own
   height and spill onto the row below. */
.opportunities-projects__cover {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    flex: none;
    place-items: center;
    overflow: hidden;
    width: 7.5rem;
    height: 5rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted-cool);
    font-size: var(--font-size-h3);
}

.opportunities-projects__cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.opportunities-projects__title {
    min-width: 0;
}

.opportunities-projects__name {
    margin: 0 0 var(--spacing-xs);
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    text-overflow: ellipsis;
    cursor: text;
}

.opportunities-projects__status {
    overflow: hidden;
    color: var(--color-text-muted-cool);
    font-size: var(--font-size-md);
    text-overflow: ellipsis;
}

/* A stop on the status line and a training copy's failed job read in the
   error colour, as a menu's Delete does (.global-action-dropdown-item--danger). */
.opportunities-projects__error {
    color: var(--color-error-text);
}

.opportunities-projects__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-sm);
}

/* A training copy's What to Work On: under the row at its full width, shut
   until opened, its tips a plain list. */
.opportunities-projects__practice {
    grid-column: 1 / -1;
    min-width: 0;
    white-space: normal;
}

.opportunities-projects__practice-tips {
    margin: var(--spacing-sm) 0 0;
    padding-left: var(--spacing-lg);
}

/* Every step button face is one width and one height on every row, sized to
   fit the longest face ("Upload More"), so the faces line up in a column. A
   caret, when there is one, sits to the left of the face. The Review Uploads
   drawer's Process matches it. A button face (Process, Export) drops the
   browser's own border, so it looks the same as a link face (Upload More)
   when the caret swaps one for the other. The header's New Project, which
   the empty list shows too, and both drawers' footer buttons are the same face. */
.opportunities-projects__face,
.opportunities-projects__actions .assignments-role-btn,
.opportunities-projects__drawer .global-drawer__footer .assignments-role-btn {
    width: 8.75rem;
    height: var(--signup-role-control-h);
    border: 0;
}

/* The Sign Up board's two phone rungs: a bigger title, then on a narrow phone
   the step button drops under the name so the name keeps its width. The ⋮
   stays on the name line, and a row with no step button stays one line. On
   both rungs the line under the name wraps instead of being cut, so a
   "Stopped" near its end always shows; the name keeps its own "…". */
@media (max-width: 768px) {
    .opportunities-projects__name {
        font-size: var(--font-size-h3);
    }

    .opportunities-projects__status {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .opportunities-projects__row {
        row-gap: var(--spacing-smd);
    }

    .opportunities-projects__actions {
        display: contents;
    }

    .opportunities-projects__cell--name {
        grid-area: 1 / 1;
        gap: var(--spacing-smd);
    }

    .opportunities-projects__actions .global-action-dropdown {
        grid-area: 1 / 2;
    }

    .opportunities-projects__step {
        grid-area: 2 / 1 / 3 / 3;
        justify-self: end;
    }

    .opportunities-projects__cover {
        width: 4.5rem;
        height: 3rem;
        font-size: var(--font-size-lg);
    }
}