/* Algemene opmaak voor nieuwspagina's */

.site-content {
    width: calc(min(var(--max-content-width, 980px), 100%) - 8vw);
    margin: 6vh auto 8vh;
}

article {
    --border-color: oklch(from var(--accent) clamp(0, l - 0.14, 1) calc(c * 0.92) h); /* darker --accent */
    position: relative;
    display: block;
    padding: calc(1rem + 2vh) 0;
    border-top: 1px solid var(--border-color);
    &:has(img) {
        display: grid;
        grid-template-columns: 35fr 65fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: "image header" "image content";
        gap: 0vh 2vw;
        & .entry-image {
            grid-area: image;
            & img {
                aspect-ratio: 4 / 4;
                object-fit: cover;
                /* border: 1px solid #ddd; */
                vertical-align: top;
                margin-bottom: 12px;
                &.size-thumbnail {
                    max-width: 48%;
                    &:nth-child(3) {margin-left: 2%;}
				}
				&.full-height {
					aspect-ratio: unset;
                }
            }
        }
    }
    & .entry-header {
        grid-area: header;
        & * {
            text-align: left;
            text-decoration: none;
        }
        & h2 {
            font-size: clamp(1.25rem, 4vw, 1.75rem);
            margin-bottom: 6px !important;
        }
    }
    & .entry-content {
        grid-area: content;
    }
    &:last-of-type {
        border-bottom: 1px solid var(--border-color);
        margin-bottom: calc(1rem + 2vh); /* same as padding */
    }
    &.nieuwsbericht-detail {
        border-top: 0;
        padding-top: 6px;
		&:has(img) {
        	display: grid;
        	grid-template-columns: 45fr 55fr;
		}
    }
}

.bericht-datum {
    color: #444;
    font-size: round(calc(var(--font-size-body) * .9), 1px);
    margin-bottom: 8px;
	font-weight:bold;
}

.bericht-locatie {
    font-weight: normal;
}

.bericht-intro {
    /* font-size: 1.1em; */
}
.bericht-tekst ul {
    padding-left: 20px;
}
.bericht-sticker {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  position: absolute;
  top: 16px;
  left: -12px;
  background: var(--primary);
  transform: rotate(-20deg);
  color: #fff;
  box-shadow: 0 4px 13px rgb(183 75 111 / 40%);
}

.lees-meer {
    display: inline-block;
    text-decoration: none;
    font-size: round(calc(var(--font-size-body) * .9), 1px);
    padding: 8px;
    border: 1px solid #999;
    letter-spacing: -1px;
    &:active { transform: translateY(2px); }
    &::after {content: attr(data-arrow); margin-left: 2px; margin-right: 2px;}
}
@media (hover: hover) {
    .lees-meer:hover::after {margin-left: 4px; margin-right: 0;}   
}

.bericht-foto {
    margin: 24px 0;
}

.bericht-foto img {
    display: block;
    max-width: 100%;
    height: auto;
}

.bericht-bijlagen h2 {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    text-align: left;
    margin-bottom: 1rem !important;
}

@media (max-width: 480px) {
article {
    &:has(img) {
        grid-template-areas: "image header" "content content";
    }
}
article.nieuwsbericht-detail:has(img) {
    /*grid-template-columns: 100fr;
    grid-template-areas: "image" "header" "content";*/
	display: block;
    & .entry-image {
        display: inline-flex;
        gap: 1.5vw;
        & img { aspect-ratio: 4 / 4; object-fit: cover;}
        & img:nth-child(1) { max-width: 50%; }
        & img:nth-child(2).size-thumbnail { max-width: min(150px,22%); margin-top: auto}
        & img:nth-child(3).size-thumbnail { max-width: min(150px,22%); margin-top: auto; margin-left: 0;}
    }
}
}

/* -------------------- */
/* Nieuws detail dialog voor uitvergroten foto's. */ 

#foto-dialog {
    padding: 0;
    border: none;
    background: #111;
    color: white;
    width: max-content;
    overflow: hidden;
    background: rgb(0 0 0 / 20%);
    margin: auto;
}

#foto-dialog::backdrop {
    background: rgb(0 0 0 / 80%);
}

.foto-viewer {
    position: relative;
    display: flex;
    height: 85vh;
    height: 85dvh;
}

#foto-groot {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.foto-viewer button {
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
	line-height: 44px;
    font-size: 28px;
    color: white;
    background: rgb(0 0 0 / 40%);
    cursor: pointer;
}

.foto-sluiten {
    top: 10px;
    right: 10px;
}

.foto-vorige {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.foto-volgende {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#foto-teller {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
}