/* ===== БАЗОВЫЕ СТИЛИ (общие) ===== */
.carousel-radio {
  position: relative;
  max-width: 600px;
  margin: 20px auto;
  overflow: hidden;
}
.slides-radio {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  flex-shrink: 0;
}
.slide img {
  width: 100%;
  display: block;
}
input[type="radio"] {
  display: none;
}
.nav {
  text-align: center;
  margin-top: 10px;
}
.nav label {
  display: inline-block;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 22px;
  color: #ccc;
  transition: color 0.2s;
}
.nav label:hover {
  color: #666;
}
.nav label.active { /* для 1 слайда, если нужно подсветить */
  color: #000;
}

/* ===== 1 СЛАЙД ===== */
.carousel-1 .slides-radio {
  width: 100%;
}
.carousel-1 .slide {
  width: 100%;
}
#s1:checked ~ .slides-radio {
  transform: translateX(0%);
}
#s1:checked ~ .nav label[for="s1"] {
  color: #000;
}

/* ===== 2 СЛАЙДА ===== */
.carousel-2 .slides-radio {
  width: 200%;
}
.carousel-2 .slide {
  width: 50%;
}
#s1:checked ~ .slides-radio {
  transform: translateX(0%);
}
#s2:checked ~ .slides-radio {
  transform: translateX(-50%);
}
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"] {
  color: #000;
}

/* ===== 3 СЛАЙДА ===== */
.carousel-3 .slides-radio {
  width: 300%;
}
.carousel-3 .slide {
  width: 33.3333%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-33.3333%); }
#s3:checked ~ .slides-radio { transform: translateX(-66.6666%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"] { color: #000; }

/* ===== 4 СЛАЙДА ===== */
.carousel-4 .slides-radio {
  width: 400%;
}
.carousel-4 .slide {
  width: 25%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-25%); }
#s3:checked ~ .slides-radio { transform: translateX(-50%); }
#s4:checked ~ .slides-radio { transform: translateX(-75%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"],
#s4:checked ~ .nav label[for="s4"] { color: #000; }

/* ===== 5 СЛАЙДОВ ===== */
.carousel-5 .slides-radio {
  width: 500%;
}
.carousel-5 .slide {
  width: 20%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-20%); }
#s3:checked ~ .slides-radio { transform: translateX(-40%); }
#s4:checked ~ .slides-radio { transform: translateX(-60%); }
#s5:checked ~ .slides-radio { transform: translateX(-80%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"],
#s4:checked ~ .nav label[for="s4"],
#s5:checked ~ .nav label[for="s5"] { color: #000; }

/* ===== 6 СЛАЙДОВ ===== */
.carousel-6 .slides-radio {
  width: 600%;
}
.carousel-6 .slide {
  width: 16.6666%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-16.6666%); }
#s3:checked ~ .slides-radio { transform: translateX(-33.3332%); }
#s4:checked ~ .slides-radio { transform: translateX(-49.9998%); }
#s5:checked ~ .slides-radio { transform: translateX(-66.6664%); }
#s6:checked ~ .slides-radio { transform: translateX(-83.333%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"],
#s4:checked ~ .nav label[for="s4"],
#s5:checked ~ .nav label[for="s5"],
#s6:checked ~ .nav label[for="s6"] { color: #000; }

/* ===== 7 СЛАЙДОВ ===== */
.carousel-7 .slides-radio {
  width: 700%;
}
.carousel-7 .slide {
  width: 14.2857%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-14.2857%); }
#s3:checked ~ .slides-radio { transform: translateX(-28.5714%); }
#s4:checked ~ .slides-radio { transform: translateX(-42.8571%); }
#s5:checked ~ .slides-radio { transform: translateX(-57.1428%); }
#s6:checked ~ .slides-radio { transform: translateX(-71.4285%); }
#s7:checked ~ .slides-radio { transform: translateX(-85.7142%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"],
#s4:checked ~ .nav label[for="s4"],
#s5:checked ~ .nav label[for="s5"],
#s6:checked ~ .nav label[for="s6"],
#s7:checked ~ .nav label[for="s7"] { color: #000; }

/* ===== 8 СЛАЙДОВ ===== */
.carousel-8 .slides-radio {
  width: 800%;
}
.carousel-8 .slide {
  width: 12.5%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-12.5%); }
