/*
 * Collection Showcase public styles
 * Version 0.1.7
 *
 * The default Profile and Compact layouts are tuned for scholarly project
 * team/directory pages while remaining usable for other collections.
 */

.collection-showcase {
    --cs-accent: #c72e2e;
    --cs-text: inherit;
    --cs-muted: #666;
    --cs-rule: rgba(0, 0, 0, .16);
    --cs-soft: rgba(0, 0, 0, .035);
    width: 100%;
    color: var(--cs-text);
}

.collection-showcase-title {
    margin-bottom: 1.5rem;
}

.collection-showcase-section {
    margin: 0 0 3rem;
}

.collection-showcase-section + .collection-showcase-section {
    padding-top: .25rem;
}

.collection-showcase-section-title {
    margin: 0 0 1.25rem;
    padding: 0 0 .45rem;
    font-size: 1.85em;
    line-height: 1.2;
    font-weight: 500;
    border-bottom: 1px solid var(--cs-rule);
}

.collection-showcase-items {
    width: 100%;
}

/* -------------------------------------------------------------------------
   Profile layout — portrait + biography
   ------------------------------------------------------------------------- */

.collection-showcase .cs-profile-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 0 0 1.45rem;
}

.collection-showcase .cs-profile-item + .cs-profile-item {
    padding-top: 1.45rem;
    border-top: 1px solid var(--cs-rule);
}

.collection-showcase .cs-profile-item .cs-image {
    flex: 0 0 175px;
    width: 175px;
    margin: 0;
}

.collection-showcase .cs-profile-item .cs-image img {
    display: block;
    width: 175px;
    height: 225px;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.collection-showcase .cs-profile-item .cs-content {
    flex: 1 1 auto;
    min-width: 0;
}

.collection-showcase .cs-profile-item .cs-primary {
    display: block;
    box-sizing: border-box;
    margin: 0 0 .6rem;
    padding: .42rem .65rem;
    background: #c72e2e !important;
    background: var(--cs-accent) !important;
    color: #fff !important;
    font-size: 1.08em;
    line-height: 1.3;
    font-weight: 700;
}

.collection-showcase .cs-profile-item .cs-secondary {
    margin: 0 0 .55rem;
    color: var(--cs-muted);
    font-weight: 600;
    line-height: 1.35;
}

.collection-showcase .cs-profile-item .cs-body {
    line-height: 1.58;
}

.collection-showcase .cs-profile-item .cs-body p {
    margin-top: 0;
    margin-bottom: .75rem;
}

.collection-showcase .cs-profile-item .cs-body p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Compact layout — intended for former members / short directory entries
   ------------------------------------------------------------------------- */

.collection-showcase-layout-compact .collection-showcase-items {
    display: block;
}

.collection-showcase .cs-compact-item {
    margin: 0;
    padding: .55rem .15rem;
    line-height: 1.5;
}

.collection-showcase .cs-compact-item + .cs-compact-item {
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.collection-showcase .cs-compact-line {
    line-height: 1.55;
}

.collection-showcase .cs-compact-item .cs-primary {
    font-weight: 700;
}

.collection-showcase .cs-compact-item .cs-secondary {
    color: inherit;
    font-weight: 600;
}

.collection-showcase .cs-compact-item .cs-body {
    color: inherit;
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.collection-showcase-layout-cards .collection-showcase-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.collection-showcase .cs-card-item {
    box-sizing: border-box;
    border: 1px solid var(--cs-rule);
    background: var(--cs-soft);
    padding: 1rem;
}

.collection-showcase .cs-card-item .cs-image {
    margin-bottom: .8rem;
}

.collection-showcase .cs-card-item .cs-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.collection-showcase .cs-card-item .cs-primary {
    margin-top: 0;
    margin-bottom: .35rem;
}

.collection-showcase .cs-card-item .cs-secondary {
    margin-bottom: .55rem;
    color: var(--cs-muted);
    font-weight: 600;
}

.collection-showcase .cs-card-item .cs-body {
    line-height: 1.5;
}

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

.collection-showcase .cs-list-item {
    padding: .75rem .1rem;
    border-bottom: 1px solid var(--cs-rule);
}

.collection-showcase .cs-list-item .cs-secondary {
    margin-top: .2rem;
    color: var(--cs-muted);
}

/* -------------------------------------------------------------------------
   Empty / message states
   ------------------------------------------------------------------------- */

.collection-showcase-empty,
.collection-showcase-message {
    padding: .8rem 0;
    color: var(--cs-muted);
    font-style: italic;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .collection-showcase-section {
        margin-bottom: 2.25rem;
    }

    .collection-showcase-section-title {
        font-size: 1.55em;
    }

    .collection-showcase .cs-profile-item {
        display: block !important;
        padding-bottom: 1.5rem;
    }

    .collection-showcase .cs-profile-item + .cs-profile-item {
        padding-top: 1.5rem;
    }

    .collection-showcase .cs-profile-item .cs-image {
        width: 175px;
        margin-bottom: .8rem;
    }

    .collection-showcase .cs-profile-item .cs-image img {
        width: 175px;
        height: 225px;
    }

    .collection-showcase .cs-profile-item .cs-primary {
        margin-bottom: .5rem;
    }
}

@media (max-width: 420px) {
    .collection-showcase .cs-profile-item .cs-image,
    .collection-showcase .cs-profile-item .cs-image img {
        width: 150px;
    }

    .collection-showcase .cs-profile-item .cs-image img {
        height: 193px;
    }
}