/* =========================================================
   v97 — Site-wide card interaction language
   Orange cards -> soft orange on hover.
   Cards placed on navy/blue visual bands -> soft blue on hover.
   ========================================================= */
:root{
  --card-hover-orange:#fff1e6;
  --card-hover-blue:#dceaf7;
}

/* Orange card families */
.home-trust-grid-inline>div:hover,
.planning-approach-card:hover,
.accommodation-why-card:hover,
.transportation-why-card:hover,
.guide-offer-section .feature-item:hover,
.guide-offer-card:hover,
.group-type-card:hover,
.event-planning-card:hover,
.json-experience-grid article:hover{
  background:var(--card-hover-orange)!important;
  border-color:rgba(254,132,5,.55)!important;
}

/* Orange card icon panels should remain visibly separate on the soft-orange hover. */
.planning-approach-card:hover .planning-approach-card-icon,
.accommodation-why-card:hover .accommodation-why-card-icon,
.guide-offer-section .feature-item:hover i,
.group-type-card:hover .group-type-icon,
.event-planning-card:hover .event-planning-icon{
  background:#fff!important;
}

/* Navy / blue-section text-card families */
.home-why-points article:hover,
.event-how-grid article:hover,
.event-process-row article:hover,
.event-city-grid article:hover,
.destinations-route-grid article:hover,
.group-logistics-flow article:hover,
.json-service-grid a:hover,
.transportation-needs-grid article:hover{
  background:var(--card-hover-blue)!important;
  border-color:#b8d0e6!important;
}


/* =========================================================
   v98 — Named reusable card styles
   Use these classes on inside pages when the same interaction
   language is required. Layout remains page-specific.
   ========================================================= */

/* 1. Orange card -> soft orange hover
   Homepage reference: Aakash Tours & Travels highlights. */
