/* =========================================================
   WhenIsMyTrain.in — article.css
   Loaded only on blog/article pages, on top of /style.css.
   Uses the same design tokens (colors, fonts, radii) already
   defined in style.css so articles feel native to the site.
   ========================================================= */

/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */
.breadcrumb-bar{ background: var(--surface); border-bottom:1px solid var(--border-soft); }
.breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:14px 0; font-size:.84rem; color: var(--muted); }
.breadcrumb a{ color: var(--muted); font-weight:600; }
.breadcrumb a:hover{ color: var(--rail-blue); }
.breadcrumb .sep{ color: var(--muted-2); }
.breadcrumb .current{ color: var(--ink); font-weight:600; }

/* ---------------------------------------------------------
   Article hero
   --------------------------------------------------------- */
.article-hero{ padding:44px 0 28px; background: var(--platform); }
.article-category{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color: var(--rail-blue); background: var(--rail-blue-50); padding:6px 12px; border-radius: var(--r-pill); margin-bottom:16px;
}
.article-hero h1{ font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height:1.15; margin-bottom:14px; }
.article-dek{ font-size:1.08rem; color: var(--muted); max-width:70ch; margin-bottom:22px; }

.article-meta{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; font-size:.86rem; color: var(--muted); }
.article-meta .meta-item{ display:flex; align-items:center; gap:7px; }
.article-meta svg{ width:16px; height:16px; color: var(--muted-2); flex-shrink:0; }
.article-meta strong{ color: var(--ink); font-weight:600; }

