/* Light mode style */

.sp-diva-listing {
    --sp-font-family--primary: 'Open Sans', sans-serif;
    --sp-font-family--icons: 'lucide';

    /* BORDER RADIUS */
    --sp-border-radius--brand-lg: 10rem;
    --sp-border-radius--brand-md: 5rem;
    --sp-border-radius--brand-sm: 2.5rem;

    /* COLORS */
    --sp-color-border--primary: var(--sp-color--gray-50);

    --sp-color-surface--brand: var(--sp-color--purple-primary-brand);
    --sp-color-surface--brand-dark: var(--sp-color--purple-plus-20);
    --sp-color-surface--brand-light: var(--sp-color--purple-light-light);

    --sp-color-surface--inverted: var(--sp-color--black-90);
    --sp-color-surface--inverted-secondary: var(--sp-color--black-80);

    --sp-color-surface--primary: var(--sp-color--white);
    --sp-color-surface--secondary: var(--sp-color--light-gray-20);

    --sp-color-surface--warning: var(--sp-color--yellow-100);
    --sp-color-surface--danger: var(--sp-color--red-100);

    --sp-color-text--brand: var(--sp-color--purple-primary-brand);
    --sp-color-text--brand-dark: var(--sp-color--purple-plus-20);

    --sp-color-text--inverted: var(--sp-color--white);

    --sp-color-text--primary: var(--sp-color--black-90);
    --sp-color-text--secondary: var(--sp-color--black-80);

    --sp-color--black-100: #000;
    --sp-color--black-90: #262626;
    --sp-color--black-80: #424242;
    --sp-color--gray-main-color: #797979;
    --sp-color--gray-50: #bbb;
    --sp-color--light-gray-20: #e4e4e4;
    --sp-color--white: #fff;
    --sp-color--purple-primary-brand: #961b81;
    --sp-color--purple-plus-20: #80166f;
    --sp-color--purple-light-20: #e7d5ea;
    --sp-color--purple-light-50: #c692c2;
    --sp-color--purple-light-light: #F7EFF6;
    --sp-color--dark-blue-20: #E9F5FF;
    --sp-color--dark-blue-50: #7ba2c2;
    --sp-color--dark-blue-primary: #003865;
    --sp-color--yellow-100: #ffb500;
    --sp-color--red-100: #E60000;

    --sp-color--text-primary: var(--sp-color--black-90);
    --sp-color--text-secondary: var(--sp-color--light-gray-20);
    --sp-color--text-invert: var(--sp-color--white);

    /* FONT SIZES */
    --sp-font-size--10xl: 4rem;
    --sp-font-size--11xl: 5rem;
    --sp-font-size--2xl: 1.5rem;
    --sp-font-size--3xl: 1.75rem;
    --sp-font-size--4xl: 2.375rem;
    --sp-font-size--5xl: 3rem;
    --sp-font-size--6xl: 4rem;
    --sp-font-size--7xl: 4rem;
    --sp-font-size--8xl: 4rem;
    --sp-font-size--9xl: 4rem;
    --sp-font-size--xl: 1.25rem;
    --sp-font-size--lg: 1.125rem;
    --sp-font-size--md: 1.125rem;
    --sp-font-size--sm: 1rem;
    --sp-font-size--xs: 0.75rem;

    --sp-font-size--button: 1rem;

    /* SPACING */
    --sp-spacing--1: 0.25rem;
    --sp-spacing--2: 0.5rem;
    --sp-spacing--3: 1rem;
    --sp-spacing--4: 1.5rem;
    --sp-spacing--5: 2rem;
    --sp-spacing--6: 2.5rem;
    --sp-spacing--7: 3rem;
    --sp-spacing--8: 3.5rem;
    --sp-spacing--9: 4rem;
    --sp-spacing--10: 4.5rem;
    --sp-spacing--11: 5rem;
    --sp-spacing--12: 5.5rem;
    --sp-spacing--13: 6rem;
    --sp-spacing--14: 6.5rem;
    --sp-spacing--15: 7rem;
    --sp-spacing--16: 7.5rem;

    /* PADDING */
    --sp-padding--lg: 0.875rem;
    --sp-padding--md: .5rem;
    --sp-padding--xs: 0.125rem;
}

