/* ── Lists ──

   A list page on the ground: a grid of cards and the empty state; and the
   parts a list's drawers share (a filter's label, a form card's fields). Its
   header and its paginator are components of their own (page_header.css,
   paginator.css). */

/* ── Page ──

   The list's column, centred on wide screens. */
.phx-list {
    box-sizing: border-box;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding: 3rem 1rem 1rem;
}

/* ── Grid ──

   minmax(0, 1fr), not 1fr: a grid item's min-width is auto, so 1fr cells
   refuse to shrink below their content and truncation fails. */
.phx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .phx-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .phx-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .phx-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── A card in a list ── */

.phx-grid > .phx-card {
    position: relative;
}

.phx-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.phx-card__meta-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: rgb(var(--color-surface-500));
}

.phx-card__meta-row svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(var(--color-surface-400));
}

.phx-card__meta-value {
    font-weight: 500;
}

.phx-card__meta-value--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The whole card is one button: it lies over the card and carries the
   request; its keyboard focus rings the card (.phx-card--clickable). */
.phx-card__button {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
    outline: none;
}

/* ── A form card's fields ── */

.phx-card__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Empty state ── */

.phx-empty {
    margin-top: 1rem;
    text-align: center;
}

.phx-empty__title {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--color-surface-800));
}

.phx-empty__text {
    margin: 0;
    color: rgb(var(--color-surface-600));
}

/* ── A filter's label ── */

.phx-filter__label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(var(--color-surface-600));
}

.phx-filter__label svg {
    width: 1rem;
    height: 1rem;
}

@media (prefers-color-scheme: dark) {
    .phx-card__meta-row,
    .phx-empty__text,
    .phx-filter__label {
        color: rgb(var(--color-surface-400));
    }

    .phx-card__meta-row svg {
        color: rgb(var(--color-surface-500));
    }

    .phx-empty__title {
        color: rgb(var(--color-surface-200));
    }
}