.article-hero-art{
  margin-top:26px; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--border-soft);
  background: linear-gradient(135deg, var(--rail-blue-50), var(--surface));
  height:280px; display:flex; align-items:center; justify-content:center;
}
.article-hero-art img{ width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------
   Layout: content + sticky TOC sidebar
   --------------------------------------------------------- */
.article-layout{
  display:grid; grid-template-columns: 1fr 280px; gap:48px; align-items:start;
  padding: 40px 0 20px; max-width: var(--container); margin:0 auto; padding-left:24px; padding-right:24px;
}
.article-body{ min-width:0; }
.article-aside{ position:sticky; top: calc(var(--nav-h) + 20px); }

.toc-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md);
  padding:20px; box-shadow: var(--shadow-sm);
}
.toc-card h2{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); margin-bottom:12px; }
.toc-card ol{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.toc-card li{ counter-increment: toc; margin-bottom:2px; }
.toc-card ol li a{
  display:flex; gap:8px; font-size:.88rem; color: var(--ink); padding:7px 6px; border-radius:8px; line-height:1.35;
  transition: background .15s, color .15s;
}
.toc-card ol li a::before{ content: counter(toc) "."; color: var(--rail-blue); font-weight:700; font-family: var(--font-mono); flex-shrink:0; }
.toc-card ol li a:hover{ background: var(--rail-blue-50); color: var(--rail-blue); }

.aside-calc-cta{
  margin-top:18px; background: var(--navy); color:#fff; border-radius: var(--r-md); padding:20px; text-align:center;
}
.aside-calc-cta p{ font-size:.86rem; color:#CBD5E1; margin-bottom:14px; }
.aside-calc-cta .btn{ width:100%; color:#fff; text-decoration:none; }

/* ---------------------------------------------------------
   Article typography & content blocks
   --------------------------------------------------------- */
.article-body h2{
  font-size:1.45rem; margin: 40px 0 14px; scroll-margin-top: calc(var(--nav-h) + 16px);
}
.article-body h3{ font-size:1.15rem; margin: 26px 0 10px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.article-body p{ color: var(--ink); font-size:1.01rem; line-height:1.75; margin-bottom:16px; }
.article-body p.lede{ font-size:1.08rem; color: var(--muted); }
.article-body ul, .article-body ol{ margin: 0 0 18px 0; padding-left:22px; color: var(--ink); line-height:1.7; }
.article-body ul{ list-style:disc; }
.article-body ol{ list-style:decimal; }
.article-body li{ margin-bottom:6px; }
.article-body a{ color: var(--rail-blue); font-weight:600; text-decoration:underline; text-decoration-color: var(--rail-blue-100); text-underline-offset:2px; }
.article-body strong{ color: var(--ink); }

/* The generic .article-body p/a rules above (needed for normal body
   copy) have higher specificity than the shared .cta-band styles from
   style.css, since they combine a class with an element selector.
   Without these overrides, the CTA band's paragraph and button text
   silently inherit dark/blue text on a dark background — these
   re-assert the intended white/light-gray CTA styling. */
.article-body .cta-band h2{ color:#fff; }
.article-body .cta-band p{ color:#CBD5E1; text-decoration:none; }
.article-body .cta-band a.btn{ color:#fff; text-decoration:none; }

/* Same defensive fix for the Travel Recommendation Engine's cards —
   .article-body a/p would otherwise win on specificity and override
   the intended button/disclosure styling with default link/body-text
   colors and sizes. */
.article-body .tr-btn{ color:#fff; text-decoration:none; }
.article-body .tr-disclosure{ color: var(--muted-2); font-size:.8rem; }
.article-body .tr-disclosure a{ color: var(--muted-2); text-decoration:underline; }
.article-body .tr-powered-by{ color: var(--muted-2); text-decoration:none; }

/* Blog articles are narrower than the homepage, so the Travel
   Recommendation cards use a 2-column grid here instead of the
   homepage's 4 columns (still collapses to 1 column on mobile via the
   shared rule in style.css). */
.tr-grid{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px){
  .tr-grid{ grid-template-columns: 1fr; }
}

.article-body table{ width:100%; border-collapse:collapse; margin: 8px 0 22px; font-size:.92rem; }
.article-body th{
  text-align:left; background: var(--surface); color: var(--muted); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.04em; padding:10px 12px; border-bottom:2px solid var(--border);
}
.article-body td{ padding:11px 12px; border-bottom:1px solid var(--border-soft); color: var(--ink); }
.article-body tr:last-child td{ border-bottom:none; }

/* Callout boxes: tip / warning / note */
.callout{ display:flex; gap:14px; padding:16px 18px; border-radius: var(--r-md); margin:22px 0; align-items:flex-start; }
.callout svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.callout h4{ font-size:.92rem; margin-bottom:4px; font-family: var(--font-display); }
.callout p{ font-size:.9rem; margin-bottom:0; color: var(--muted); }
.callout-tip{ background: var(--go-green-50); }
.callout-tip svg{ color: var(--go-green); }
.callout-warning{ background: var(--tatkal-50); }
.callout-warning svg{ color: var(--tatkal); }
.callout-note{ background: var(--rail-blue-50); }
.callout-note svg{ color: var(--rail-blue); }

/* Illustration placeholder blocks inside article body */
.art-placeholder{
  border:1.5px dashed var(--border); border-radius: var(--r-md); background: var(--surface);
  padding:34px 20px; text-align:center; color: var(--muted-2); margin: 24px 0;
}
.art-placeholder svg{ width:28px; height:28px; margin-bottom:8px; color: var(--muted-2); }
.art-placeholder span{ display:block; font-size:.8rem; font-weight:600; }

/* Example / scenario card */
.example-card{
  background: var(--surface); border:1px solid var(--border-soft); border-left:4px solid var(--rail-blue);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding:18px 20px; margin:20px 0;
}
.example-card .ex-label{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--rail-blue); margin-bottom:8px; }
.example-card p{ margin-bottom:6px; }
.example-card p:last-child{ margin-bottom:0; }

/* Mini timeline reused inside articles */
.mini-timeline{ display:flex; flex-direction:column; gap:0; margin:22px 0; }
.mini-timeline-item{ display:flex; gap:16px; position:relative; padding-bottom:22px; }
.mini-timeline-item:last-child{ padding-bottom:0; }
.mini-timeline-item::before{
  content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background: var(--border);
}
.mini-timeline-item:last-child::before{ display:none; }
.mini-timeline-dot{
  width:28px; height:28px; border-radius:50%; background: var(--rail-blue-50); color: var(--rail-blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family: var(--font-mono); font-weight:700; font-size:.8rem;
}
.mini-timeline-text h4{ font-size:.96rem; margin-bottom:3px; }
.mini-timeline-text p{ font-size:.88rem; color: var(--muted); margin-bottom:0; }

/* Summary box */
.summary-box{
  background: var(--navy); color:#fff; border-radius: var(--r-md); padding:24px 26px; margin:32px 0;
}
.summary-box h3{ color:#fff; font-size:1.05rem; margin-bottom:10px; }
.summary-box ul{ color:#CBD5E1; }
.summary-box li{ margin-bottom:6px; }
.summary-box li::marker{ color: var(--rail-blue-100); }

/* ---------------------------------------------------------
   Trust / editorial block
   --------------------------------------------------------- */
.editorial-box{
  border:1px solid var(--border-soft); border-radius: var(--r-md); padding:18px 20px; margin: 30px 0;
  background: var(--surface); font-size:.86rem; color: var(--muted);
}
.editorial-box strong{ color: var(--ink); }

/* ---------------------------------------------------------
   In-article affiliate section + AdSense placement
   Deliberately styled differently from each other so they're
   never visually confused: affiliate cards use the site's card
   language (rounded, soft shadow); the ad slot uses the plain
   dashed "AD SPACE" placeholder already used site-wide, with an
   explicit "Advertisement" label above it.
   --------------------------------------------------------- */
.affiliate-section-inline{
  margin: 36px 0; padding: 28px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
}
.ad-slot-article{ margin: 24px 0; }
.ad-slot-label{
  display:block; text-align:center; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color: var(--muted-2); margin-bottom:6px;
}

/* ---------------------------------------------------------
   FAQ (reuses .faq-item/.faq-q/.faq-a from style.css)
   --------------------------------------------------------- */
.article-faq{ margin-top:12px; }

/* ---------------------------------------------------------
   Related articles grid
   --------------------------------------------------------- */
.related-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.related-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md); padding:18px;
  transition: border-color .18s, transform .18s;
}
.related-card:hover{ border-color: var(--rail-blue); transform: translateY(-2px); }
.related-card .rc-cat{ font-size:.72rem; font-weight:700; text-transform:uppercase; color: var(--rail-blue); letter-spacing:.04em; margin-bottom:6px; }
.related-card h3{ font-size:.98rem; margin-bottom:6px; line-height:1.3; }
.related-card p{ font-size:.84rem; color: var(--muted); margin-bottom:0; }

/* ---------------------------------------------------------
   Newsletter CTA
   --------------------------------------------------------- */
.newsletter-box{
  background: var(--rail-blue-50); border:1px solid var(--rail-blue-100); border-radius: var(--r-md);
  padding:24px; margin:32px 0; text-align:center;
}
.newsletter-box h3{ font-size:1.05rem; margin-bottom:6px; }
.newsletter-box p{ font-size:.88rem; color: var(--muted); margin-bottom:16px; }
.newsletter-form{ display:flex; gap:8px; max-width:420px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.newsletter-form input{
  flex:1; min-width:200px; padding:11px 14px; border-radius: var(--r-pill); border:1.5px solid var(--border);
  font-size:.9rem; background: var(--surface); color: var(--ink);
}
.newsletter-form .btn{ padding:11px 20px; }

/* ---------------------------------------------------------
   Blog index page
   --------------------------------------------------------- */
.blog-hero{ padding:48px 0 8px; text-align:center; }
.blog-hero h1{ font-size: clamp(1.9rem,3.6vw,2.6rem); margin-bottom:12px; }
.blog-hero p{ color: var(--muted); max-width:60ch; margin:0 auto; }

.blog-search{
  max-width:480px; margin:24px auto 0; position:relative;
}
.blog-search input{
  width:100%; padding:13px 16px 13px 42px; border-radius: var(--r-pill); border:1.5px solid var(--border);
  background: var(--surface); color: var(--ink); font-size:.94rem;
}
.blog-search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color: var(--muted-2); }

.blog-categories{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:22px 0 0; }
.blog-cat-pill{
  font-size:.82rem; font-weight:600; padding:8px 16px; border-radius: var(--r-pill); border:1.5px solid var(--border);
  color: var(--muted); background: var(--surface); cursor:pointer;
}
.blog-cat-pill.active{ background: var(--rail-blue); border-color: var(--rail-blue); color:#fff; }

.blog-featured-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:36px; }
.blog-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-md); overflow:hidden;
  transition: transform .18s, box-shadow .18s;
}
.blog-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-card-art{
  height:160px; background: linear-gradient(135deg, var(--rail-blue-50), var(--surface));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.blog-card-art img{ width:100%; height:100%; object-fit:cover; }
.blog-card-body{ padding:18px; }
.blog-card .rc-cat{ font-size:.72rem; font-weight:700; text-transform:uppercase; color: var(--rail-blue); letter-spacing:.04em; margin-bottom:8px; display:block; }
.blog-card h3{ font-size:1rem; margin-bottom:8px; line-height:1.35; }
.blog-card p{ font-size:.86rem; color: var(--muted); margin-bottom:12px; }
.blog-card .bc-meta{ font-size:.76rem; color: var(--muted-2); display:flex; gap:10px; }

.blog-pagination{ display:flex; justify-content:center; gap:8px; margin:40px 0; }
.blog-pagination button{
  width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border); background: var(--surface);
  color: var(--ink); font-weight:600; cursor:pointer; font-family: var(--font-mono);
}
.blog-pagination button.active{ background: var(--rail-blue); border-color: var(--rail-blue); color:#fff; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 960px){
  .article-layout{ grid-template-columns:1fr; }
  .article-aside{ position:static; order:-1; }
  .toc-card{ margin-bottom:8px; }
  .blog-featured-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .related-grid{ grid-template-columns:1fr; }
  .blog-featured-grid{ grid-template-columns:1fr; }
  .article-layout{ padding-left:20px; padding-right:20px; }
}