/* =========================== */
/* Redacted Text CSS */
/* =========================== */

span.redacted {
    position: relative;
    white-space: pre;
}
span.redacted:after{
    background: var(--z-theme-color);
    border-radius: 0.1em;
    box-shadow: 0 0 1px rgba(0,0,0,0.35);
    content: " ";
    width: 100%;
    height: 1.5em;
    left: 0;
    position: absolute;
    transform: skewY(-5deg) rotate(5deg);
}

span.redacted.short {
    width: 4em;
}

/* =========================== */
/* Photo View Selector CSS */
/* =========================== */

body:not(:has(main .view-tiles)):not(:has(main .view-details)) .view-menu-button {
    display: none;
}

body:has(#view-list-tiles:checked) .discrete-view-selector-tiles {
    border-style: solid;
}

body:has(#view-list-detailed:checked) .view-tiles {
    display: none;
}

body:has(#view-list-tiles:checked) .view-details {
    display: none;
}


body:has(#view-list-detailed:checked) .view-tiles-o {
    opacity: 0;
}

body:has(#view-list-tiles:checked) .view-details-o {
    opacity: 0;
}

/* =========================== */
/* Tiles view CSS */
/* =========================== */

.photolist.view-tiles {
    padding-top: 2rem;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
}

.photolist.view-tiles a {
    display: block;
    height: calc( 100% / 2) ;
    width: calc( 100% / 2) ;
    padding:0;
    margin:0;
}

.photolist.view-tiles picture.list-view-tile{
    display: block;
    padding:0;
    margin:0;
}

@media only screen and (min-width: 300px) {
    .photolist.view-tiles a{
        height: calc( 100% / 2) ;
        width: calc( 100% / 2) ;
    }
}

@media only screen and (min-width: 400px) {
    .photolist.view-tiles a{
        height: calc( 100% / 3) ;
        width: calc( 100% / 3) ;
    }
}



@media only screen and (min-width: 600px) {
    .photolist.view-tiles a{
        height: calc( 100% / 4) ;
        width: calc( 100% / 4) ;
    }
}
@media only screen and (min-width: 700px) {
    .photolist.view-tiles a{
        height: calc( 100% / 4) ;
        width: calc( 100% / 4) ;
    }
}

.photolist.view-tiles picture.list-view-tile>img{
    display: block;
    height: 100%;
    width: 100%;
    padding:0;
    margin:0;
}
.photolist.view-tiles a,
.photolist.view-tiles picture.list-view-tile{
    z-index: 1;
}
main .photolist.view-tiles picture.list-view-tile>img{
    /*transition: filter 0.3s ease-in-out, transform 0.05s ease-in-out, z-index ;*/
    filter: grayscale(100%);
    z-index: 1;
}

.z-theme-light  main .photolist.view-tiles picture.list-view-tile>img{
    /*transition: filter 0.3s ease-in-out, transform 0.05s ease-in-out, z-index ;*/
    filter: grayscale(100%) opacity(0.8);
    z-index: 1;
}

.photolist.view-tiles a:has(img:hover),
.photolist.view-tiles picture.list-view-tile:has(img:hover){
    z-index: 91;
}
.photolist.view-tiles picture.list-view-tile>img:hover{
    /*filter: grayscale(0%);*/
    /*transform: scale(1.3);*/
    z-index: 91;
    border-radius: 2px;
    animation: grow-and-reveal 0.2s forwards;
    box-shadow: 0 4px 8px var(--z-theme-background-color);
}

