/* ---------------------------
   Basis: landing standaard verbergen
   --------------------------- */
.landing-page-content {
  display: none; /* standaard uit, wordt alleen getoond waar het hoort */
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 40px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 800px;
  border-radius: 6px;
  margin: 30px auto 50px;
}

/* Toon de landing ALLEEN wanneer de pagina een subcategory-sectie heeft */
body:has(div[data-id="article_subcategory"]) .landing-page-content {
  display: block;
}

/* Knoppenrij */
.landing-page-content .button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.landing-page-content .btn {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #0073aa;
  color: #fff;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 4px;
  text-decoration: none;
  width: 180px;
  transition: background-color 0.3s;
  border: 1px solid transparent;
}

.landing-page-content .btn:hover {
  background-color: #005f8c;
}

/* ---------------------------
   Verberg elementen op subcategory-pagina
   --------------------------- */

/* Verberg de volledige artikelenkolom */
div[data-id="article_subcategory"] .Layout__twoColumn.Layout__fullWidth {
  display: none !important;
}

/* Verberg layoutblokken die niet gewenst zijn */
div[data-id="article_subcategory"] .Layout__layout1,
div[data-id="article_subcategory"] .Layout__layout2 {
  display: none !important;
}

/* Verberg 'volg' elementen op meerdere plaatsen */
div[data-id="article_subcategory"] .SubscribeDepart__subs .SubscribeDepart__followContent,
div[data-id="articleList"] .SubscribeDepart__subs .SubscribeDepart__followContent,
div[data-id="articleDetail"] .ArticleDetailRightContainer__followContentLow {
  display: none !important;
}

/* ---------------------------
   Responsive
   --------------------------- */
@media (max-width: 768px) {
  .landing-page-content {
    width: 90%;
    padding: 20px;
  }
  .landing-page-content .button-container {
    flex-direction: column;
    gap: 10px;
  }
  .landing-page-content .btn {
    width: 100%;
    padding: 15px;
    font-size: 18px;
  }
}