/* Partea comună a caruselelor (prima pagină și Despre).
   Pe Splide se schimbă doar fotografia; textul asociat se comută prin data-slide. */

/* Splide scrie inline „transform: translateX(-100%)" pe diapozitivele următoare, ca la un
   carusel care alunecă. Aici ele stau suprapuse și doar se estompează, deci anulăm mutarea.
   „!important" este necesar: stilul concurent este inline. */
.splide__slide { transform:none !important; }

/* --- puncte --- */
.splide__pagination { display:flex; align-items:center; gap:9px; margin:0; padding:0; list-style:none; }
.splide__pagination li { display:block; }
.splide__pagination button {
  display:block; width:28px; height:3px; padding:0; border:0; border-radius:2px;
  background:#ffffff59; cursor:pointer; transition:background .25s, width .25s;
}
.splide__pagination button:hover { background:#ffffff9e; }
.splide__pagination .is-active button { background:var(--aur); width:44px; }
.splide__pagination button:focus-visible { outline:2px solid var(--aur); outline-offset:4px; }

/* --- oprirea derulării automate, cerută de WCAG pentru conținut care pornește singur --- */
.splide__toggle {
  display:grid; place-items:center; width:30px; height:30px; padding:0; flex-shrink:0;
  border:1px solid #ffffff5c; border-radius:50%; background:transparent;
  color:#fff; font-size:9px; line-height:1; cursor:pointer; transition:background .2s, border-color .2s;
}
.splide__toggle:hover { background:#ffffff26; border-color:#ffffff9e; }
/* Splide pune „is-active" pe buton cât timp derularea merge: atunci se arată pauza. */
.splide__toggle__pause { display:none; }
.splide__toggle__play { display:block; margin-left:1px; font-size:10px; }
.splide__toggle.is-active .splide__toggle__pause { display:block; }
.splide__toggle.is-active .splide__toggle__play { display:none; }
.carusel-ascuns { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* --- textul care însoțește diapozitivul: toate variantele suprapuse, deci fără salt --- */
.carusel-fata { display:grid; }
.carusel-fata > [data-slide] { grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .5s ease; }
.carusel-fata > [data-slide].is-fata { opacity:1; visibility:visible; }

@media (prefers-reduced-motion:reduce) {
  .splide__pagination button, .splide__toggle, .carusel-fata > [data-slide] { transition:none; }
}