/* ==========================================================================
   Card Stack Widget — card-stack.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (defaults — overridden per-widget via Elementor)
   -------------------------------------------------------------------------- */
.csw-stack {
  --csw-duration:      450ms;
  --csw-easing:        cubic-bezier(0.4, 0, 0.2, 1);
  --csw-gap:           12px;
  --csw-scale-step:    5;     /* % per depth level          */
  --csw-offset-step:   10;    /* px per depth level         */
}

/* --------------------------------------------------------------------------
   Scene wrapper
   -------------------------------------------------------------------------- */
.csw-scene {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  width:            100%;
  box-sizing:       border-box;
  padding:          32px 24px;
  background-color: #f2f2f7;
  border-radius:    20px;
}

/* --------------------------------------------------------------------------
   Stack
   -------------------------------------------------------------------------- */
.csw-stack {
  position:   relative;
  width:       100%;
  max-width:   480px;
  display:     flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Cards container — positions cards in the stack
   -------------------------------------------------------------------------- */
.csw-cards-inner {
  position: relative;
  width:     100%;
}

/* --------------------------------------------------------------------------
   Individual card
   -------------------------------------------------------------------------- */
.csw-card {
  position:         absolute;
  left:             0;
  width:            100%;
  background-color: #ffffff;
  border-radius:    16px;
  padding:          14px 16px;
  display:          flex;
  align-items:      center;
  gap:              12px;
  box-sizing:       border-box;
  cursor:           default;
  transition:
    transform  var(--csw-duration) var(--csw-easing),
    opacity    var(--csw-duration) var(--csw-easing),
    top        var(--csw-duration) var(--csw-easing),
    box-shadow var(--csw-duration) var(--csw-easing);
  will-change: transform, top, opacity;
}

/* First card (top of stack) is always fully visible */
.csw-card:first-of-type {
  z-index: 10;
}

/* --------------------------------------------------------------------------
   Card inner elements
   -------------------------------------------------------------------------- */
.csw-card__link-wrap {
  display:         contents;
  text-decoration: none;
  color:           inherit;
}

.csw-card__icon {
  flex-shrink:     0;
  width:           44px;
  height:          44px;
  border-radius:   12px;
  background-color:#1c1c1e;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.csw-card__icon i,
.csw-card__icon svg {
  font-size:  18px;
  width:      18px;
  height:     18px;
  color:      #ffffff;
  fill:       #ffffff;
  display:    block;
}

.csw-card__body {
  flex:       1;
  min-width:  0;
}

.csw-card__title {
  margin:      0;
  font-size:   15px;
  font-weight: 600;
  line-height: 1.3;
  color:       #1c1c1e;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.csw-card__subtitle {
  margin:      2px 0 0;
  font-size:   13px;
  font-weight: 400;
  line-height: 1.3;
  color:       #8e8e93;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.csw-card__date {
  flex-shrink:  0;
  font-size:    13px;
  font-weight:  400;
  color:        #8e8e93;
  align-self:   flex-end;
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Toggle button
   -------------------------------------------------------------------------- */
.csw-toggle-btn {
  display:          flex;
  align-items:      center;
  gap:              6px;
  margin-top:       20px;
  padding:          8px 20px;
  background-color: #ffffff;
  border:           none;
  border-style:     solid;
  border-color:     transparent;
  border-width:     0;
  border-radius:    20px;
  font-family:      inherit;
  font-size:        14px;
  font-weight:      500;
  color:            #1c1c1e;
  cursor:           pointer;
  position:         relative;
  z-index:          20;
  transition:       transform 0.15s ease, opacity 0.15s ease;
  -webkit-appearance: none;
  appearance:       none;
}

.csw-toggle-btn:hover  { opacity: 0.85; }
.csw-toggle-btn:active { transform: scale(0.96); }
.csw-toggle-btn:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

/* Chevron arrow */
.csw-toggle-btn__chevron {
  display:       inline-block;
  width:         9px;
  height:        9px;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:     rotate(45deg) translateY(-2px);
  transition:    transform var(--csw-duration) var(--csw-easing);
  flex-shrink:   0;
}

.csw-stack--expanded .csw-toggle-btn__chevron {
  transform: rotate(-135deg) translateY(-2px);
}

/* --------------------------------------------------------------------------
   JavaScript-driven dynamic card positions
   Cards are absolutely positioned; JS sets top / transform / opacity / z-index
   The JS reads --csw-scale-step and --csw-offset-step from computed style.
   See card-stack.js for the positioning logic.
   -------------------------------------------------------------------------- */

/* Collapsed: stacked behind card 0 — set by JS */
/* Expanded:  laid out vertically   — set by JS */

/* Height placeholder so the scene doesn't collapse */
.csw-cards-inner {
  transition: height var(--csw-duration) var(--csw-easing);
}

/* --------------------------------------------------------------------------
   Reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .csw-card,
  .csw-cards-inner,
  .csw-toggle-btn__chevron {
    transition-duration: 0ms !important;
  }
}

/* --------------------------------------------------------------------------
   Hover lift on cards when expanded
   -------------------------------------------------------------------------- */
.csw-stack--expanded .csw-card:hover {
  transform: translateY(-2px) !important;
}