/* HEADER */

    main.list header{
        display: grid;
        grid-template-columns: 1fr auto;
        margin-bottom: 3em;
        @media (width < 800px ){
            display: block;
        }
    }
    main.listByType header{
        margin-bottom: 1em;
    }

    main.list header h1{
        line-height: 1;
        display: inline;
    }

    main.list header > *{
    }

    header .total{
        font-size: .8em;
        font-weight: 200;
        opacity: 0.5;
        letter-spacing: .5px;
    }
    header .total::before{
        content:' \2014 ';
        margin-inline: .5em;
    }

    .tools-list-search{
        display: flex;
        gap: .75em;
    }

    .header_tools{
        grid-row: span 2;
        align-self: end;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1.25em;
        align-items: center;
        position: relative;
        margin-bottom: 0.2em;
        @media (width < 800px){
            justify-content: start;
        }
    }

    .header_tools > :first-child{
        flex-grow: 10;
        line-height: 1;
        align-self: end;
        font-size: .9em;
        @media (width < 800px){
            flex-grow: 0;
        }
    }

    .autocomplete-component-results{
        color: var(--color-black);
    }


/* CARD LAYOUT */

	.card_layout{
		display: flex;
		gap: .5em;
	}

	.card_layout-btn {
		display: block;
		cursor: pointer;
	}
	
	.card_layout-btn input{ 
		display: none;
	}

	.card_layout-btn .icon:after{
		content: " ";
        width: .8rem;
        height: .8rem;
        background-size: cover;
		display: block;
		opacity: .25;
        transition: opacity .3s ease;
	}

	body.dark-mode .card_layout-btn .icon:after{
		filter: invert(100%);
	}

	.card_layout-btn input:hover + .icon:after,
	.card_layout-btn input:checked + .icon:after{
		opacity: .75;
	}

	.card_layout-btn input + .icon.grid:after{
		background-image: url("data:image/svg+xml;utf8,<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'> <rect width='13.92' height='13.92'/> <rect y='23.35' width='13.92' height='13.3'/> <rect y='46.7' width='13.92' height='13.3'/> <rect x='23.04' width='13.92' height='13.92'/> <rect x='23.04' y='23.35' width='13.92' height='13.3'/> <rect x='23.04' y='46.7' width='13.92' height='13.3'/> <rect x='46.08' width='13.92' height='13.92'/> <rect x='46.08' y='23.35' width='13.92' height='13.3'/> <rect x='46.08' y='46.7' width='13.92' height='13.3'/> </svg>");
        filter: invert(1);
	}
	.card_layout-btn input + .icon.gallery:after{
        background-image: url("data:image/svg+xml;utf8,<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'> <rect width='13.92' height='36.65'/> <rect y='46.7' width='13.92' height='13.3'/> <rect x='23.04' width='13.92' height='13.92'/> <rect x='23.04' y='23.35' width='13.92' height='36.65'/> <rect x='46.08' width='13.92' height='36.65'/> <rect x='46.08' y='46.7' width='13.92' height='13.3'/> </svg>");
        filter: invert(1);
	}
	.card_layout-btn input + .icon.list:after{
        background-image: url("data:image/svg+xml;utf8,<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'> <rect width='60' height='13.92'/> <rect y='23.35' width='60' height='13.3'/> <rect y='46.7' width='60' height='13.3'/> </svg>");
        filter: invert(1);
	}


