/* ==========================================================================
   outbound-travels.css  v2.0  (Sathwin Tours)
   outbound-travels.html is now the Holidays Abroad & Pilgrimages listing
   page. The hero, filters, grid and CTA come from package-master.css
   (shared with package-master.html); this file only styles the extra
   "One desk" services band. Kandyan Lotus light theme, main.css tokens.
   ========================================================================== */

.ot-desk {
  position: relative;
  padding: var(--spacing-14) 0 var(--spacing-12);
  background-color: var(--color-sand);
  background-image: var(--texture-lattice);
  overflow: hidden;
}
.ot-desk::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hdr-edge);
}

[data-ot-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-premium), transform 800ms var(--ease-premium); }
[data-ot-reveal].is-visible { opacity: 1; transform: none; }

.ot-desk__head { max-width: 46rem; margin: 0 auto var(--spacing-8); text-align: center; }
.ot-desk__eyebrow {
  display: inline-flex; align-items: center; gap: var(--spacing-3);
  font-family: var(--font-wordmark); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-gold-text);
  margin-bottom: var(--spacing-3);
}
.ot-desk__eyebrow::before,
.ot-desk__eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--color-antique-gold); }
.ot-desk__title {
  font-family: var(--font-display); font-weight: var(--font-weight-medium);
  font-size: clamp(var(--text-3xl), 3.4vw, var(--text-5xl));
  line-height: var(--leading-tight); color: var(--color-night-maroon); margin: 0 0 var(--spacing-3);
}
.ot-desk__title em { font-style: italic; color: var(--color-maroon); }
.ot-desk__lead { font-family: var(--font-primary); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-muted); margin: 0; }

.ot-desk__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-5);
}
.ot-service {
  position: relative;
  padding: var(--spacing-6) var(--spacing-5) var(--spacing-5);
  background: var(--color-shell);
  border: 1px solid rgba(var(--color-champagne-rgb), .35);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: opacity 700ms var(--ease-premium), transform 500ms var(--ease-premium), box-shadow 500ms var(--ease-premium), border-color 500ms var(--ease-premium);
}
/* Cards rise one after another when the band scrolls in */
.ot-desk__grid[data-ot-reveal] { transform: none; }
.ot-desk__grid[data-ot-reveal] .ot-service { opacity: 0; transform: translateY(22px); }
.ot-desk__grid.is-visible .ot-service { opacity: 1; transform: none; }
.ot-desk__grid.is-visible .ot-service:hover { transform: translateY(-5px); }
.ot-service::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-gilt);
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-premium);
}
.ot-service:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: var(--color-antique-gold); }
.ot-service:hover::before { transform: scaleX(1); }
.ot-service__icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient-lacquer);
  color: var(--color-gold-on-dark);
  font-size: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(var(--color-champagne-rgb), .6), var(--shadow-md);
  margin-bottom: var(--spacing-4);
  transition: transform 600ms var(--ease-premium);
}
.ot-service:hover .ot-service__icon { transform: rotate(-8deg) scale(1.06); }
.ot-service__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-night-maroon); margin: 0 0 var(--spacing-2); line-height: var(--leading-snug); }
.ot-service__text { font-family: var(--font-primary); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); margin: 0; }

.ot-desk__includes { margin-top: var(--spacing-8); text-align: center; }
.ot-desk__includes-label { display: block; font-family: var(--font-wordmark); font-size: var(--text-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-gold-text); margin-bottom: var(--spacing-3); }
.ot-desk__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-2); list-style: none; margin: 0; padding: 0; }
.ot-desk__chips li {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  color: var(--color-royal);
  background: var(--color-shell);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
}
.ot-desk__chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-antique-gold); }
.ot-desk__note { margin: var(--spacing-3) 0 0; font-family: var(--font-elegant); font-style: italic; font-size: var(--text-md); color: var(--text-muted); }

@media (max-width: 992px) { .ot-desk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) {
  .ot-desk { padding: var(--spacing-10) 0; }
  .ot-desk__grid { grid-template-columns: 1fr; gap: var(--spacing-3); }
  .ot-service { display: grid; grid-template-columns: auto 1fr; column-gap: var(--spacing-4); padding: var(--spacing-4); }
  .ot-service__icon { grid-row: span 2; margin: 0; width: 46px; height: 46px; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-ot-reveal], .ot-desk__grid[data-ot-reveal] .ot-service { opacity: 1; transform: none; transition: none; }
  .ot-service, .ot-service::before, .ot-service__icon { transition: none; }
}