/* Slovo klientů – jen úvod a /projekty/ (build.mjs, PAGE_ASSETS). Šablona testimonialsSection() v src/pages.mjs, chování voices.mjs.
   Tmavý pás; na jevišti jeden hlas (velký portrét vlevo, citace vpravo), pod ním řada tváří jako záložky.
   Bez JavaScriptu jsou všechny hlasy pod sebou a záložky skryté. .is-live (voices.mjs) ukáže jen aktivní hlas a záložky;
   .is-playing = světlo se samo stěhuje (linka pod vybranou tváří), .is-paused = zastaveno najetím nebo zaměřením. */
.testimonials{background:#14161b;color:#e3e5ea}
.testimonials .section-head .eyebrow{color:#aebcff}
.testimonials .section-head h2{color:#fff}
.testimonials .section-head>p{color:#c6cad2}
.voices{position:relative}
.voice{margin:0;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);grid-template-areas:"photo quote" "photo caption";gap:22px clamp(36px,6vw,88px);align-items:center}
.voice.no-photo{grid-template-columns:minmax(0,1fr);grid-template-areas:"quote" "caption"}
.voice+.voice{margin-top:56px;padding-top:56px;border-top:1px solid #ffffff1a}
.voices.is-live .voice+.voice{margin-top:0;padding-top:0;border-top:0}
.voices.is-live .voice:not(.is-active){display:none}
.voices.is-live .voice.is-active{animation:voiceIn .5s ease both}
@keyframes voiceIn{from{opacity:0;transform:translateY(8px)}}
.voice-photo-wrap{grid-area:photo;position:relative;isolation:isolate}
.voice-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.voice-note{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:5px 9px;background:#101922c9;color:#fff;font-size:10px;line-height:1.5;backdrop-filter:blur(6px)}
.voice blockquote{grid-area:quote;margin:0;align-self:end}
.voice-body{grid-area:quote/quote/caption/caption;display:flex;flex-direction:column;gap:22px;min-width:0}
.voice-text{font-size:clamp(26px,3vw,46px);line-height:1.14;letter-spacing:-.045em;font-weight:520;color:#fff;text-wrap:pretty;overflow-wrap:anywhere;max-width:22em}
.voice blockquote .voice-text{text-indent:-.45em}
.voice.is-pending .voice-text{color:#9aa1ad}
.voice-caption{grid-area:caption;display:flex;flex-direction:column;align-items:flex-start;gap:3px;align-self:start;font-size:14px;line-height:1.4;color:#b0b6c2;overflow-wrap:anywhere}
.voice-caption strong{font-size:16px;font-weight:600;color:#fff}
.voice-caption .text-link{margin-top:10px;color:#fff;border-color:#ffffff55}
.voice-caption .testimonial-flag{margin-top:8px;border-color:#ffffff55;color:#c6cad2}
.voice.is-sample .testimonial-flag{border-style:solid;border-color:#fff;color:#fff}
/* řada tváří: vodorovný pás, vybraná tvář má kroužek a pod sebou linku, která ukazuje, kdy se světlo přestěhuje dál */
.voice-tabs{position:relative;display:flex;gap:8px 18px;margin-top:44px;padding:10px 0 12px;border-top:1px solid #ffffff1a;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#3a4150 transparent;--fade-l:0px;--fade-r:0px}
/* okraje řady vyhasínají tam, kde pokračuje (voices.mjs nastavuje --fade-l/--fade-r podle posunu) */
.voices.is-live .voice-tabs{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
.voice-tabs[hidden]{display:none}
.voice-tab{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 14px 14px 8px;border:0;border-radius:4px;background:none;color:#b0b6c2;font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start;opacity:.72;transition:opacity .3s,color .3s}
.voice-tab:hover,.voice-tab:focus-visible,.voice-tab[aria-selected=true]{opacity:1;color:#fff}
.voice-tab:focus-visible{outline:2px solid #aebcff;outline-offset:2px}
.voice-tab-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;transition:box-shadow .5s}
.voice-tab[aria-selected=true] .voice-tab-photo{box-shadow:0 0 0 2px var(--blue)}
.voice-initials{display:grid;place-items:center;background:#2a2f3a;color:#c6cad2;font-size:16px;font-weight:600;letter-spacing:-.02em}
.voice-tab-name{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35;white-space:nowrap}
.voice-tab-name strong{font-size:14px;font-weight:600;color:inherit}
.voice-tab::after{content:"";position:absolute;left:8px;right:14px;bottom:4px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;opacity:0}
.voices.is-playing .voice-tab[aria-selected=true]::after{opacity:1;animation:voiceRun 7s linear forwards}
.voices.is-paused .voice-tab[aria-selected=true]::after{animation-play-state:paused}
@keyframes voiceRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* noc: pás ještě tmavší, vybraná tvář svítí teple jako okna na webu, za velkým portrétem měkké světlo */
html[data-appearance=night] .testimonials{background:#0c0f16;border-block:1px solid #ffffff14}
html[data-appearance=night] .voice-tab[aria-selected=true] .voice-tab-photo{box-shadow:0 0 0 2px var(--g-warm,#ffcf6e),0 0 18px 4px var(--g-halo,#ffb54755)}
html[data-appearance=night] .voice-tab::after{background:var(--g-warm,#ffcf6e)}
html[data-appearance=night] .voice-tab:focus-visible{outline-color:var(--g-warm,#ffcf6e)}
html[data-appearance=night] .voice-photo-wrap::before{content:"";position:absolute;inset:-10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#ffb54733,transparent)}
@media(max-width:900px){.voice{grid-template-columns:minmax(0,240px) minmax(0,1fr)}}
@media(max-width:700px){.voice,.voice.no-photo{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "quote" "caption";gap:20px}.voice-photo-wrap{max-width:240px}.voice blockquote .voice-text{text-indent:0}.voice-text{max-width:none}.voice-tabs{margin-top:32px;gap:4px 8px}.voice-tab{padding:10px 10px 12px 6px}.voice-tab-name{white-space:normal;min-width:100px}}