#s3:checked ~ .slides-radio { transform: translateX(-25%); }
#s4:checked ~ .slides-radio { transform: translateX(-37.5%); }
#s5:checked ~ .slides-radio { transform: translateX(-50%); }
#s6:checked ~ .slides-radio { transform: translateX(-62.5%); }
#s7:checked ~ .slides-radio { transform: translateX(-75%); }
#s8:checked ~ .slides-radio { transform: translateX(-87.5%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"],
#s4:checked ~ .nav label[for="s4"],
#s5:checked ~ .nav label[for="s5"],
#s6:checked ~ .nav label[for="s6"],
#s7:checked ~ .nav label[for="s7"],
#s8:checked ~ .nav label[for="s8"] { color: #000; }

/* ===== 9 СЛАЙДОВ ===== */
.carousel-9 .slides-radio {
  width: 900%;
}
.carousel-9 .slide {
  width: 11.1111%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-11.1111%); }
#s3:checked ~ .slides-radio { transform: translateX(-22.2222%); }
#s4:checked ~ .slides-radio { transform: translateX(-33.3333%); }
#s5:checked ~ .slides-radio { transform: translateX(-44.4444%); }
#s6:checked ~ .slides-radio { transform: translateX(-55.5555%); }
#s7:checked ~ .slides-radio { transform: translateX(-66.6666%); }
#s8:checked ~ .slides-radio { transform: translateX(-77.7777%); }
#s9:checked ~ .slides-radio { transform: translateX(-88.8888%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"],
#s4:checked ~ .nav label[for="s4"],
#s5:checked ~ .nav label[for="s5"],
#s6:checked ~ .nav label[for="s6"],
#s7:checked ~ .nav label[for="s7"],
#s8:checked ~ .nav label[for="s8"],
#s9:checked ~ .nav label[for="s9"] { color: #000; }

/* ===== 10 СЛАЙДОВ ===== */
.carousel-10 .slides-radio {
  width: 1000%;
}
.carousel-10 .slide {
  width: 10%;
}
#s1:checked ~ .slides-radio { transform: translateX(0%); }
#s2:checked ~ .slides-radio { transform: translateX(-10%); }
#s3:checked ~ .slides-radio { transform: translateX(-20%); }
#s4:checked ~ .slides-radio { transform: translateX(-30%); }
#s5:checked ~ .slides-radio { transform: translateX(-40%); }
#s6:checked ~ .slides-radio { transform: translateX(-50%); }
#s7:checked ~ .slides-radio { transform: translateX(-60%); }
#s8:checked ~ .slides-radio { transform: translateX(-70%); }
#s9:checked ~ .slides-radio { transform: translateX(-80%); }
#s10:checked ~ .slides-radio { transform: translateX(-90%); }
#s1:checked ~ .nav label[for="s1"],
#s2:checked ~ .nav label[for="s2"],
#s3:checked ~ .nav label[for="s3"],
#s4:checked ~ .nav label[for="s4"],
#s5:checked ~ .nav label[for="s5"],
#s6:checked ~ .nav label[for="s6"],
#s7:checked ~ .nav label[for="s7"],
#s8:checked ~ .nav label[for="s8"],
#s9:checked ~ .nav label[for="s9"],
#s10:checked ~ .nav label[for="s10"] { color: #000; }

/* ===== УПРАВЛЕНИЕ ОТОБРАЖЕНИЕМ КАРТИНОК ===== */

/* 1. Режим "cover" – картинка заполняет весь слайд, обрезая лишнее (как фон) */
.carousel-radio.cover .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2. Режим "contain" – картинка вписывается целиком, сохраняя пропорции (могут быть полосы) */
.carousel-radio.contain .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3. Режим "natural" – картинка отображается в естественном размере, без масштабирования */
.carousel-radio.natural .slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-radio.natural .slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* 4. Фиксированная высота слайдов (по желанию) – чтобы карусель не прыгала */
.carousel-radio.fixed-height .slide {
  height: 400px; /* можно заменить на свою */
}
.carousel-radio.fixed-height .slide img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* или contain – переопределите в классе */
}

/* 5. Центрирование по вертикали (для режимов cover/contain) */
.carousel-radio .slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* чтобы объекты не вылезали */
}