:root {
  --gd-bg-dark: #0e0e10;
  --gd-text: #ffffff;
  --gd-text-muted: #b9b9bf;
  --gd-border-yellow: #F7C843;
  --gd-card-radius: 16px;
  --gd-image-radius: 12px;
  --gd-anchor-offset: clamp(160px, 12vw, 240px);
}

.legal-dialogues { 
  padding-top: clamp(0px, 1.2vw, 12px);
  padding-bottom: 32px;
}

.blog-archive { padding-block: 32px; }

.legal-dialogues-intro {
  width: 100%;
  padding: clamp(0px, 1vw, 8px) 16px;
  display: flex;
  justify-content: center;
}

.legal-dialogues-intro .intro-wrapper {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

.legal-dialogues-intro .intro-title { 
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  margin: 0;
}

.legal-dialogues-intro .intro-text {
  margin: 24px auto 38px;
  max-width: 820px;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.95;
  text-align: center;
  color: #d8d8d8;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 26px);
  justify-items: center;
}

@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-card {
  background: var(--gd-bg-dark);
  border: 2px solid var(--gd-border-yellow);
  border-top-left-radius: calc(var(--gd-card-radius) - 8px);
  border-top-right-radius: calc(var(--gd-card-radius) - 8px);
  border-bottom-left-radius: calc(var(--gd-card-radius) - 8px);
  border-bottom-right-radius: calc(var(--gd-card-radius) + 22px);
  padding: 12px;
  color: var(--gd-text);
  overflow: hidden;
  max-width: 85%;
  margin-inline: auto;
  text-align: left;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


.blog-card__thumb { 
  display: block; 
  margin-bottom: 10px; 
  position: relative;
}

.blog-card__image {
  width: 100%;
  height: clamp(140px, 18vw, 180px);
  object-fit: cover;
  border-radius: var(--gd-image-radius);
  border-top-left-radius: calc(var(--gd-image-radius) - 6px);
  border-top-right-radius: calc(var(--gd-image-radius) - 6px);
  border-bottom-left-radius: calc(var(--gd-image-radius) - 6px);
  border-bottom-right-radius: calc(var(--gd-image-radius) + 22px);
  background: #e6e6eb;
  display: block;
}

.blog-card__badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--gd-border-yellow);
  color: #0e0e10;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
}

.blog-card__meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--gd-text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.blog-card__meta .sep { margin: 0 6px; opacity: .5; }

.blog-card__title {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  font-weight: 800;
  text-transform: none !important;
  line-height: 1.35 !important;
  margin: 6px 0 6px !important;
}
.blog-card__title a { 
  color: inherit; 
  text-decoration: none; 
}

.blog-card__title a:hover { 
  color: var(--gd-border-yellow); 
}

.blog-card__highlight {
  background: var(--gd-border-yellow);
  color: #0e0e10;
  font-weight: 900;
  text-transform: uppercase;
  padding: 2px 8px;
  border-top-left-radius: calc(var(--gd-card-radius) - 8px);
  border-top-right-radius: calc(var(--gd-card-radius) - 8px);
  border-bottom-left-radius: calc(var(--gd-card-radius) - 8px);
  border-bottom-right-radius: calc(var(--gd-card-radius) + 22px);
  margin-left: 6px;
  font-size: 0.75rem; 
  line-height: 1.2;  
}


.blog-card__subtitle {
  font-size: 13px;
  color: #dddddf;
  margin-bottom: 5px;
}

.blog-card__excerpt {
  font-size: 13px;
  color: #cfcfd5;
  line-height: 1.6;
  margin-bottom: 10px;
}

.blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gd-text);
  text-decoration: none;
  font-weight: 700;
}

.blog-card__cta:hover { 
  color: var(--gd-border-yellow); 
}

.blog-post__featured { 
  margin-bottom: 16px; 
}

.blog-hero__image {
  width: 60%;
  height: clamp(320px, 48vw, 560px);
  object-fit: cover;
  margin: 10px auto clamp(12px, 2.5vw, 24px); 
  border-top-left-radius: calc(var(--gd-card-radius) - 8px);
  border-top-right-radius: calc(var(--gd-card-radius) - 8px);
  border-bottom-left-radius: calc(var(--gd-card-radius) - 8px);
  border-bottom-right-radius: calc(var(--gd-card-radius) + 22px);
  display: block;
}

.blog-post__content figure,
.blog-post__content .wp-block-image {
  margin: 16px clamp(12px, 2.5vw, 24px);
}

.blog-post__content figure img,
.blog-post__content .wp-block-image img,
.blog-post__content img:not(.emoji):not(.icon) {
  display: block;
  width: 100%;
  height: clamp(280px, 46vw, 520px);
  object-fit: cover;
  border-radius: var(--gd-image-radius);
  border-top-left-radius: calc(var(--gd-image-radius) - 6px);
  border-top-right-radius: calc(var(--gd-image-radius) - 6px);
  border-bottom-left-radius: calc(var(--gd-image-radius) - 6px);
  border-bottom-right-radius: calc(var(--gd-image-radius) + 22px);
  background: #e6e6eb;
}

