/* ACTOR PORTRAIT CAROUSEL */
.actor-carousel                                      { --carousel-red:#f00; --carousel-text:#444; --carousel-black:#111; --carousel-slide-width:78%; --carousel-mobile-slide-width:88%; width:100%; margin:0 auto; color:var(--carousel-text) }

/* STAGE */
.actor-carousel__stage                               { position:relative; width:100%; display:flex; align-items:center }

/* VIEWPORT */
.actor-carousel__viewport                            { width:100%; overflow:hidden; outline:none }

/* TRACK — Native horizontal scrolling does the heavy lifting. */
.actor-carousel__track                               { display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; padding-inline:9%; -webkit-overflow-scrolling:touch }
.actor-carousel__track::-webkit-scrollbar            { display:none }

/* SLIDES */
.actor-carousel__slide                               { flex:0 0 var(--carousel-slide-width); width:var(--carousel-slide-width); margin:0; scroll-snap-align:center; scroll-snap-stop:always; display:flex; justify-content:center; align-items:center; min-width:0 }

/* IMAGE */
.actor-carousel__slide img                           { display:block; width:100%; height:min(78vh,900px); object-fit:contain; background:#fff; user-select:none; -webkit-user-drag:none; transition:opacity 250ms ease }

/* NAVIGATION ARROWS */
.actor-carousel__arrow                               { position:absolute; z-index:10; top:50%; transform:translateY(-50%); width:3.25rem; height:3.25rem; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#fff; color:var(--carousel-black); font-family:inherit; font-size:1.35rem; line-height:1; cursor:pointer; box-shadow:0 3px 15px rgb(0 0 0 / 10%); transition:background-color 150ms ease,color 150ms ease,transform 150ms ease }

/* Red is reserved for interaction. */
.actor-carousel__arrow:hover                         { background:var(--carousel-red); color:#fff }
.actor-carousel__arrow:active                        { transform:translateY(-50%) scale(.94) }
.actor-carousel__arrow:focus-visible                 { outline:3px solid var(--carousel-red); outline-offset:4px }
.actor-carousel__arrow--prev                         { left:1.5rem }
.actor-carousel__arrow--next                         { right:1.5rem }

/* We deliberately DON'T make the buttons disappear at the beginning/end. The JS simply leaves the carousel where it is. */

/* FOOTER */
.actor-carousel__footer                              { width:82%; margin:1rem auto 0; display:flex; align-items:center; gap:2rem }

/* COUNTER */
.actor-carousel__counter                             { flex:0 0 auto; color:var(--carousel-text); font-size:.78rem; font-weight:600; letter-spacing:.08em; font-variant-numeric:tabular-nums; white-space:nowrap }
.actor-carousel__counter-separator                   { margin:0 .3rem; color:#aaa }

/* PROGRESS BAR */
.actor-carousel__progress                            { flex:1; display:flex; align-items:center; gap:4px }
.actor-carousel__progress button                     { flex:1; height:2px; min-width:8px; padding:0; border:0; background:#d5d5d5; cursor:pointer; transition:background-color 180ms ease,height 180ms ease }
.actor-carousel__progress button[aria-selected="true"] { height:4px; background:var(--carousel-red) }
.actor-carousel__progress button:hover               { background:var(--carousel-red) }
.actor-carousel__progress button:focus-visible       { outline:2px solid var(--carousel-red); outline-offset:4px }

/* TABLET */
@media (min-width:768px) { 
  .actor-carousel__slide img                           { height:min(80vh,950px) }
}

  /* MOBILE */
@media (max-width:767px) { 
  .actor-carousel__track                               { padding-inline:6%; gap:.75rem }
  .actor-carousel__slide                               { flex-basis:var(--carousel-mobile-slide-width); width:var(--carousel-mobile-slide-width) }
  .actor-carousel__slide img                           { height:72vh; max-height:760px }
  .actor-carousel__arrow                               { width:2.75rem; height:2.75rem; font-size:1.15rem }
  .actor-carousel__arrow--prev                         { left:.5rem }
  .actor-carousel__arrow--next                         { right:.5rem }
  .actor-carousel__footer                              { width:88%; margin-top:.75rem; gap:1rem }

  /* Larger invisible hit area while keeping the visual bar thin. */
  .actor-carousel__progress                            { padding-block:.75rem; gap:3px }
  .actor-carousel__progress button                     { height:3px }
  .actor-carousel__progress button[aria-selected="true"] { height:4px }
}

  /* REDUCED MOTION */
@media (prefers-reduced-motion:reduce) { 
  .actor-carousel__track                               { scroll-behavior:auto }
  .actor-carousel__slide img,.actor-carousel__arrow,.actor-carousel__progress button { transition:none }
 }
}