/* Shared presentation of internal case pages, agreed with the owner on 03.11.2026.
   Built first in SEE MO and then applied to every reading-grid case. Loaded after
   the shared grid and gallery CSS; per-case files may still refine it. */
html[data-case-route]{--case-gallery-mat:#ececec}
html[data-case-route][toggle-theme="dark"]{--case-gallery-mat:#242424}

/* M04 «Как была выстроена работа» (owner, 03.11.2026, first in SEE MO): plain cards. Each
   card opens with its number and a six-part progress bar of the whole process,
   then the title and the action. Same card surface, type roles and grid as M04. */
.case-page[data-case] .case-process ol{counter-reset:none}
.case-page[data-case].case-reading-presentation .case-process li{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 3;gap:14px 14px;padding:20px 22px 22px}
.case-page[data-case].case-reading-presentation .case-process .case-stage-number{grid-column:1;grid-row:1;justify-self:start;align-self:center;font:500 14px/20px var(--font-body);font-variant-numeric:tabular-nums;color:var(--color-accent)}
.case-page[data-case].case-reading-presentation .case-process li::before{content:"";grid-column:2;grid-row:1;align-self:center;height:4px;background:linear-gradient(90deg,var(--color-accent) calc(var(--case-step) * 100% / 6),var(--color-rule) 0);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc((100% - 20px) / 6),transparent 0 calc((100% - 20px) / 6 + 4px));mask:repeating-linear-gradient(90deg,#000 0 calc((100% - 20px) / 6),transparent 0 calc((100% - 20px) / 6 + 4px));border-radius:2px}
.case-page[data-case].case-reading-presentation .case-process .case-stage-copy h4{grid-column:1/-1;grid-row:2}
.case-page[data-case].case-reading-presentation .case-process .case-stage-copy p{grid-column:1/-1;grid-row:3}
.case-page[data-case] .case-process li:nth-child(1){--case-step:1}
.case-page[data-case] .case-process li:nth-child(2){--case-step:2}
.case-page[data-case] .case-process li:nth-child(3){--case-step:3}
.case-page[data-case] .case-process li:nth-child(4){--case-step:4}
.case-page[data-case] .case-process li:nth-child(5){--case-step:5}
.case-page[data-case] .case-process li:nth-child(6){--case-step:6}
@media(max-width:599.98px){
 .case-page[data-case].case-reading-presentation .case-process li{grid-row:auto;grid-template-rows:auto auto auto}
}

/* M12 gallery card, the owner's standard for internal cases (03.11.2026, first in SEE MO).
   Opt-in per case: reel config `wallCard` → data-wall-card. «standard» = full card
   (340/272 px), «plate» = keep the case's card size, add only the grey plate. Like
   STADION's phone cards — a white card with the gallery micro-shadow, a grey plate
   inside, the desktop screen centred on it with even margins and a soft shadow;
   below, the screen title in STADION's grey pill. Hover follows STADION
   (title in the accent, screen scales 1.03, zoom circle in the accent).
   Same originals, previews, zoom, motion controller and keyboard order. */
.case-page .case-screen-wall[data-wall-card=standard]{--wall-gap:24px}
.case-page .case-screen-wall[data-wall-card=plate]{--wall-plate-pad:12px 14px;--wall-plate-pad-sm:10px 12px}
.case-page.case-reading-presentation [data-wall-card=standard] .case-wall-row:not(.case-wall-row--mobile) .case-media{flex:0 0 340px;width:340px;grid-template-rows:212px auto;padding:6px 6px 0;border:1px solid var(--reading-card-border);border-radius:20px;background:var(--color-paper);box-shadow:var(--reading-gallery-shadow)}
.case-page.case-reading-presentation [data-wall-card=standard] .case-wall-row:not(.case-wall-row--mobile) .case-media>.case-image-link{height:212px;padding:0;background:transparent}
.case-page [data-wall-card] .case-wall-row:not(.case-wall-row--mobile) .case-wall-preview{box-sizing:border-box;padding:var(--wall-plate-pad,20px 22px);border-radius:14px;background:var(--case-gallery-mat)}
.case-page.case-reading-presentation [data-wall-card] .case-wall-row:not(.case-wall-row--mobile) .case-wall-preview img{height:100%;object-fit:cover;object-position:top center;border-radius:4px;background:#fff;box-shadow:0 0 0 1px #0000000a,0 10px 22px -12px #0000004d;transform:none;transition:transform 320ms cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){
 .case-page.case-reading-presentation [data-wall-card] .case-wall-row:not(.case-wall-row--mobile) .case-media:hover .case-wall-preview img{transform:scale(1.03)}
}
@media(max-width:809.98px){
 .case-page .case-screen-wall[data-wall-card=standard]{--wall-gap:16px}
 .case-page.case-reading-presentation [data-wall-card=standard] .case-wall-row:not(.case-wall-row--mobile) .case-media{flex-basis:272px;width:272px;grid-template-rows:172px auto;border-radius:16px;padding:5px 5px 0}
 .case-page.case-reading-presentation [data-wall-card=standard] .case-wall-row:not(.case-wall-row--mobile) .case-media>.case-image-link{height:172px}
 .case-page [data-wall-card] .case-wall-row:not(.case-wall-row--mobile) .case-wall-preview{padding:var(--wall-plate-pad-sm,14px 16px);border-radius:11px}
}

@media(prefers-reduced-motion:reduce){.case-page [data-wall-card] .case-wall-row:not(.case-wall-row--mobile) .case-wall-preview img{transition:none}}

/* Mobile chapter menu (owner, 03.11.2026, first in SEE MO): below 1100 px it separates from
   the content — a deeper soft shadow, a fade of the page under it, and edge fades
   only while chapters are hidden off either side. */
@media(max-width:1099.98px){
 .case-page.case-reading-presentation .case-toc{border-radius:16px;box-shadow:0 1px 2px #00000010,0 14px 34px -10px #00000040}
 html[toggle-theme="dark"] .case-page.case-reading-presentation .case-toc{box-shadow:0 1px 2px #0006,0 14px 34px -10px #000c}
 body:has(.case-page .case-toc:not([hidden]))::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:9;height:calc(112px + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(to top,var(--case-bg,#fff) 22%,transparent)}
 .case-page .case-toc nav[data-fade~=start]{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px);mask-image:linear-gradient(90deg,transparent 0,#000 28px)}
 .case-page .case-toc nav[data-fade~=end]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
 .case-page .case-toc nav[data-fade="start end"]{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent)}
}

/* Even line breaks (owner, 03.11.2026; SEE MO, then Kostaff): no hanging lines. Headings and short leads
   split into even lines; body copy avoids a lone last word. Feature headings
   are narrowed so «Тема: решение» reads as two balanced lines. The longhand
   text-wrap-style keeps Framer's white-space:pre (passport) unwrapped. */
.case-page:is([data-case="see-mo"],[data-case="kostaff"],[data-case="dirft"]) :is(h1,h2,h3,h4,h5){text-wrap-style:balance}
.case-page:is([data-case="see-mo"],[data-case="kostaff"],[data-case="dirft"]) :is(p,li,dd,figcaption){text-wrap-style:pretty}
.case-page:is([data-case="see-mo"],[data-case="kostaff"],[data-case="dirft"]).case-reading-presentation :is(.case-chapter-heading>p,.case-reel-heading p,.case-process-heading p,.case-copy-body p:only-child,.case-competitor-card header p){text-wrap-style:balance}
.case-page:is([data-case="see-mo"],[data-case="kostaff"],[data-case="dirft"]).case-reading-presentation .case-feature-copy h3{max-width:15em}
/* Short copy (up to ~6 lines) balances evenly; longer copy falls back to the
   browser's line breaking, which «pretty» above keeps without a lone last word. */
.case-page:is([data-case="see-mo"],[data-case="kostaff"],[data-case="dirft"]) :is(.case-reading-content,.case-reading-intro,[data-case-passport],a[data-project]) :is(p,figcaption,dd){text-wrap-style:balance}
@media(max-width:809.98px){.case-page:is([data-case="see-mo"],[data-case="kostaff"],[data-case="dirft"]) br.case-title-break{display:none}}