/* ============================================================
   India Pharma Expo — News & Articles (eHealth Magazine feed)
   .ln-*  home page slider   (index.html  #latest-news)
   .nd-*  article detail page (news-detail.php)
   ============================================================ */

/* ---------- Home page slider ---------- */
.ln-section {
   position: relative;
   padding: 80px 0;
   background:
      radial-gradient(640px 300px at 8% 0%, rgba(43, 189, 230, 0.10) 0%, transparent 62%),
      radial-gradient(640px 300px at 94% 100%, rgba(1, 168, 111, 0.07) 0%, transparent 62%),
      #f5f9fd;
   overflow: hidden;
   isolation: isolate;
}

.ln-section.ln-is-empty {
   display: none;
}

.ln-container {
   max-width: 1343px;
   margin: 0 auto;
   padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.ln-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 34px;
}

.ln-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 4px;
   text-transform: uppercase;
   color: #04734f;
   background: linear-gradient(135deg, rgba(1, 168, 111, 0.10) 0%, rgba(1, 168, 111, 0.04) 100%);
   border: 1px solid rgba(1, 168, 111, 0.24);
   padding: 9px 20px 9px 14px;
   border-radius: 999px;
   margin-bottom: 18px;
}

.ln-eyebrow-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: linear-gradient(135deg, #01a86f 0%, #00d49a 100%);
   box-shadow: 0 0 0 3px rgba(1, 168, 111, 0.16);
   flex-shrink: 0;
}

.ln-headline {
   font-family: 'Cairo', sans-serif;
   font-size: 40px;
   font-weight: 700;
   text-transform: uppercase;
   color: #0c1a2e;
   line-height: 1.15;
   letter-spacing: -0.02em;
   margin: 0;
}

.ln-headline em {
   font-style: normal;
   color: #2bbde6;
}

.ln-nav {
   display: flex;
   gap: 10px;
   flex-shrink: 0;
}

.ln-nav-btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: 1px solid rgba(12, 26, 46, 0.14);
   background: #ffffff;
   color: #0c1a2e;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
   box-shadow: 0 8px 20px rgba(12, 26, 46, 0.06);
}

.ln-nav-btn svg {
   width: 20px;
   height: 20px;
   display: block;
}

.ln-nav-btn:hover,
.ln-nav-btn:focus-visible {
   background: #0070fa;
   border-color: #0070fa;
   color: #ffffff;
   transform: translateY(-2px);
   outline: none;
}

.ln-track {
   display: flex;
   gap: 24px;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   /* extra room so card shadows are not clipped by the scroll box */
   padding: 12px 24px 40px;
   margin: -12px -24px -28px;
   scroll-padding: 0 24px;
   list-style: none;
}

.ln-track::-webkit-scrollbar {
   display: none;
}

.ln-card {
   flex: 0 0 calc((100% - 72px) / 4);
   min-width: 0;
   scroll-snap-align: start;
   display: flex;
   flex-direction: column;
   background: #ffffff;
   border: 1px solid rgba(12, 26, 46, 0.07);
   border-radius: 14px;
   overflow: hidden;
   text-decoration: none;
   color: inherit;
   box-shadow: 0 8px 22px rgba(12, 26, 46, 0.07);
   transition: transform .35s ease, box-shadow .35s ease;
}

.ln-card:hover,
.ln-card:focus-visible {
   transform: translateY(-6px);
   box-shadow: 0 20px 40px rgba(12, 26, 46, 0.14);
   outline: none;
}

.ln-card:focus-visible {
   box-shadow: 0 0 0 3px #2bbde6, 0 20px 40px rgba(12, 26, 46, 0.14);
}

.ln-card-media {
   position: relative;
   display: block;
   aspect-ratio: 3 / 2;
   overflow: hidden;
   background: linear-gradient(135deg, #0c2a4d 0%, #0070fa 100%);
}

.ln-card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s ease;
}

.ln-card:hover .ln-card-media img {
   transform: scale(1.06);
}

.ln-card-media--empty::after {
   content: "eHealth";
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Cairo', sans-serif;
   font-size: 26px;
   font-weight: 800;
   letter-spacing: 1px;
   color: rgba(255, 255, 255, 0.85);
}

.ln-card-title {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-family: 'Cairo', sans-serif;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.45;
   color: #0c1a2e;
   margin: 16px 18px 20px;
   min-height: calc(17px * 1.45 * 3);
   transition: color .25s ease;
}

