/* =========================================================
   Shahrukh Journey Timeline — scoped styles (shk-jt- prefix)
   Two layouts: .shk-jt--horizontal and .shk-jt--vertical
   Colours come from CSS variables the Style controls override.
   ========================================================= */
.shk-jt{
  --shk-jt-card:#ffffff;
  --shk-jt-line:#e6e9f2;
  --shk-jt-year:#8a91a3;
  --shk-jt-title:#0e1430;
  --shk-jt-sub:#5b6478;
  --shk-jt-icon:#5b6478;
  --shk-jt-brand:#2547d0;
  --shk-jt-hl-bg:#eef1fc;
  --shk-jt-hl-txt:#2547d0;
  --shk-jt-gap:16px;
  --shk-jt-cols:5;
  --shk-jt-cols-tablet:3;
  --shk-jt-cols-mobile:1;
  --shk-jt-cur:var(--shk-jt-cols);
  font-family:inherit;
  box-sizing:border-box;
}
.shk-jt *{box-sizing:border-box;}

/* ---- Card (shared by both layouts) ---- */
.shk-jt-card{
  background:var(--shk-jt-card);
  border:1px solid var(--shk-jt-line);
  border-radius:12px;
  padding:16px 14px;
  display:flex;flex-direction:column;gap:6px;
  height:100%;
}
.shk-jt-year{font-size:12px;color:var(--shk-jt-year);line-height:1.2;}
.shk-jt-icon{font-size:22px;color:var(--shk-jt-icon);line-height:1;display:block;}
.shk-jt-icon svg{width:1em;height:1em;fill:currentColor;}
.shk-jt-title{font-size:15px;font-weight:600;color:var(--shk-jt-title);margin:0;line-height:1.3;}
.shk-jt-sub{font-size:12px;color:var(--shk-jt-sub);margin:0;line-height:1.4;}

/* highlighted milestone */
.shk-jt-item.is-highlight .shk-jt-card{
  background:var(--shk-jt-hl-bg);
  border:2px solid var(--shk-jt-brand);
}
.shk-jt-item.is-highlight .shk-jt-year,
.shk-jt-item.is-highlight .shk-jt-icon,
.shk-jt-item.is-highlight .shk-jt-title,
.shk-jt-item.is-highlight .shk-jt-sub{color:var(--shk-jt-hl-txt);}

/* =====================================================
   HORIZONTAL
   ===================================================== */
.shk-jt--horizontal{
  display:grid;
  grid-template-columns:repeat(var(--shk-jt-cur),1fr);
  gap:var(--shk-jt-gap);
}
.shk-jt--horizontal .shk-jt-rail{display:none;}

@media(max-width:1024px){.shk-jt--horizontal{--shk-jt-cur:var(--shk-jt-cols-tablet);}}
@media(max-width:640px){.shk-jt--horizontal{--shk-jt-cur:var(--shk-jt-cols-mobile);}}

/* =====================================================
   VERTICAL
   ===================================================== */
.shk-jt--vertical{display:flex;flex-direction:column;gap:var(--shk-jt-gap);}
.shk-jt--vertical .shk-jt-item{display:flex;gap:16px;position:relative;}
.shk-jt--vertical .shk-jt-rail{
  position:relative;flex:0 0 22px;display:flex;justify-content:center;
}
.shk-jt--vertical .shk-jt-rail::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:2px;height:calc(100% + var(--shk-jt-gap));background:var(--shk-jt-line);
}
.shk-jt--vertical .shk-jt-item:last-child .shk-jt-rail::before{display:none;}
.shk-jt--vertical .shk-jt-dot{
  width:14px;height:14px;border-radius:50%;background:var(--shk-jt-brand);
  margin-top:4px;z-index:1;border:3px solid var(--shk-jt-card);
  box-shadow:0 0 0 1px var(--shk-jt-line);
}
.shk-jt--vertical .shk-jt-card{flex:1;}