/* FAQ «Люкс»: один вид аккордеона на всех страницах услуг и кейсах, 14.11.2026.
   Образец - кейс «ИИ-ассистент персонала аптеки» (lc-case-lux.css). Откат: README.md в этой папке. */
:root{--fq-ink:#0B0C0E;--fq-paper:#F3EFE7;--fq-paper2:#E9E3D7;--fq-line:rgba(11,12,14,.12);--fq-tx:#1F1E1B;--fq-ease:cubic-bezier(.2,.7,.1,1)}

/* --- Страницы услуг: <details> --- */
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq){margin-top:16px;border-top:1.5px solid var(--fq-ink)}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details{margin:0;padding:0;border:0;border-bottom:1px solid var(--fq-line);border-radius:0;background:transparent;box-shadow:none}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details,html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details[open]{background:transparent;box-shadow:none;border-radius:0}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details:last-child{border-bottom:1px solid var(--fq-line)}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary{position:relative;display:block;list-style:none;cursor:pointer;min-height:0;margin:0;padding:24px 60px 24px 0;font:500 clamp(18px,1.15vw,21px)/1.4 LXG,Helvetica,Arial,sans-serif;color:var(--fq-ink);background:transparent;transition:padding-left .4s var(--fq-ease)}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary::-webkit-details-marker{display:none}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary::marker{content:""}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary::after{content:"";position:absolute;right:0;top:50%;width:36px;height:36px;margin-top:-18px;border:0;border-radius:50%;
 background:linear-gradient(var(--fq-ink),var(--fq-ink)) center/12px 1.5px no-repeat,linear-gradient(var(--fq-ink),var(--fq-ink)) center/1.5px 12px no-repeat,var(--fq-paper2);
 transition:transform .4s var(--fq-ease),background-color .3s}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details[open]>summary::after{transform:rotate(45deg)}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary:focus-visible{outline:2px solid #E2231A;outline-offset:4px}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>:not(summary){margin:0;padding:0 60px 24px 0;max-width:none;color:var(--fq-tx);font-size:17px;line-height:1.6}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>div>p,html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>div>ul,html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>div>ol{margin:0;padding:0;max-width:80ch;color:var(--fq-tx);font-size:17px;line-height:1.6}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>div>p+p,html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>div>p+ul{margin-top:12px}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>p{max-width:80ch}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#E2231A}
html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details[open]>:not(summary){animation:lcfq-in .45s var(--fq-ease) both}

/* --- Кейсы: .lc-faq__i с классом is-open --- */
body :is(#lcl,#lxa) .lc-faq .lc-faq__i h3{transition:padding-left .4s var(--fq-ease)}
body :is(#lcl,#lxa) .lc-faq .lc-faq__i.is-open>:not(h3){animation:lcfq-in .45s var(--fq-ease) both}

/* --- Микроанимация при наведении, как у строк «Популярные услуги» на главной:
   строка чуть сдвигается вправо, кружок заливается тёмным, плюс светлеет --- */
@media (hover:hover){
 html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary:hover{padding-left:14px}
 html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary:hover::after{background:linear-gradient(var(--fq-paper),var(--fq-paper)) center/12px 1.5px no-repeat,linear-gradient(var(--fq-paper),var(--fq-paper)) center/1.5px 12px no-repeat,var(--fq-ink)}
 body :is(#lcl,#lxa) .lc-faq .lc-faq__i h3:hover{padding-left:14px}
 body :is(#lcl,#lcl .lcx,#lxa) .lc-faq .lc-faq__i h3:hover::after{background-image:linear-gradient(var(--fq-paper),var(--fq-paper)),linear-gradient(var(--fq-paper),var(--fq-paper));background-color:var(--fq-ink)}
}
@keyframes lcfq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){
 html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary{padding-right:52px}
 html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>:not(summary){padding-right:0}
}
@media (prefers-reduced-motion:reduce){
 html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary,html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary::after,body :is(#lcl,#lxa) .lc-faq .lc-faq__i h3{transition:none}
 html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details[open]>:not(summary),body :is(#lcl,#lxa) .lc-faq .lc-faq__i.is-open>:not(h3){animation:none}
 html body.lcpx main :is(.lcsh-faq,.lclp-faq,.lcim-faq) details>summary:hover,body :is(#lcl,#lxa) .lc-faq .lc-faq__i h3:hover{padding-left:0}
}