/**
 * Flatsome Arch Carousel
 * Visual design based on the reference Framer implementation
 */

/* ─── Container ─── */
.fac-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  touch-action: pan-y;
}
.fac-wrap:active { cursor: grabbing; }
.fac-wrap.fac-dragging { cursor: grabbing; }
.fac-wrap.fac-dragging * { pointer-events: none; user-select: none; }
.fac-wrap.fac-align-left  { justify-content: flex-start; }
.fac-wrap.fac-align-right { justify-content: flex-end; }

/* ─── Track: full-size, relative, so absolute children position inside it ─── */
.fac-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ─── Cards (both <div> and <a> variants) ─── */
a.fac-card,
a.fac-card:hover,
a.fac-card:focus {
  text-decoration: none;
  color: inherit;
  outline: none;
}
a.fac-card--active:hover {
  cursor: pointer;
}

/* ─── Cards ─── */
.fac-card {
  /* size set inline */
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  cursor: pointer;
  overflow: hidden;

  /* Dark background while image loads (matches Framer: #1e293b) */
  background-color: #1e293b;

  /* Shadow matching Framer reference */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* Smooth border radius */
  border-radius: inherit; /* set inline */
}

.fac-card--active {
  cursor: default;
}

/* ─── Card inner ─── */
.fac-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* ─── Image ─── */
.fac-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  border-radius: inherit;
  /* Subtle scale-up on active card hover — matches Framer */
  transform: scale(1);
  transition: transform 0.3s ease-out;
}
.fac-card--active:hover .fac-img {
  transform: scale(1.04);
}

/* ─── Overlay ─── */
.fac-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* ─── Caption — fades in on active card hover (exact Framer behaviour) ─── */
.fac-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 16px;
  /* Radial gradient from bottom, matching Framer source */
  background: radial-gradient(
    ellipse 120% 100% at 50% 100%,
    rgba(0, 0, 0, 0.80)  0%,
    rgba(0, 0, 0, 0.60) 25%,
    rgba(0, 0, 0, 0.30) 50%,
    transparent         100%
  );
  padding-top: 60px;
  border-radius: 0 0 inherit inherit;
  pointer-events: none;

  /* Hidden by default, fade in on hover of active card */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Caption title (h3 equivalent) */
.fac-caption-title {
  margin: 0 0 6px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

/* Caption subtitle */
.fac-caption-sub {
  margin: 0;
  color: #ccc;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* Reveal caption on active card hover */
.fac-card--active:hover .fac-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Bottom "ground shadow" glow — matches Framer source */
.fac-card-glow {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

/* ─── Navigation arrows ─── */
.fac-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.fac-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}
.fac-prev { left: 16px; }
.fac-next { right: 16px; }

/* ─── Empty state ─── */
.fac-empty {
  padding: 20px;
  color: #888;
  font-style: italic;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .fac-nav { width: 36px; height: 36px; font-size: 22px; }
  .fac-prev { left: 8px; }
  .fac-next { right: 8px; }
}