.view-details.photolist{
    /* reset ul/li style*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top:2rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.view-details.photolist>*{
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 530px) {
    .view-details.photolist>*{
        flex-direction: column;
        gap: 1rem;
    }
    .view-details.photolist>*:after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: var(--z-theme-color);
        opacity: 0.3;
        margin-top: 1rem;
    }
}

.view-details.photolist>* a:has(picture),
.view-details.photolist>* picture,
.view-details.photolist>* img{
    margin:0;
    padding: 0;
    height:10rem;
    width: 10rem;

    z-index: 1;
}

.view-details.photolist>* img{
    filter: grayscale(100%);
    border-radius: 2px;
}

.view-details.photolist>* table{
    height: 0px;
}

.view-details.photolist>* img,
.view-details.photolist>* picture,
.view-details.photolist>* {
}
/*.view-details.photolist>*:hover picture ,*/
.view-details.photolist>*:hover img {
    animation: grow-and-reveal 0.2s forwards;
    z-index: 80;
    box-shadow: 0 4px 8px var(--z-theme-background-color);
}
.view-details.photolist>*:hover a,
.view-details.photolist>*:hover picture {
    z-index: 80;
}

@keyframes grow-and-reveal {
    0% {
        filter: grayscale(100%);
        transform: scale(0.9);
        /*opacity: 0.5;*/
        z-index: 80;
        /* shadow effect to indicate layering */
        /*box-shadow: 0 4px 0 var(--z-theme-background-color);*/
    }
    2%{

        transform: scale(1);
        opacity: 1;
    }
    100% {
        filter: grayscale(0%);
        transform: scale(1.3);
        opacity: 1;
        z-index: 80;
        /*box-shadow: 0 4px 8px var(--z-theme-background-color);*/
    }
}


.view-details.taxolist{
    /* reset ul/li style*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top:2rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.view-details.taxolist .pic-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    --square-size: 3rem;
}
.view-details.taxolist .pic-preview a{
    display: block;
    height:var(--square-size);
    width:var(--square-size);
    text-decoration: none;
}
.view-details.taxolist .tinny-tinny img{
    height:var(--square-size);
    width:var(--square-size);
    filter: grayscale(100%);
}

.view-details.taxolist .tinny-tinny img:hover {
    /*transition: filter 0.3s ease-in-out;*/
    filter: grayscale(0%);
}


.view-tiles.taxolist{
    /* reset ul/li style*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top:2rem;

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.view-tiles.taxolist a.hidden-link{
    text-decoration: none;
}

.view-tiles.taxolist li img{
    display: block;
    height: 100%;
    width: 100%;
    padding:0;
    margin:0;
}

.view-tiles.taxolist li {
    display: block;
    height: calc( (100% - 1rem) / 2 ) ;
    width: calc( (100% - 1rem) / 2 ) ;
    padding:0;
    margin:0;
    position:relative;
}

.view-tiles.taxolist li a>span{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    background-color: var(--z-theme-background-color-fade);
}
.view-tiles.taxolist li a:active>span,
.view-tiles.taxolist li a:focus>span,
.view-tiles.taxolist li a:hover>span{
    background-color: var(--z-theme-color);
    color: var(--z-theme-background-color);
}

.view-tiles.taxolist li img{
    filter: grayscale(100%) brightness(30%);
}


@media only screen and (min-width: 800px) {
    .view-tiles.taxolist li{
        height: calc( (100% - 3rem) / 4 ) ;
        width: calc( (100% - 3rem) / 4 ) ;
    }
}



article>figure{
    margin:0;
    padding:0;
    width: 100%;
    max-width: 100%;
    /*min-height: 60vh;*/
    /*max-height: 60vh;*/
    display: flex;
    justify-content: center;
}
article>figure>*{
    display: block;
}

article>figure img{
    box-shadow: 0 4px 8px #00000080;
    border-radius: 4px;
    /*width: auto;*/
    /*max-height: 60vh;*/
    /*max-height: 100vh;*/
}


article header h1{
    display: flex;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
article header h1 a{
    margin:0;
    padding: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: nowrap;
}



article header h1 hr{
    margin:0;
}

/* =========================== */
/* Homepage Tiles CSS */
/* =========================== */

/* Prevent scrolling - hide overflow */
.photolist.homepage-tiles {
   /* max-height: 50vh;
    overflow: hidden;*/
}

/* Smaller tiles for homepage - more columns */
.photolist.homepage-tiles a {
    height: calc( 100% / 4) ;
    width: calc( 100% / 4) ;
}

@media only screen and (min-width: 400px) {
    .photolist.homepage-tiles a{
        height: calc( 100% / 6) ;
        width: calc( 100% / 6) ;
    }
}

@media only screen and (min-width: 600px) {
    .photolist.homepage-tiles a{
        height: calc( 100% / 8) ;
        width: calc( 100% / 8) ;
    }
}

@media only screen and (min-width: 900px) {
    .photolist.homepage-tiles a{
        height: calc( 100% / 15) ;
        width: calc( 100% / 15) ;
    }
}

/* Reduced brightness for homepage tiles */
.photolist.homepage-tiles picture.list-view-tile>img{

}

.z-theme-dark .photolist.homepage-tiles picture.list-view-tile>img{
    filter: grayscale(100%) brightness(40%) ;
}

.z-theme-light .photolist.homepage-tiles picture.list-view-tile>img{
    /*opacity: 0.8;*/
    filter: grayscale(100%) brightness(100%) opacity(80%);
}

/* No hover scaling for homepage tiles */
.photolist.homepage-tiles picture.list-view-tile>img:hover{
    animation: none;
    /*opacity: 1;*/
    filter: grayscale(0%) brightness(100%) opacity(100%);
    transform: none;
    box-shadow: none;
}

/* =========================== */
/* Photo Details Toggle CSS */
/* =========================== */

/* Hide the checkbox */
.photo-details-checkbox {
    display: none;
}

/* Button wrapper - centered */
.photo-details-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
}

/* Button styling - subtle */
.photo-details-button,
.photo-details-hide-button {
    /*cursor: pointer;*/
    /*padding: 0.25rem 0;*/
    /*background: transparent;*/
    color: var(--z-theme-color-dim-on-background);
    text-decoration: none;
    /*font-size: 0.9em;*/
    /*text-decoration: underline;*/
    /*text-decoration-thickness: 1px;*/
    /*text-underline-offset: 4px;*/
}

.photo-details-button:hover {
    text-decoration-thickness: 2px;
}

/* Details wrapper - hidden by default */
.photo-details-wrapper {
    display: none;
}

/* Hide button wrapper - hidden by default */
.photo-details-hide-wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

/* Hide button styling - subtle like show button */
.photo-details-hide-button {
    /*cursor: pointer;*/
    /*padding: 0.25rem 0;*/
    /*background: transparent;*/
    /*color: var(--z-theme-color-dim-on-background);*/
    /*font-size: 0.9em;*/
    /*text-decoration: underline;*/
    /*text-decoration-thickness: 1px;*/
    /*text-underline-offset: 4px;*/
}

.photo-details-hide-button:hover {
    /*text-decoration-thickness: 2px;*/
}

/* When checkbox is checked: hide show button, show details and hide button */
.photo-details-checkbox:checked ~ .photo-details-button-wrapper {
    display: none;
}

.photo-details-checkbox:checked ~ .photo-details-wrapper {
    display: block;
}

.photo-details-checkbox:checked ~ .photo-details-hide-wrapper {
    display: flex;
}

body:has(.photo-details-checkbox:checked) .show-more-info {
    display: none;
}

body:has(.homepage-tiles) {
   /* overflow: hidden;*/
}

.external_platform {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.external_platform>*{
    height: 1em;
}