/* ==========================================================================
   "Celebrate Every Occasion" expanding-panel slider
   (template-parts/celebration-showcase.php) — colors/type/spacing/radii
   all read from the site's own design tokens (design-system.css) rather
   than a bespoke palette, so this reads as an InviteUtsav section, not an
   imported component. Shared across Home / Our Story / How It Works.
   ========================================================================== */

.celebration-showcase{ padding-block:var(--section-pad); }

.celebration-slider{ position:relative; }

.celebration-track{
  display:flex; gap:var(--sp-2);
  min-height:520px;
}

.celebration-card{
  position:relative;
  display:block;
  flex:.75 1 0;
  min-width:84px;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--champagne-deep);
  cursor:pointer;
  isolation:isolate;
  box-shadow:var(--shadow-sm);
  outline:none;
  transition:
    flex .7s var(--ease-premium),
    transform var(--dur-mid) var(--ease-premium),
    box-shadow var(--dur-mid) var(--ease-premium);
}
.celebration-card:hover,
.celebration-card:focus-visible{ transform:translateY(-3px); }

.celebration-card.is-active{
  flex:4.2 1 0;
  box-shadow:var(--shadow-lg);
}

.celebration-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-premium), filter var(--dur-mid) var(--ease-premium);
  height:100% !important;
}
.celebration-card:not(.is-active) img{ filter:saturate(.86) brightness(.8); }
.celebration-card.is-active img{ transform:scale(1.035); }

.celebration-overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  padding:var(--sp-5);
  background:linear-gradient(180deg, rgba(42,1,31,0) 38%, rgba(42,1,31,.78) 100%);
}

.celebration-copy{
  max-width:520px; color:var(--white);
  opacity:0; transform:translateY(18px);
  transition:opacity .4s ease .2s, transform .55s var(--ease-premium) .16s;
  pointer-events:none;
}
.celebration-card.is-active .celebration-copy{ opacity:1; transform:translateY(0); }

.celebration-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:30px; margin-bottom:var(--sp-2); padding:0 .6rem;
  border:1px solid rgba(255,255,255,.45); border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); backdrop-filter:blur(10px);
  font-size:.78rem; font-weight:800; letter-spacing:.08em;
}

.celebration-copy h3{
  margin:0; color:var(--white);
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 2.6vw, 2.6rem); line-height:1.02; letter-spacing:-.02em;
}
.celebration-copy p{ margin:var(--sp-2) 0 0; font-size:1rem; line-height:1.5; color:rgba(255,255,255,.9); }

.slider-footer{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4); }

.slider-progress{
  flex:1; height:4px; overflow:hidden; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--plum-800) 10%, transparent);
}
.slider-progress-bar{
  display:block; width:14.285%; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--rose-500), var(--gold-400));
  transition:transform var(--dur-mid) var(--ease-premium);
  transform-origin:left center;
}

.slider-controls{ display:flex; gap:.6rem; }
.slider-btn{
  width:46px; height:46px; border:1px solid var(--line);
  border-radius:50%; color:var(--plum-800); background:var(--surface);
  cursor:pointer; font-size:1.1rem;
  transition:transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.slider-btn:hover{ transform:translateY(-2px); color:var(--white); background:var(--plum-800); }

@media (max-width:900px){
  .celebration-track{
    min-height:auto; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; padding-bottom:4px;
  }
  .celebration-track::-webkit-scrollbar{ display:none; }

  .celebration-card,
  .celebration-card.is-active{
    flex:0 0 82%; min-width:82%; height:480px; scroll-snap-align:center;
  }
  .celebration-card:not(.is-active) img{ filter:none; }
  .celebration-card .celebration-copy{ opacity:1; transform:none; }
  .celebration-overlay{ padding:var(--sp-4); }
}

@media (max-width:560px){
  .celebration-track{ gap:.6rem; }
  .celebration-card,
  .celebration-card.is-active{
    flex-basis:88%; min-width:88%; height:420px; border-radius:var(--r-md);
  }
  .celebration-copy h3{ font-size:1.7rem; }
  .celebration-copy p{ font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce){
  .celebration-card, .celebration-card img, .celebration-copy, .slider-progress-bar, .slider-btn{
    transition-duration:.01ms !important;
  }
}