/* =========================
   PROCESS SLIDESHOW (8 slides: s0–s7)
   Works with your current HTML structure:
   .slideshow > inputs + .slides + .arrows + (put .dots INSIDE .slideshow)
   ========================= */

/* outer wrapper */
.slideshow{
  width: 900px;                 /* you currently set inline; keep here for consistency */
  margin: 0 auto;
  position: relative;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
}

/* hide radios off-screen (still accessible to labels) */
.slideshow input[type="radio"]{
  position: absolute;
  left: -9999px;
}

/* the "viewport" — in your current HTML this is also the moving track container,
   so we clip + style it here. (Best practice is a separate viewport wrapper later.) */
.slides{
  /* layout */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-top: 0;

  /* 8 slides total */
  width: 800%;

  /* motion */
  transform: translateX(0%);
  transition: transform 450ms ease;

  /* presentation */
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background: transparent;      /* keep backgrounds on slide or on a true viewport wrapper */
}

/* each slide takes 1/8 of the track = 1 viewport width */
.slide{
  flex: 0 0 12.5%;
  width: 12.5%;
  box-sizing: border-box;

  min-height: 320px;
  padding: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: clamp(20px, 2.5vw, 34px);
}

/* --- VISIBILITY (opacity) --- */
.slides .slide{
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

/* NOTE: nth-child is 1-based. Slide 0 is the first <section> */
#s0:checked ~ .slides .slide:nth-child(1),
#s1:checked ~ .slides .slide:nth-child(2),
#s2:checked ~ .slides .slide:nth-child(3),
#s3:checked ~ .slides .slide:nth-child(4),
#s4:checked ~ .slides .slide:nth-child(5),
#s5:checked ~ .slides .slide:nth-child(6),
#s6:checked ~ .slides .slide:nth-child(7),
#s7:checked ~ .slides .slide:nth-child(8){
  opacity: 1;
  pointer-events: auto;
}

/* --- MOVE TRACK (8 steps; 12.5% per slide) --- */
#s0:checked ~ .slides{ transform: translateX(0%); }
#s1:checked ~ .slides{ transform: translateX(-12.5%); }
#s2:checked ~ .slides{ transform: translateX(-25%); }
#s3:checked ~ .slides{ transform: translateX(-37.5%); }
#s4:checked ~ .slides{ transform: translateX(-50%); }
#s5:checked ~ .slides{ transform: translateX(-62.5%); }
#s6:checked ~ .slides{ transform: translateX(-75%); }
#s7:checked ~ .slides{ transform: translateX(-87.5%); }

/* =========================
   ARROWS
   ========================= */
.arrows{
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.arrows .a{
  display: none;
  gap: 10px;
  pointer-events: auto;
}

.btn{
  user-select: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,0,0,1);
  color: #fff;
  font-weight: 600;
  line-height: 1;
}

.btn:hover{
  background: rgba(255,255,255,0.14);
}

/* IMPORTANT:
   Your HTML currently has duplicate .a1 blocks and no .a0.
   Best fix: rename the first arrows block to .a0 in HTML.
   Example:
     <div class="a a0"><label ... for="s1">Start ›</label></div>
*/
#s0:checked ~ .arrows .a0{ display: flex; }
#s1:checked ~ .arrows .a1{ display: flex; }
#s2:checked ~ .arrows .a2{ display: flex; }
#s3:checked ~ .arrows .a3{ display: flex; }
#s4:checked ~ .arrows .a4{ display: flex; }
#s5:checked ~ .arrows .a5{ display: flex; }
#s6:checked ~ .arrows .a6{ display: flex; }
#s7:checked ~ .arrows .a7{ display: flex; }

/* =========================
   DOTS / NAV
   NOTE: .dots MUST be inside .slideshow for these selectors to work.
   ========================= */
.dots{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.dots label{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.18);
}

#s0:checked ~ .dots label[for="s0"],
#s1:checked ~ .dots label[for="s1"],
#s2:checked ~ .dots label[for="s2"],
#s3:checked ~ .dots label[for="s3"],
#s4:checked ~ .dots label[for="s4"],
#s5:checked ~ .dots label[for="s5"],
#s6:checked ~ .dots label[for="s6"],
#s7:checked ~ .dots label[for="s7"]{
  background: rgba(255,255,255,0.9);
}

/* =========================
   Optional: if slide content includes images
   ========================= */
.slide img{
  max-width: 100%;
  height: auto;
  display: block;
}