.archive.post-type-archive {
overflow: hidden;
height: 100vh;
}
.archive-wrapper {
display: flex;
height: calc(100vh - var(--navh) - var(--archiveinfoh));
background: var(--light-grey);
}
@media print {
.archive-wrapper {
height: auto;
flex-direction: column;
overflow-y: auto;
background: transparent;
}
}
.archive-template {
flex: 1;
position: relative;
width: 100%;
height: calc(100vh - var(--navh) - var(--archiveinfoh));
overflow: hidden;
}
@media (max-width: 63rem) {
.archive-template {
flex-direction: column;
}
}
.archive-template .switch-wrapper {
position: absolute;
z-index: 3;
top: calc(var(--spacer) * 2);
left: calc(var(--spacer) * 2);
}
@media print {
.archive-template .switch-wrapper {
display: none;
}
}
.archive-template .switch-wrapper.mobile {
position: static;
border-radius: 30px;
box-shadow: none;
}
@media print {
.archive-template .switch-wrapper.mobile {
display: none;
}
}
.archive-template .switch-wrapper.mobile .btn-filter:hover span {
color: var(--white);
}
.archive-template .switch-wrapper.mobile .switch-wrapper-label {
font-size: 0.7396449704rem;
font-weight: bold;
text-transform: uppercase;
margin-right: calc(var(--spacer) / 2);
position: relative;
}
.archive-template .switch-wrapper.mobile > * + * {
margin-left: calc(var(--spacer) * 1);
}
.archive-template .archive-info {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(var(--spacer) * 1) calc(var(--spacer) * 2);
background: var(--light-grey);
z-index: 1;
}
@media (max-width: 63rem) {
.archive-template .archive-info {
padding: calc(var(--spacer) * 1) calc(var(--spacer) / 1);
padding-bottom: 0;
flex-direction: column;
align-items: flex-start;
}
}
@media print {
.archive-template .archive-info {
display: none;
}
}
.archive-template .archive-info > * + * {
margin-left: var(--spacer);
}
@media (max-width: 63rem) {
.archive-template .archive-info .archive-info-main {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: var(--spacer);
}
}
.archive-template .archive-info .archive-title {
font-size: 1.25rem;
display: flex;
align-items: center;
}
@media (max-width: 63rem) {
.archive-template .archive-info .archive-title {
font-size: 0.9615384615rem;
width: 20ch;
line-height: 1.2;
}
}
@media (max-width: 63rem) {
.archive-template .archive-info .archive-title .archive-subtitle {
display: none;
}
}
.archive-template .archive-info .archive-title .count {
font-size: 0.9615384615rem;
font-weight: bold;
margin-left: 0;
margin-bottom: 0;
}
.archive-template .archive-info .tax-list-wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding: 4px;
}
@media (max-width: 63rem) {
.archive-template .archive-info .tax-list-wrapper {
margin-bottom: var(--spacer);
margin-right: var(--spacer);
width: 100%;
padding-left: 0;
padding-right: 0;
}
}
.archive-template .archive-info .tax-list-wrapper > * + * {
border-left: 1px solid var(--black);
padding-left: calc(var(--spacer) * 1);
}
.archive-template .archive-info .tax-list-wrapper .badge-list {
flex-wrap: nowrap;
padding-right: calc(var(--spacer) * 1);
}
.archive-template .archive-info .tax-list-wrapper .badge-list .badge-list-item {
flex: 1 0 auto;
cursor: pointer;
}
.archive-template .archive-info .tax-list-wrapper .badge-list .badge-list-item .badge {
margin-bottom: 0;
}
@media (max-width: 63rem) {
.archive-template .archive-info .tax-list-wrapper {
margin-left: 0;
padding-right: var(--spacer);
}
}
.archive-template .archive-info .btn-group {
display: flex;
margin-left: 0;
align-items: center;
padding-left: 10px;
}
.archive-template .archive-info .btn-group > * + * {
margin-left: calc(var(--spacer) * 1) !important;
}
@media (max-width: 63rem) {
.archive-template .archive-info .btn-group .btn-icon {
display: none;
}
}
.archive-template .archive-info .btn-group .btn-filter svg {
width: auto;
margin-left: auto;
}
@media (max-width: 63rem) {
.archive-template .archive-info .btn-group .btn-filter {
display: none !important;
}
}
.archive-template .archive-card-wrapper {
flex: 1;
width: 50%;
height: calc(100vh - var(--navh) - var(--archiveinfoh));
padding-bottom: calc(var(--spacer) * 4);
overflow-y: auto;
order: 1;
background: var(--light-grey);
opacity: 1;
visibility: visible;
}
@media (max-width: 63rem) {
.archive-template .archive-card-wrapper {
width: 100vw;
order: 2;
position: absolute;
}
}
@media print and (max-width: 63rem) {
.archive-template .archive-card-wrapper {
position: static;
width: 100%;
padding-bottom: 0;
background: transparent;
}
}
.archive-template .archive-card-wrapper.close {
opacity: 0;
visibility: hidden;
}
.archive-template .archive-card-wrapper .card-grid {
display: grid;
grid-template-columns: var(--grid-card-template-column);
grid-template-rows: min-content;
grid-gap: calc(var(--spacer) * 2);
padding: calc(var(--spacer) * 2);
padding-top: 0;
align-items: flex-start;
}
@media (max-width: 89rem) {
.archive-template .archive-card-wrapper .card-grid {
grid-template-columns: 1fr;
padding: calc(var(--spacer) * 1);
}
}
@media (max-width: 63rem) {
.archive-template .archive-card-wrapper .card-grid {
display: block;
}
}
.archive-template .archive-card-wrapper .card-grid.centered {
max-width: calc(1200px + var(--spacer) + var(--spacer));
margin: auto;
}
.archive-template .archive-card-wrapper .card-grid.card-grid-audio {
grid-template-columns: var(--grid-card-audio-template-column);
align-items: flex-start;
}
.archive-template .archive-card-wrapper .slider-wrapper:first-of-type {
margin-top: 0;
}
.archive-template .archive-map {
flex: 1;
width: 50%;
height: calc(100vh - var(--navh) - var(--archiveinfoh));
order: 2;
background: var(--white);
}
.archive-template .archive-map.open {
width: 100%;
flex: 1 0 100%;
}
@media (max-width: 63rem) {
.archive-template .archive-map {
width: 100vw;
flex: 1 0 100%;
order: 1;
}
}
@media print {
.archive-template .archive-map {
page-break-after: always;
width: 210mm;
min-height: 297mm;
}
}
.archive-template .archive-map .map-view {
position: relative;
width: 100%;
height: calc(100vh - var(--navh) - var(--archiveinfoh));
background: var(--white);
}
.archive-template .archive-map .map-view .mapboxgl-map {
width: 100%;
height: 100%;
}
.rtl .switch-wrapper {
position: absolute;
z-index: 3;
top: calc(var(--spacer) * 2);
right: calc(var(--spacer) * 2);
left: inherit;
}