/* ==========================================================================
   Nieuws "Het atelierjournaal"
   ========================================================================== */

.as-news-page { padding: clamp(40px, 6vw, 88px) 0 var(--section); background: var(--linnen); }
.as-news-page__head { margin-bottom: clamp(28px, 4vw, 48px); }
.as-news-page__title { margin: 0 0 .3em; font: 700 clamp(3.4rem, 6.4vw, 6.4rem)/.95 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-news-page__head > p { max-width: 50ch; margin: 0 0 1.6rem; font-size: 1.12rem; }

/* Tabbladen (zelfde als collectie) */
.as-coll__tabs { display: flex; flex-wrap: wrap; gap: .6rem; }
.as-tab { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.25rem; border-radius: 40px; background: rgba(255, 255, 255, .55); color: var(--kop); font-weight: 500; text-decoration: none; transition: background-color .3s, color .3s, transform .3s var(--ease); }
.as-tab span { font: 400 1rem/1 var(--f-h1); letter-spacing: .06em; color: var(--taupe-diep); }
.as-tab:hover { background: var(--wit); transform: translateY(-2px); }
.as-tab.is-active { background: var(--kop); color: var(--wit); }
.as-tab.is-active span { color: var(--mint); }

/* Omslag: het nieuwste bericht */
.as-cover { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: clamp(40px, 5vw, 72px); border-radius: 6px; overflow: hidden; background: var(--wit); color: var(--kop); text-decoration: none; box-shadow: 0 40px 80px -60px rgba(59, 52, 45, .6); }
.as-cover__photo { position: relative; min-height: 440px; overflow: hidden; background: var(--kiezel); }
.as-cover__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.as-cover:hover .as-cover__photo img { transform: scale(calc(var(--fz, 1) * 1.04)); }
.as-cover__body { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: clamp(28px, 4vw, 64px); }
.as-cover__title { font: 700 clamp(2.6rem, 3.8vw, 4rem)/1 var(--f-h2); letter-spacing: .02em; }
.as-cover__excerpt { font-size: 1.08rem; color: var(--tekst); }
.as-cover__more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.as-cover__more .as-icon { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.as-cover:hover .as-cover__more .as-icon { transform: translateX(5px); }

/* Journaalkaarten */
.as-journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 32px); }
.as-journal--solo { grid-template-columns: minmax(0, 420px); justify-content: center; }
.as-jcard { animation: as-card-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes as-card-in { from { opacity: 0; transform: translateY(24px); } }
.as-jcard__link { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--kop); text-decoration: none; }
.as-jcard__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--kiezel); }
.as-jcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.as-jcard__link:hover .as-jcard__photo img { transform: scale(calc(var(--fz, 1) * 1.05)); }
.as-jcard__stamp {
	position: absolute;
	top: 14px;
	left: 14px;
	display: grid;
	place-items: center;
	align-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: inset 0 0 0 1.5px var(--kop), inset 0 0 0 5px rgba(255, 255, 255, .92), inset 0 0 0 6px rgba(59, 52, 45, .35);
	transform: rotate(-8deg);
	color: var(--kop);
}
.as-jcard__stamp b { font: 400 1.6rem/1 var(--f-h1); }
.as-jcard__stamp i { font: 700 1rem/1 var(--f-h2); font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.as-jcard__body { display: flex; flex-direction: column; gap: .4rem; padding-top: 1.1rem; }
.as-jcard__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; font-size: .92rem; color: var(--taupe-diep); }
.as-jcard__topic { font: 400 1rem/1.2 var(--f-h1); letter-spacing: .1em; color: var(--kop); text-decoration: none; }
.as-jcard__title { font: 700 1.9rem/1.05 var(--f-h2); letter-spacing: .02em; transition: color .3s; }
.as-jcard__link:hover .as-jcard__title { color: var(--roze-diep); }
.as-jcard__excerpt { font-size: 1rem; color: var(--tekst); }

/* Nieuwsbriefkaart */
.as-jcard--signup { display: flex; }
.as-jsign { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: clamp(24px, 3vw, 40px); border-radius: 6px; background: var(--mint); color: var(--kop); }
.as-jsign__mono { width: 64px; margin-bottom: 1rem; color: var(--wit); }
.as-jsign__title { margin: 0 0 .3rem; font: 700 2.4rem/1 var(--f-h2); }
.as-jsign p { margin-bottom: 1.2rem; }
.as-jsign__form .as-field { margin-bottom: .7rem; }
.as-jsign__form .as-btn { width: 100%; justify-content: center; }

.as-coll__more { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(40px, 5vw, 64px); }
.as-coll__more[hidden] { display: none; }
.as-coll__loader { display: none; gap: 6px; }
.is-appending .as-coll__loader { display: inline-flex; }
.is-appending [data-news-next] { display: none; }
.as-coll__loader i { width: 9px; height: 9px; border-radius: 50%; background: var(--taupe); animation: as-dot 1s ease-in-out infinite; }
.as-coll__loader i:nth-child(2) { animation-delay: .15s; }
.as-coll__loader i:nth-child(3) { animation-delay: .3s; }
@keyframes as-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-6px); opacity: 1; } }
.is-loading [data-news-grid], .is-loading [data-news-cover] { opacity: .35; transition: opacity .3s; }
.as-news-empty { max-width: 640px; margin: 0 auto; text-align: center; }
.as-news-empty .as-empty__mono { width: 90px; margin: 0 auto 1rem; color: var(--taupe); }
.as-news-empty > p { margin-bottom: 2rem; font-size: 1.15rem; }

