/* ==========================================================================
   XPLOROO · Vlog Shoot Packages module
   vlog-shoot-packages.css — Fully original, self-contained component.
   Scoped entirely under `.vlog-shoot` / `.vsp-*` — never touches any other
   section's classes or tokens. Carousel mechanics now mirror the proven
   Influencers / Recent Winners continuous auto-scroll pattern (see
   js/vlog-shoot-packages.js), with its own premium "content creation"
   visual identity: glass surfaces, the site's violet/magenta/cyan brand
   gradient, titanium-silver accents, a cinematic corner-frame treatment
   and a small recording-style badge. Card layout widths are built so 4,
   5, 8 or 10+ cards can be added later without touching this file.
   ========================================================================== */

.vlog-shoot {
  position: relative;
  padding-block: var(--home-section-gap);
}

.vlog-shoot__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Section head — centered on mobile, left-aligned on desktop
   ------------------------------------------------------------------------- */
.vlog-shoot__head {
  text-align: center;
  margin-bottom: var(--space-8);
}
.vlog-shoot__title {
  margin: 0;
  font-size: var(--fs-3xl);
}
.vlog-shoot__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-md, var(--fs-base));
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .vlog-shoot__head { text-align: left; }
}

/* -------------------------------------------------------------------------
   Carousel — continuous auto-scroll (right → left), same proven
   architecture as the Influencers / Recent Winners carousels (see
   js/vlog-shoot-packages.js for the full auto-scroll/drag/clone logic):
   `.vsp-carousel` is the VIEWPORT — fixed size, `overflow: hidden`, never
   itself transformed. `.vsp-track` is the TRACK — the flex row of every
   card, positioned purely via `transform: translateX()` in JS. These stay
   two separate elements on purpose: clipping and transforming the same
   element moves the clip boundary together with the content, so the
   visible area can drift away from the actual cards. The JS clones
   however many full card-sets are needed to cover the viewport width, so
   this works correctly whether there are 3 cards or 30 — nothing here is
   sized for a specific card count.
   ------------------------------------------------------------------------- */
.vsp-carousel {
  position: relative;
  overflow: hidden;
}

.vsp-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
  /* No explicit width: a flex container defaults to filling its parent's
     (`.vsp-carousel`'s) width, which is what `.vsp-slide`'s percentage/
     calc widths below need to resolve correctly against. The cloned card
     sets then naturally overflow that box — `.vsp-carousel`'s
     `overflow: hidden` (above) is what clips them, not this element. */
}
.vsp-track.is-dragging {
  cursor: grabbing;
}

.vsp-slide {
  flex: 0 0 auto;
  width: 82%;
}
/* Clones are visual-only duplicates for the seamless loop — never focus-
   able or announced by assistive tech, the real cards already cover every
   package. */
.vsp-slide[aria-hidden="true"] {
  pointer-events: none;
}
@media (min-width: 480px) {
  .vsp-slide { width: 60%; }
}
@media (min-width: 768px) {
  .vsp-slide { width: calc((100% - 2 * var(--space-5)) / 3); }
}
@media (min-width: 1024px) {
  .vsp-slide { width: calc((100% - 3 * var(--space-5)) / 4); }
}

/* -------------------------------------------------------------------------
   Dot pagination — one dot per real package (never per clone)
   ------------------------------------------------------------------------- */
.vsp-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-5);
}
.vsp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 300ms ease, transform var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.vsp-dot.is-active {
  width: 20px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
}

/* -------------------------------------------------------------------------
   Card — premium glass surface, brand-gradient border glow on hover,
   cinematic corner-frame + recording badge for the "content creation"
   identity. Cards without a real page yet (Manali, Goa) stay inert; the
   Shimla card wraps its content in `.vsp-card__link` once its page exists
   (see vlog-shoot-packages.js for the shared drag/swipe behavior, which
   is unaffected either way).
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   Premium colour identity — cycles automatically by card POSITION
   (:nth-child on `.vsp-slide`, the flex sibling every card sits inside;
   `.vsp-card` itself is always its slide's only child, so nth-child has to
   live one level up). Any future card, and every carousel clone (appended
   as additional `.vsp-slide` elements by js/vlog-shoot-packages.js, in the
   same order), automatically lands on the next colour in the 6-identity
   cycle — nothing here is keyed to Shimla/Manali/Goa by name, and nothing
   needs to change when more cards are added later.
   ------------------------------------------------------------------------- */