.legal-dialogues__title, .blog-archive__title {
  color: var(--gd-text);
  text-transform: uppercase;
  font-weight: 900;
}

.blog-single { 
  padding-block: 24px 40px; 
  padding-top: calc(88px + clamp(8px, 2.5vw, 20px));
}

.blog-single__container { 
  padding-inline: clamp(16px, 3vw, 32px); 
}

.blog-post { 
  max-width: 100%;
   margin-inline: auto;
  }

.blog-post__meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--gd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-align: left;
}
.blog-post__title { 
  font-size: clamp(21px, 1.9vw, 26px) !important; 
  font-weight: 900; 
  text-transform: uppercase; 
  margin: 6px 0; 
  text-align: left;
  color: var(--gd-border-yellow);
 }

.blog-post__subtitle { 
  font-size: 16px; 
  color: #dddddf;
  margin-bottom: 16px;
  text-align: left;
 }

.blog-post__content { 
  color: var(--gd-text); 
  line-height: 1.7; 
}

.blog-single__layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 280px);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  justify-content: center;
}

.blog-single__main { 
  max-width: 760px; 
}

.blog-post__content { 
  max-width: 760px; 
}

.blog-single__toc {
  position: sticky;
  top: clamp(80px, 10vw, 140px);
  background: rgba(255,255,255,0.03);
  border: 2px solid var(--gd-border-yellow);
  border-radius: 12px 12px 12px 28px;
  padding: 14px 16px;
}

.toc__title {
  font-family: 'Bebas Neue', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  text-align: left;
}

.toc__nav { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}

.toc__link { 
  color: #eaeaea; 
  text-decoration: none; 
  font-size: 0.98rem; 
  line-height: 1.5; 
}

.toc__link:hover { 
  color: var(--gd-border-yellow); 
}

.toc__level-3 { 
  padding-left: 10px; 
  opacity: 0.9; 
}

.related-posts { 
  margin-top: 40px; 
}

.related-posts__title { 
  font-family: 'Manrope', sans-serif !important;
  color: var(--gd-text); 
  text-transform: uppercase; 
  font-weight: 900; 
  margin-bottom: 12px; 
}

.blog-single__cta {
   display: flex; 
   justify-content: center; 
   margin-top: 28px;
   }

.blog-single__cta .cta-button { 
  display: inline-flex; 
   align-items: center; 
   justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--gd-border-yellow);
  color: var(--gd-border-yellow);
  box-shadow: none;
  rotate: 180deg;

}
.blog-single__cta .cta-button svg {
  width: 20px;
  height: 20px;
}

.blog-single__cta .cta-button:hover,
.blog-single__cta .cta-button:focus {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(247, 200, 67, 0.18);
}

/* =====================================
   RESPONSIVE – Mobile optimalisatie
===================================== */


@media (max-width: 768px) {
  .blog-single {
    padding-top: calc(72px + 12px);
    padding-bottom: 32px;
  }

  .blog-single__container {  padding-inline: clamp(12px, 4vw, 20px); }

  .blog-single__layout { grid-template-columns: 1fr; gap: clamp(14px, 4vw, 22px); }
  .blog-single__toc { position: static; top: auto; order: -1; margin-bottom: 12px; }

  .blog-hero__image { width: 100%; margin-inline: clamp(0px, 2.5vw, 16px); }
  .blog-hero__image { height: clamp(320px, 80vw, 520px); }

  .blog-post__content figure,
  .blog-post__content .wp-block-image { margin: 12px clamp(8px, 3.5vw, 16px); }
  .blog-post__content figure img,
  .blog-post__content .wp-block-image img,
  .blog-post__content img:not(.emoji):not(.icon) { height: clamp(360px, 100vw, 540px); }

  .blog-post__meta {
    font-size: clamp(12px, 3.6vw, 13px);
    margin-bottom: 8px;
  }
  .blog-post__title {
    font-size: clamp(20px, 4.8vw, 24px) !important;
    margin: 6px 0;
    text-align: left;
  }
  .blog-post__subtitle {
    font-size: clamp(14px, 4.6vw, 16px);
    margin-bottom: 14px;
  }
  .blog-post__content {
    font-size: clamp(15px, 4.4vw, 16px);
    line-height: 1.75;
  }

  .related-posts { margin-top: 32px; }
  .related-posts__title { margin-bottom: 10px; }

  .blog-card__title { font-size: clamp(17px, 4.4vw, 19px); }
  .blog-card__excerpt { font-size: clamp(13px, 4.2vw, 14px); }
}

@media (max-width: 992px) {
  .blog-single__layout { grid-template-columns: 1fr; gap: clamp(16px, 3vw, 28px); }
  .blog-single__toc { position: static; top: auto; order: -1; }
}