/* Manava Widget — Kerala Coast Route (horizontal city rail) base styles.
   Mirrors the original design exactly; Elementor's control-generated
   CSS layers on top of this per widget instance. Scoped under a class
   (not an ID) so the widget can be dropped onto a page more than once. */

.mh-krt-section,
.mh-krt-section *,
.mh-krt-section *:hover,
.mh-krt-section *:focus,
.mh-krt-section *:active,
.mh-krt-section *:visited{
  text-decoration:none !important;
}

.mh-krt-section{
  --mh-krt-navy:#0F2438;
  --mh-krt-navy-2:#16334F;
  --mh-krt-gold:#C6A15B;
  --mh-krt-gold-light:#E4CE9E;
  --mh-krt-ivory:#FAF8F4;
  --mh-krt-gray:#6B7480;

  background:var(--mh-krt-ivory);
  padding:88px 0 76px;
  font-family:'Poppins','Segoe UI',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  overflow:hidden;
}
.mh-krt-section *{box-sizing:border-box;}

.mh-krt-inner{max-width:1280px;margin:0 auto;padding:0 24px;}

.mh-krt-head{margin-bottom:44px;}
.mh-krt-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--mh-krt-gold);
  text-transform:uppercase;
  margin:0 0 14px;
}
.mh-krt-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  color:var(--mh-krt-navy);
  margin:0 0 12px;
}
.mh-krt-sub{
  font-size:15px;
  color:var(--mh-krt-gray);
  margin:0;
  max-width:520px;
  line-height:1.5;
}

/* ---------- RAIL ---------- */
.mh-krt-rail-wrap{
  display:flex;
  align-items:center;
  gap:14px;
}

.mh-krt-rail{
  display:flex;
  gap:20px;
  overflow-x:auto;
  /* No scroll-snap here on purpose: this rail auto-plays continuously via JS,
     and CSS scroll-snap fights a frame-by-frame scrollLeft animation (it keeps
     trying to snap back to a card edge), making the motion stutter or stall. */
  padding:6px 2px 22px;
  flex:1;
  scrollbar-width:none;
}
.mh-krt-rail::-webkit-scrollbar{display:none;}

.mh-krt-card{
  position:relative;
  flex:0 0 260px;
  background:linear-gradient(160deg, var(--mh-krt-navy-2) 0%, var(--mh-krt-navy) 100%);
  border:1px solid rgba(198,161,91,0.22);
  border-radius:10px;
  padding:22px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mh-krt-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  background:radial-gradient(circle at 100% 0%, rgba(198,161,91,0.16), transparent 60%);
  pointer-events:none;
}
.mh-krt-card--feature{
  background:linear-gradient(160deg, #1B3E5C 0%, var(--mh-krt-navy) 100%);
  border-color:rgba(198,161,91,0.4);
}
.mh-krt-card:hover{
  transform:translateY(-6px);
  border-color:var(--mh-krt-gold);
  box-shadow:0 18px 34px rgba(0,0,0,0.35);
}

.mh-krt-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}
.mh-krt-index{
  font-family:'Playfair Display',serif;
  font-size:13px;
  font-weight:700;
  color:var(--mh-krt-gold);
  letter-spacing:1px;
}
.mh-krt-tag{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#9FB0BF;
  text-align:right;
}

.mh-krt-perf{
  border-top:1px dashed rgba(255,255,255,0.18);
  margin:16px 0 18px;
  position:relative;
  z-index:2;
}

.mh-krt-city{
  position:relative;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(28px,3.4vw,36px);
  font-weight:600;
  color:var(--mh-krt-gold-light);
  line-height:1;
  margin:0 0 10px;
  z-index:2;
  transition:font-weight .25s ease, color .25s ease, letter-spacing .25s ease;
}
.mh-krt-card:hover .mh-krt-city,
.mh-krt-card:focus-visible .mh-krt-city{
  font-weight:800;
  color:#fff;
}

.mh-krt-count{
  font-size:12.5px;
  color:#AEB9C4;
  margin:0;
  position:relative;
  z-index:2;
}

.mh-krt-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease;
  position:relative;
  z-index:2;
}
.mh-krt-cta svg{width:14px;height:14px;}
.mh-krt-card:hover .mh-krt-cta,
.mh-krt-card:focus-visible .mh-krt-cta{opacity:1;transform:translateX(0);}

.mh-krt-card:focus-visible{
  outline:2px solid var(--mh-krt-gold);
  outline-offset:3px;
}

/* ---------- ROUTE LINE (signature) ---------- */
.mh-krt-route{
  position:relative;
  height:2px;
  background:rgba(198,161,91,0.22);
  margin:36px 24px 0;
}
.mh-krt-route-glow{
  position:absolute;
  top:-3px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mh-krt-gold);
  box-shadow:0 0 12px 3px rgba(198,161,91,0.7);
  animation:mh-krt-travel 9s linear infinite;
}
@keyframes mh-krt-travel{
  0%{left:0%;}
  100%{left:calc(100% - 8px);}
}
.mh-krt-route-stops{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
}
.mh-krt-route-stops span{
  font-size:10.5px;
  letter-spacing:0.5px;
  color:#8592A0;
  text-transform:uppercase;
}

/* ---------- TABLET ---------- */
@media (max-width:900px){
  .mh-krt-section{padding:68px 0 60px;}
  .mh-krt-card{flex-basis:230px;}
  .mh-krt-route-stops{flex-wrap:wrap;row-gap:8px;}
}

/* ---------- MOBILE ---------- */
@media (max-width:640px){
  .mh-krt-inner{padding:0 16px;}
  .mh-krt-card{flex-basis:74vw;}
  .mh-krt-route{margin:30px 8px 0;}
  .mh-krt-route-stops{
    flex-wrap:wrap;
    justify-content:flex-start;
    row-gap:8px;
    column-gap:14px;
  }
  .mh-krt-route-stops span{font-size:9.5px;}
}

/* ---------- TOUCH DEVICES (no hover state) ---------- */
@media (hover:none){
  .mh-krt-city{font-weight:700;}
  .mh-krt-cta{opacity:1;transform:translateX(0);}
  .mh-krt-card:active{
    border-color:var(--mh-krt-gold);
    transform:translateY(-2px);
  }
  .mh-krt-card:active .mh-krt-city{font-weight:800;color:#fff;}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .mh-krt-card{transition:none;}
  .mh-krt-card:hover{transform:none;}
  .mh-krt-route-glow{animation:none;left:0;}
  .mh-krt-city{transition:none;}
}