/* LIST TOOLS */

    .header_tools{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1.5em;
        align-items: center;
        margin: 0 0 1.5em 0;
        position: relative;
    }

    .header_tools > :first-child{
        flex-grow: 10;
    }

    .autocomplete-component-results{
        color:#000;
    }


/* 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>");
	}
	.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>");
	}
	.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>");
	}


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

	.card_mode{
		display: flex;
		gap: .5em;
	}
	
    .card_mode-btn {
		content: " ";
        width: .8rem;
        height: .8rem;
        background-size: cover;
		display: block;
		opacity: .25;
        transition: opacity .3s ease;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
	
    body.dark-mode .card_mode-btn {
        filter: invert(100%);
    }

	.card_mode-btn.map{
        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>");
	}
	.card_mode-btn.timeline{
        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>");
	}

    .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-100);
        grid-column: 1 / -1;
    }

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

    .pagination .pagination-prev:before,
    .pagination .pagination-next:before{
        font-family: 'shiro-icon';
        color: var(--color-gray-500);
        line-height: 1em;
    }

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

    .pagination .pagination-prev:before{ content: "\E801"; }
    .pagination .pagination-next:before{ content: "\E802"; }
    

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


/* CARD GRID */

    .card_grid{

        --gap-w: 2em;
        --gap-h: 4em;
        --col-w: 240px;

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

    .card{
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 1em;
        background-color: var(--color-white);
        box-shadow: var(--shadow-medium);
    }

    .card_header{
    }

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

    .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: .2;
        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;
        /* scale: .95; object-fit: contain; */
    }

    .card_body{
        margin-inline: 1.25rem;
    }

    .card_type{
        margin-bottom: 1em;
        text-transform: uppercase;
        font-size: .6em;
        font-weight: bold;
        letter-spacing: .5px;
        color: var(--color-theme);
    }

    .card_title{
        font-size: 1.1em;
        line-height: 1.1em;
        font-weight: 800;
        word-break: break-word;
    }

    .card_description{
        font-size: .8em;
        margin-top: 1.5em;
        opacity: .75;
        line-height: 1.4;
        word-break: break-word;
    }

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

    .card_footer{
        border-top: 1px solid var(--color-theme);
        text-transform: uppercase;
        font-size: .6em;
        line-height: 1;
        letter-spacing: .05em;
        opacity: .75;
        display: flex;
        flex-direction: column;
        gap: 0.5em 1.25em;
        padding-top: 1rem;
        margin: 0 1.25rem .75rem 1.25rem;
        flex-wrap: wrap;
    }

    /* 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;
        }