/* Wedding Planners Instagram — stacked Instagram-style layout */
.wpi-instagram-carousel {
  --wpi-width: 492px;
  --wpi-header: 76px;
  --wpi-actions: 64px;
  --wpi-radius: 22px;
  --wpi-stack-x: -44px;
  --wpi-stack-y: 32px;
  width: 100%;
  max-width: 100%;
  min-height: 710px;
  margin: 0 auto;
  position: relative;
  font-family: inherit;
  overflow: hidden;
}

.wpi-track-wrap {
  position: relative;
  width: 100%;
  min-height: 710px;
  padding: 36px 0 0;
  overflow: hidden;
}

/* JS controls the card positions; this prevents a horizontal scrollbar. */
.wpi-track {
  position: relative;
  width: 100%;
  height: 670px;
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
}
.wpi-track.is-dragging { cursor: grabbing; }

.wpi-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--wpi-width);
  margin: 0;
  background: #fff;
  border-radius: var(--wpi-radius);
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(25, 25, 25, .13);
  border: 1px solid rgba(0,0,0,.035);
  transform-origin: 50% 50%;
  opacity: 1;
  visibility: visible;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease, filter .45s ease;
  will-change: transform;
  user-select: none;
}

/* Card states are applied by JS using data-position. */
.wpi-card[data-position="active"] {
  transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
  z-index: 10;
  opacity: 1;
  filter: none;
  box-shadow: 0 18px 45px rgba(20,20,20,.14);
}

/* Vertical drop is intentionally small — the actions row (with the icons)
   must never poke out below the active card's bottom edge, only the image/
   header edge should peek out to the left. Scale steps down noticeably so
   the stack reads as "big active card, smaller cards behind it." */
.wpi-card[data-position="behind-1"] {
  transform: translate3d(calc(-50% - 48px), 8px, 0) rotate(-1.5deg) scale(.92);
  z-index: 9;
}

.wpi-card[data-position="behind-2"] {
  transform: translate3d(calc(-50% - 92px), 16px, 0) rotate(-3deg) scale(.84);
  z-index: 8;
}

.wpi-card[data-position="behind-3"] {
  transform: translate3d(calc(-50% - 136px), 24px, 0) rotate(-4.5deg) scale(.76);
  z-index: 7;
}

.wpi-card[data-position="hidden-left"],
.wpi-card[data-position="hidden-right"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Only the active card shows its header/actions. Stacked-behind cards only
   ever reveal a peek of their photo — never their username, date, or icons —
   regardless of exactly how far the peek extends. */
.wpi-card-header,
.wpi-actions {
  opacity: 1;
  transition: opacity .35s ease;
}
.wpi-card:not([data-position="active"]) .wpi-card-header,
.wpi-card:not([data-position="active"]) .wpi-actions,
.wpi-card:not([data-position]):not(:nth-of-type(1)) .wpi-card-header,
.wpi-card:not([data-position]):not(:nth-of-type(1)) .wpi-actions {
  opacity: 0;
}

/* Before JS runs, cards have no data-position yet — stack them here too so
   all posts appear in place on first paint instead of flashing as one card.
   The first card is active; the LAST few cards (by nth-last-of-type) sit
   behind it, mirroring the JS's circular-distance-from-active logic so the
   fallback never disagrees with what JS renders a moment later. The
   ":not(:nth-of-type(1))" guard stops a rule from also matching the active
   card itself when there are fewer than 4 total cards. */
.wpi-card:not([data-position]) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.wpi-card:not([data-position]):nth-of-type(1) {
  transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1);
  z-index: 10;
  opacity: 1;
  visibility: visible;
}
.wpi-card:not([data-position]):nth-last-of-type(1):not(:nth-of-type(1)) {
  transform: translate3d(calc(-50% - 48px), 8px, 0) rotate(-1.5deg) scale(.92);
  z-index: 9;
  opacity: 1;
  visibility: visible;
}
.wpi-card:not([data-position]):nth-last-of-type(2):not(:nth-of-type(1)) {
  transform: translate3d(calc(-50% - 92px), 16px, 0) rotate(-3deg) scale(.84);
  z-index: 8;
  opacity: 1;
  visibility: visible;
}
.wpi-card:not([data-position]):nth-last-of-type(3):not(:nth-of-type(1)) {
  transform: translate3d(calc(-50% - 136px), 24px, 0) rotate(-4.5deg) scale(.76);
  z-index: 7;
  opacity: 1;
  visibility: visible;
}

