/* ============================================================
   CAROUSEL LAYOUT
   ============================================================ */

#pista-carousel {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    margin-top: 20px;
    margin-bottom: 90px;
    margin-left: 0;
    margin-right: 0;

    padding: 0;
}

#pista-carousel {
    flex-wrap: nowrap;
}

/* ============================================================
   SLIDE (BASE STATE)
   ============================================================ */

.pista-slide {
    display: block;
    width: 240px;
    height: 225px; /* match image height */
    flex-shrink: 0;
    position: relative; /* REQUIRED for stacking */
    margin: 0 12px;
    border-radius: 6px;

    transform: perspective(800px) rotateY(0deg) scale(1);
    transform-origin: left center;

    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    cursor: pointer;

    overflow: visible; /* allow expansion */
}

/* ============================================================
   EXPANDED STATE (STACKING FIX)
   ============================================================ */

.pista-slide.expanded {
    overflow: visible !important;
    z-index: 9999 !important; /* ensures big image is on top */
}

/* ============================================================
   FOLD ANIMATION
   ============================================================ */

.pista-fold {
    position: relative; /* stacking fix */
    z-index: 2;         /* above base image */
    transform-origin: center left;
    transform: rotateY(0deg) scale(1);
    transition: none;
}

.pista-slide.expanded .pista-fold {
    animation: foldThenExpand 0.45s ease forwards;
}

@keyframes foldThenExpand {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    40% {
        transform: rotateY(90deg) scale(1);
    }
    100% {
        transform: rotateY(0deg) scale(2.0);
    }
}

/* ============================================================
   IMAGE
   ============================================================ */

.pista-img {
    width: 100%;
    height: 225px;
    object-fit: cover;
    border-radius: 6px;
    display: block;

    position: relative; /* stacking fix */
    z-index: 1;
}

/* ============================================================
   CAPTION BELOW IMAGE
   ============================================================ */

.pista-caption {
    display: block;
    margin-top: 8px;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #333;
}

/* ============================================================
   CAROUSEL CONTROLS (LEFT / STOP / RIGHT)
   ============================================================ */

#pista-carousel-wrapper {
    position: relative;
    width: 100%;
}

/* ============================================================
   CAROUSEL CONTROLS (NO BACKGROUND)
   ============================================================ */

.carousel-controls {
  display: flex;
  justify-content: center;      /* centers horizontally */
  align-items: center;          /* centers vertically */
  gap: 20px;                    /* spacing between buttons */
  margin-top: 20px;
  padding: 0;                   /* no background padding */
  background: none;             /* removes background strip */
  border: none;                 /* removes border */
}

/* SMALLER START/STOP TOGGLE */
.carousel-toggle {
  background: none;
  border: 1px solid #aeb9c4;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  color: #3a4a5a;
  transition: color 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}

/* VERY LIGHT BLUE-GRAY HOVER */
.carousel-arrow:hover,
.carousel-toggle:hover {
  color: #FCFCFC;               /* very light blue-gray hover */
  transform: scale(1.1);
  border-color: #c7d8e6;
}

.carousel-arrow {
  background: none !important;     /* removes default button background */
  border: none;
  font-size: 36px;
  font-weight: 800;
  cursor: pointer;
  color: #2f3e4f;
  transition: color 0.25s ease, transform 0.2s ease, background-color 0.25s ease;
}

/* Hover color only — no background */
.carousel-arrow:hover {
  color: #8fb2c9;                  /* visible light blue-gray */
  background: none !important;     /* prevents blue background */
  transform: scale(1.1);
}