.vsp-slide:nth-child(6n+1) .vsp-card { --vsp-a: rgba(147, 51, 234, 0.22); --vsp-b: rgba(225, 29, 72, 0.16); --vsp-border-a: rgba(192, 132, 252, 0.7); --vsp-border-b: rgba(251, 113, 133, 0.55); --vsp-glow: rgba(147, 51, 234, 0.35); }
.vsp-slide:nth-child(6n+2) .vsp-card { --vsp-a: rgba(37, 99, 235, 0.22); --vsp-b: rgba(124, 58, 237, 0.16); --vsp-border-a: rgba(147, 197, 253, 0.7); --vsp-border-b: rgba(196, 181, 253, 0.55); --vsp-glow: rgba(37, 99, 235, 0.35); }
.vsp-slide:nth-child(6n+3) .vsp-card { --vsp-a: rgba(6, 182, 212, 0.22); --vsp-b: rgba(79, 70, 229, 0.16); --vsp-border-a: rgba(165, 243, 252, 0.7); --vsp-border-b: rgba(199, 210, 254, 0.55); --vsp-glow: rgba(6, 182, 212, 0.35); }
.vsp-slide:nth-child(6n+4) .vsp-card { --vsp-a: rgba(219, 39, 119, 0.22); --vsp-b: rgba(147, 51, 234, 0.16); --vsp-border-a: rgba(251, 182, 206, 0.7); --vsp-border-b: rgba(216, 180, 254, 0.55); --vsp-glow: rgba(219, 39, 119, 0.35); }
.vsp-slide:nth-child(6n+5) .vsp-card { --vsp-a: rgba(20, 184, 166, 0.22); --vsp-b: rgba(37, 99, 235, 0.16); --vsp-border-a: rgba(153, 246, 228, 0.7); --vsp-border-b: rgba(147, 197, 253, 0.55); --vsp-glow: rgba(20, 184, 166, 0.35); }
.vsp-slide:nth-child(6n) .vsp-card       { --vsp-a: rgba(219, 39, 119, 0.22); --vsp-b: rgba(88, 28, 135, 0.2); --vsp-border-a: rgba(251, 182, 206, 0.7); --vsp-border-b: rgba(196, 181, 253, 0.5); --vsp-glow: rgba(219, 39, 119, 0.35); }

.vsp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Colour identity shows through the footer strip beneath the image only
     (the image itself is opaque and fully covers `.vsp-card__media`, so
     it stays completely unaffected/fully visible) — a soft top-left glass
     sheen plus the two brand-gradient stops, over the existing dark panel. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 30%), linear-gradient(160deg, var(--vsp-a, transparent) 0%, transparent 55%), linear-gradient(340deg, var(--vsp-b, transparent) 0%, transparent 60%), var(--surface-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 12px 32px -18px var(--vsp-glow, transparent);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-standard),
    background-color 300ms ease;
  will-change: transform;
}
/* Thin gradient border — masked down to a hairline ring that follows the
   card's own rounded corners, same technique already proven on Trending
   Packages/Ending Soon; static here (no rotation), just a clean two-tone
   edge per colour identity. */
.vsp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--vsp-border-a, var(--color-border)), var(--vsp-border-b, var(--color-border)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.vsp-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .vsp-card:hover {
    transform: translateY(-8px);
    border-color: rgba(199, 204, 217, 0.45);
    box-shadow: var(--shadow-lg), var(--glow-soft), 0 18px 40px -16px var(--vsp-glow, transparent);
  }
  .vsp-card:hover::before { opacity: 1; }
}
@media (hover: none) {
  .vsp-card:active { transform: scale(0.98); }
}

/* Destination image holder — clearly replaceable: swap the `src` on
   `.vsp-card__img` in index.html when real shoot-location photos are
   ready. Neutral inset background shows through until then, so a slow
   or missing image never looks broken. */
.vsp-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-inset);
}
.vsp-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .vsp-card:hover .vsp-card__img { transform: scale(1.12); }
}

/* Cinematic corner-frame — subtle viewfinder-style brackets over the
   image, pure CSS (four small border-only corners), reinforcing "this is
   being shot" without any cheap camera clip-art. */
.vsp-card__frame {
  position: absolute;
  inset: 0.85rem;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .vsp-card:hover .vsp-card__frame { opacity: 1; }
}
.vsp-card__frame::before,
.vsp-card__frame::after,
.vsp-card__frame span::before,
.vsp-card__frame span::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid rgba(245, 247, 251, 0.85);
}
.vsp-card__frame::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.vsp-card__frame::after { top: 0; right: 0; border-left: none; border-bottom: none; }
.vsp-card__frame span::before { bottom: 0; left: 0; border-right: none; border-top: none; }
.vsp-card__frame span::after { bottom: 0; right: 0; border-left: none; border-top: none; }

/* Recording-style badge — small pulsing dot + "VLOG SHOOT" label,
   top-left over the image, same glass-pill treatment used elsewhere on
   the site (e.g. Trending Packages badges). */
.vsp-card__badge {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.625rem;
  padding-inline: 0.65rem 0.8rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.vsp-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta-500);
  box-shadow: 0 0 6px 1px rgba(236, 72, 153, 0.7);
  animation: vsp-rec-pulse 2s ease-in-out infinite;
}
@keyframes vsp-rec-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .vsp-card__badge-dot { animation: none; }
}

.vsp-card__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 1.1rem 1.25rem 1.25rem;
}

.vsp-card__heading {
  min-width: 0;
}
.vsp-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.vsp-card__label {
  margin: 0.2rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Subtle CTA/arrow area — decorative only for this phase (no link, no
   "Book Now"); a small circular chevron hinting "more to come here". */
.vsp-card__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--color-text-strong);
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-standard), background-image var(--dur-base) var(--ease-standard);
}
.vsp-card__cta svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .vsp-card:hover .vsp-card__cta {
    transform: translateX(3px);
    border-color: transparent;
    background-image: var(--gradient-brand-vivid);
    color: #fff;
  }
}