/* ... ↓↓ ZACIATOK = môj CSS style pre "VLASTNOSTI-SLIDER" pre touch screen ↓↓ ...  */
/* ................................................................................ */
/* ................................................................................ */



.vlastnosti-slider-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}


/* Default (pre desktop) — zarovnanie vľavo stĺpcov */

.vlastnosti-slider-wrapper .vlastnosti-slider-track {
  display: flex;
  gap: 20px;
  padding: 20px;
  scroll-snap-align: start;
  transition: scroll 0.3s ease-in-out;
  justify-content: flex-start;
}

/* === Desktop ≥ 950px === */
/* Ak sú 3 alebo menej stĺpcov → centrovať */

@media (min-width: 950px) {
  .vlastnosti-slider-wrapper .vlastnosti-slider-track:not(:has(> .vlastnosti-slider-wrapper-column:nth-child(4))) {
    justify-content: center;
  }
}

/* === Tablet: 700px – 949px === */
/* Ak sú 2 alebo menej stĺpcov → centrovať */

@media (max-width: 949px) and (min-width: 700px) {
  .vlastnosti-slider-wrapper .vlastnosti-slider-track:not(:has(> .vlastnosti-slider-wrapper-column:nth-child(3))) {
    justify-content: center;
  }
}

/* === Mobil: ≤ 699px === */
/* Ak je iba 1 stĺpec → centrovať */

@media (max-width: 699px) {
  .vlastnosti-slider-wrapper .vlastnosti-slider-track:not(:has(> .vlastnosti-slider-wrapper-column:nth-child(2))) {
    justify-content: center;
  }
}


.vlastnosti-slider-wrapper-column {
  scroll-snap-align: start;
  flex-shrink: 0;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* Obrázok s pomerom strán 3:2 */
.vlastnosti-slider-image-container {
  position: relative;
  width: 100%;
  padding-top: 66.6667%;
  overflow: hidden;
}

.vlastnosti-slider-image-container img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vlastnosti-slider-overlay-content {
  background-color: #f4f4f4;
  padding: 15px;
  text-align: center;
  flex-grow: 1;
}

.vlastnosti-slider-overlay-content h1 {
  font-size: 16px !important;
  margin-bottom: 10px !important;
}

.vlastnosti-slider-overlay-content p {
  font-size: 12px !important;
}

/* Responzívne šírky stĺpcov (slider ukazuje 3 + 0.5, 2 + 0.5, 1 + 0.5) */
@media (min-width: 950px) {
  .vlastnosti-slider-wrapper-column {
    width: calc((100% - 40px) / 3.5);
  }
}

@media (max-width: 949px) and (min-width: 700px) {
  .vlastnosti-slider-wrapper-column {
    width: calc((100% - 20px) / 2.5);
  }
}

@media (max-width: 699px) {
  .vlastnosti-slider-wrapper-column {
    width: calc(100% / 1.5);
  }
}

/* Text respozívne */
@media (max-width: 750px) {
  .vlastnosti-slider-overlay-content h1 {
    font-size: 15px;
  }
  .vlastnosti-slider-overlay-content p {
    font-size: 12px;
  }
}



/* ................................................................................ */
/* .....↑↑ KONIEC  = TU KONČÍ môj CSS style pre "VLASTNOSTI-SLIDER" pre touch screen ↑↑ .....  */
/* ................................................................................ */