/* Studio Linnen — gidsartikel (alleen geladen op losse blogposts; bouwt voort op gidsen.css) */

/* Kop: kruimelpad, titel, beeld */
.sl-artikel__kop { padding-top: 28px; }
.sl-kruimel { display: flex; gap: 8px; font-size: 13px; color: var(--text-subtle); }
.sl-kruimel a { color: inherit; }
.sl-kruimel a:hover { color: var(--accent); }
.sl-artikel__titelblok { max-width: 860px; margin: 48px auto 0; text-align: center; }
.sl-artikel__titel { font: 300 clamp(38px, 5.4vw, 60px)/1.06 var(--font-display); margin-top: 14px !important; text-wrap: balance; }
.sl-artikel__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 20px !important; font-size: 13px; color: var(--text-subtle); }
.sl-artikel__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sl-artikel__meta .sl-icon { width: 15px; height: 15px; }
.sl-artikel__beeld { position: relative; height: 420px; margin-top: 44px; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--linen-200); background-image: var(--linen-texture); }
.sl-artikel__beeld::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed rgba(169, 92, 63, .3); border-radius: 10px; pointer-events: none; }
.sl-artikel__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-artikel__beeld:has(img)::after { display: none; }

/* Drie kolommen: inhoudsopgave, tekst, promo */
.sl-artikel__body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; grid-template-areas: "toc tekst promo"; gap: 56px; align-items: start; padding-block: 56px 88px; }
.sl-toc { grid-area: toc; position: sticky; top: 140px; }
.sl-artikel__inhoud { grid-area: tekst; min-width: 0; width: 100%; max-width: var(--container-narrow); justify-self: center; }
.sl-promo { grid-area: promo; position: sticky; top: 140px; }
.admin-bar .sl-toc, .admin-bar .sl-promo { top: 172px; }

.sl-toc__titel, .sl-checklist__titel { font: 500 12px/1.4 var(--font-body) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--text-body); margin-bottom: 14px !important; }
.sl-toc ul { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1.5px dashed var(--border); display: flex; flex-direction: column; gap: 10px; }
.sl-toc a { font-size: 14px; line-height: 1.4; color: var(--text-muted); text-decoration: none; }
.sl-toc a:hover { color: var(--accent); }

.sl-promo { padding: 24px; border-radius: var(--radius-lg); background: var(--surface-tint); }
.sl-promo > .sl-icon { width: 22px; height: 22px; color: var(--accent); }
.sl-promo__titel { font: 400 22px/1.2 var(--font-display); margin: 12px 0 8px !important; }
.sl-promo__tekst { font-size: 14px; color: var(--text-muted); margin-bottom: 18px !important; }
.sl-promo .sl-btn { width: 100%; }

/* Tekst van het artikel */
.sl-artikel__inhoud > * { margin-block: 0; }
.sl-artikel__inhoud p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: var(--text-muted); }
.sl-artikel__inhoud strong { font-weight: 500; color: var(--text-body); }
.sl-artikel__inhoud a { color: var(--accent); text-underline-offset: 3px; }
.sl-artikel__inhoud h2 { font: 400 28px/1.2 var(--font-display); margin: 48px 0 16px; scroll-margin-top: 140px; color: var(--text-body); }
.sl-artikel__inhoud h3 { font: 400 22px/1.25 var(--font-display); margin: 28px 0 8px; color: var(--text-body); }

/* Lijsten: stiklijntje of cursief nummer */
.sl-artikel__inhoud .wp-block-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: sl-nr; }
.sl-artikel__inhoud .wp-block-list li { position: relative; padding-left: 28px; font-size: 17px; line-height: 1.65; color: var(--text-muted); }
.sl-artikel__inhoud ul.wp-block-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: 1.5px; background: var(--stitch); }
.sl-artikel__inhoud ol.wp-block-list li { padding-left: 40px; counter-increment: sl-nr; }
.sl-artikel__inhoud ol.wp-block-list li::before { content: counter(sl-nr); position: absolute; left: 0; top: 0; width: 26px; font: italic 400 22px/1.2 var(--font-display); color: var(--accent); }

/* Tabel */
.sl-artikel__inhoud .wp-block-table { margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; }
.sl-artikel__inhoud .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sl-artikel__inhoud .wp-block-table th { text-align: left; padding: 12px 16px; background: var(--surface-tint); border: 0; font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-body); }
.sl-artikel__inhoud .wp-block-table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--border-subtle); vertical-align: top; background: var(--surface-card); color: var(--text-muted); }
.sl-artikel__inhoud .wp-block-table td:first-child { color: var(--text-body); }

