/*
 * Redactionele pagina's — Wietzadenshop
 * ----------------------------------------
 * Infopagina's, het kweektips-overzicht en het artikel.
 *
 * Bron: docs/design/wietzadenshop-verzending.html (en -kiemgarantie,
 * -discreet), -kweektips.html en -blog-artikel.html
 */

.infopagina,
.blog,
.artikel {
  background-color: var(--color-bg-lite);
  color:            var(--color-text-lite);
}

/* ----------------------------------------
 * LOPENDE TEKST
 *
 * Gedeeld door de infopagina's en het artikel: dezelfde koppen, opsommingen
 * en kaders.
 * ---------------------------------------- */

.prose {
  max-width: 70ch;
}

.prose h2 {
  margin:         38px 0 14px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      24px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.prose h3 {
  margin:         26px 0 10px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      17px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p {
  margin-bottom: var(--space-4);
  font-size:     var(--text-base);
  color:         var(--color-text-muted-lite);
}

.prose a {
  color: var(--color-primary-dark);
}

.prose ul,
.prose ol {
  margin:  0 0 18px;
  padding: 0;
}

.prose ul {
  list-style: none;
}

.prose li {
  position:      relative;
  margin-bottom: var(--space-3);
  padding-left:  26px;
  font-size:     var(--text-base);
  color:         var(--color-text-muted-lite);
}

.prose ul li::before {
  content:          "";
  position:         absolute;
  left:             0;
  top:              9px;
  width:            8px;
  height:           8px;
  border-radius:    var(--radius-xs);
  background-color: var(--color-primary);
}

.prose ol {
  list-style:  decimal;
  padding-left: 20px;
}

.prose ol li {
  padding-left: 6px;
}

.prose img {
  margin:        26px 0;
  border-radius: var(--radius-panel);
}

.prose blockquote {
  margin:      26px 0;
  padding-left: 20px;
  border-left: 3px solid var(--color-primary);
  font-size:   var(--text-md);
  color:       var(--color-text-lite);
}

/* Uitgelicht kader in het mint. */
.callout {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-4);
  margin:           var(--space-6) 0;
  padding:          22px 24px;
  background-color: var(--color-primary-soft);
  border-radius:    12px;
}

.callout__icon {
  flex-shrink: 0;
  color:       var(--color-primary-dark);
}

.callout__title {
  display:        block;
  margin-bottom:  var(--space-1);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-sm);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color:          var(--color-text-lite);
}

.callout p {
  margin:    0;
  font-size: 14.5px;
  color:     var(--color-text-lite);
}

/*
 * Donker tipkader in een artikel. Zet in de editor de klasse "tipbox" op een
 * blok; de eerste vetgedrukte regel wordt de groene kop.
 */
.prose .tipbox {
  margin:           30px 0;
  padding:          26px 28px;
  background-color: var(--color-bg);
  color:            var(--color-text);
  border-radius:    var(--radius-panel);
}

.prose .tipbox strong,
.prose .tipbox b {
  display:        block;
  margin-bottom:  var(--space-2);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-primary-hover);
}

.prose .tipbox p {
  margin:    0;
  font-size: 15.5px;
  color:     rgba(244, 245, 240, 0.85);
}

/* ----------------------------------------
 * VRAGENLIJST
 * ---------------------------------------- */

.faq {
  margin-top: 14px;
}

.faq__item {
  padding:       4px 0;
  border-bottom: 1px solid var(--color-line-lite);
}

.faq__vraag {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         16px 0;
  font-family:     var(--font-heading);
  font-weight:     var(--font-bold);
  font-size:       var(--text-base);
  color:           var(--color-text-lite);
  cursor:          pointer;
  list-style:      none;
}

.faq__vraag::-webkit-details-marker {
  display: none;
}

.faq__vraag::after {
  content:     "+";
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size:   22px;
  color:       var(--color-primary-dark);
}

.faq__item[open] .faq__vraag::after {
  content: "\2013";
}

.faq__antwoord {
  padding:   0 0 18px;
  font-size: 15px;
  color:     var(--color-text-muted-lite);
}

/* ----------------------------------------
 * INFOPAGINA
 * ---------------------------------------- */

.info-hero {
  padding: 40px 0 10px;
}

