/*
Theme Name: DT10 Child
Template: DT10
*/

.listing-articles__content {
    max-height: 600px;
    overflow-y: auto;
}
/* Ensure links inside Articles are clickable and above any overlays */
.listing-articles-box {
  position: relative;
  z-index: 5;
}
.listing-articles-box a {
  pointer-events: auto;
  position: relative;
  z-index: 6;
}
.articles-links { padding-left: 18px; margin: 0 0 12px; }
.articles-links li { margin: 6px 0; }
/* Make Articles block look like other DT10 boxed sections */
.listing-articles-box {
  border: 1px solid #dcdcde;      /* solid border */
  background: #fff;
}

/* Match header weight/feel */
.listing-articles-box ._header ._title {
  font-weight: 600;               /* bold like other headers */
  font-size: inherit;             /* inherit DT10 sizing */
}

/* Optional spacing polish */
.listing-articles-box .listing-articles-text p {
  margin: 0 0 1rem;
}

/* Links section */
.listing-articles-links-wrap {
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-top: 12px;
}

.listing-articles-links-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.articles-links {
  padding-left: 18px;
  margin: 0;
}

.articles-links li {
  margin: 6px 0;
}
/* Extra breathing room below Articles section */
.listing-articles-box {
  margin-bottom: 2rem; /* adjust if you want more/less */
}
.listing-articles-image {
  margin: 1.25rem 0;
}

.listing-articles-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.listing-articles-image-caption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 6px;
}
.listing-articles-box{
  border: 1px solid #dcdcde;
  background: #fff;
}
.listing-articles-box{
  margin-bottom: 32px; /* increase/decrease as you like */
}
/* Clamp long article content */
.listing-articles-box .listing-articles-text{
  max-height: 420px;      /* adjust */
  overflow: hidden;
  position: relative;
}

/* subtle fade at bottom */
.listing-articles-box .listing-articles-text:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
/* 1) Solid border + card look */
div.listing-articles-box.rounded{
  border: 1px solid #dcdcde !important;
  background: #fff !important;
}

/* 2) Space before the next section (Services etc.) */
div.listing-articles-box.rounded{
  margin-bottom: 32px !important;
}

/* 3) Shorten visible article area (works even if listing-articles-text isn't present) */
div.listing-articles-box.rounded .listing-articles__content{
  max-height: 420px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Fade at bottom */
div.listing-articles-box.rounded .listing-articles__content:after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 80px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff) !important;
  pointer-events: none !important;
}
/* ===== Articles styling (force) ===== */

/* Border + card look */
.rounded.mt-4.listing-articles-box{
  border: 2px solid #dcdcde !important;
  background: #fff !important;
  margin-bottom: 32px !important;
}

/* Title weight to match DT10 boxes */
.rounded.mt-4.listing-articles-box ._header ._title{
  font-weight: 600 !important;
}

/* Clamp ONLY the text, keep links visible */
.rounded.mt-4.listing-articles-box .listing-articles-text{
  max-height: 420px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Fade out bottom of text */
.rounded.mt-4.listing-articles-box .listing-articles-text:after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 90px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff) !important;
  pointer-events: none !important;
}

/* Keep links section separated */
.rounded.mt-4.listing-articles-box .listing-articles-links-wrap{
  border-top: 1px solid #eee !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}

.rounded.mt-4.listing-articles-box .articles-links{
  padding-left: 18px !important;
  margin: 0 !important;
}

.rounded.mt-4.listing-articles-box .articles-links li{
  margin: 6px 0 !important;
}
/* Make Articles text scrollable */
.rounded.mt-4.listing-articles-box .listing-articles-text{
  max-height: 420px;          /* adjust height as needed */
  overflow-y: auto;
  padding-right: 10px;        /* space for scrollbar */
}

/* Optional: nicer scrollbar (Chrome/Edge/Safari) */
.rounded.mt-4.listing-articles-box .listing-articles-text::-webkit-scrollbar{
  width: 8px;
}
.rounded.mt-4.listing-articles-box .listing-articles-text::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 4px;
}
.rounded.mt-4.listing-articles-box .listing-articles-text::-webkit-scrollbar-track{
  background: #f5f5f5;
}