/* --- LIST MODE --- */

	.card_mode{
		display: flex;
		gap: 1.25em;
        @media(width < 800px){
            display: none;
        }
	}
	
    .card_mode-btn {
        display: flex;
        gap: .5em;
        /* opacity: .75; */
        transition: opacity .3s ease;
        border: 0;
        background: transparent;
        cursor: pointer;
        color: var(--color-theme);
        align-items: center;
        text-transform: uppercase;
        font-size: .6em;
        font-weight: 600;
    }
    
    .card_mode-btn::before {
		content: " ";
        width: .8rem;
        height: .8rem;
        background-size: cover;
		display: block;
        transition: opacity .3s ease;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
	
    /* body.dark-mode .card_mode-btn {
        filter: invert(100%);
    } */

	.card_mode-btn.btn-map::before{
        background-image: url("data:image/svg+xml;utf8,<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'> <path d='M30,60l-17.53-17.53c-4.72-4.69-7.32-10.95-7.32-17.62C5.15,11.15,16.3,0,30,0s24.85,11.15,24.85,24.85c0,6.68-2.6,12.94-7.33,17.63l-17.52,17.52ZM30,6.93c-9.88,0-17.92,8.04-17.92,17.92,0,4.81,1.88,9.32,5.29,12.71l12.64,12.64,12.63-12.63c3.42-3.39,5.29-7.9,5.29-12.72,0-9.88-8.04-17.92-17.92-17.92Z'/> <path d='M30,33.98c-5.03,0-9.13-4.1-9.13-9.13s4.1-9.13,9.13-9.13,9.13,4.1,9.13,9.13-4.1,9.13-9.13,9.13ZM30,21.46c-1.87,0-3.39,1.52-3.39,3.39s1.52,3.39,3.39,3.39,3.39-1.52,3.39-3.39-1.52-3.39-3.39-3.39Z'/> </svg>");
        filter: var(--tint-theme);
    }
	.card_mode-btn.btn-timeline::before{
        background-image: url("data:image/svg+xml;utf8,<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'> <path d='M30,37.22c-.64,0-1.28-.18-1.84-.54-.99-.63-1.59-1.72-1.59-2.9v-13.15c0-1.9,1.54-3.43,3.43-3.43s3.43,1.54,3.43,3.43v7.75l3.32-1.56c1.71-.81,3.76-.07,4.57,1.65.81,1.72.07,3.76-1.65,4.57l-8.21,3.85c-.46.22-.96.33-1.46.33Z'/> <path d='M33.43,7.99v-1.15c1.77-.13,3.18-1.6,3.18-3.41s-1.54-3.43-3.43-3.43h-6.35c-1.9,0-3.43,1.54-3.43,3.43s1.4,3.27,3.17,3.41v1.15C13.83,9.68,3.97,20.6,3.97,33.78c0,14.35,11.68,26.03,26.03,26.03s26.03-11.68,26.03-26.03c0-13.19-9.86-24.11-22.59-25.79ZM30,52.95c-10.57,0-19.16-8.6-19.16-19.16S19.43,14.62,30,14.62s19.16,8.6,19.16,19.16-8.6,19.16-19.16,19.16Z'/> </svg>");
        filter: var(--tint-theme);
	}

    .card_mode-btn:hover {
        opacity: 1;
    }    


/*  PAGINATION  */

    .pagination{
        /* position: sticky;
        bottom: 0; */
        display: flex;
        gap: 1em;
        font-size: 1.2em;
        justify-content: center;
        padding: 1.2em 0;
        background-color: var(--color-gray-800);
        grid-column: 1 / -1;
        z-index: 9;
    }

    .pagination .pagination-item-current{
        font-weight: 700;
        color: var(--color-theme);
    }

    .pagination .pagination-prev:before,
    .pagination .pagination-next:before{
        color: var(--color-gray-500);
        line-height: 1em;
        font-weight: 900;
    }

    .pagination .pagination-prev:hover,
    .pagination .pagination-next:hover{
        text-decoration: none;
    }

    .pagination .pagination-prev:before{ content: "<"; }
    .pagination .pagination-next:before{ content: ">"; }
    

    .pagination .pagination-item.current{
        color: var(--color-theme);
    }


/* CARD GRID */

    .card_grid{

        --gap-w: 1.5em;
        --gap-h: 3em;
        --col-w: 220px;

        display: grid;
        /* grid-template-columns: repeat(auto-fill, minmax( var(--col-w) , 1fr)); */
        grid-template-columns: repeat(auto-fill, minmax(min(var(--col-w), 100%), 1fr));
        gap: var(--gap-h) var(--gap-w);
        width: 100%;

        @media( width < 800px){
            --col-w: 130px;
            --gap-w: 1.25em;
        }
    }

    .card{
        display: grid;
        grid-template-rows: auto 1fr auto;
        /* padding-bottom: 2em; */
        margin-bottom: 1.5em;
        gap: 1.25em;
        background-color: var(--color-gray-900);
        box-shadow: var(--shadow-medium);
        transition: all .2s ease;
        position: relative;
        height: 100%;
        overflow: hidden;
    }
        .card .card_more{
            display: flex;
            gap: .5em;
            align-items: center;
            color: var(--color-theme);
            position: absolute;
            bottom: .5em;
            right: .75em;
            line-height: 1.25rem;
            transition: all .2s ease;
        }

        .card .card_more::after{
            content: '+';
            font-weight: 900;
            font-size: 1.8em;
        }
        
        .card .card_more span{
            opacity: 0;
            pointer-events: none;
            transition: .3s;
            text-transform: uppercase;
            font-size: .65em;
            font-weight: 300;
        }

        .card .card_more:hover span{
            opacity: 1;
        }

    .card:hover{
        transform: translateY(-5px);
        box-shadow: rgb(0, 0, 0) 0px 10px 30px -10px;
    }

    .card_image{
        --img-ratio: 1.1;
        width: 100%;
        aspect-ratio: var(--img-ratio);
        background-color: #eee;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

    .card-WebStory .card_image{
        --img-ratio: 0.75;
    }

    .card_image .card_image_link{
        position: absolute;
        inset: 0 0 0 0;
        display: block;
    }

    .card_image .card_image_zoom{
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        opacity: 0;
        background: linear-gradient(-45deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
        color: #fff;
        padding: 2em .75em .75em 2em;
        transition: opacity .3s ease;
    }
    
    .card_image .card_image_zoom::before{
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        opacity: .5;
        transition: opacity .3s ease;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'><path d='M58.62,52.88l-7.81-7.81c3.22-4.29,5.13-9.62,5.13-15.39,0-14.17-11.53-25.69-25.69-25.69S4.55,15.51,4.55,29.68s11.53,25.69,25.69,25.69c5.48,0,10.56-1.73,14.73-4.66l7.91,7.91c.79.79,1.83,1.19,2.87,1.19s2.08-.4,2.87-1.19c1.58-1.58,1.58-4.15,0-5.74ZM30.25,47.88c-10.04,0-18.2-8.16-18.2-18.2S20.21,11.48,30.25,11.48s18.2,8.16,18.2,18.2-8.17,18.2-18.2,18.2Z'/><polygon points='33.68 17.47 26.81 17.47 26.81 26.25 17.85 26.25 17.85 33.11 26.81 33.11 26.81 42.2 33.68 42.2 33.68 33.11 42.58 33.11 42.58 26.25 33.68 26.25 33.68 17.47'/></svg>");
        background-size: cover;
        filter: invert(100%);
    }
    
    .card_image .card_image_zoom.video::before{
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'><path class='st0' d='M30.24,4.3c-14.17,0-25.69,11.53-25.69,25.69s11.53,25.69,25.69,25.69,25.69-11.53,25.69-25.69S44.4,4.3,30.24,4.3ZM30.24,48.19c-10.04,0-18.2-8.16-18.2-18.2S20.2,11.79,30.24,11.79s18.2,8.16,18.2,18.2-8.17,18.2-18.2,18.2Z'/><polygon class='st0' points='24.47 41.48 41.18 30.31 24.47 19.14 24.47 41.48'/></svg>");
    }
    
    .card_image:hover .card_image_zoom{
        opacity: 1;
    }

    .card_image .card_image_zoom:hover::before{
        opacity: 1;
    }

    .card_image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        object-position: center 25%;
        scale: 1.05;
        /* scale: .95; object-fit: contain; */
        transition: transform 1.5s ease;
    }

    .card_body{
        margin-inline: 1.25em;
    }

    .card_type{
        margin-bottom: 0.75em;
        text-transform: uppercase;
        font-size: .65em;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: .5px;
        color: var(--color-theme);
        text-wrap: pretty;
    }

    .card .card_addtype{
        display: inline;
        font-weight: 200;
        text-transform: none;
        font-size: 1.1em;
    }

    .card .card_addtype::before{
        content: "/";
        margin-inline: .5em;
    }

    .card.card-ExhibitionEvent .card_addtype{
        display: block;
        font-weight: 600;
        background-color: var(--color-theme);
        color: var(--color-black);
        position: absolute;
        top: 1em;
        right: 1em;
        padding: .5em .75em .25em .75em;
    }

    .card.card-ExhibitionEvent .card_addtype::before{
        content: initial;
    }

    .card_title{
        font-size: 1.1em;
        line-height: 1.2em;
        font-weight: 600;
        text-wrap: pretty;
        overflow-wrap: break-word;
    }
    .card_subtitle{
        font-weight: 200;
        font-size: .9em;
        /* margin-left: .5em; */
        display: block;
    }

    .card_description{
        font-size: .75em;
        font-weight: 300;
        margin-top: 1.25em;
        opacity: .75;
        line-height: 1.4;
    }

    .card_date{
        font-size: .7em;
        font-weight: 400;
        color: var(--color-gray-400);
        margin-top: 0.3em;
    }

    .card_footer:not(:empty){
        margin: 0 1.25em .75em 1.25em;
    }

    /* --- */


.card_grid_Person,
.card_grid_Language,
.card_grid_Organization,
.card_grid_Place{
    --gap-w: 2em;
    --gap-h: 2em;
    --col-w: 260px;
}

.card_grid_ExhibitionEvent{
    --gap-w: 2em;
    --gap-h: 2em;
    --col-w: 260px;
}

.card_grid_Article{

    --gap-w: 3em;
    --gap-h: 2em;
    --col-w: 400px;

    & .card{
        grid-template-columns: 40% 1fr;
        grid-template-rows: 1fr;
        gap: 0 .5em;
    }
    & .card_image{
        --img-ratio: auto;
        grid-row-end: span 2;
    }
    & .card_body {
        margin: 1em 1.25em 0 1.25em;
    }
}

.card-Bibliographic .card_image {
    background-color: var(--color-gray-900);
}

.card-Bibliographic .card_image img {
    object-fit: contain;
    object-position: center center;
    scale: .9;
}

    /* ref */

    .card_grid.ref-grid {
        --gap-w: 2em;
        --gap-h: 2em;
        --col-w: 280px;
    }

    .card.ref{
        grid-template-columns: auto 1fr ;
        grid-template-rows: auto 1fr;
        gap: 0;
        align-items: center;
    }

    .card.ref .card_image{
        margin: 0.8em;
        display: block;
        width: 3.5em;
        height: 3.5em;
        background-color: var(--color-gray-800);
        border-radius: 50%;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .card.ref.card-Place .card_image{
        background-image: url('../assets/marker.png');
    }
    .card.ref.card-Person .card_image{
        background-image: url('../assets/person.png');
    }
    .card.ref.card-Organization .card_image{
        background-image: url('../assets/organization.png');
    }
    .card.ref.card-Language .card_image{
        background-image: url('../assets/language.png');
    }
    .card.ref .card_image img{
        box-sizing: border-box;
    }
    .card.ref .card_image:has(img){
		background: var(--color-white);
        background-image: none !important;
	}

    .card.ref .card_body{
        padding: .5em .5em .5em 0;
        margin: 0;
    }
    .card.ref .card_body.desc{
        grid-column: 2;
        align-self: start;
        margin-top: -1.8em;
        padding: 0 1em 1em 0;
    }
    .card.ref .card_title{
        font-size: 1em;
        line-height: 1.1em;
        font-weight: 600;
    }


    /* ref */

    .card_grid.research {
        margin-top: 2em;
    }

    .card_grid.research .card_footer {
        display: none;
    }


    /* list by type */

    .list-type{
        display: flex;
        flex-direction: column;
        gap: 3em;
    }

    .list-type-item{
        position: relative;
    }

    .list-type-item:not(:first-child)::before{
        content: '';
        width: 100%;
        height: 1px;
        background-color: var(--color-theme);
        position: absolute;
        top: 0;
        overflow: hidden;
    }

    .list-type-header{
        margin-block: 2em .75em;
    }

    .list-type-header .related-items-stage-title{
        font-size: 1.4em;
        display: inline-block;
        margin-right: .5em;
    }
    .list-type-header .total{
        color: var(--color-gray-400);
        font-size: .8em;
        font-weight: 300;
    }
    
    .card_grid.search-list {
        --gap-w: 1em;
        --gap-h: 1em;
        --col-w: 160px;
        font-size: 0.75em;
    }
    .card_grid.search-list .card_description{
        display: none;
    }

    .box-more{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-block: 1.5em;
    }


    /* layout GALLERY */ 

        .card_grid[data-layout=gallery]{
            display: block;
            columns: var(--col-w);
            column-gap: var(--gap-w);
        }

        .card_grid[data-layout=gallery] .card{
            margin-bottom: var(--gap-w);
            break-inside: avoid;
        }

        .card_grid[data-layout=gallery] .card_image{
            --img-ratio: initial;
        }


    /* layout LIST */ 

        .card_grid[data-layout=list]{
            --gap-h: 2em;
            grid-template-columns: 1fr;
        }

        .card_grid[data-layout=list] .card{
            grid-template-rows: 1fr auto;
            grid-template-columns: max(15%, 200px) 1fr;
        }
        
        .card_grid[data-layout=list] .card_image{
            --img-ratio: 1;
            grid-row: span 2;
            align-self: stretch;
        }
        
        .card_grid[data-layout=list] .card_body{
            margin: 1.25rem 2rem 0 .75rem;
        }

        .card_grid[data-layout=list] .card_footer{
            flex-direction: row;
            padding-top: .75rem;
            margin: 1.25rem 2em 1.25em .75rem;
        }

/* --- SEARCH --- */


    .searchFilterBtn{
        background: transparent;
        outline: 0;
        border: 0;
        /* padding: .25em 1em; */
        font-size: .6em;
        font-weight: 500;
        text-transform: uppercase;
        color: var(--color-white);
        cursor: pointer;
        opacity: .5;
        transition: all .3s ease;
    }
    
    .searchFilterBtn:hover{
        opacity: 1;
    }
    
    .list-order select{
        background: var(--color-gray-800);
        outline: 0;
        border: 0;
        padding: .25em;
        font-size: .6em;
        font-weight: 500;
        color: var(--color-white);
        text-transform: uppercase;
        opacity: .5;
        cursor: pointer;
        transition: all .3s ease;
    }
    .list-order select:hover{
        opacity: 1;
    }
    
    .list-order select option{
        color: var(--color-white);
        text-transform: uppercase;
    }

    /* ----- FANCYBOX ----- */

    .modal-item.fancybox-content{
        width: min(1280px, 90%);
        height: 75vh;
        padding: 0;
        margin: 0;
        overflow: hidden;
        background-color: var(--color-gray-800) !important;
    }
    
    .modal-item main{
        background-color: transparent;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 4fr 2fr;
        grid-template-rows: 1fr 10fr auto;
        gap: 2em 0;
        padding: 0;

            width: 100%;
            height: 100%;
            box-sizing: border-box;

        overflow: hidden;
        font-size: .9em;
    }
    
    .modal-item .modal-item-img{
        width: 100%;
        height: 100%;
        grid-row: span 3;
        background-color: var(--color-black);
        padding: 1em;
        align-items: center;
        display: flex;
        justify-content: center;
    }
    
    .modal-item .modal-item-img > a{
        width: 100%;
        height: 100%;
        display: block;
        outline: 0;
    }
    
    .modal-item img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .modal-item *::-webkit-scrollbar {
        width: 15px;
    }

    /* Track */
    .modal-item *::-webkit-scrollbar-track {
        background: var(--color-900);
        border-radius: 10px;
    }
    
    .modal-item *::-webkit-scrollbar-track {
        box-shadow: inset 0 0 10px 10px transparent;
        border: solid 2px transparent;
    }

    .modal-item *::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 10px 10px var(--color-theme);
        border: solid 6px transparent;
        border-radius: 12px;
    }

    .modal-item .about.row-btn{
        margin-bottom: 2em;
    }

    .modal-item header{
        margin: 1.5em 0 0 0;
        padding-inline: 2em;
        font-size: .9em;
    }

    .modal-item header .item-header-container{
        margin: 0;
    }

    .modal-item section{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 2em 1.5em 2em;
        position: relative;
    }

    .modal-item .default-item-disclaimer{
        margin: 15%;
        text-wrap: balance;
        text-align: center;
    }

    .modal-item .property-row{
        display: block;
    }

    .modal-item .item-properties .copyright{
        margin-top: 3em;
    }

    @media ( width < 800px) {

        .modal-item.fancybox-content{
            width: 90vw;
            height: 90vh;
        }

        .modal-item main{
            width: 100%;
            height: 100%;
            grid-template-columns: 1fr;
            grid-template-rows: 50% auto 1fr auto;
            gap: 1em;
        }

        .modal-item .modal-item-img{
            grid-row: span 1;
        }      

        .modal-item .property-row{
            margin-bottom: .25em;
        }
        
    }