@import url("/content/themes/neurotsifra/assets/css/case-card-tokens.css");

/* HTML hero with the reusable transparent screenshot layer from the generator. */
.case-hero {
  --case-ratio:1340/400;
  container:case-banner / inline-size;
  position:relative;
  isolation:isolate;

  width:100%;
  max-width:100%;
  min-width:0;
  aspect-ratio:var(--case-ratio);
  min-height:0;
  overflow:hidden;
  border-radius:0;
  color:var(--case-text);
  font-family:Inter,"Inter Fallback",sans-serif;
  letter-spacing:normal;
  background-color:var(--background);
  background-image:radial-gradient(ellipse 95% 110% at 50% 125%,color-mix(in oklab,var(--brand-foreground) 50%,transparent) 10%,transparent 65%),radial-gradient(ellipse 60% 75% at 50% 125%,color-mix(in oklab,var(--brand) 30%,transparent) 10%,transparent 75%);
  margin-bottom:32px;
}
.case-hero__inner { position:absolute; inset:0; container-type:inline-size; width:100%; min-width:0; }
.case-hero__copy { position:relative; z-index:2; padding:3.58209cqw 2.98507cqw 0; width:55.22388%; }
.case-hero__label { display:table; margin:0 0 1.34328cqw; padding:.44776cqw .74627cqw; border:1px solid color-mix(in srgb,var(--foreground) 20%,transparent); border-radius:20px; color:var(--case-label); font-size:.89552cqw; font-weight:600; line-height:1; }
.case-hero.case-banner :is(h1,h2) { margin:0 0 1.34328cqw; max-width:100%; overflow-wrap:break-word; font-size:2.53731cqw; font-weight:650; line-height:1.2; letter-spacing:-.035em; color:var(--case-text); background:none; filter:none; }
.case-hero.case-banner .case-hero__description { max-width:none; margin:0 0 1.64179cqw; color:var(--case-description); font-size:1.26866cqw; font-weight:400; line-height:1.5; white-space:pre-line; }
.case-hero__features { color:var(--case-text); display:flex; flex-wrap:wrap; gap:.74627cqw .59701cqw; margin:0; padding:0; list-style:none; }
html body .case-hero .case-hero__features li { margin:0!important; padding:.67164cqw .89552cqw!important; border-radius:.37313cqw; background:linear-gradient(165deg,#ffffff1c,#ffffff0a); box-shadow:inset 0 .5px 0 .5px #ffffff20; color:var(--case-feature); font:500 .89552cqw/1 Inter,"Inter Fallback",sans-serif; overflow-wrap:break-word; }
.case-hero__features li::before { content:none!important; }
.case-hero__screens { position:absolute; inset:0; z-index:1; pointer-events:none; }
.case-hero__artwork { display:block; width:100%; height:auto; max-width:none; }
.case-hero--compact { --case-ratio:390/260; display:block; margin:0; border-radius:var(--cms-theme-card-radius); text-decoration:none!important; }
.case-catalog { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.case-catalog > .case-hero { flex:0 0 calc((100% - 48px)/3); }
.case-catalog > .case-hero { background-image:none; }
.case-card__glow-host.solution-schedule-visual { position:absolute; inset:0; z-index:0; min-height:0; pointer-events:none; }
.case-catalog .case-card__glow-host > [data-slot="glow"] { inset:0; width:auto; translate:none; scale:none; transform:none; }
/* Normalized from the homepage's 740×588 card, independent of catalogue size. */
.case-catalog .case-card__glow-host.solution-schedule-visual > [data-slot="glow"] > div {
  width:167.83784%; height:217.68707%; left:-33.91893%; top:.5102%;
  translate:none; scale:none; transform:none;
}
.case-catalog .case-card__glow-host.solution-schedule-visual > [data-slot="glow"] > div:nth-child(2) { left:-.35136%; top:-37.58503%; }
html.dark body.site-cms:has(.case-catalog),
html.dark body.site-cms main.cms-ui.cms-page.content:has(.case-catalog) { background-image:none; }
.case-catalog > .case-hero::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border:1px solid color-mix(in srgb,var(--border) 12%,transparent); border-radius:inherit;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 1.5rem,transparent 8rem);
  mask-image:linear-gradient(to bottom,#000 0,#000 1.5rem,transparent 8rem);
}
.case-catalog a:focus-visible { outline:2px solid var(--cms-theme-focus); outline-offset:4px; }
@media(max-width:1023px) { .case-catalog > .case-hero { flex-basis:calc((100% - 24px)/2); } }
@media(max-width:760px) { .case-hero { --case-ratio:390/260; } }
@media(max-width:600px) { .case-catalog > .case-hero { flex-basis:100%; } }
/* The generator's 390×260 composition, shared by mobile hero and catalogue. */
@container case-banner (max-width:760px) {
  .case-hero__copy { padding:5.89744cqw 3.07692cqw 0; width:100%; }
  .case-hero__label { margin-bottom:2.05128cqw; padding:.76923cqw 1.53846cqw; font-size:1.79487cqw; }
  .case-hero.case-banner :is(h1,h2) { margin-bottom:2.30769cqw; font-size:4.10256cqw; }
  .case-hero.case-banner .case-hero__description { margin-bottom:2.5641cqw; font-size:2.30769cqw; }
  .case-hero__features { width:74.35897cqw; gap:1.79487cqw 1.02564cqw; }
  html body .case-hero .case-hero__features li { padding:1.28205cqw 1.53846cqw!important; border-radius:.76923cqw; font-size:1.79487cqw; }
}

html body.site-cms main.cms-ui.cms-page.content:has(> .case-hero) { padding-top:var(--cms-space-6,24px); }

/* Case details reuse the homepage facts and the standard content panel. */
html body.site-cms .case-facts { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:24px; width:100%; padding:24px 0; margin:0 auto 40px; list-style:none; }
html body.site-cms .case-facts li { margin:0; padding:0; }
html body.site-cms .case-facts li::before { content:none; }
html body.site-cms .case-facts .about-company__fact-copy { white-space:normal; }
html body.site-cms .case-facts strong { font-size:.875rem; font-weight:500; line-height:1.25; }
html body.site-cms .case-facts span { font-size:.6375rem; line-height:1.25; }
.case-sections { display:flex; flex-direction:column; align-items:center; gap:32px; }
.case-section .cms-content > :first-child { margin-top:0; }
html body.site-cms main:has(> .case-hero) > .cta-variants { margin-top:48px; }
html body.site-cms .cta-variants .contact-cta__intro h2 { font-size:clamp(2rem,3.6vw,3rem); line-height:1.08; font-weight:600; letter-spacing:-.04em; margin:0; }
html body.site-cms .cta-variants .contact-cta__intro p { font-size:.9375rem; line-height:1.7; margin:0; }
@media(max-width:600px) { html body.site-cms .case-facts { flex-direction:column; align-items:flex-start; width:max-content; max-width:100%; gap:24px; } }

html body.site-cms .contact-cta__action { color:var(--primary-foreground); }

/* The closing CTA owns its glow, exactly as on the homepage. */
html.dark body.site-cms main.cms-ui.cms-page.content:has(> .case-hero) { background-image:none; }

@media(min-width:601px) and (max-width:1100px) { html body.site-cms .case-facts { flex-wrap:wrap; justify-content:center; gap:28px 40px; } }

/* A shallow, readable invitation to the full native project catalogue. */
.home-case-preview { position:relative; margin-top:48px; text-align:center; }
.home-case-preview__window { transform:translateY(-24px); height:clamp(80px,7vw,112px); overflow:hidden; -webkit-mask-image:linear-gradient(#000 15%,transparent 100%); mask-image:linear-gradient(#000 15%,transparent 100%); }
.home-case-preview__window .case-catalog { flex-wrap:nowrap; }
.home-case-preview__link { display:inline-flex; align-items:center; gap:12px; padding:12px 20px; color:var(--foreground); font-size:.9375rem; font-weight:500; text-decoration:none; border:1px solid color-mix(in srgb,var(--border) 18%,transparent); border-radius:999px; background:var(--background); transition:border-color .18s,color .18s; }
.home-case-preview__link:hover { color:var(--brand); border-color:color-mix(in srgb,var(--brand) 50%,transparent); }
.home-case-preview__link:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
@media(max-width:600px) { .home-case-preview__window .case-catalog > .case-hero { flex-basis:calc((100% - 16px)/1.25); } .home-case-preview__window .case-catalog { gap:16px; justify-content:flex-start; } }

.case-catalog > .case-hero { text-align:left; }

/* The solution cards reuse each native case's transparent wide artwork. */
.solutions__section .solution-case-artwork { position:absolute; right:0; bottom:0; width:210%; max-width:none; height:auto; pointer-events:none; }
.solutions__section [data-slot="card-content"] { position:relative; z-index:1; }

.solutions__section a[href="/cases/ais-raspisanie"] > .solution-case-artwork { transform:translateY(20%); }