.wpi-card-header {
  height: var(--wpi-header);
  box-sizing: border-box;
  padding: 13px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
}

.wpi-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.wpi-profile img,
.wpi-avatar-fallback {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 42px;
}

.wpi-avatar-fallback {
  display: grid;
  place-items: center;
  background: #f0eee6;
  color: #7b756b;
  font-weight: 700;
  font-size: 14px;
}

.wpi-username {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: #25232a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 330px;
}

/* The reference design has no three-dot menu. */
.wpi-more { display: none !important; }

.wpi-media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
  position: relative;
  overflow: hidden;
}

.wpi-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.wpi-reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.wpi-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.62);
}

.wpi-play svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  display: block;
}

.wpi-actions {
  height: var(--wpi-actions);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 22px 8px;
  background: #fff;
}

.wpi-actions-left {
  display: flex;
  gap: 14px;
  align-items: center;
}

.wpi-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #77719b;
  text-decoration: none;
  line-height: 1;
  flex: 0 0 auto;
}

.wpi-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Heart — filled solid to match a "liked" post. */
.wpi-like-icon {
  color: #e62f35;
}
.wpi-like-icon svg {
  fill: currentColor;
}

.wpi-count {
  font-size: 13px;
  font-weight: 600;
  color: #4a4658;
  margin-left: -8px;
}

/* The reference screenshot does not show captions. */
.wpi-caption { display: none !important; }

/* Reference design has no visible arrows or pagination dots. */
.wpi-nav,
.wpi-dots { display: none !important; }

.wpi-error,
.wpi-empty {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fafafa;
}

@media (max-width: 820px) {
  .wpi-instagram-carousel {
    --wpi-width: min(492px, calc(100vw - 80px));
    min-height: 680px;
  }
  .wpi-track-wrap,
  .wpi-track { min-height: 680px; height: 640px; }
}

@media (max-width: 600px) {
  /* Mobile drops the stacked-card design entirely: one post at a time,
     with visible tap arrows for manual navigation instead of a peek stack. */
  .wpi-instagram-carousel {
    --wpi-width: calc(100vw - 38px);
    --wpi-radius: 18px;
    min-height: calc(100vw + 115px);
  }
  .wpi-track-wrap {
    min-height: calc(100vw + 115px);
    height: calc(100vw + 115px);
    padding-top: 20px;
  }
  .wpi-track {
    height: calc(100vw + 95px);
    min-height: 0;
  }
  .wpi-card[data-position="behind-1"],
  .wpi-card[data-position="behind-2"],
  .wpi-card[data-position="behind-3"],
  .wpi-card:not([data-position]):nth-last-of-type(1):not(:nth-of-type(1)),
  .wpi-card:not([data-position]):nth-last-of-type(2):not(:nth-of-type(1)),
  .wpi-card:not([data-position]):nth-last-of-type(3):not(:nth-of-type(1)) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .wpi-card-header { height: 68px; padding-left: 16px; }
  .wpi-profile img,
  .wpi-avatar-fallback { width: 39px; height: 39px; flex-basis: 39px; }
  .wpi-username { max-width: 230px; font-size: 13px; }
  .wpi-actions { height: 59px; padding-left: 18px; padding-right: 18px; }

  .wpi-nav {
    display: flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,20,.45);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 0 0 2px;
    cursor: pointer;
  }
  .wpi-prev { left: 6px; }
  .wpi-next { right: 6px; }
}