/* News Detail Page Dedicated Styles */
:root {
  --nd-purple: #6C4EC4;
  --nd-purple-dark: #5A3CA7;
  --nd-gray: #E6E0F5;
  --nd-text: #1F1F1F;
}

.news-detail { padding-top: 160px; }
.newsd-container { max-width: 100%; margin: 0 135px; padding: 40px 0 96px; }
@media (max-width: 992px) { .newsd-container { margin: 0 24px; padding: 24px 0 72px; } }

.newsd-head { margin-bottom: 38px; }
.newsd-title { font-size: 48px; line-height: 1.18; font-weight: 700; color: var(--nd-text); margin: 0 0 12px; letter-spacing: .3px; }
@media (max-width: 640px) { .newsd-title { font-size: 30px; } }

.newsd-meta {
  /* Stack date and share icons vertically so share icons sit below the date */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.newsd-date { font-size: 18px; color: #555; }
.newsd-share {
  /* Flex layout ensures consistent alignment; wrapping prevents overflow on smaller screens */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-top: 40px;
}
.newsd-share .ico {
  /* Uniform clickable circle */
  width: 40px;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Icon mock backgrounds - replace with actual sprite paths */
/* Use existing social icons available in the repo */
.ico-link { background-image: url('/cfind/source/thumb/images/link-icon.svg'); }
.ico-x { background-image: url('/cfind/source/thumb/images/twitter-icon.svg'); }
.ico-fb { background-image: url('/cfind/source/thumb/images/facebook-icon.svg'); }
.ico-ig { background-image: url('/cfind/source/thumb/images/instagram-icon.svg'); }
.ico-mail { background-image: url('/cfind/source/thumb/images/mail-icon.svg'); }

.newsd-hero {
  margin: 0 0 40px;
  overflow: hidden; /* ensure cropped image doesn't overflow rounded corners */
  border-radius: 6px;
}
.newsd-hero img {
  width: 100%;
  /* Limit height and crop with cover so visual is more compact */
  height: clamp(700px, 35vh, 360px);
  object-fit: cover;
  display: block;
}

.newsd-body { max-width: none; font-size: 15px; line-height: 1.62; letter-spacing: .25px; color: #2e2e2e; }
.newsd-body p { margin: 0 0 26px; }
.newsd-body p:last-child { margin-bottom: 0; }

.newsd-divider { margin: 40px 0 0; }
.newsd-divider:before {
  /* Short left-aligned divider line */
  content: "";
  display: block;
  width: clamp(120px, 18vw, 120px);
  height: 1px;
  background: var(--nd-purple-dark);
  border-radius: 2px;
}
.newsd-divider i { display: none; }

.newsd-share--bottom {
  /* Center bottom share group for better visual balance */
  justify-content: left;
  margin: 10px 0 60px;
}

.newsd-related-title { font-size: 40px; font-weight: 700; color: var(--nd-purple); margin: 0 0 36px; letter-spacing: .3px; }
@media (max-width: 640px) { .newsd-related-title { font-size: 30px; } }

.newsd-cards { display: flex; gap: 20px; padding: 4px 6px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.newsd-cards::-webkit-scrollbar { display: none; }
.newsd-card { flex: 0 0 310px; scroll-snap-align: start; cursor: pointer; }
.newsd-card figure { margin: 0; height: 243px; overflow: hidden; border-radius: 10px; transition: box-shadow .4s ease, transform .4s ease; }
.newsd-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.newsd-card figcaption { padding: 10px 4px; }
.newsd-card strong { font-size: 13px; display: block; color: #363636; font-weight: 600; }
.newsd-card small { font-size: 11px; display: block; color: #8a8a8a; margin-top: 2px; }
.newsd-card:hover figure { transform: translateY(-4px); }

/* Keep share icons consistent across states */
.newsd-share .ico,
.newsd-share .ico:link,
.newsd-share .ico:visited,
.newsd-share .ico:hover,
.newsd-share .ico:focus,
.newsd-share .ico:active { opacity: 1; }

/* Responsive tweaks */
@media (max-width: 640px) {
  /* Slightly more spacing on mobile to keep content clear of header */
  .news-detail { padding-top: 100px; }
  .newsd-cards { gap: 14px; }
  .newsd-card { flex: 0 0 250px; }
  .newsd-card figure { height: 200px; }
  /* Reduce the top spacing for share icons on small screens so it remains compact */
  .newsd-share { margin-top: 12px; }
}

/* --- Related section scrollbar-style divider (mirrors Blog divider on news page) --- */
.section-divider { position: relative; height: 22px; margin-top: 16px; }
.section-divider:before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: gray; }
.section-divider i {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 350px; /* default width (overridden for scrollbar use) */
  height: 6px;
  background: var(--nd-purple-dark);
  transform: translateX(-50%);
  opacity: 1;
}

/* Make the divider immediately after .newsd-cards behave like a horizontal scrollbar thumb */
.newsd-cards + .section-divider i {
  left: 0;
  transform: translateX(var(--thumbX, 0px));
  width: var(--thumbW, 80px);
  transition: transform 150ms ease;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.newsd-cards + .section-divider i.is-full {
  width: 100% !important;
  transform: translateX(0) !important;
  cursor: default;
}
.newsd-cards + .section-divider i.is-dragging { cursor: grabbing; }