.card-orange-soft{
  background:var(--orange);
  border:1px solid var(--orange);
  transition:background .28s ease,border-color .28s ease,transform .28s ease,box-shadow .28s ease;
}
.card-orange-soft i,
.card-orange-soft .card-icon{color:#fff}
.card-orange-soft h3,
.card-orange-soft h4,
.card-orange-soft strong,
.card-orange-soft .card-title{color:#fff}
.card-orange-soft p,
.card-orange-soft span:not(.card-icon),
.card-orange-soft .card-text{color:rgba(255,255,255,.86)}
.card-orange-soft:hover{
  background:var(--card-hover-orange)!important;
  border-color:rgba(254,132,5,.55)!important;
}
.card-orange-soft:hover i,
.card-orange-soft:hover .card-icon{color:var(--orange)!important}
.card-orange-soft:hover h3,
.card-orange-soft:hover h4,
.card-orange-soft:hover strong,
.card-orange-soft:hover .card-title{color:var(--navy)!important}
.card-orange-soft:hover p,
.card-orange-soft:hover span:not(.card-icon),
.card-orange-soft:hover .card-text{color:#6f6258!important}

/* 2. Card on navy/blue section -> soft blue hover
   Homepage reference: Why Plan With a Local Rajasthan Team? */
.card-blue-soft{
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  transition:background .28s ease,border-color .28s ease;
}
.card-blue-soft i,
.card-blue-soft>span:first-child,
.card-blue-soft .card-icon{color:var(--orange)}
.card-blue-soft h3,
.card-blue-soft h4,
.card-blue-soft strong,
.card-blue-soft .card-title{color:#fff}
.card-blue-soft p,
.card-blue-soft .card-text{color:rgba(255,255,255,.65)}
.card-blue-soft:hover{
  background:var(--card-hover-blue)!important;
  border-color:#b8d0e6!important;
}
.card-blue-soft:hover i,
.card-blue-soft:hover>span:first-child,
.card-blue-soft:hover .card-icon{color:var(--orange)!important}
.card-blue-soft:hover h3,
.card-blue-soft:hover h4,
.card-blue-soft:hover strong,
.card-blue-soft:hover .card-title{color:var(--navy)!important}
.card-blue-soft:hover p,
.card-blue-soft:hover .card-text{color:#526473!important}

/* 3. White editorial card -> cream hover + 3px orange top accent
   Homepage reference: Travel Insights. Transparent top border is
   reserved by default so hover causes no layout shift. */
.card-editorial-orange{
  background:#fff;
  border-top:3px solid transparent!important;
  transition:background .3s ease,border-color .3s ease;
}
.card-editorial-orange:hover{
  background:#fff8f2!important;
  border-top-color:var(--orange)!important;
}
.card-editorial-orange:hover b,
.card-editorial-orange:hover .card-link{color:var(--orange)!important}


/* 4. Image-led bordered card
   Reference: Rajasthan Holiday Ideas + holiday route cards */
.card-image-bordered{
  background:#fff;
  border:1px solid var(--border);
  color:inherit;
  text-decoration:none;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.card-image-bordered:hover{
  transform:translateY(-5px);
  border-color:rgba(254,132,5,.5);
  box-shadow:0 18px 42px rgba(0,27,57,.08);
}
.card-image-bordered img{
  transition:transform .5s ease;
}
.card-image-bordered:hover img{
  transform:scale(1.035);
}


/* v112 — Events / What We Can Arrange icon treatment.
   This intentionally differs from the other orange-card icon panels. */
.event-capability-section .event-planning-card:hover .event-planning-icon{
  background:var(--orange)!important;
  color:#fff!important;
}
.event-capability-section .event-planning-card:hover .event-planning-icon i{
  color:#fff!important;
}


/* v114 — Holiday Planning / Our Planning Approach icon hover */
.planning-approach-section .planning-approach-card:hover .planning-approach-card-icon{
  background:var(--orange)!important;
}
.planning-approach-section .planning-approach-card:hover .planning-approach-card-icon img{
  filter:brightness(0) invert(1);
}


/* v115 — Accommodation / Why Book Through Aakash icon hover */
.accommodation-why-section .accommodation-why-card:hover .accommodation-why-card-icon{
  background:var(--orange)!important;
  color:#fff!important;
}
.accommodation-why-section .accommodation-why-card:hover .accommodation-why-card-icon i{
  color:#fff!important;
}


/* v116 — Guide / Group orange-card icon hover treatment */
.guide-offer-section .guide-offer-card:hover .guide-offer-card-icon,
.group-types-section .group-type-card:hover .group-type-icon{
  background:var(--orange)!important;
  color:#fff!important;
}
.guide-offer-section .guide-offer-card:hover .guide-offer-card-icon i,
.group-types-section .group-type-card:hover .group-type-icon i{
  color:#fff!important;
}


/* =========================================================
   v129 — Shared Holiday Route card language
   Used by "Your Rajasthan Route" and Insight "Continue Planning".
   ========================================================= */
.json-route-card{
  display:grid;
  grid-template-columns:46% 54%;
  min-height:300px;
  background:#fff;
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.json-route-image{
  position:relative;
  overflow:hidden;
}
.json-route-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.json-route-image>span{
  position:absolute;
  left:18px;
  top:18px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  background:var(--orange);
  color:#fff;
}
.json-route-copy{
  padding:30px;
}
.json-route-copy small{
  color:var(--orange);
  font-size:inherit;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.json-route-copy h3{
  color:var(--navy);
  font-size:1.35rem;
  margin:8px 0 12px;
}
.json-route-copy p{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.7;
  margin-bottom:1rem;
}
.json-route-copy b{
  color:var(--navy);
  font-size:.74rem;
}
.json-route-copy b i{
  color:var(--orange);
}
.json-route-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(0,27,57,.08);
  border-color:rgba(254,132,5,.45);
}
.json-route-card:hover img{
  transform:scale(1.04);
}
.json-route-card:hover b{
  color:var(--orange);
}
@media(max-width:650px){
  .json-route-card{
    grid-template-columns:1fr;
  }
  .json-route-image{
    min-height:220px;
  }
}