/* DESKTOP */
@media screen and (min-width: 993px) {
    .sp-diva-listing {
        /* BORDER RADIUS */
        --sp-border-radius--brand-lg: 20rem;
        --sp-border-radius--brand-md: 10rem;
        --sp-border-radius--brand-sm: 5rem;

        /* FONT SIZES */
        --sp-font-size--10xl: 6rem;
        --sp-font-size--11xl: 6.5rem;
        --sp-font-size--2xl: 2rem;
        --sp-font-size--3xl: 2.5rem;
        --sp-font-size--4xl: 3rem;
        --sp-font-size--5xl: 3.5rem;
        --sp-font-size--6xl: 4rem;
        --sp-font-size--7xl: 4.5rem;
        --sp-font-size--8xl: 5rem;
        --sp-font-size--9xl: 5.5rem;
        --sp-font-size--xl: 1.5rem;
        --sp-font-size--lg: 1.25rem;
        --sp-font-size--md: 1.125rem;
        --sp-font-size--sm: 1rem;
        --sp-font-size--xs: 0.75rem;
        --sp-font-size--button: 1rem;
    }
}

.sp-diva-listing {
    margin-bottom: var(--sp-spacing--4);
}

.sp-diva-listing * {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    padding: 0;
}

.sp-diva-listing__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-spacing--3);
}

.sp-diva-listing__list-item {
    display: flex;
    flex-direction: column;
    border: var(--sp-color--purple-light-light) 1px solid;
    padding: var(--sp-spacing--3);
    align-self: stretch;
}

.sp-diva-listing__list-item__tags {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sp-spacing--1);
    row-gap: var(--sp-spacing--1);
}

.sp-diva-listing__list-item__tag {
    background-color: var(--sp-color--dark-blue-20);
    color: var(--sp-color--dark-blue-primary);
    padding: calc(var(--sp-spacing--1) / 2) var(--sp-spacing--2);
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--sp-font-family--primary);
    font-size: .825rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
}

.sp-diva-listing__list-item__title {
    margin-top: var(--sp-spacing--2);
}

.sp-diva-listing__list-item__title a {
    color: var(--sp-color--text-primary) !important;

    /* subheading3 */
    font-family: var(--sp-font-family--primary);
    font-size: var(--sp-font-size--xl);
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
}

.sp-diva-listing__list-item__title a:hover {
    text-decoration: underline !important;
}

.sp-diva-listing__list-item__authors {
    margin-top: var(--sp-spacing--1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-spacing--1);
}

.sp-diva-listing__list-item__details {
    margin-top: var(--sp-spacing--1);
}

.sp-diva-listing__list-item__author,
.sp-diva-listing__list-item__detail {
    color: var(--sp-color-text--primary) !important;

    font-family: var(--sp-font-family--primary) !important;
    font-size: var(--sp-font-size--sm) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

a.sp-diva-listing__list-item__detail {
    text-decoration: none !important;
}

a.sp-diva-listing__list-item__detail:hover {
    text-decoration: underline !important;
}

/* Show more publications */
.sp-diva-listing__show-more {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-spacing--4);
}

.sp-diva-listing__show-more-button {
    display: inline-flex;
    height: 3rem;
    max-height: 3rem;
    padding: 0 var(--sp-spacing--4);
    justify-content: center;
    align-items: center;

    background-color: var(--sp-color-surface--brand);
    border-radius: 3rem;

    color: var(--sp-color--text-invert);
    font-family: var(--sp-font-family--primary);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
}

.sp-diva-listing__show-more-button:hover {
    background-color: var(--sp-color-surface--brand-dark);
    cursor: pointer;
}

.sp-diva-listing__show-more-button:focus {
    outline-offset: 5px !important;
    outline-width: 5px !important;
}

/* Skeleton with Animation */
.sp-diva-skeleton-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-spacing--3);
}

.sp-diva-skeleton-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-spacing--2);
    padding: var(--sp-spacing--3);
    border: #e0e0e0 1px solid;
}

.sp-diva-skeleton-row {
    display: flex;
    gap: var(--sp-spacing--2);
}

.sp-diva-skeleton-column {
    width: 100%;
    background: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.sp-diva-skeleton-column::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: skeleton-shimmer 1.2s infinite;
}



@keyframes skeleton-shimmer {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
}