/* ==========================================================
   CATEGORY CARDS  (destination-category component)
   Sab colors/radius/shadow theme variables se aate hain,
   isliye Ivory Luxe aur Aurora dono me apne aap adjust honge.
========================================================== */

.cc-section {
  --cc-w: 260px;
  --cc-h: 360px;
  --cc-gap: 18px;
  --cc-radius: var(--radius-lg, 18px);
  --cc-accent: var(--brand-primary, #0f766e);
  --cc-accent-bg: var(--button-primary-bg, var(--brand-primary, #0f766e));
  --cc-accent-text: var(--button-primary-text, #fff);
}

.ti-container-one {
  max-width: var(--container-width, 1320px);
  margin: 30px auto;
  padding: var(--container-padding, 0 20px);
  align-items: center;
  gap: 70px;
}

/* ---------- header ---------- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.section-header h2 {
  font-size: 30px;
  color: var(--on-surface-primary);
  margin-bottom: 6px;
}
.section-header-text { flex: 1; min-width: 0; max-width: 1200px; }

.category-discription {
  color: var(--text-secondary, var(--on-surface-secondary));
  margin: 0 0 4px;
}

/* ---------- scroll buttons ---------- */
.scroll-buttons { display: flex; gap: 8px; flex: none; }
.scroll-buttons button {
  width: 42px; height: 42px; padding: 0; line-height: 1;
  display: grid; place-items: center;
  border-radius: var(--radius-full, 50%);
  border: 1px solid var(--border-primary, #e5e7eb);
  background: var(--surface-secondary, #fff);
  color: var(--on-surface-primary);
  box-shadow: var(--shadow-sm);
  font-size: 14px; cursor: pointer;
  transition: background var(--transition, .3s), color var(--transition, .3s),
              border-color var(--transition, .3s), transform .2s, opacity .2s;
}
.scroll-buttons button:hover:not(:disabled) {
  background: var(--cc-accent-bg);
  color: var(--cc-accent-text);
  border-color: transparent;
  transform: translateY(-1px);
}
.scroll-buttons button:disabled { opacity: .35; cursor: default; box-shadow: none; }
.scroll-buttons button:focus-visible,
.cc-card:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 3px; }

/* sab cards screen me aa gaye to buttons ki zarurat nahi */
.cc-section[data-can-prev="false"][data-can-next="false"] .scroll-buttons { display: none; }

/* ---------- scroll row ---------- */
.cc-track {
  display: flex; gap: var(--cc-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 14px 4px 26px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.cc-track::-webkit-scrollbar { display: none; }
.cc-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.cc-track.is-dragging .cc-card { pointer-events: none; }

/* ---------- card ---------- */
.cc-card-wrap {
  position: relative; flex: 0 0 var(--cc-w); scroll-snap-align: start;
  animation: cc-rise .5s ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.cc-card {
  position: relative; display: block; height: var(--cc-h);
  border-radius: var(--cc-radius); overflow: hidden; isolation: isolate;
  background: var(--surface-gradient, linear-gradient(135deg, #cbd5e1, #94a3b8));
  box-shadow: var(--shadow-md);
  transition: transform .35s ease, box-shadow .35s ease;
  text-decoration: none;
  -webkit-user-drag: none; user-select: none;
}
.cc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.cc-card img, .cc-card video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s ease;
  -webkit-user-drag: none;
}
.cc-card:hover img, .cc-card:hover video { transform: scale(1.08); }

/* neeche ka dark gradient taaki text hamesha readable rahe */
.cc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 38%, transparent 68%);
}

/* image na ho to initial letter */
.cc-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 4.5rem; font-weight: 700; color: rgba(255,255,255,.8);
  background: var(--cc-accent-bg);
}

/* ---------- text ---------- */
.cc-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: var(--destination-title-bottom, 20px) var(--destination-title-left, 20px);
  color: var(--destination-title-color, #fff);
}
.cc-info strong {
  display: block;
  font-size: var(--destination-title-size, 1.2rem);
  font-weight: var(--destination-title-weight, 700);
  line-height: 1.2;
  text-shadow: var(--destination-title-shadow, 0 2px 10px rgba(0,0,0,.45));
}
.cc-info small {
  display: block; margin-top: 5px; font-size: .8rem; opacity: .9;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.cc-arrow {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: .85rem; color: #fff;
  background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
  transition: background .3s, transform .3s, border-color .3s;
}
.cc-card:hover .cc-arrow,
.cc-card:focus-visible .cc-arrow {
  background: var(--cc-accent-bg); border-color: transparent; transform: translateX(4px);
}

/* ---------- skeleton / empty ---------- */
.cc-skel {
  flex: 0 0 var(--cc-w); height: var(--cc-h); border-radius: var(--cc-radius);
  background: linear-gradient(90deg,
    var(--surface-tertiary, #e5e7eb) 25%,
    var(--surface-secondary, #f3f4f6) 50%,
    var(--surface-tertiary, #e5e7eb) 75%);
  background-size: 200% 100%; animation: cc-shimmer 1.3s infinite;
}
.cc-empty { padding: 28px 8px; color: var(--text-muted, #64748b); font-size: .95rem; }

@keyframes cc-shimmer { to { background-position: -200% 0; } }
@keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- editor-only config bar ---------- */
.cc-config { display: none; }
.cc-section.is-admin .cc-config {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px;
  padding: 8px 12px; border: 1px dashed var(--cc-accent); border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--cc-accent) 8%, transparent);
  font-size: .8rem; color: var(--on-surface-secondary, #334155);
}
.cc-config b {
  display: inline-block; min-width: 40px; padding: 1px 8px; border-radius: 6px;
  background: var(--surface-secondary, #fff); border: 1px solid var(--border-secondary, #cbd5e1);
}

/* ---------- "read more" text clamp (existing, unchanged) ---------- */
.rm-text {
  --rm-lines: 1;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rm-lines); line-clamp: var(--rm-lines);
  overflow: hidden; overflow-wrap: anywhere; margin-bottom: 0;
}
.rm-text.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.rm-btn:hover { background: none; }
.rm-btn:focus-visible { outline: 2px solid var(--brand-primary, #0f766e); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 1024px) { .rm-text { --rm-lines: 2; } }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .cc-section { --cc-w: 68vw; --cc-h: 300px; --cc-gap: 14px; }
  .section-header h2 { font-size: 24px; }
  .scroll-buttons { display: none; }            /* mobile par swipe hi natural hai */
  .rm-text { --rm-lines: 2; }
}
@media (hover: none) { .cc-card:hover { transform: none; } .cc-track { cursor: auto; } }
@media (prefers-reduced-motion: reduce) {
  .cc-card, .cc-card img, .cc-card video, .cc-arrow, .cc-skel, .cc-card-wrap { transition: none; animation: none; }
}