.ln-card:hover .ln-card-title {
   color: #0070fa;
}

/* Loading placeholders (same size as real cards, so the page does not jump) */
.ln-card--skeleton {
   pointer-events: none;
}

.ln-card--skeleton .ln-card-media,
.ln-card--skeleton .ln-card-title {
   background: linear-gradient(90deg, #e8eef5 0%, #f4f7fb 50%, #e8eef5 100%);
   background-size: 200% 100%;
   animation: lnShimmer 1.4s linear infinite;
}

.ln-card--skeleton .ln-card-title {
   border-radius: 6px;
}

@keyframes lnShimmer {
   from { background-position: 200% 0; }
   to { background-position: -200% 0; }
}

@media (max-width: 1199.98px) {
   .ln-card { flex-basis: calc((100% - 48px) / 3); }
}

@media (max-width: 991.98px) {
   .ln-section { padding: 64px 0; }
   .ln-headline { font-size: 32px; }
   .ln-card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 575.98px) {
   .ln-section { padding: 52px 0; }
   .ln-header { margin-bottom: 24px; }
   .ln-headline { font-size: 26px; }
   .ln-nav-btn { width: 42px; height: 42px; }
   .ln-track { gap: 16px; }
   .ln-card { flex-basis: 82%; }
   .ln-card-title { font-size: 16px; min-height: calc(16px * 1.45 * 3); margin: 14px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
   .ln-track { scroll-behavior: auto; }
   .ln-card,
   .ln-card-media img,
   .ln-nav-btn { transition: none; }
   .ln-card--skeleton .ln-card-media,
   .ln-card--skeleton .ln-card-title { animation: none; }
}


/* ---------- Article detail page ---------- */
.nd-hero {
   position: relative;
   padding: 170px 0 70px;
   background:
      radial-gradient(760px 360px at 12% 0%, rgba(43, 189, 230, 0.22) 0%, transparent 62%),
      radial-gradient(640px 320px at 92% 100%, rgba(1, 168, 111, 0.16) 0%, transparent 62%),
      #071426;
   color: #ffffff;
   overflow: hidden;
}

.nd-container {
   width: min(1180px, calc(100% - 32px));
   margin: 0 auto;
}

.nd-breadcrumb {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.68);
   margin: 0 0 22px;
   padding: 0;
   list-style: none;
}

.nd-breadcrumb a {
   color: rgba(255, 255, 255, 0.86);
   text-decoration: none;
}

.nd-breadcrumb a:hover {
   color: #31c2e9;
}

.nd-breadcrumb li + li::before {
   content: "/";
   margin-right: 8px;
   color: rgba(255, 255, 255, 0.4);
}

.nd-cats {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 16px;
}

.nd-cat {
   display: inline-flex;
   align-items: center;
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #ffffff;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.22);
   padding: 6px 13px;
   border-radius: 999px;
}

.nd-title {
   font-family: 'Cairo', sans-serif;
   font-size: clamp(28px, 4vw, 46px);
   font-weight: 800;
   line-height: 1.18;
   color: #ffffff;
   max-width: 980px;
   margin: 0 0 18px;
}

.nd-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.76);
}

.nd-meta span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.nd-meta svg {
   width: 16px;
   height: 16px;
   color: #31c2e9;
}

.nd-body {
   padding: 56px 0 80px;
   background: #ffffff;
}

.nd-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 340px;
   gap: 48px;
   align-items: start;
}

.nd-figure {
   margin: 0 0 32px;
   border-radius: 14px;
   overflow: hidden;
   background: #eef3f8;
   box-shadow: 0 18px 44px rgba(12, 26, 46, 0.12);
}

.nd-figure img {
   width: 100%;
   height: auto;
   display: block;
}

.nd-content {
   font-family: 'Inter', sans-serif;
   font-size: 17px;
   line-height: 1.8;
   color: #2a3a4f;
   overflow-wrap: break-word;
}

.nd-content > *:first-child {
   margin-top: 0;
}

.nd-content p {
   margin: 0 0 1.25em;
}

.nd-content h2,
.nd-content h3,
.nd-content h4,
.nd-content h5 {
   font-family: 'Cairo', sans-serif;
   font-weight: 700;
   color: #0c1a2e;
   line-height: 1.3;
   margin: 1.6em 0 .6em;
}

.nd-content h2 { font-size: 28px; }
.nd-content h3 { font-size: 23px; }
.nd-content h4 { font-size: 20px; }
.nd-content h5 { font-size: 18px; }