/* Bericht */
.as-article { padding-bottom: var(--section); background: var(--linnen); }
.as-article__head { max-width: 860px; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(24px, 3vw, 40px); }
.as-crumb-back { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.6rem; font-size: .95rem; color: var(--taupe-diep); text-decoration: none; }
.as-crumb-back .as-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.as-crumb-back:hover .as-icon { transform: translateX(-3px); }
.as-article__title { margin: .6rem 0 1rem; font: 700 clamp(3rem, 5.4vw, 5.6rem)/.96 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-article__lead { margin: 0; font-size: 1.3rem; line-height: 1.55; color: var(--tekst); }
.as-article__hero { margin: 0 var(--edge) clamp(40px, 5vw, 72px); aspect-ratio: 16 / 8; border-radius: 6px; overflow: hidden; background: var(--kiezel); }
.as-article__hero img { width: 100%; height: 100%; object-fit: cover; }

.as-prose--article { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 88px); padding-inline: var(--gutter); font-size: 1.16rem; line-height: 1.75; }
.as-prose--article > * { max-width: none; }
.as-prose--article > * + * { margin-top: 1.2em; }
.as-prose--article h2 { margin-top: 2em; font: 700 clamp(2.2rem, 3vw, 2.8rem)/1.05 var(--f-h2); color: var(--kop); }
.as-prose--article h3 { margin-top: 1.6em; font: 400 1.5rem/1.1 var(--f-h1); letter-spacing: .06em; color: var(--kop); }
.as-prose--article a { color: var(--kop); text-decoration-color: var(--roze); text-underline-offset: 3px; }
.as-prose--article blockquote { margin: 2em 0; padding: 0; text-align: center; }
.as-prose--article blockquote p { font: 400 clamp(2.1rem, 3.2vw, 2.9rem)/1.2 var(--f-script); color: var(--kop); }
.as-prose--article blockquote cite { font-size: .95rem; font-style: normal; color: var(--taupe-diep); }
.as-prose--article ul, .as-prose--article ol { padding-left: 1.3em; }
.as-prose--article li { margin-bottom: .4em; }
.as-prose--article ul li::marker { color: var(--taupe); }
.as-prose--article figure { margin: 2em 0; }
.as-prose--article img { border-radius: 6px; }
.as-prose--article figcaption { margin-top: .6rem; font-size: .92rem; color: var(--taupe-diep); text-align: center; }
.as-prose--article .alignwide { width: min(1100px, calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
.as-prose--article .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.as-prose--article .alignfull img { border-radius: 0; }
.as-prose--article .wp-block-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.as-prose--article .wp-block-gallery figure { margin: 0; }
.as-prose--article .wp-block-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }

.as-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.as-article__jewels { margin-bottom: clamp(48px, 6vw, 80px); }

.as-article__share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-bottom: clamp(48px, 6vw, 80px); }
.as-article__share-label { margin: 0 .6rem 0 0; font: 400 1.1rem/1 var(--f-h1); letter-spacing: .1em; color: var(--taupe-diep); }
.as-share { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 0; border-radius: 30px; background: var(--wit); font: inherit; font-weight: 500; color: var(--kop); text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s; }
.as-share .as-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.as-share:hover { background: var(--kop); color: var(--wit); }
.as-share.is-done { background: var(--mint); color: var(--kop); }

.as-article__pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: clamp(56px, 7vw, 104px); }
.as-pn { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.5rem; border-radius: 6px; background: var(--wit); color: var(--kop); text-decoration: none; transition: transform .4s var(--ease); }
.as-pn--next { text-align: right; align-items: flex-end; }
.as-pn:hover { transform: translateY(-3px); }
.as-pn__label { display: inline-flex; align-items: center; gap: .4rem; font: 400 1rem/1 var(--f-h1); letter-spacing: .1em; color: var(--taupe-diep); }
.as-pn__label .as-icon { width: 16px; height: 16px; }
.as-pn__title { font: 700 1.6rem/1.05 var(--f-h2); }

/* Leesvoortgang: het monogram tekent zich terwijl je leest */
.as-readmark {
	--p: 0;
	position: fixed;
	left: clamp(14px, 2vw, 24px);
	bottom: calc(clamp(14px, 2vw, 24px) + var(--note-h, 0px));
	z-index: 40;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 12px 28px -14px rgba(59, 52, 45, .6);
	color: var(--kop);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .4s, transform .4s var(--ease);
	pointer-events: none;
}
.as-readmark.is-on { opacity: 1; transform: none; }
.as-readmark__mono { width: 62%; }
.as-readmark__mono path { stroke-width: 110; stroke-dashoffset: calc(1 - var(--p)) !important; fill-opacity: calc((var(--p) - .92) * 12) !important; stroke-opacity: 1 !important; transition: none !important; animation: none !important; }
.as-readmark.is-done { background: var(--mint); }

@media (max-width: 999px) {
	.as-cover { grid-template-columns: minmax(0, 1fr); }
	.as-cover__photo { min-height: 0; aspect-ratio: 4 / 3; }
	.as-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-article__hero { margin-inline: 0; border-radius: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 639px) {
	.as-journal { grid-template-columns: minmax(0, 1fr); }
	.as-article__pn { grid-template-columns: minmax(0, 1fr); }
	.as-coll__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
	.as-tab { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .as-jcard { animation: none; } }