.info-hero__title {
  margin-bottom:  var(--space-4);
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(34px, 5vw, 60px);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.info-hero__lead {
  max-width: 60ch;
  font-size: var(--text-md);
  color:     var(--color-text-muted-lite);
}

.info-wrap {
  padding: 40px 0 90px;
}

.info-layout {
  display:               grid;
  grid-template-columns: 1fr 300px;
  gap:                   56px;
  align-items:           start;
}

.info-side {
  position:         sticky;
  top:              100px;
  padding:          26px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
}

.info-side__title {
  margin-bottom:  var(--space-4);
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      15px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.info-side__row {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  padding:     12px 0;
  border-top:  1px solid var(--color-line-lite);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted-lite);
}

.info-side__row:first-of-type {
  border-top: none;
}

.info-side__icon {
  flex-shrink: 0;
  margin-top:  2px;
  color:       var(--color-primary-dark);
}

.info-side__row b {
  display:     block;
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  color:       var(--color-text-lite);
}

.info-side__cta {
  width:      100%;
  margin-top: 18px;
}

/* ----------------------------------------
 * KWEEKTIPS — overzicht
 * ---------------------------------------- */

.blog-hero {
  padding: 40px 0 12px;
}

.blog-hero__title {
  margin-bottom:  14px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(34px, 5vw, 60px);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.blog-hero__lead {
  max-width: 58ch;
  font-size: 17px;
  color:     var(--color-text-muted-lite);
}

.blog-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  padding:   26px 0 34px;
}

.blog-wrap {
  padding-bottom: 90px;
}

.blog-leeg {
  padding:   40px 0 60px;
  font-size: var(--text-md);
  color:     var(--color-text-muted-lite);
}

/* Uitgelicht artikel */
.featured {
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   36px;
  align-items:           center;
  margin-bottom:         44px;
  overflow:              hidden;
  background-color:      var(--color-card-lite);
  border:                1px solid var(--color-line-lite);
  border-radius:         var(--radius-band);
}

.featured__media {
  display:      block;
  aspect-ratio: 16 / 10;
  overflow:     hidden;
  background-color: var(--color-surface-lite);
}

.featured__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.featured__body {
  padding: 36px 40px 36px 4px;
}

.featured__title {
  margin-bottom:  var(--space-3);
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      clamp(24px, 2.6vw, 34px);
  line-height:    1.05;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.featured__title a {
  color:           var(--color-text-lite);
  text-decoration: none;
}

.featured__lead {
  margin-bottom: 18px;
  font-size:     15.5px;
  color:         var(--color-text-muted-lite);
}

.featured__cta {
  margin-top: 18px;
}

/* Label met het onderwerp */
.tag {
  display:          inline-block;
  margin-bottom:    14px;
  padding:          5px 10px;
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
  border-radius:    var(--radius-full);
  font-family:      var(--font-heading);
  font-weight:      var(--font-bold);
  font-size:        var(--text-2xs);
  letter-spacing:   0.08em;
  text-transform:   uppercase;
}

/* Artikelkaarten */
.post-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-6);
}

.postcard {
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
  transition:       transform var(--transition-base),
                    border-color var(--transition-base);
}

.postcard:hover {
  transform:    translateY(-3px);
  border-color: var(--color-line-hover-lite);
}

.postcard__media {
  display:          block;
  aspect-ratio:     16 / 10;
  overflow:         hidden;
  background-color: var(--color-surface-lite);
}

.postcard__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.postcard:hover .postcard__media img {
  transform: scale(1.06);
}

.postcard__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        22px;
}

.postcard__title {
  margin-bottom:  var(--space-3);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      19px;
  line-height:    1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.postcard__title a {
  color:           var(--color-text-lite);
  text-decoration: none;
}

.postcard__lead {
  flex:          1;
  margin-bottom: var(--space-4);
  font-size:     var(--text-sm);
  color:         var(--color-text-muted-lite);
}

.postcard__meta {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      13px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-text-faint-lite);
}

/* Paginering van het overzicht: zelfde vorm als in de shop. */
.blog .page-numbers {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--space-2);
  margin-top:      50px;
  list-style:      none;
}

.blog .page-numbers li .page-numbers {
  display:         grid;
  place-items:     center;
  min-width:       44px;
  height:          44px;
  padding:         0 10px;
  border:          1.5px solid var(--color-line-strong-lite);
  border-radius:   var(--radius-input);
  font-family:     var(--font-heading);
  font-weight:     var(--font-bold);
  font-size:       var(--text-sm);
  color:           var(--color-text-lite);
  text-decoration: none;
}

.blog .page-numbers li .page-numbers.current {
  background-color: var(--color-text-lite);
  border-color:     var(--color-text-lite);
  color:            var(--color-bg-lite);
}

/* ----------------------------------------
 * ARTIKEL
 * ---------------------------------------- */

.art-head {
  padding-top: 34px;
}

/* Smalle leeskolom, gecentreerd. */
.art-kolom {
  max-width: 760px;
}

.art-head__title {
  margin-bottom:  var(--space-4);
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(32px, 4.6vw, 56px);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.art-head__meta {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      13px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-text-faint-lite);
}

.art-hero {
  margin-top:       34px;
  aspect-ratio:     16 / 8;
  overflow:         hidden;
  background-color: var(--color-surface-lite);
  border-radius:    var(--radius-band);
}

.art-hero img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.art-wrap {
  padding: 44px 0 90px;
}

/* In de leeskolom mag de tekst de volle breedte gebruiken. */
.art-wrap .prose {
  max-width: none;
}

.art-share {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-top:  34px;
  padding-top: var(--space-6);
  border-top:  1px solid var(--color-line-lite);
}

.art-share__label {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

.art-share__knop {
  display:       grid;
  place-items:   center;
  width:         38px;
  height:        38px;
  background:    none;
  border:        1.5px solid var(--color-line-strong-lite);
  border-radius: var(--radius-full);
  color:         var(--color-text-lite);
  transition:    border-color var(--transition-fast),
                 color var(--transition-fast);
}

.art-share__knop:hover {
  border-color: var(--color-primary);
  color:        var(--color-primary-dark);
}

.art-share__melding {
  font-size: 13px;
  color:     var(--color-primary-dark);
}

.lees-ook {
  padding-bottom: 90px;
}

.lees-ook__title {
  margin-bottom:  26px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      28px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 960px) {

  .info-layout {
    grid-template-columns: 1fr;
  }

  .info-side {
    position: static;
  }

  .featured {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  .featured__body {
    padding: 0 28px 30px;
  }

  .post-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {

  .post-grid {
    grid-template-columns: 1fr;
  }
}