/* =====================================================
   SLIDER TITLE
===================================================== */
.slider-title{
  text-align:center;
  margin: 10px 0 18px;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .2px;
}

/* =====================================================
   SLIDER CONTAINER (your page wrapper already styles .slider-container in acasa-style.css)
   PATCH: ensure overflow is hidden so only one slide is visible
===================================================== */
.slider-container{
  overflow: hidden;
}

/* =====================================================
   SLIDER TRACK
===================================================== */
.slider {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s ease;
  width: 100%;
}

/* =====================================================
   SINGLE SLIDE
===================================================== */
.slide-item {
  min-width: 100%;
  flex-shrink: 0;
}

.slide-item{
  min-width: 100%;
  height: 360px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px;
  border-radius: 14px;
}

/* Image */
.slide-item img{
  width: 46%;
  height: 100%;
  object-fit: contain;
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px;
}

/* Text */
.slide-content{
  width: 52%;
  color: #ffffff;
  text-align:left;
}

.slide-content h2{
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
/* NEW: real viewport */
/* PATCH: ensure viewport defines the width of a "page" */
.slider-viewport{
  width: 100%;
  overflow: hidden;
}

/* PATCH: slides must be exactly one viewport wide */
.slider{
  width: 100%;
}

.slide-item{
  flex: 0 0 100%;
  width: 100%;
}


/* =====================================================
   MOBILE
===================================================== */
@media (max-width: 768px){
  .slide-item{
    height: auto;
    flex-direction: column;
    padding: 16px;

    /* PATCH — critical for slider math */
    box-sizing: border-box;
    justify-content: center;
    gap: 0;
  }

    .slide-item img{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    /* PATCH: restore mobile image sizing */
    height: 220px;
    object-fit: contain;
  }


  .slide-content{
    width: 100%;
    text-align:center;
  }

  .slide-content h2{
    font-size: 18px;
  }
}