/* Kort antwoord */
.sl-kort-antwoord { margin-bottom: 16px !important; padding: 30px 34px; border-radius: var(--radius-lg); background: var(--surface-card); outline: 1.5px dashed var(--stitch); outline-offset: -8px; }
.sl-artikel__inhoud .sl-kort-antwoord__label { margin-bottom: 10px; font: 500 12px/1.4 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.sl-artikel__inhoud .sl-kort-antwoord p:last-child { margin: 0; font: 400 22px/1.5 var(--font-display); color: var(--text-body); }
.sl-kort-antwoord strong { font-weight: 600; }

/* Genummerd idee */
.sl-idee { position: relative; padding-left: 72px; margin-bottom: 22px !important; }
.sl-artikel__inhoud .sl-idee h3 { margin: 0 0 6px; }
.sl-idee__nr { position: absolute; left: 0; top: 0; width: 56px; font: italic 300 44px/1 var(--font-display); color: var(--accent); }
.sl-artikel__inhoud .sl-idee p:last-child { margin-bottom: 0; }

/* Tip en veiligheid, met icoon */
.sl-artikel__inhoud .sl-tip, .sl-artikel__inhoud .sl-waarschuwing { position: relative; margin: 0 0 24px; padding: 18px 22px 18px 56px; border-radius: var(--radius-md); font-size: 16px; line-height: 1.65; color: var(--text-body); }
.sl-artikel__inhoud .sl-tip { background: var(--surface-tint); border-radius: var(--radius-lg); }
.sl-artikel__inhoud .sl-waarschuwing { background: #F8EAD9; }
.sl-tip::before, .sl-waarschuwing::before { content: ""; position: absolute; left: 22px; top: 20px; width: 20px; height: 20px; background: var(--accent); -webkit-mask: var(--sl-icoon) center / contain no-repeat; mask: var(--sl-icoon) center / contain no-repeat; }
.sl-tip { --sl-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.sl-waarschuwing { --sl-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }
.sl-waarschuwing::before { background: var(--honey-500); }

/* Checklist */
.sl-checklist { margin-bottom: 24px !important; padding: 22px 26px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.sl-artikel__inhoud .sl-checklist__titel { margin-bottom: 12px !important; }
.sl-artikel__inhoud .sl-checklist .wp-block-list { gap: 8px; margin: 0; }
.sl-artikel__inhoud .sl-checklist .wp-block-list li { font-size: 16px; padding-left: 30px; }
.sl-artikel__inhoud .sl-checklist ul.wp-block-list li::before { top: 4px; width: 15px; height: 15px; background: transparent; border: 1.5px solid var(--border-strong); border-radius: 3px; box-sizing: border-box; }

/* FAQ: uitklapbaar via assets/js/gids.js */
.sl-faq { border-top: 1px solid var(--border); margin-bottom: 8px !important; }
.sl-faq__item { border-bottom: 1px solid var(--border); padding-block: 18px 0; }
.sl-artikel__inhoud .sl-faq__item h3 { margin: 0 0 12px; font-size: 21px; }
.sl-artikel__inhoud .sl-faq__item p { font-size: 16px; }
.sl-faq__knop { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.sl-faq__knop::after { content: "+"; flex: none; font: 300 26px/1 var(--font-body); color: var(--accent); }
.sl-faq__item.is-open .sl-faq__knop::after { content: "−"; }
.sl-faq__knop:focus-visible { outline: 2px solid var(--honey-400); outline-offset: 4px; }
.sl-faq.is-actief .sl-faq__item h3 { margin-bottom: 18px; }
.sl-faq.is-actief .sl-faq__item:not(.is-open) > :not(h3) { display: none; }

/* Noot/disclaimer */
.sl-artikel__inhoud .sl-noot { margin-top: 32px; font-size: 14px; font-style: italic; color: var(--text-subtle); }
.sl-artikel__inhoud .sl-noot em { font-style: italic; }

/* Verder lezen: zie gidsen.css (ook gebruikt op productpagina's) */

/* Smaller dan 1180px: inhoudsopgave boven de tekst, promo eronder */
@media (max-width: 1179px) {
	.sl-artikel__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "tekst" "promo"; gap: 0; justify-items: center; }
	.sl-toc, .sl-promo { position: static; width: 100%; max-width: var(--container-narrow); }
	.sl-toc { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1.5px dashed var(--border); }
	.sl-toc ul { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; padding: 0; border: 0; }
	.sl-promo { margin-top: 48px; }
	.sl-promo .sl-btn { width: auto; }
}
@media (max-width: 640px) {
	.sl-artikel__titelblok { margin-top: 32px; }
	.sl-artikel__beeld { height: 260px; margin-top: 32px; }
	.sl-artikel__body { padding-block: 40px 64px; }
	.sl-kort-antwoord { padding: 24px 22px; }
	.sl-artikel__inhoud .sl-kort-antwoord p:last-child { font-size: 20px; }
	.sl-idee { padding-left: 52px; }
	.sl-idee__nr { font-size: 36px; }
}