/* ==========================================================
   OPTION D - Option C with the slide switcher moved onto the
   colour stage as a glass control bar (thumbnails expand to
   show the active title). Mobile: bar sits under the slide.
   ========================================================== */
.hc-grid{grid-template-columns:minmax(0, 1fr); gap:0; position:relative}

.rail-c{position:absolute; z-index:6; bottom:18px; inset-inline-end:18px; width:calc((100% - 44px) / 2 - 36px);
  flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding:6px;
  border-radius:22px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 18px 40px -20px rgba(20,30,60,.45)}
.hc .dots{flex-direction:row; gap:4px; flex:1; min-width:0}
.hc .dot{grid-template-columns:36px 0fr; gap:0; padding:5px; border-radius:16px; background:transparent; border-color:transparent; box-shadow:none; transform:none;
  transition:grid-template-columns .6s var(--ease), gap .6s var(--ease), padding .6s var(--ease), background .4s var(--ease)}
[dir="rtl"] .hc .dot{padding:5px}
.hc .dot:not(.is-active):hover{background:rgba(255,255,255,.2)}
.hc .dot.is-active{grid-template-columns:36px 1fr; gap:10px; padding-inline-end:14px; background:rgba(255,255,255,.94); box-shadow:0 8px 20px -10px rgba(20,30,60,.4); transform:none}
.hc .dot .thumb{width:36px; height:46px; border-radius:10px; font-size:14px; box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.hc .dot .thumb .mini{width:22px; margin-top:-6px}
.hc .dot .n{display:flex; min-width:0; overflow:hidden; white-space:nowrap; font-size:10.5px}
.hc .dot .n span{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
[dir="rtl"] .hc .dot .n span{font-size:14px}
.hc .dot .bar{top:auto; bottom:4px; inset-block:auto 4px; inset-inline:12px; width:auto; height:2px; opacity:0; transition:opacity .3s}
.hc .dot.is-active .bar{opacity:1}
.hc .dot .bar b{transform:scaleX(0); transform-origin:left}
[dir="rtl"] .hc .dot .bar b{transform-origin:right}
.hc .dot.is-active .bar b{animation-name:fill}
.hero.hc.no-auto .dot.is-active .bar b{transform:scaleX(1)}
.rail-c .arrows{flex-direction:row; align-items:center; gap:6px; padding:0}
.rail-c .arrows .ibtn.round{width:40px; height:40px; color:#fff; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); box-shadow:none}
.rail-c .arrows .ibtn.round:hover{background:rgba(255,255,255,.32)}

/* keep stage content clear of the bar */
.hc .st-card{bottom:96px}
.hc .st-book{padding-bottom:64px}
.hc .stage-c .fan{bottom:64px}

@container site (max-width: 1180px){
  .hc .dot.is-active .n span{max-width:9em}
}
@container site (max-width: 820px){
  .rail-c{position:relative; inset:auto; width:100%; margin-top:14px; background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.95); box-shadow:var(--sh-1)}
  .hc .dot:not(.is-active):hover{background:rgba(255,255,255,.7)}
  .rail-c .arrows .ibtn.round{color:var(--ink); background:#fff; border-color:rgba(51,55,61,.08)}
  .hc .st-card{bottom:16px}
  .hc .st-book{padding-bottom:0}
  .hc .stage-c .fan{bottom:0}
}
@container site (max-width: 560px){
  .rail-c .arrows{display:none}
  .hc .dots{justify-content:space-between}
}