/* Adapt the preserved service markup to the homepage portfolio surfaces.
 * Existing links, audio elements, popup triggers and descriptions stay intact. */
#start.service-page #portfolio [data-portfolio-grid] { justify-content:start; align-content:start }
#start.service-page #portfolio :is([data-portfolio-grid],.s-video-examples__videos,.audios__audios,.scripts__scripts,.s-avr-examples__items,.s-audiobook-examples__items)::before,
#start.service-page #portfolio :is([data-portfolio-grid],.s-video-examples__videos,.audios__audios,.scripts__scripts,.s-avr-examples__items,.s-audiobook-examples__items)::after { content:none; display:none }
#start.service-page #portfolio .film-section-heading:not(:has(*)) { display:none }
#start.service-page #portfolio .kg-portfolio-showcase__heading { display:block }
/* The original service works use the same white cards as /perevod.
 * Keep their markup and links, but do not turn the cards into dark posters. */
#start.service-page #portfolio .service-primary-portfolio .card-video__link::before { background:var(--seo-accent) }
#start.service-page #portfolio .service-primary-portfolio .card-video__link .svg-icon { fill:#fff }

/* Audio and script examples keep their original working player and popup. */
#start.service-page #portfolio .service-primary-portfolio :is(.audio-item,.script-item,.s-avr-examples__item) {
    position:relative; display:flex; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:18px; width:auto; min-width:0; min-height:220px;
    margin:0; padding:28px; border:1px solid #4145791c; border-radius:22px;
    background:#fff; color:#414579; box-shadow:none;
    transition:border-color .2s ease,box-shadow .2s ease;
}
#start.service-page #portfolio .service-primary-portfolio :is(.audio-item,.script-item,.s-avr-examples__item):is(:hover,:focus-within) { border-color:#c34b2e66; box-shadow:inset 0 -3px #c34b2e }
#start.service-page #portfolio .service-primary-portfolio :is(.audio-item,.script-item,.s-avr-examples__item)::before,
#start.service-page #portfolio .service-primary-portfolio :is(.audio-item,.script-item,.s-avr-examples__item)::after { content:none; display:none }
#start.service-page #portfolio .service-primary-portfolio :is(.audio-item,.script-item,.s-avr-examples__item)>.svg-icon { display:none }
#start.service-page #portfolio .service-primary-portfolio :is(.audios__content,.scripts__caption,.s-avr-examples__content) { order:0; flex:1; width:100%; margin:0; padding:0 }
#start.service-page #portfolio .service-primary-portfolio :is(.audios__caption,.scripts__caption,.s-avr-examples__caption) { font:700 23px/1.2 Roboto,Arial,sans-serif; letter-spacing:-.025em }
#start.service-page #portfolio .service-primary-portfolio :is(.audios__caption,.scripts__caption,.s-avr-examples__caption) a { color:#414579; text-decoration:none }
#start.service-page #portfolio .service-primary-portfolio :is(.audios__caption,.scripts__caption,.s-avr-examples__caption) a:is(:hover,:focus-visible) { color:var(--portfolio-red); text-decoration:underline; text-underline-offset:3px }
#start.service-page #portfolio .service-primary-portfolio :is(.audios__subcaption,.s-avr-examples__subcaption) { color:#686b88; margin:9px 0 0; font-size:15px; line-height:1.5 }
#start.service-page #portfolio .service-primary-portfolio :is(.audio-item,.script-item,.s-avr-examples__item)>.player { order:1; margin:0; flex-shrink:0 }
#start.service-page #portfolio .service-primary-portfolio :is(.audios__more,.s-avr-examples__more) { color:#686b88; font-size:13px }
#start.service-page #portfolio .service-primary-portfolio .s-avr-examples__more { display:none }
#start.service-page #portfolio .service-primary-portfolio .player__button { background:#c34b2e; border:0; color:#fff; border-radius:50% }
#start.service-page #portfolio .service-primary-portfolio .player__button .svg-icon { fill:#fff }
#start.service-page #portfolio .service-primary-portfolio .service-inline-audio { position:relative; width:100%; height:108px; padding:0; background:none; border:0; border-radius:0 }
#start.service-page #portfolio .service-inline-audio :is(.player__back,.player__progress) { display:none }
#start.service-page #portfolio .service-inline-audio .player__button { position:absolute; top:auto; right:auto; bottom:0; left:0; width:46px; height:46px; margin:0; transform:none }
#start.service-page #portfolio .service-inline-audio__timeline { position:absolute; inset:0 0 auto; height:48px }
#start.service-page #portfolio .service-inline-audio__timeline svg { display:block; width:100%; height:100%; fill:#d7d8e3 }
#start.service-page #portfolio svg.service-inline-audio__played { position:absolute; inset:0; fill:#c34b2e; clip-path:inset(0 calc(100% - var(--audio-progress,0%)) 0 0) }
#start.service-page #portfolio .service-inline-audio__timeline input[type=range] { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer }
#start.service-page #portfolio .service-inline-audio__timeline:focus-within { outline:2px solid #c34b2e; outline-offset:5px; border-radius:4px }
#start.service-page #portfolio .service-inline-audio__time { position:absolute; bottom:14px; left:60px; color:#414579; font:500 12px/1.4 Roboto,Arial,sans-serif; font-variant-numeric:tabular-nums }
#start.service-page #portfolio .service-inline-audio__time:empty { display:none }