.nd-content a {
   color: #0070fa;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.nd-content ul,
.nd-content ol {
   margin: 0 0 1.25em;
   padding-left: 1.4em;
}

.nd-content ul { list-style: disc; }
.nd-content ol { list-style: decimal; }

.nd-content li {
   margin-bottom: .5em;
}

.nd-content blockquote {
   margin: 1.6em 0;
   padding: 18px 24px;
   border-left: 4px solid #2bbde6;
   background: #f3f8fd;
   border-radius: 0 10px 10px 0;
   font-style: italic;
   color: #0c1a2e;
}

.nd-content img,
.nd-content iframe,
.nd-content video {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
}

.nd-content iframe {
   width: 100%;
   aspect-ratio: 16 / 9;
}

.nd-content figure {
   margin: 1.6em 0;
   max-width: 100%;
}

.nd-content figcaption,
.nd-content .wp-caption-text {
   font-size: 14px;
   color: #6b7a8c;
   margin-top: 8px;
}

.nd-content table {
   width: 100%;
   border-collapse: collapse;
   margin: 0 0 1.25em;
   font-size: 15px;
}

.nd-content th,
.nd-content td {
   border: 1px solid #dde6f0;
   padding: 10px 12px;
   text-align: left;
}

.nd-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 36px 0 0;
   padding: 24px 0 0;
   border-top: 1px solid #e3eaf2;
}

.nd-tag {
   font-family: 'Inter', sans-serif;
   font-size: 13px;
   color: #38465a;
   background: #f1f5fa;
   border-radius: 999px;
   padding: 6px 14px;
}

.nd-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 32px;
}

.nd-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 600;
   padding: 12px 22px;
   border-radius: 999px;
   text-decoration: none;
   transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.nd-btn svg {
   width: 16px;
   height: 16px;
}

.nd-btn--primary {
   background: #0070fa;
   color: #ffffff;
   border: 1px solid #0070fa;
}

.nd-btn--primary:hover {
   background: #0c1a2e;
   border-color: #0c1a2e;
   color: #ffffff;
}

.nd-btn--ghost {
   background: transparent;
   color: #0c1a2e;
   border: 1px solid rgba(12, 26, 46, 0.2);
}

.nd-btn--ghost:hover {
   border-color: #0070fa;
   color: #0070fa;
}

.nd-source {
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   color: #6b7a8c;
   margin: 28px 0 0;
}

.nd-source a {
   color: #0070fa;
}

/* Sidebar */
.nd-aside {
   position: sticky;
   top: 120px;
}

.nd-aside-box {
   background: #f5f9fd;
   border: 1px solid #e3eaf2;
   border-radius: 14px;
   padding: 24px;
}

.nd-aside-title {
   font-family: 'Cairo', sans-serif;
   font-size: 20px;
   font-weight: 800;
   text-transform: uppercase;
   color: #0c1a2e;
   margin: 0 0 18px;
}

.nd-aside-title em {
   font-style: normal;
   color: #2bbde6;
}

.nd-related {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 16px;
}

.nd-related a {
   display: grid;
   grid-template-columns: 96px minmax(0, 1fr);
   gap: 14px;
   align-items: center;
   text-decoration: none;
   color: #0c1a2e;
}

.nd-related-img {
   display: block;
   aspect-ratio: 3 / 2;
   border-radius: 8px;
   overflow: hidden;
   background: linear-gradient(135deg, #0c2a4d 0%, #0070fa 100%);
}

.nd-related-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.nd-related-title {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-family: 'Cairo', sans-serif;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.4;
   transition: color .25s ease;
}

.nd-related a:hover .nd-related-title {
   color: #0070fa;
}

/* Not found */
.nd-empty {
   text-align: center;
   padding: 40px 0 20px;
}

.nd-empty p {
   font-family: 'Inter', sans-serif;
   font-size: 17px;
   color: #38465a;
   margin: 0 0 24px;
}

@media (max-width: 1199.98px) {
   .nd-hero { padding-top: 110px; }
}

@media (max-width: 991.98px) {
   .nd-layout { grid-template-columns: minmax(0, 1fr); }
   .nd-aside { position: static; }
}

@media (max-width: 575.98px) {
   .nd-hero { padding: 96px 0 44px; }
   .nd-body { padding: 36px 0 56px; }
   .nd-content { font-size: 16px; }
   .nd-content h2 { font-size: 24px; }
   .nd-content h3 { font-size: 20px; }
}