/**
 * Single blogpost (single.php) — Figma node 302:46215.
 * Titel + datum + uitgelichte foto + tekst (2-koloms desktop) + "Deel dit artikel"
 * + "Onze suggesties voor jou". Laadt op is_singular('post') (zie functions.php),
 * samen met shop.css voor de .th-card's in de suggesties.
 */
.th-single-post { padding-block: 44px 72px; }

/* Kop + datum */
.th-post__title { font-family: var(--th-font-heading); font-weight: 600; font-size: clamp(28px, 1.5rem + 2vw, 40px); line-height: 1.2; color: var(--th-dark); margin: 0 0 6px; }
.th-post__date { font-family: var(--th-font-body); font-size: 14px; color: #7a7a7a; margin: 0 0 26px; }

/* Uitgelichte foto op de EIGEN beeldverhouding: de vaste bannerhoogte
   (clamp 300–460px + object-fit:cover) sneed de foto bij. Nu bepaalt de foto de
   hoogte, dus je ziet 'm volledig — en meestal ook groter dan die 460px-band. */
.th-post__media { margin: 0 0 34px; }
.th-post__media img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: contain; }

/* Body — één brede kolom over de volle breedte (design 302:46219 = 1 tekstblok). */
.th-post__body { font-family: var(--th-font-body); font-size: 15px; line-height: 1.8; color: #222; }
.th-post__body > *:first-child { margin-top: 0; }
.th-post__body p { margin: 0 0 16px; }
.th-post__body h2, .th-post__body h3, .th-post__body h4 { font-family: var(--th-font-heading); font-weight: 600; color: var(--th-dark); font-size: 20px; line-height: 1.3; margin: 22px 0 8px; }
.th-post__body ul, .th-post__body ol { margin: 0 0 16px; padding-left: 20px; }
.th-post__body li { margin: 0 0 6px; }
.th-post__body a { color: var(--th-gold); text-decoration: underline; }
.th-post__body img { max-width: 100%; height: auto; border-radius: 6px; }

/* Deel dit artikel — gecentreerd, gouden ronde share-knoppen (design). */
.th-post__share { margin-top: 46px; text-align: center; }
.th-post__share-label { display: block; font-family: var(--th-font-heading); font-weight: 600; font-size: 16px; color: var(--th-dark); margin-bottom: 14px; }
.th-post__share-list { display: inline-flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.th-post__share-list a { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: var(--th-gold); color: #fff; text-decoration: none; transition: background .2s ease; }
.th-post__share-list a:hover { background: var(--th-gold-deep, #b8923f); }
.th-post__share-list svg { width: 25px; height: 25px; display: block; }

/* Onze suggesties voor jou — 3 productkaarten (.th-card uit shop.css), vaste
   254px breed en LINKS uitgelijnd (design 302:46223/24/25: 3× 254px, gap 14px,
   niet uitgerekt over de volle breedte). */
.th-post-suggest { margin-top: 64px; }
.th-post-suggest__title { font-family: var(--th-font-heading); font-weight: 600; font-size: clamp(23px, 1.3rem + 1vw, 30px); line-height: 1.2; color: var(--th-dark); margin: 0 0 28px; }
.th-post-suggest ul.products { grid-template-columns: repeat(3, 254px) !important; justify-content: start; gap: 24px 14px !important; }

@media (max-width: 900px) {
	.th-post-suggest ul.products { grid-template-columns: repeat(3, 1fr) !important; justify-content: stretch; }
}
@media (max-width: 620px) {
	.th-post-suggest ul.products { grid-template-columns: 1fr 1fr !important; }
}