/* ==========================================================================
   NIVAD PHARMED SALAMAT — News detail pages
   --------------------------------------------------------------------------
   Shared by news/{iranpharma-11,quality-panel,experience-transfer}.
   Every selector is scoped under .news-detail (the <main> element) or an
   nd- prefixed class, so nothing here can leak into the news index — that
   page keeps owning the .news-card component in style.css.

   All colors come from style.css custom properties, so the light and dark
   themes both work without a single hard-coded surface. Layout uses logical
   properties throughout, so the EN (ltr) toggle does not mirror anything by
   hand.

   Animation contract: main.js's IntersectionObserver toggles .visible on
   .anim elements. Nothing here animates on its own — the reveal is the
   shared .anim rule in style.css — so a page rendered with JS off (or under
   the noscript override) is already in its finished state.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECTION SHELL
   -------------------------------------------------------------------------- */
.news-detail .nd-section { padding: clamp(56px, 7vw, 92px) 0; background: var(--surface); }
.nd-article { max-width: 880px; margin-inline: auto; }
.nd-article .section-tag { margin-bottom: clamp(20px, 3vw, 28px); }

/* --------------------------------------------------------------------------
   2. LEAD — the poster, then the event facts
   The posters are portrait (720x1280 and 1024x1280) and carry the schedule,
   the venue and the speaker names inside the artwork. On the story's own page
   they are the content rather than a thumbnail, so they run at their natural
   proportions and as large as the measure allows — there is no fixed box to
   letterbox against, and therefore no blurred backdrop needed to fill gaps
   that no longer exist. The height cap is what stops a very tall poster from
   pushing the article text a full screen down.
   -------------------------------------------------------------------------- */
.nd-lead {
  display: grid;
  gap: clamp(22px, 3vw, 32px);
  margin-bottom: clamp(30px, 4vw, 48px);
}

.nd-poster {
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
.nd-poster-img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: 720px;
}

/* The facts are a <dl>: each row is a term and its value, which is exactly
   what a screen reader should announce for "when / where / who". The 2px
   gaps show the panel background through as hairline rules, so the rows need
   no borders of their own. */
.nd-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.nd-fact { background: var(--surface-2); padding: 15px 20px; }
.nd-fact dt {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-size: 12.5px; font-weight: 700;
  color: var(--text-3);
  margin-bottom: 4px;
}
.nd-fact dt i { color: var(--teal); font-size: 12.5px; }
.nd-fact dd { margin: 0; font-size: 14.5px; color: var(--text); line-height: 1.9; }

/* --------------------------------------------------------------------------
   3. BODY TYPOGRAPHY
   Matches the knowledge article (knowledge/hpv) so the two long-form page
   types read as one voice; the rules live here because three pages share
   them.
   -------------------------------------------------------------------------- */
.nd-body h2 {
  font-family: var(--font-h); font-size: clamp(18.5px, 2.6vw, 23px);
  font-weight: 700; color: var(--text); line-height: 1.65;
  margin: 40px 0 14px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--teal);
}
.nd-body > h2:first-child { margin-top: 0; }
.nd-body p { font-size: 15.5px; color: var(--text-2); line-height: 2.05; margin-bottom: 14px; }
.nd-body ul { margin: 0 0 14px; padding-inline-start: 24px; list-style: disc; }
.nd-body ul li { font-size: 15.5px; color: var(--text-2); line-height: 2.05; margin-bottom: 6px; }
.nd-body ul li::marker { color: var(--teal); }
.nd-body strong { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------------------------
   4. SESSION LIST — a running order with a time against each slot
   -------------------------------------------------------------------------- */
/* These two lists live inside .nd-body, whose generic `ul` rule would give
   them discs and a text indent; the selectors carry the extra class so they
   out-rank it instead of relying on source order. */
.nd-body ul.nd-lineup,
.nd-body ul.nd-people { list-style: none; padding-inline-start: 0; }

.nd-lineup { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 14px; }
.nd-lineup > li {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 20px;
}
.nd-slot {
  flex: none;
  min-width: 78px; text-align: center;
  font-family: var(--font-h); font-size: 13px; font-weight: 700;
  color: var(--teal);
  background: rgba(18,166,166,.10);
  border: 1px solid rgba(18,166,166,.22);
  border-radius: 50px;
  padding: 6px 12px;
}
.nd-lineup b {
  display: block;
  font-family: var(--font-h); font-size: 15px; font-weight: 700;
  color: var(--text); line-height: 1.8;
}
.nd-lineup span { display: block; font-size: 13.5px; color: var(--text-3); line-height: 1.85; }

/* --------------------------------------------------------------------------
   5. PEOPLE GRID — panel speakers, name over role
   -------------------------------------------------------------------------- */
.nd-people {
  margin: 0 0 14px; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr));
  gap: 14px;
}
.nd-person {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--teal);
  border-radius: var(--r-sm);
  padding: 15px 18px;
}
/* The panel chair is the one row that outranks the others. */
.nd-person--lead { border-inline-start-color: var(--cyan-400); background: rgba(18,166,166,.07); }
.nd-person b {
  display: block;
  font-family: var(--font-h); font-size: 14.5px; font-weight: 700;
  color: var(--text); line-height: 1.8;
}
.nd-person span { display: block; font-size: 13px; color: var(--text-3); line-height: 1.8; }

/* --------------------------------------------------------------------------
   6. FOOT — back to the panel, then the other two stories
   -------------------------------------------------------------------------- */
.nd-foot {
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.nd-foot-title {
  font-family: var(--font-h); font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 18px;
}
.nd-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(286px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
a.nd-rel {
  display: flex; gap: 14px; align-items: center;
  text-decoration: none; color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px;
  transition: var(--tr-fast);
}
a.nd-rel:hover {
  border-color: rgba(18,166,166,.34);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
a.nd-rel:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.nd-rel-thumb {
  flex: none;
  width: 62px; height: 62px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface);
}
.nd-rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nd-rel-txt span {
  display: block;
  font-family: var(--font-h); font-size: 12px; font-weight: 700;
  color: var(--teal); margin-bottom: 3px;
}
.nd-rel-txt b {
  display: block;
  font-family: var(--font-h); font-size: 14px; font-weight: 700;
  color: var(--text); line-height: 1.75;
}

/* --------------------------------------------------------------------------
   7. NARROW VIEWPORTS
   The media query covers real phones; the rules are restated under
   html[data-view="mobile"] for the forced-mobile view, where the window can
   be any width and no width query would fire.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .nd-facts { grid-template-columns: 1fr; }
}
html[data-view="mobile"] .nd-facts { grid-template-columns: 1fr; }

@media (max-width: 560px) {
  .nd-lineup > li { flex-direction: column; gap: 10px; }
  .nd-slot { align-self: flex-start; }
}
html[data-view="mobile"] .nd-lineup > li { flex-direction: column; gap: 10px; }
html[data-view="mobile"] .nd-slot { align-self: flex-start; }