/*
  SLIDESHOW SECTION STYLES
  ==========================
  Two slides you can scroll/swipe between horizontally, each with an
  image, heading, text, and a button. Uses CSS "scroll-snap" -- a modern,
  mostly-JS-free way to build swipeable carousels that works great on
  touch devices out of the box.
*/

.slideshow {
  background-color: #f0e6ef; /* confirmed real color from settings_data.json */
  padding: 40px;
  position: relative;
}

.slideshow__track {
  display: flex;
  gap: 18px; /* matches your real "slideshow_gap: 18" setting */
  overflow-x: auto; /* enables horizontal scrolling */
  scroll-snap-type: x mandatory; /* forces scrolling to always "snap" to
                                     land exactly on a slide, never stop
                                     halfway between two */

  /* Hide the ugly default scrollbar, since we're providing our own
     arrow buttons for navigation instead */
  scrollbar-width: none;
}

.slideshow__track::-webkit-scrollbar {
  display: none;
}

.slideshow__slide {
  scroll-snap-align: start;
  flex: 0 0 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 750px) {
  .slideshow__slide {
    flex: 0 0 45%;
  }
}

.slideshow__image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 20px; /* matches your real "corner_radius: 20" setting */
  overflow: hidden;
}

.slideshow__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__content {
  padding-top: 20px;
  color: #584664;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slideshow__content h2 {
  font-family: var(--font-body);
  font-size: 1.5rem;
  margin: 0 0 8px 0;
}

.slideshow__content p {
  font-family: var(--font-body);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.slideshow__content a {
  display: inline-block;
  font-family: var(--font-body);
  text-decoration: none;
  padding: 10px 24px;
  border: 1px solid #584664;
  color: #584664;
  border-radius: 4px;
}

/* Arrow buttons that scroll the track left/right when clicked */
.slideshow__arrows {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

.slideshow__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #584664;
  background: transparent;
  color: #584664;
  font-size: 1.2rem;
  cursor: pointer;
}

.slideshow__arrow:hover {
  background-color: #584664;
  color: #ffffff;
}