/* ================================================
   TRANSIT HUB PAGE STYLES
   ================================================ */

/* --- Hero Breadcrumb override --- */
.transdetail_header .jyotishbread {
  background: transparent;
  padding: 0;
  margin-bottom: 12px;
}
.transdetail_header .jyotishbread .container-fluid { padding: 0; }
.transdetail_header ul.bread_custom li a,
.transdetail_header ul.bread_custom li .noanchor a { color: rgba(255,255,255,0.65); }
.transdetail_header ul.bread_custom li a:hover { color: #fff; }
.transdetail_header ul.bread_custom li.active .noanchor a { color: rgba(255,255,255,0.9); }
.transdetail_header .arrow_black { filter: brightness(0) invert(1); opacity: 0.5; }

/* --- Hero --- */
.th-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.th-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 20%;
}
.th-hero-ov1 {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(8,12,22,0.98) 0%,
    rgba(8,12,22,0.92) 40%,
    rgba(8,12,22,0.55) 65%,
    rgba(8,12,22,0.12) 100%);
}
.th-hero-ov2 {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,14,26,1.0) 0%,
    rgba(10,14,26,0.6) 30%,
    transparent 60%);
}
.th-hero-body {
  position: relative; z-index: 2;
  padding: 0 40px 80px;
  max-width: 680px;
  padding-top: 120px;
}
.th-breadcrumb {
  position: absolute; top: 80px; left: 40px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #94a3b8;
}
.th-breadcrumb a { color: #94a3b8; text-decoration: none; }
.th-breadcrumb a:hover { color: #3ea6ff; }
.th-breadcrumb .th-bc-sep { color: #334155; }
.th-breadcrumb .th-bc-current { color: #cbd5e1; }
.th-hero-bread {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: 12px; margin-bottom: 14px;
}
.th-hero-bread a { color: rgba(255,255,255,0.65); text-decoration: none; }
.th-hero-bread a:hover { color: #fff; }
.th-bread-sep { color: rgba(255,255,255,0.35); font-size: 14px; }
.th-bread-cur { color: rgba(255,255,255,0.9); }
.th-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 100px;
  padding: 4px 12px 4px 8px;
  font-size: 12px; font-weight: 600;
  color: #22c55e; margin-bottom: 14px;
}
.th-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: th-pulse-green 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes th-pulse-green {
  0%,100% { box-shadow: 0 0 4px #22c55e; }
  50%     { box-shadow: 0 0 12px #22c55e, 0 0 20px rgba(34,197,94,.28); }
}
.th-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 600; line-height: 1.1;
  color: #f1f5f9; margin-bottom: 5px;
}
.th-hero h1 em { font-style: italic; color: #3ea6ff; }
.th-hero-dates {
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #3ea6ff; margin-bottom: 14px;
}
.th-hero-desc {
  font-size: 14px; color: #94a3b8;
  max-width: 490px; line-height: 1.8; margin-bottom: 28px;
}
.th-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.th-hstat {
  background: rgba(17,24,39,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  backdrop-filter: blur(4px);
}
.th-hstat-val { font-size: 1.35rem; font-weight: 700; color: #f1f5f9; line-height: 1; }
.th-hstat-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: #64748b;
}
.jyo_nav.jyo_nav2 + div .th-sticky-nav{
  top: 56px;
}
.jyo_nav + div .th-sticky-nav{
  top: 110px;
}
/* --- Sticky Nav --- */
.th-sticky-nav {
  position: sticky; top: 56px; z-index: 10;
  background: #080c16;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.th-sni {
  display: flex; align-items: center;
  /* max-width: 1280px; */
   margin: 0 auto; padding: 0 40px;
  overflow-x: auto; scrollbar-width: none;
}
.th-sni::-webkit-scrollbar { display: none; }
.th-nl {
  flex-shrink: 0; padding: 14px 16px;
  font-size: 14px; font-weight: 500;
  color: #64748b; text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all .18s;
  /* Mobile tap feedback: visible cyan flash on press so Clarity sees
     motion at the tap coordinate BEFORE the scroll-spy switches the
     .active class (Clarity 2026-05-28 session 1s472t1 on
     /jyotishmedium/planetary-transit/moon-in-mula: SamsungInternet
     mobile dead-clicked every tab — tap fires anchor scroll but the
     tab itself didn't visibly change at the tap point, so heuristic
     read "no change at click coordinate" → dead). */
  -webkit-tap-highlight-color: rgba(62, 166, 255, 0.18);
}
.th-nl:hover { color: #cbd5e1; }
.th-nl:active {
  color: #3ea6ff;
  background: rgba(62, 166, 255, 0.08);
  border-bottom-color: rgba(62, 166, 255, 0.45);
}
.th-nl.active { color: #3ea6ff; border-bottom-color: #3ea6ff; }

/* --- Status Band --- */
.th-status-band {
  background: #0d1120;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.th-status-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px,1fr));
  /* max-width: 1280px; */
   margin: 0 auto; padding: 0 40px;
}
.th-si {
  padding: 20px 18px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 4px;
}
.th-si:last-child { border-right: none; }
.th-si-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #94a3b8;
}
.th-si-val { font-size: 14px; font-weight: 700; color: #f1f5f9; line-height: 1.3; }
.th-si-sub { font-size: 12px; color: #94a3b8; }
.th-si-live {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #22c55e;
}

/* --- Section layout --- */
.th-sec { padding: 60px 40px; 
  /* max-width: 1280px;  */
  background: #0a0e1a;
  margin: 0 auto; }
.th-sec-lbl {
  font-size: 14px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: #3ea6ff; margin-bottom: 7px;
  display: flex; align-items: center; gap: 8px;
}
.th-sec-lbl::before {
  content: '';
  display: block; width: 16px; height: 2px;
  background: #3ea6ff; border-radius: 2px; flex-shrink: 0;
}
.th-sec-title {
  font-size: clamp(1.45rem,2.7vw,2.1rem);
  font-weight: 600; line-height: 1.25; color: #f1f5f9; margin-bottom: 8px;
}
/* Editorial emphasis on the section title's planet/sign phrase. Was
   using #3ea6ff which is also the link / active-tab color → users
   tapped "Moon in Mula" expecting navigation (Clarity 2026-05-28
   session 1s472t1, SamsungInternet mobile, planetary-transit/moon-in-mula).
   Swapped to amber/gold for purely decorative emphasis — same colour
   family as the v2 theme's gold token (Soon badges, drop-cap, Data
   Rating). Pointer-events:none is belt-and-braces — <em> already has
   no handler but if a future hover-tooltip is added we don't want it
   to also become a tap target. */
.th-sec-title em {
  font-style: italic;
  color: #fbbf24;
  cursor: text;
}
.th-sec-sub {
  font-size: 13px; color: #94a3b8;
  max-width: 510px; line-height: 1.75; margin-bottom: 32px;
}
.th-divider { height: 1px; background: rgba(255,255,255,0.08); }

/* --- Overview --- */
.th-ov-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.th-prose p { font-size: 16px; color: #cbd5e1; line-height: 1.85; margin-bottom: 15px; }
.th-prose p:first-child::first-letter {
  font-size: 3.2rem; float: left;
  line-height: .82; margin: 7px 9px 0 0; color: #3ea6ff; font-weight: 600;
}
.th-quote-block {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #3ea6ff;
  border-radius: 0 8px 8px 0;
  padding: 18px 22px; margin-bottom: 14px;
}
.th-quote-block blockquote {
  font-size: 1rem; font-style: italic;
  line-height: 1.7; color: #cbd5e1;
}
.th-quote-block cite {
  display: block; margin-top: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #64748b; font-style: normal;
}
.th-info-card {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 18px;
  max-height: 420px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(6,214,200,0.2) transparent;
}
.th-info-card::-webkit-scrollbar { width: 4px; }
.th-info-card::-webkit-scrollbar-track { background: transparent; }
.th-info-card::-webkit-scrollbar-thumb { background: rgba(6,214,200,0.2); border-radius: 4px; }
.th-info-card-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #3ea6ff; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.th-info-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; }
.th-info-card li {
  font-size: 13px; color: #cbd5e1;
  padding-left: 12px;
  border-left: 2px solid rgba(6,214,200,0.2);
  line-height: 1.6;
}
.th-info-card li strong { color: #f1f5f9; font-weight: 600; }

/* --- Nakshatra slider --- */
.th-nk-slider { margin-top: 4px; padding-bottom: 40px; }
.th-nk-slider .swiper-slide { padding: 0 8px; }
.th-nk-slider .swiper { margin: 0 -8px; }
.th-nk-slider .swiper-pagination { bottom: -30px; }
.th-nk-slider .swiper-pagination .swiper-pagination-bullet button:before { color: #64748b; font-size: 12px; }
.th-nk-slider .swiper-pagination .swiper-pagination-bullet-active button:before { color: #3ea6ff; }
.th-nk-slider .slick-prev,
.th-nk-slider .slick-next { z-index: 1; width: 30px; height: 30px; }
.th-nk-slider .slick-prev:before,
.th-nk-slider .slick-next:before { color: #3ea6ff; font-size: 20px; }
.th-nk-slide-wrap { padding: 0 0; }
.th-nk-fallback { max-width: 340px; }
.th-nk-card { background: #111827; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 24px 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.th-nk-card.active {
  background: linear-gradient(135deg,#0e1d32,#101f3a);
  border-top: 2px solid #3ea6ff;
}
.th-nk-card.past {
  opacity: 0.85;
}
.th-nk-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 0; }
.th-nk-motion {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px;
}
.th-nk-motion.direct {
  background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.25); color: #60a5fa;
}
.th-nk-motion.retro {
  background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3); color: #f97316;
}
.th-nk-active-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  color: #22c55e;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px;
}
.th-nk-past-tag {
  display: inline-flex; align-items: center;
  background: rgba(100,116,139,0.12);
  border: 1px solid rgba(100,116,139,0.3);
  color: #94a3b8;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px;
}
.th-nk-name {
  font-size: 24px; font-weight: 600; color: #f1f5f9; margin-bottom: 3px;
}
.th-nk-dev { font-size: 16px; color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; opacity: .85; }
.th-nk-dates { font-size: 16px; font-weight: 600; color: #3ea6ff; margin-bottom: 12px; }
.th-nk-desc { font-size: 14px; color: #cbd5e1; line-height: 1.72; margin-bottom: 12px; }
.th-nk-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.th-tag {
  background: rgba(62, 166, 255, 0.2);
  /* border: 1px solid rgba(6,214,200,0.2); */
  color: #3ea6ff;
  font-size: 12px; font-weight: 600;
   border-radius: 100px;
   height: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0px 10px;
   text-transform: capitalize;
   margin: 0px 0px 10px 0px;
}

/* --- Sign table --- */
.th-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; margin-top: 4px;
}
.th-table-wrap table { width: 100%; border-collapse: collapse; min-width: 640px; }
.th-table-wrap thead { background: #0f1729; }
.th-table-wrap thead th {
  padding: 11px 14px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #64748b; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.th-table-wrap tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background .14s; }
.th-table-wrap tbody tr:last-child { border-bottom: none; }
.th-table-wrap tbody tr:hover { background: rgba(6,214,200,.025); }
.th-table-wrap tbody td { padding: 11px 14px; font-size: 12px; color: #cbd5e1; vertical-align: middle; }
.th-sign-cell { display: flex; align-items: center; gap: 9px; font-weight: 700; color: #f1f5f9; }
.th-sign-sym {
  width: 26px; height: 26px;
  background: #0f1729;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.th-house-pill {
  display: inline-block;
  background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.2);
  color: #60a5fa;
  font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: 4px; white-space: nowrap;
}
.th-sign-sanskrit {
  display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-top: 1px;
}
.th-house-badge {
  display: inline-block;
  background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.2);
  color: #60a5fa;
  font-size: 14px; font-weight: 700;
  padding: 2px 10px; border-radius: 4px; white-space: nowrap;
}
.th-key-domains { font-size: 12px; color: #94a3b8; }
.th-impact {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 2px 10px; border-radius: 100px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .05em;
}
.th-impact-favourable { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.25); color: #22c55e; }
.th-impact-mixed { background: rgba(250,204,21,0.1); border: 1px solid rgba(250,204,21,0.2); color: #facc15; }
.th-impact-watch { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
.th-distinct-list { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; }

/* width */
.th-distinct-list::-webkit-scrollbar {
  width: 6px;
  background: #fff;
  border-radius: 10px;
}

/* Track */
.th-distinct-list::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.th-distinct-list::-webkit-scrollbar-thumb {
  background: #2173f2; 
  border-radius: 10px;
}




.th-distinct-list li {
  font-size: 16px; color: #cbd5e1;
  padding-left: 12px;
  border-left: 2px solid rgba(6,214,200,0.2);
  line-height: 1.6;
  margin: 0px 0px 10px 0px;
  padding: 0px 10px 0px 10px;
}
.th-distinct-list li strong { color: #f1f5f9; font-weight: 600; }
.th-imp { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 100px; white-space: nowrap; }
.th-imp-fav { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.th-imp-mix { background: rgba(6,214,200,0.1); border: 1px solid rgba(6,214,200,0.2); color: #3ea6ff; }
.th-imp-wtc { background: rgba(251,146,60,0.1); border: 1px solid rgba(251,146,60,0.25); color: #fb923c; }

/* --- History grid --- */
.th-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px,1fr));
  gap: 12px; margin-top: 4px;
}
.th-cc {
  position: relative; border-radius: 10px; overflow: hidden;
  height: auto; text-decoration: none; color: #fff; display: block;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .22s, border-color .22s;
  aspect-ratio: 16/9;
}
.th-cc:hover { transform: translateY(-3px); border-color: rgba(6,214,200,0.2); color: #fff; }
.th-cc.cur { border-color: #3ea6ff; }
.th-cc-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .4s;
}
.th-cc:hover .th-cc-img { transform: scale(1.05); }
.th-cc-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,14,26,.97) 0%,
    rgba(10,14,26,.55) 55%,
    rgba(10,14,26,.18) 100%);
}
.th-cc-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 13px; }
.th-cc-badge {
  display: inline-block;
  background: rgba(6,214,200,.14); border: 1px solid #3ea6ff;
  color: #3ea6ff;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px; margin-bottom: 5px;
}
.th-cc-yr { font-size: 12px; font-weight: 800; color: #3ea6ff; margin-bottom: 3px; letter-spacing: .04em; }
.th-cc-title { font-size: 14px; line-height: 1.35; margin-bottom: 3px; color: #f1f5f9;font-weight: 600; }
.th-cc-desc { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.5;font-weight: 600; }

/* --- Retro band --- */
.th-retro-band {
  background: #0d1120;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 52px 0;
}
.th-retro-inner { 
  /* max-width: 1280px; */
   margin: 0 auto; padding: 0 40px; }
.th-retro-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px,1fr)); gap: 11px; margin-top: 22px; }
.th-rtc {
  background: #111827; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 14px;margin: 0px 0px 20px 0px;flex: 1;
}
.th-rtc-lbl {
  font-size: 16px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #3ea6ff; margin-bottom: 6px;
}
.th-rtc-body { font-size: 18px; color: #94a3b8; line-height: 1.65; }

/* --- Article filter bar --- */
.th-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.th-filt {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 600;
  padding: 0px 10px; border-radius: 100px;
  cursor: pointer; 
  transition: all .15s;
  min-width: 80px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.th-filt:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.th-filt.active { background: rgba(6,214,200,0.1); border-color: #3ea6ff; color: #3ea6ff; }

/* --- Article grid --- */
.th-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(278px,1fr)); gap: 14px; }
.th-ac {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s;
  flex: 1;
  margin: 0px 0px 40px 0px;
}
.th-ac:hover { border-color: rgba(6,214,200,0.2); transform: translateY(-2px); }
.th-ai { height: auto; overflow: hidden; position: relative; }
.th-ai img { width: 100%; height: auto; object-fit: cover; overflow-clip-margin: unset; display: block; transition: transform .4s;aspect-ratio: 16/9; }
.th-ac:hover .th-ai img { transform: scale(1.05); }
.th-ab { padding: 13px; flex: 1; display: flex; flex-direction: column; }
.th-a-title {
  font-size: 18px; font-weight: 600;
  line-height: 1.45; color: #f1f5f9; flex: 1; margin-bottom: 10px;
}
.th-a-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08);
}
.th-a-read { font-size: 12px; font-weight: 600; color: #64748b; }
.th-a-arr {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #3ea6ff;
  transition: background .15s, border-color .15s;
}
/* Article category tag overlay */
.th-a-cat {
  position: absolute; bottom: 8px; left: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(10,14,26,.85); border: 1px solid rgba(255,255,255,0.08);
  color: #3ea6ff; padding: 2px 7px; border-radius: 4px;
  backdrop-filter: blur(4px);
}
/* Article author row */
.th-a-author { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.th-a-av {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover; overflow-clip-margin: unset;
  border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.th-a-av-ph {
  width: 20px; height: 20px; border-radius: 50%;
  background: #0f1729; border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #3ea6ff; flex-shrink: 0;
}
.th-a-aname { font-size: 12px; font-weight: 600; color: #94a3b8; }
.th-ac:hover .th-a-arr { background: rgba(62, 166, 255, 0.2); border-color: rgba(62, 166, 255, 0.4); }

/* --- Video grid --- */
.th-vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px,1fr)); gap: 13px; margin-top: 4px; }
.th-vc {
  background: #111827; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0px 0px 40px 0px;
}
.th-vc:hover { border-color: rgba(6,214,200,0.2); transform: translateY(-2px); }
.th-vt { height: auto; position: relative; overflow: hidden; }
.th-vt img.main_naks_video_img { width: 100%; height: auto; object-fit: cover; overflow-clip-margin: unset; display: block; transition: transform .4s;aspect-ratio: 16/9; }
.th-vc:hover .th-vt img { transform: scale(1.05); }
.th-v-ov {
  position: absolute; inset: 0;
  background: rgba(10,14,26,.38);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.th-vc:hover .th-v-ov { background: rgba(10,14,26,.18); }
.th-play {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(6,214,200,.88);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #080c16;
  padding-left: 3px; transition: transform .18s, background .18s;
}
.th-vc:hover .th-play { transform: scale(1.1); background: #3ea6ff; }
.th-vi { padding: 12px 12px 20px 12px; }
/* Video author row */
.th-v-author { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.th-v-author img {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; overflow-clip-margin: unset;
  border: 1px solid rgba(255,255,255,0.08);
}
.th-v-av-ph {
  width: 18px; height: 18px; border-radius: 50%;
  background: #0f1729; border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #3ea6ff; flex-shrink: 0;
}
.th-v-aname { font-size: 14px; font-weight: 600; color: #94a3b8; }
.th-v-title { font-size: 18px; font-weight: 600; line-height: 1.4; color: #f1f5f9; margin-bottom: 5px; }
.th-v-meta { font-size: 14px; font-weight: 600; color: #64748b; }

/* --- CTA --- */
.th-cta-box {
  background: linear-gradient(135deg, #0e1829 0%, #101e3a 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(6,214,200,0.2);
  border-radius: 12px; padding: 50px 40px;
  text-align: center; position: relative; overflow: hidden;
}
.th-cta-lbl {
  font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: #3ea6ff; margin-bottom: 11px;
}
.th-cta-title {
  font-size: clamp(1.45rem,2.5vw,2.1rem); font-weight: 600;
  line-height: 1.3; margin-bottom: 11px; color: #f1f5f9;
}
.th-cta-title em { font-style: italic; color: #3ea6ff; }
.th-cta-desc {
  font-size: 13px; color: #94a3b8;
  max-width: 400px; margin: 0 auto 22px; line-height: 1.78;
}
.th-btn-teal {
  display: inline-flex; align-items: center; gap: 7px;
  background: #3ea6ff; color: #080c16;
  font-size: 13px; font-weight: 800;
  padding: 11px 26px; border-radius: 7px;
  text-decoration: none; transition: opacity .18s, transform .18s;
}
.th-btn-teal:hover { opacity: .88; transform: translateY(-1px); color: #080c16; }
.th-btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: #cbd5e1;
  font-size: 13px; font-weight: 600;
  padding: 11px 26px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none; margin-left: 9px; transition: border-color .18s;
}
.th-btn-outline:hover { border-color: rgba(6,214,200,0.2); color: #3ea6ff; }

/* ═══════════ KEY DATES TIMELINE ═══════════ */
.th-kd-timeline { position: relative; padding-left: 35px; margin-top: 20px; height: 400px;overflow-y: auto; overflow-x: hidden; }
.th-kd-timeline::-webkit-scrollbar {
  width: 6px;
  background: #fff;
  border-radius: 10px;
}

/* Track */
.th-kd-timeline::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.th-kd-timeline::-webkit-scrollbar-thumb {
  background: #2173f2; 
  border-radius: 10px;
}

.th-kd-timeline::before {
  content: ''; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 2px; background: rgba(255,255,255,0.08);
}
.th-kd-row {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 14px; padding: 14px 0; position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}
.th-kd-row.past { opacity: 0.55; }
.th-kd-row.next {
  opacity: 1;
  background: rgba(6,214,200,0.04); border-radius: 8px;
  margin: 0 -12px; padding: 14px 12px;
}
.th-kd-dot {
  position: absolute; left: -34px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #0d1120;
}
/* The "current" row is pulled 12px wider on each side (margin: 0 -12px above),
   so its origin sits at 35 - 12 = 23px while a normal row's is at 35px — the
   dot's `left` has to compensate or it drifts off the rail. Rail center is 6px
   (::before at left:5px, 2px wide); this dot is 12px, so it needs to start at
   absolute 0 → 0 - 23 = -23px. The old -15px put its center at ~14px, ~8px
   right of the line, which is the offset that showed on every breakpoint. */
.th-kd-row.next .th-kd-dot {
  width: 12px; height: 12px;
  box-shadow: 0 0 8px 2px currentColor;
  left: -23px;
}
.th-kd-date {
  font-size: 12px; font-weight: 700; color: #94a3b8;
  white-space: nowrap; letter-spacing: .02em;
}
.th-kd-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-kd-event { font-size: 13px; color: #f1f5f9; line-height: 1.5; }
.th-kd-cat {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px; border: 1px solid; white-space: nowrap;
}

/* ═══════════ PLANETARY ASPECTS ═══════════ */
.th-asp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: 8px;
}
.th-asp-card {
  background: #111827; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 24px; text-align: center;
  transition: border-color .18s;
  flex: 1;
}
.th-asp-card:hover { border-color: rgba(6,214,200,0.2); }
.th-asp-house {
  font-size: 36px; font-weight: 800; color: #3ea6ff;
  line-height: 1; margin-bottom: 2px;
}
.th-asp-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #64748b; margin: 10px auto;
}
.th-asp-sign {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 14px;
}
.th-asp-sym { font-size: 1.6rem; }
.th-asp-name { font-size: 16px; font-weight: 700; color: #f1f5f9; }
.th-asp-sanskrit { font-size: 12px; color: #64748b; }
.th-asp-themes {
  font-size: 16px; color: #94a3b8; line-height: 1.6;
  margin-bottom: 10px; font-style: italic;
}

/* Sign-Lord Relationship */
.th-slr-card {
  background: #111827; border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #a78bfa; border-radius: 0 10px 10px 0;
  padding: 20px 24px; margin-bottom: 28px; margin-top: 8px;
}
.th-slr-header {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.th-slr-planet, .th-slr-lord {
  font-size: 14px; font-weight: 700; color: #f1f5f9;
}
.th-slr-arrow { color: #64748b; font-size: 16px; }
.th-slr-badge {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 10px; border-radius: 100px;
}
.th-slr-friendly { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.th-slr-neutral { background: rgba(250,204,21,0.1); border: 1px solid rgba(250,204,21,0.2); color: #facc15; }
.th-slr-enemy { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
.th-slr-desc { font-size: 13px; color: #cbd5e1; line-height: 1.7; margin-bottom: 8px; }
.th-slr-meta {
  display: flex; gap: 16px; font-size: 12px; color: #64748b;
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}

/* ═══════════ RETROGRADE ZONE CONTEXT ═══════════ */
.th-rz-context {
  background: #111827; border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid #f97316; border-radius: 0 10px 10px 0;
  padding: 24px; margin: 24px 0;
}
.th-rz-grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px;
}
.th-rz-prose p {
  font-size: 13px; color: #cbd5e1; line-height: 1.7; margin: 0 0 14px;
}
.th-rz-tpn {
  background: rgba(249,115,22,0.06); border-radius: 8px;
  padding: 14px; margin-top: 10px;
}
.th-rz-tpn-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #f97316; margin-bottom: 6px;
  display: block;
}
.th-rz-tpn p { font-size: 12px; color: #94a3b8; margin: 6px 0 0; line-height: 1.6; }
.th-rz-stations {
  display: flex; flex-direction: column; gap: 0;
  align-items: center; position: relative;
}
.th-rz-stations::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: rgba(249,115,22,0.15);
  transform: translateX(-50%); z-index: 0;
}
.th-rz-station {
  background: #0d1120; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 14px 18px; text-align: center;
  position: relative; z-index: 1; width: 100%;
}
.th-rz-station.direct { border-color: rgba(34,197,94,0.2); }
.th-rz-st-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #f97316; display: block;
  margin-bottom: 6px;
}
.th-rz-station.direct .th-rz-st-label { color: #22c55e; }
.th-rz-st-degree {
  font-size: 1.6rem; font-weight: 800; color: #f1f5f9;
  display: block; line-height: 1.2;
}
.th-rz-st-detail {
  font-size: 12px; color: #94a3b8; display: block; margin-top: 4px;
}
.th-rz-st-date {
  font-size: 12px; color: #64748b; display: block; margin-top: 2px;
}
.th-rz-range-badge {
  background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.25);
  color: #fb923c; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; padding: 4px 14px; border-radius: 100px;
  position: relative; z-index: 1; margin: 8px 0;
  text-align: center;
}

/* Nakshatra card additions */
.th-nk-phase {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #64748b;
  padding: 1px 7px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
}
.th-nk-deity {
  font-size: 12px; color: #94a3b8; font-style: italic;
  margin-top: 2px;
}

/* --- Responsive --- */
/* --- Responsive --- */

/* Tablet landscape */
@media only screen and (min-width:1200px) and (max-width:1366px){
  .th-a-title, .th-v-title{
    font-size: 14px;
}
}
@media(max-width:1024px) {
  .th-sec { padding: 50px 24px; }
  .th-sni { padding: 0 24px; }
  .th-retro-inner { padding: 0 24px; }
  .th-status-inner { padding: 0 24px; }
  .th-nk-name { font-size: 20px; }
  .th-nk-dev { font-size: 14px; }
  .th-nk-dates { font-size: 14px; }
}

/* Tablet portrait */
@media(max-width:768px) {
  /* Hero */
  .th-hero-body { padding: 0 16px 36px; padding-top: 80px; }
  .th-breadcrumb { left: 16px; top: 64px; }

  /* Sections */
  .th-sec { padding: 36px 0; }
  .th-sec-title { font-size: 1.35rem; }
  .th-sec-sub { font-size: 12px; margin-bottom: 20px; }

  /* Sticky nav */
  .th-sni { padding: 0 12px; }
  .th-nl { padding: 12px 12px; font-size: 13px; }

  /* Status band */
  .th-status-inner { padding: 0 16px; grid-template-columns: repeat(2, 1fr); }
  .th-si { border-bottom: 1px solid rgba(255,255,255,0.08); }

  /* Retrograde */
  .th-retro-band { padding: 36px 0; }
  .th-retro-inner { padding: 0 16px; }
  .th-rtc-lbl { font-size: 14px; }
  .th-rtc-body { font-size: 15px; }

  /* Nakshatra slider */
  .th-nk-slider-wrap { position: relative; }
  .th-nk-name { font-size: 18px; }
  .th-nk-card { padding: 18px 16px; }

  /* Overview */
  .th-ov-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Articles */
  .th-a-title { font-size: 15px; }
  .th-ac { margin-bottom: 30px; }

  /* Videos */
  .th-v-title { font-size: 15px; }
  .th-vc { margin-bottom: 30px; }
.tablenaks.table td, .tablenaks.table th{
  font-size: 12px;
}
  /* CTA */
  .th-cta-box { padding: 36px 20px; }
  .th-btn-outline { margin-left: 0; margin-top: 10px; }

  /* Breadcrumb */
  .transdetail_header .jyotishbread { margin-bottom: 8px; }
  .transdetail_header ul.bread_custom li a,
  .transdetail_header ul.bread_custom li .noanchor a { font-size: 12px; }
}

/* Large mobile */
@media(max-width:576px) {
  /* Hero stats */
  /* .th-hero-stats { gap: 7px; } */
  .th-hstat { padding: 8px 12px; }
  .th-hstat-val { font-size: 1.1rem; }

  /* Sections */
  .th-sec { padding: 28px 0; }
  .th-sec-lbl { font-size: 12px; }

  /* Nakshatra */
  .th-nk-name { font-size: 16px; }
  .th-nk-desc { font-size: 13px; }

  /* Sign table */
  .th-table-wrap { border-radius: 6px; }
  .th-table-wrap tbody td { padding: 9px 10px; font-size: 12px; }
  .th-table-wrap thead th { padding: 9px 10px; }

  /* Retrogrades */
  .th-status-inner { grid-template-columns: repeat(2, 1fr); }

  /* Filter bar */
  .th-filter-bar { gap: 0px;flex-wrap: nowrap;overflow-x: auto; }
  .th-filt { font-size: 12px; height: 34px; padding: 0 10px; min-width: auto;white-space: nowrap;margin: 0px 10px 0px 0px; }
.th-asp-house{
  font-size: 28px;
}
.th-asp-themes{
  font-size: 14px;
}
  /* CTA buttons */
  .th-cta-box { padding: 28px 16px; }
  .th-cta-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .th-btn-teal, .th-btn-outline { width: 100%; justify-content: center; margin-left: 0; }
}

/* Small mobile */
@media(max-width:480px) {
  .th-status-inner { grid-template-columns: 1fr; }
  /* .th-hero-stats { flex-direction: column; } */
  .th-asp-grid { grid-template-columns: 1fr; }
  /* Hero */
  /* .th-hero-stats { flex-wrap: wrap; } */
  /* .th-hstat { flex: 1 1 calc(50% - 7px); min-width: 100px; } */
.th-si:nth-child(even){
  border-right: none;
}
  /* Status band */
  .th-status-inner { grid-template-columns: repeat(2, 1fr);padding: 0; }

  /* Sections */
  .th-sec { padding: 24px 0; }
.th-si-label{
  font-size: 12px;
}
.th-si-val{
  font-size: 12px;
}
  /* Nakshatra arrows */
  .prevswipe_naks,
  .nextswipe_naks { display: none; }

  /* Retrogrades */
  .th-rtc { padding: 12px; }
  .th-rtc-lbl { font-size: 13px; }
  .th-rtc-body { font-size: 13px; }

  /* Overview quote */
  .th-quote-block { padding: 14px 16px; }
  .th-quote-block blockquote { font-size: 0.9rem; }

  /* Prose */
  .th-prose p { font-size: 14px; }
  .th-prose p:first-child::first-letter { font-size: 2.5rem; }
}


/* --- Mobile tap feedback (Clarity dead-click Class C) ---
   Cards/CTAs below only had :hover feedback, which never fires on touch.
   A tap starts a slow route navigation with zero motion at the tap point,
   so Clarity flags it dead (jupiter-in-cancer detail: 30 dead clicks /
   11 sessions, BQ clarity_pages Jun 1-10). Press feedback must be
   localized and instant. */
.th-ac, .th-vc, .th-cc, .th-filt, .th-btn-teal, .th-btn-outline {
  -webkit-tap-highlight-color: rgba(62, 166, 255, 0.18);
}
.th-ac:active, .th-vc:active, .th-cc:active {
  transform: scale(0.98);
  border-color: rgba(62, 166, 255, 0.45);
}
.th-filt:active {
  border-color: #3ea6ff;
  color: #3ea6ff;
  background: rgba(62, 166, 255, 0.08);
}
.th-btn-teal:active { opacity: .88; transform: scale(0.97); }
.th-btn-outline:active { border-color: rgba(62,166,255,0.45); color: #3ea6ff; transform: scale(0.97); }

/* --- Forced-dark island for shared vp2 components ---
   (DualAppDownload, DailyUpdatesOptIn on the hub page.)
   Site default is data-vp2-theme="light" on <html>, but this page is
   hard-dark, so re-declare the consumed tokens with this page's palette
   (matches .th-sec / .th-info-card values). Element-level custom
   properties win over the inherited html-level light theme. */
.th-vp2-dark {
  --vp2-bg-deep: #0a0e1a;
  --vp2-bg-card: #111827;
  --vp2-bg-raised: #0f1729;
  --vp2-border: rgba(255, 255, 255, 0.08);
  --vp2-txt-1: #f1f5f9;
  --vp2-txt-2: #cbd5e1;
  --vp2-txt-3: #94a3b8;
  --vp2-cyan: #3ea6ff;
  background: #0a0e1a;
}

/* --- Island rows (shared vp2 blocks between sections) ---
   DualAppDownload / DailyUpdatesOptIn sit between full .th-sec sections and
   need the section's horizontal gutter but only a fraction of its vertical
   rhythm. These used an inline `padding: 24px 0`, but that shorthand also
   zeroed the .containerfluid_desk left/right padding underneath it, so the
   blocks rendered full-bleed while every other section stayed inset.
   Modifier only touches the vertical axis — .th-sec keeps owning the gutter
   at every breakpoint, and .th-sec.th-island outranks the media-query
   `.th-sec { padding: ... }` shorthands regardless of source order. */
.th-sec.th-island {
  padding-top: 24px;
  padding-bottom: 24px;
}