/* ==========================================================================
   Losse artikelen (onder "Inspiratie"). Puur redactioneel: kop, ondertitel,
   lopende tekst met af en toe een tussenkop of lijst, en een sluitstuk dat
   doorverwijst naar een relevante pagina. Klassen met prefix "ar-".
   ========================================================================== */

.ar-hero { padding: clamp(6.5rem, 13vw, 9.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.ar-hero .wrap { max-width: 680px; }
.ar-hero .kicker { margin-bottom: 1.4rem; }
.ar-hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin-bottom: 1rem; }
.ar-hero-sub { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--tekst-zacht); max-width: none; }

.ar-hero-grid { max-width: 980px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.ar-hero-beeld img { width: 100%; height: auto; display: block; border-radius: 4px; }
@media (max-width: 780px) {
  .ar-hero-grid { grid-template-columns: 1fr; }
  .ar-hero-beeld { order: -1; }
}

.ar-body { padding: 0 0 clamp(4rem, 8vw, 6rem); }
.ar-body .wrap { max-width: 680px; }
.ar-body p { font-size: 1.02rem; color: var(--tekst-zacht); line-height: 1.75; }
.ar-body h2, .ar-body h3, .ar-body h4 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 2.2rem 0 1rem; }
.ar-body ul { margin: 0 0 1.3em; padding-left: 1.3rem; color: var(--tekst-zacht); }
.ar-body li { margin-bottom: 0.5rem; }
.ar-body strong { color: var(--tekst); }

.ar-video { position: relative; width: 100%; padding-top: 56.25%; margin: 1.5rem 0 2rem; background: #000; }
.ar-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.ar-terug { padding: 0 0 1rem; }
.ar-terug .wrap { max-width: 680px; }
.ar-terug .tekstlink { font-size: 0.85rem; }

.ar-afsluiter { text-align: center; padding: clamp(5rem, 10vw, 7.5rem) 0; background-color: var(--kleur-roestbruin); }
.ar-afsluiter .wrap { max-width: 560px; }
.ar-afsluiter h2 { color: #fff; margin-bottom: 1rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.ar-afsluiter p { color: rgba(255,255,255,0.88); margin-bottom: 2rem; }
.ar-afsluiter .knop { background: transparent; border-color: rgba(255,255,255,0.75); color: #fff; }
.ar-afsluiter .knop:hover { background: var(--achtergrond); border-color: var(--achtergrond); color: var(--kleur-roestbruin); }