/* Primary examples arrive from older service partials. Put them on the same
 * readable card surface as every other portfolio tab without replacing their
 * working players, cover proportions or server-rendered descriptions. */
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio { width:100%; margin:0; padding:0 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-video-examples__container,.s-audiobook-examples__container,.s-audio-examples__container) { width:100%; max-width:none; margin:0; padding:0 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-video-examples__videos,.s-audiobook-examples__items,.audios__audios) {
    display:grid!important; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); grid-template-columns:none!important;
    gap:20px; align-items:stretch; justify-content:start; width:100%; margin:0; padding:0; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; list-style:none; scroll-snap-type:x proximity;
}
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-video-examples__videos,.s-audiobook-examples__items,.audios__audios)::-webkit-scrollbar { display:none }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-video-examples__videos .card-video,.s-audiobook-examples__item,.audios__audio) {
    position:relative; display:flex; flex-direction:column; min-width:0; width:auto!important; min-height:0; margin:0; padding:0;
    overflow:hidden; border:1px solid #4145791c; border-radius:20px; background:#fff; box-shadow:none; scroll-snap-align:start;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-video-examples__videos .card-video,.s-audiobook-examples__item,.audios__audio):is(:hover,:focus-within) { border-color:#c34b2e66; box-shadow:0 14px 32px -24px #27305273; transform:translateY(-2px) }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-video-examples__videos .card-video__video { position:relative; flex:none; width:100%; aspect-ratio:16/9; overflow:hidden; background:#e9ebf2 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-video-examples__videos .card-video__poster { display:block; width:100%; height:100%; object-fit:cover }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-video-examples__videos .card-video__content { display:flex; flex:1; flex-direction:column; min-width:0; padding:22px }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.card-video__title,.s-audiobook-examples__name,.audios__caption) { margin:0; color:#414579; font:700 21px/1.2 Roboto,Arial,sans-serif; letter-spacing:-.025em; overflow-wrap:anywhere }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.card-video__title,.audios__caption a) { color:#414579; text-decoration:none }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.card-video__descr,.audios__subcaption,.s-audiobook-examples__author,.s-audiobook-examples__voices) { display:block; margin:10px 0 0; color:#69708d; font:400 15px/1.5 Roboto,Arial,sans-serif; overflow-wrap:anywhere }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.card-video__category:empty,.audios__more) { display:none }

/* Covers remain real 2:3 covers, never cropped into a video poster. */
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__item { display:grid; grid-template-columns:minmax(104px,34%) minmax(0,1fr); align-items:stretch; min-height:280px; background:#fff }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__item::before { content:none }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__poster { align-self:stretch; min-width:0; background:#eceef4 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__poster img { display:block; width:100%; height:100%; min-height:280px; object-fit:cover }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__content { display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:22px }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__content hr { width:100%; height:1px; margin:16px 0; border:0; background:#4145791c }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__voices { margin-top:auto; padding-top:16px; border-top:1px solid #4145791c; font-size:13px; line-height:1.45 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__voices a { color:#414579; text-decoration:underline; text-underline-offset:3px }

/* Audio keeps the existing accessible player, with a visible waveform track
 * and one clear play control instead of the legacy stacked controls. */
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__audio { min-height:280px; padding:22px }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__player { position:relative; order:2; width:100%; height:64px; min-height:64px; margin:22px 0 0; overflow:hidden; border:1px solid #41457914; border-radius:14px; background:#f6f7fa }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__player::before { position:absolute; inset:17px 74px 17px 24px; background:repeating-linear-gradient(90deg,#c34b2e 0 2px,transparent 2px 7px) center/100% 42% no-repeat,repeating-linear-gradient(90deg,#d4d7e4 0 2px,transparent 2px 7px) center/100% 100% no-repeat; opacity:.72; content:"" }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__player :is(.player__back,.player__progress) { display:none }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__player .player__button { position:absolute; z-index:1; top:8px; right:8px; left:auto; width:46px; height:46px; margin:0; transform:none }
#start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__content { order:1; width:100% }

@media(max-width:1050px) {
    #start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-video-examples__videos,.s-audiobook-examples__items,.audios__audios) { grid-auto-columns:calc((100% - 20px) / 2) }
}
@media(max-width:700px) {
    #start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-video-examples__videos,.s-audiobook-examples__items,.audios__audios) { grid-auto-columns:100%; gap:14px }
    #start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__item { min-height:250px }
    #start.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__poster img { min-height:250px }
}

/* Audio uses the same poster dimensions as the neighbouring portfolio tabs. */
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player {
    display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(140px,1fr) auto auto;
    min-height:var(--poster-height); padding:var(--poster-padding); gap:22px;
    background:radial-gradient(ellipse at 50% 18%,#41457980,transparent 70%),var(--poster-ink);
    border:0; color:#fff;
}
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__timeline {
    grid-row:1; align-self:center; height:100px;
}
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__copy { grid-row:2; min-width:0 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__copy h3 { color:#fff!important }
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__copy p { color:#ffffffd9!important }
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__transport { grid-row:3; border-top:1px solid #ffffff26; padding-top:18px }
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) :is(.kg-audio-player__time,.kg-audio-player__status) { color:#ffffffc9 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__wave svg { fill:#ffffff45 }
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) svg.kg-audio-player__played { fill:#e98970 }


#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__play {
    background:transparent; border:1px solid #ffffffb3; color:#fff; box-shadow:none;
}
#start.service-page #portfolio.kg-portfolio-showcase--editorial :is(#portfolio-panel-audio,#portfolio-panel-ivr) .kg-audio-player__play:is(:hover,:focus-visible,[aria-pressed="true"]) {
    background:#ffffff14; border-color:#fff; color:#fff;
}

@media(max-width:700px) {
    #start.service-page #portfolio .service-primary-portfolio :is(.card-video__title,.s-audiobook-examples__name) { font-size:21px }
}
@media(prefers-reduced-motion:reduce) {
    #start.service-page #portfolio .service-primary-portfolio :is(.card-video__poster,.s-audiobook-examples__poster img,.audio-item,.script-item,.s-avr-examples__item) { transition:none }
    #start.service-page #portfolio .service-primary-portfolio .card-video:hover .card-video__poster { transform:none }
}

/* `service-pages.css` supplies an older fixed 360px catalogue geometry after
 * this partial is registered. Reset it here for the primary portfolio only:
 * four desktop cards, natural copy height, and book covers shown whole. */
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio [data-portfolio-grid] {
    height:auto!important;
    grid-template-rows:none!important;
    grid-auto-columns:calc((100% - 60px) / 4)!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio [data-portfolio-item] {
    height:auto!important;
    min-height:360px!important;
    max-height:none!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__item {
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:210px minmax(0,1fr) auto!important;
    min-height:400px!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__poster {
    display:block!important;
    width:100%!important;
    height:210px!important;
    min-height:210px!important;
    margin:0!important;
    overflow:hidden!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__poster img {
    width:100%!important;
    height:210px!important;
    min-height:0!important;
    object-fit:contain!important;
    background:#eef0f5;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__content {
    min-height:0!important;
    padding:18px 20px 20px!important;
    overflow:visible!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__content .s-avr-examples__player {
    position:static!important;
    flex:none;
    margin:14px 0 0!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio :is(.s-audiobook-examples__item,.card-video) > .s-avr-examples__player {
    position:relative!important;
    margin:0 20px 20px!important;
    align-self:start;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .s-audiobook-examples__content hr {
    display:none;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__audio {
    display:flex!important;
    min-height:280px!important;
    padding:0!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__content {
    order:1!important;
    flex:1 1 auto;
    width:100%!important;
    min-height:0;
    padding:22px 22px 0!important;
    overflow:visible!important;
}
#start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio .audios__player {
    order:2!important;
    flex:none;
    width:calc(100% - 44px)!important;
    margin:18px 22px 22px!important;
}
@media(max-width:1199px) {
    #start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio [data-portfolio-grid] { grid-auto-columns:calc((100% - 20px) / 2)!important }
}
@media(max-width:700px) {
    #start.service-page.service-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio [data-portfolio-grid] { grid-auto-columns:100%!important }
}
@media(min-width:701px) {
    #start.service-page.cartoon-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio [data-portfolio-grid] {
        display:flex!important;
        justify-content:center;
    }
    #start.service-page.cartoon-page #portfolio.kg-portfolio-showcase--editorial .service-primary-portfolio [data-portfolio-item] {
        flex:0 1 310px;
        width:310px!important;
    }
}