/* ##### Common styles #####  */
.tx-cultural-property {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    clear: left;
}

.tx-cultural-property .description{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
}
.tx-cultural-property .gridLayout{
    columns: 4;
    gap: 2vw;
}


.tx-cultural-property .navigation {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.tx-cultural-property .navigation li {
    padding: 0;
    margin: 0;
    font-weight: inherit;
}
.tx-cultural-property .togglemode a {
    display: block;
    padding-left: 1.5em;
    margin-left: -1.5em;
}

.tx-cultural-property li.gridview,
.tx-cultural-property li.tableview {
    background: left center no-repeat transparent;
    background-size: contain;
    padding-left: 1.5em;
}

.tx-cultural-property li.gridview {
    background-image: url('/typo3conf/ext/cultural_property/Resources/Public/Icons/grid.svg');
}
.tx-cultural-property li.tableview {
    background-image: url('/typo3conf/ext/cultural_property/Resources/Public/Icons/table.svg');
}

.tx-cultural-property .navigation .active {
    font-weight: 600;
}


/* ##### Grid View ##### */

.tx-cultural-property .gridLayout a {
    display: block;
    break-inside: avoid;
    padding-bottom: 2vw;
}

.tx-cultural-property .gridLayout figure ~ p {
    display: none;
}

/* ##### Table View ##### */
.tx-cultural-property .scrollTable {
    width: 100%;
    /* max-height: 80vh; */
    overflow: auto;
}

.tx-cultural-property .tableLayout th,
.tx-cultural-property .tableLayout td {
    padding: 0.3em;
    white-space: nowrap;
}
.tx-cultural-property .tableLayout td {
    transition: background-color 0.5s;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15em;
    vertical-align: top;
}
.tx-cultural-property .tableLayout td.narrow {
    max-width: 7em;
}

.tx-cultural-property .tableLayout tr:hover td{
    background-color: rgba(0,0,0,0.05);
}
.tx-cultural-property .tableLayout tr:focus td,
.tx-cultural-property .tableLayout tr:focus-within td {
    /* overflow: visible; */
    white-space: initial;
    background-color: rgba(0,0,0,0.15);
}

.tx-cultural-property .tableLayout th {
    text-align: left;
    font-weight: 600;
    position: relative;
    height: auto;
    border-bottom: 2px #000 solid;
    padding-top: 1.2em; /* allow for Groupheaders*/
}
.tx-cultural-property .tableLayout .spacer {
    width: 2.2em;
    height: 0.5em;
    display: inline-block;
}

.tx-cultural-property .tableLayout thead img {
    width: 1em;
    height: 1em;
    vertical-align: sub;
    position: relative;
    left: -2em;
}

.tx-cultural-property .tableLayout .dating {
    position: absolute;
    top: 0;
}
.tx-cultural-property .tableLayout figure {
    width: 200px;
}

.tx-cultural-property .tableLayout th:nth-child(3),
.tx-cultural-property .tableLayout td:nth-child(3){
    display: none;
}
.tx-cultural-property .tableLayout.fullview th:nth-child(3),
.tx-cultural-property .tableLayout.fullview td:nth-child(3){
    display: table-cell;
}
.tx-cultural-property .tableLayout.fullview td {
    white-space: initial;
}

.tx-cultural-property .sort-arrow {
    position: relative;
    height: 1em;
    background-size: contain;
}

.tx-cultural-property div.popUpFilter {
    background-color: #fff;
    margin-top: 1.5em;
    box-shadow: 0.1em 0.1em 1em rgba(0,0,0,0.2);
    min-width: 10em;
}
.tx-cultural-property div.popUpFilter::before,
.tx-cultural-property div.popUpFilter::after {
    left: 1em;
}
.tx-cultural-property div.popUpFilter::before {
    border-width: 0.5em;
    margin-left: -0.5em;
}
.tx-cultural-property div.popUpFilter::after {
    border-width: 0.5em;
    margin-left: -0.5em;
}
.tx-cultural-property input.flt {
    border: 0 none;
    outline:none;
    height: auto;
    padding: 0.5em;
    box-shadow: none;
}
.tx-cultural-property input.flt:focus { outline:none;box-shadow: none; }



/* ##### Detail View ##### */

.tx-cultural-property .gallery{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vw;
}

.tx-cultural-property .gallery figure {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.1);
    padding: 2vw;
}

.tx-cultural-property .gallery figure a,
.tx-cultural-property .gallery figure img {
    display: block;
    height: 100%;
    width: 100%;
}
.tx-cultural-property .gallery figure img {
    object-fit: contain;
    aspect-ratio: 1;
    transition: transform 0.3s ease-in-out;
}
.tx-cultural-property .gallery figure a:hover img {
    transform: scale(1.1);
}


.tx-cultural-property table.properties td:first-child {
    opacity: 0.6;
    padding-right: 1em;
}

.tx-cultural-property .intern {
    font-style: italic;
    opacity: 0.6;
}