/* Content component for ppr48.ru. No html/body/:root or unscoped rules.
Roboto and Oswald are supplied by the EXISTING website template.
Set --ppr-kzh-anchor-offset on #ppr-kzh.ppr-kzh to match the site's fixed header. */
#ppr-kzh.ppr-kzh {
--ppr-kzh-green: #28a745;
--ppr-kzh-action: var(--ppr-kzh-green);
--ppr-kzh-link: #176c2b;
--ppr-kzh-on-green: #fff;
--ppr-kzh-mobile-gutter: 1rem;
--ppr-kzh-mobile-section-padding: 1.5rem;
--ppr-kzh-mobile-section-gap: 2rem;
--ppr-kzh-mobile-item-gap: 1rem;
--ppr-kzh-section-gap: clamp(2.25rem, 5vw, 4rem);
--ppr-kzh-hover: #218838;
--ppr-kzh-text: #252525;
--ppr-kzh-muted: #59645d;
--ppr-kzh-line: #dce5de;
--ppr-kzh-soft: #f5f8f5;
--ppr-kzh-anchor-offset: 110px;
container: ppr-kzh / inline-size;
inline-size: 100%;
max-inline-size: 1140px;
min-inline-size: 0;
margin-inline: auto;
color: var(--ppr-kzh-text);
background: #fff;
font: 400 1rem/1.65 Roboto, Arial, sans-serif;
text-align: start;
overflow-wrap: anywhere;
isolation: isolate;
display: flow-root;
padding-block-end: 1.5rem;
}
#ppr-kzh.ppr-kzh *:not(.ppr-kzh__bitrix *), #ppr-kzh.ppr-kzh *:not(.ppr-kzh__bitrix *)::before, #ppr-kzh.ppr-kzh *:not(.ppr-kzh__bitrix *)::after { box-sizing: border-box; }
#ppr-kzh.ppr-kzh :where(section, article, aside, div, li):not(.ppr-kzh__bitrix *) { min-inline-size: 0; }
#ppr-kzh.ppr-kzh [id]:not(.ppr-kzh__bitrix *) { scroll-margin-block-start: var(--ppr-kzh-anchor-offset); }
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *), #ppr-kzh.ppr-kzh h2:not(.ppr-kzh__bitrix *), #ppr-kzh.ppr-kzh h3:not(.ppr-kzh__bitrix *) {
font-family: Oswald, "Arial Narrow", Arial, sans-serif;
color: var(--ppr-kzh-text);
font-weight: 500;
line-height: 1.3;
letter-spacing: normal;
text-transform: uppercase;
margin: 0 0 1rem;
float: none;
width: auto;
}
/* Neutralize Joomla's global heading decorations before applying one pair. */
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *)::before, #ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *)::after,
#ppr-kzh.ppr-kzh h2:not(.ppr-kzh__bitrix *)::before, #ppr-kzh.ppr-kzh h2:not(.ppr-kzh__bitrix *)::after,
#ppr-kzh.ppr-kzh h3:not(.ppr-kzh__bitrix *)::before, #ppr-kzh.ppr-kzh h3:not(.ppr-kzh__bitrix *)::after { content: none; }
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *) { font-size: clamp(2rem, 1.3rem + 2vw, 3.125rem); font-weight: 600; text-align: start; }
#ppr-kzh.ppr-kzh h2:not(.ppr-kzh__bitrix *) { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); }
#ppr-kzh.ppr-kzh h3:not(.ppr-kzh__bitrix *) { font-size: 1.375rem; text-align: start; }
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *) span, #ppr-kzh.ppr-kzh h2:not(.ppr-kzh__bitrix *) span { color: var(--ppr-kzh-action); }
#ppr-kzh.ppr-kzh p:where(:not(.ppr-kzh__bitrix *)) { margin: 0 0 1rem; color: var(--ppr-kzh-muted); font-size: inherit; line-height: inherit; }
#ppr-kzh.ppr-kzh a:where(:not(.ppr-kzh__bitrix *)) { color: var(--ppr-kzh-link); text-decoration: underline; text-underline-offset: .2em; }
#ppr-kzh.ppr-kzh a:not(.ppr-kzh__bitrix *):hover { color: var(--ppr-kzh-hover); }
#ppr-kzh.ppr-kzh :is(a, button):not(.ppr-kzh__bitrix *):focus-visible, #ppr-kzh.ppr-kzh summary:focus-visible { outline: 3px solid var(--ppr-kzh-action); outline-offset: 4px; }
#ppr-kzh.ppr-kzh .ppr-kzh__hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.25rem, 4vw, 3rem); background: var(--ppr-kzh-soft); border-radius: 10px; }
#ppr-kzh.ppr-kzh .ppr-kzh__eyebrow { font-size: .875rem; color: var(--ppr-kzh-link); margin-bottom: 1rem; font-weight: 500; }
#ppr-kzh.ppr-kzh .ppr-kzh__lead { font-size: 1.125rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__hero-points { list-style: none; padding: 0; margin: 1.25rem 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__hero-points li { position: relative; padding: 0 0 .625rem 1.5rem; font-size: 1rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__hero-points li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--ppr-kzh-action); }
#ppr-kzh.ppr-kzh .ppr-kzh__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }
#ppr-kzh.ppr-kzh :is(a, button):not(.ppr-kzh__bitrix *).ppr-kzh__button { appearance: none; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; min-block-size: 48px; max-inline-size: 100%; padding: .75rem 1.125rem; background: var(--ppr-kzh-action); color: var(--ppr-kzh-on-green); border: 1px solid var(--ppr-kzh-action); border-radius: 10px; text-decoration: none; font: 600 1rem/1.45 Roboto, Arial, sans-serif; text-align: center; white-space: normal; box-shadow: 0 6px 16px #3030301a; transition: background-color .2s, box-shadow .2s; }
#ppr-kzh.ppr-kzh :is(a, button):not(.ppr-kzh__bitrix *).ppr-kzh__button:hover { background: var(--ppr-kzh-hover); border-color: var(--ppr-kzh-hover); color: #fff; box-shadow: 0 6px 16px #30303026; }
#ppr-kzh.ppr-kzh .ppr-kzh__link { display: inline-block; font-size: 1rem; padding-block: .625rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__micro { margin: 1rem 0 0; font-size: .875rem; line-height: 1.6; }
#ppr-kzh.ppr-kzh .ppr-kzh__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin-block: 1.5rem 0; padding: .5rem; border-block-end: 1px solid var(--ppr-kzh-line); }
#ppr-kzh.ppr-kzh .ppr-kzh__nav a { display: flex; align-items: center; min-block-size: 44px; font-size: .875rem; text-decoration: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__section { margin: var(--ppr-kzh-section-gap) 0 0; padding: clamp(1.25rem, 4vw, 3rem); }
#ppr-kzh.ppr-kzh .ppr-kzh__section--soft { padding-block: clamp(1.5rem, 3vw, 2.5rem); background: var(--ppr-kzh-soft); border-radius: 10px; }
#ppr-kzh.ppr-kzh .ppr-kzh__heading { max-inline-size: 850px; margin: 0 auto clamp(1.5rem, 2.5vw, 2rem); text-align: center; }
#ppr-kzh.ppr-kzh .ppr-kzh__heading h2 { text-align: center; }
#ppr-kzh.ppr-kzh .ppr-kzh__heading h2::before { content: '[ '; color: var(--ppr-kzh-text); position: static; margin: 0; font-weight: 500; }
#ppr-kzh.ppr-kzh .ppr-kzh__heading h2::after { content: ' ]'; color: var(--ppr-kzh-text); position: static; margin: 0; font-weight: 500; }
#ppr-kzh.ppr-kzh .ppr-kzh__heading p { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__grid { display: grid; gap: 1.25rem; margin: 0; }
/* Intrinsic grids adapt to the CMS content column, not just to screen width. */
#ppr-kzh.ppr-kzh .ppr-kzh__grid--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
#ppr-kzh.ppr-kzh .ppr-kzh__grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
#ppr-kzh.ppr-kzh .ppr-kzh__grid--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
#ppr-kzh.ppr-kzh .ppr-kzh__card { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--ppr-kzh-line); border-radius: 10px; background: #fff; box-shadow: 0 3px 14px #00000005; }
#ppr-kzh.ppr-kzh .ppr-kzh__badge { align-self: flex-start; padding: .25rem .75rem; margin-bottom: 1rem; border: 1px solid #c5dfcb; border-radius: 5px; background: #eef7ef; color: var(--ppr-kzh-link); font-size: 1rem; font-weight: 600; }
#ppr-kzh.ppr-kzh .ppr-kzh__list { padding: 0; margin: 0 0 1.5rem; list-style: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__list li { padding: .65rem 0 .65rem 1.5rem; position: relative; border-block-end: 1px solid var(--ppr-kzh-line); margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__list li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--ppr-kzh-action); }
#ppr-kzh.ppr-kzh .ppr-kzh__card > .ppr-kzh__button { margin-block-start: auto; inline-size: 100%; }
#ppr-kzh.ppr-kzh .ppr-kzh__card > .ppr-kzh__list:last-child { margin-block-end: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__note { border-inline-start: 3px solid var(--ppr-kzh-green); margin: 1.5rem 0 0; padding: .75rem 1rem; color: var(--ppr-kzh-text); }
#ppr-kzh.ppr-kzh .ppr-kzh__factor { padding: 1.25rem; border: 1px solid var(--ppr-kzh-line); border-radius: 10px; background: #fff; }
#ppr-kzh.ppr-kzh .ppr-kzh__factor > span { display: block; font: 500 1.75rem/1.4 Oswald, Arial, sans-serif; color: var(--ppr-kzh-action); margin-bottom: .75rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__factor p { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__callout { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-block-start: 1.75rem; padding: 1.5rem; border-radius: 10px; background: var(--ppr-kzh-soft); }
#ppr-kzh.ppr-kzh .ppr-kzh__callout > div, #ppr-kzh.ppr-kzh .ppr-kzh__callout > p { flex: 1 1 26rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__callout p { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__callout > a { flex: 0 1 auto; }
#ppr-kzh.ppr-kzh .ppr-kzh__callout--plain { border: 1px solid var(--ppr-kzh-line); background: #fff; }
#ppr-kzh.ppr-kzh .ppr-kzh__condition { padding: 1.25rem 1.5rem; border-inline-start: 3px solid var(--ppr-kzh-green); background: #fff; border-radius: 0 8px 8px 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__condition p { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__steps { padding: 0; list-style: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__steps > li { padding: 1.25rem; background: white; border: 1px solid var(--ppr-kzh-line); border-radius: 10px; }
#ppr-kzh.ppr-kzh .ppr-kzh__steps > li > span { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; margin-bottom: 1rem; border-radius: 50%; color: var(--ppr-kzh-on-green); background: var(--ppr-kzh-action); font-size: 1.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__steps p { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__faq { max-inline-size: 900px; margin-inline: auto; }
#ppr-kzh.ppr-kzh .ppr-kzh__faq details { border: 1px solid var(--ppr-kzh-line); border-radius: 8px; margin-bottom: .75rem; background: #f9fbf9; }
#ppr-kzh.ppr-kzh .ppr-kzh__faq summary { display: block; position: relative; list-style: none; cursor: pointer; padding: 1rem 3.25rem 1rem 1.25rem; font-size: 1rem; font-weight: 500; line-height: 1.6; color: var(--ppr-kzh-text); }
#ppr-kzh.ppr-kzh .ppr-kzh__faq summary::-webkit-details-marker { display: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__faq summary::after { content: '+'; position: absolute; inset-inline-end: 1.25rem; inset-block-start: .75rem; font-size: 1.5rem; color: var(--ppr-kzh-action); }
#ppr-kzh.ppr-kzh .ppr-kzh__faq details[open] summary::after { content: '−'; }
#ppr-kzh.ppr-kzh .ppr-kzh__faq details p { margin: 0; padding: 0 1.25rem 1.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__contact { padding-block: clamp(1.5rem, 3vw, 2.5rem); background: var(--ppr-kzh-soft); border: 1px solid var(--ppr-kzh-line); border-radius: 10px; text-align: center; }
#ppr-kzh.ppr-kzh .ppr-kzh__contact .ppr-kzh__actions { justify-content: center; }
/* Illustrated sections reuse original drawings. Images remain fully visible. */
#ppr-kzh.ppr-kzh .ppr-kzh__hero-media { min-inline-size: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__hero-media > .ppr-kzh__button { inline-size: 100%; margin-block-start: 1rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__workflow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem .65rem; padding: 1rem .25rem 0; font-size: .875rem; color: var(--ppr-kzh-link); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual { margin: 0; min-inline-size: 0; border: 1px solid var(--ppr-kzh-line); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 8px 24px #17261b0a; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-label { padding: .75rem 1rem; border-block-end: 3px solid var(--ppr-kzh-green); background: #f1f8f2; color: var(--ppr-kzh-link); font-size: .875rem; font-weight: 600; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-link { display: block; position: relative; cursor: zoom-in; background: #fff; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-link img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; margin: 0; padding: 0; float: none; border: 0; border-radius: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-link:focus-visible { outline-offset: -4px; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual figcaption { display: grid; gap: .35rem; padding: 1rem 1.25rem; border-block-start: 1px solid var(--ppr-kzh-line); color: var(--ppr-kzh-muted); font-size: .875rem; line-height: 1.6; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual figcaption strong { font-size: 1rem; font-weight: 500; color: var(--ppr-kzh-text); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-copy { display: grid; gap: 1.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point { padding: 0 0 1.25rem; border-block-end: 1px solid var(--ppr-kzh-line); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point:last-child { padding-block-end: 0; border-block-end: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point h3 { margin-block-end: .5rem; font-size: 1.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point p { margin: 0; }
@media print {
#ppr-kzh.ppr-kzh .ppr-kzh__visual { break-inside: avoid; box-shadow: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-layout { grid-template-columns: minmax(0, 1fr); }
#ppr-kzh.ppr-kzh .ppr-kzh__zoom-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { #ppr-kzh.ppr-kzh *:not(.ppr-kzh__bitrix *), #ppr-kzh.ppr-kzh *:not(.ppr-kzh__bitrix *)::before, #ppr-kzh.ppr-kzh *:not(.ppr-kzh__bitrix *)::after { transition: none; } }
@media print {
#ppr-kzh.ppr-kzh { container-type: normal; max-inline-size: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__nav, #ppr-kzh.ppr-kzh [data-kzh-request] { display: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__hero { display: block; }
#ppr-kzh.ppr-kzh .ppr-kzh__section { margin-block-start: 1rem; padding: 1rem 0; background: #fff; }
#ppr-kzh.ppr-kzh .ppr-kzh__card { box-shadow: none; }
}
/* Only the outer Bitrix slot is sized here. Bitrix owns all inner form styles. */
#ppr-kzh.ppr-kzh .ppr-kzh__bitrix { inline-size: 100%; max-inline-size: 720px; min-inline-size: 0; margin: 2rem auto 0; text-align: start; }
#ppr-kzh.ppr-kzh .ppr-kzh__bitrix:focus { outline: 2px solid var(--ppr-kzh-action); outline-offset: 6px; border-radius: 10px; }
/* Owl Carousel: all overrides are local to this gallery. */
#ppr-kzh.ppr-kzh .ppr-kzh__carousel { inline-size: 100%; min-inline-size: 0; position: relative; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel:not(.owl-loaded) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel.owl-loaded { display: block; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel:empty { display: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-stage { display: flex; align-items: stretch; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-stage-outer { overflow: hidden; padding-block: 5px; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-item { display: flex; flex: 0 0 auto; }
#ppr-kzh.ppr-kzh .ppr-kzh__example { display: flex; flex-direction: column; inline-size: 100%; border: 1px solid var(--ppr-kzh-line); border-radius: 10px; background: #fff; overflow: hidden; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-image { position: relative; display: block; padding: 0; aspect-ratio: 3 / 2; background: #f1f4f1; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; margin: 0; padding: 0; float: none; border-radius: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-body h3 { font-size: 1.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-body p { font-size: 1rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-body > .ppr-kzh__button { margin-block-start: auto; gap: .4rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-nav button { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 10px; border: 1px solid var(--ppr-kzh-action); background: white; color: var(--ppr-kzh-action); font: 400 2rem/1 Arial, sans-serif; cursor: pointer; margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-nav button:hover:not(:disabled) { background: var(--ppr-kzh-action); color: var(--ppr-kzh-on-green); }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-nav button.disabled { opacity: .4; cursor: default; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: .25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-dot { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-dot span { display: block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #9aaba0; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-dot.active span { background: var(--ppr-kzh-action); }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-nav.disabled, #ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-dots.disabled { display: none; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel button:focus-visible { outline: 3px solid var(--ppr-kzh-action); outline-offset: 3px; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-image:focus-visible { outline-offset: -4px; }
#ppr-kzh.ppr-kzh .ppr-kzh__sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media print {
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-stage { display: grid; inline-size: 100% !important; transform: none !important; gap: 1rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-item { inline-size: 100% !important; margin: 0 !important; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-nav, #ppr-kzh.ppr-kzh .ppr-kzh__carousel .owl-dots { display: none; }
}
/* Drawings are shown without cropping; the full original opens in Fancybox. */
#ppr-kzh.ppr-kzh .ppr-kzh__example-image { cursor: zoom-in; background: #fff; aspect-ratio: 3 / 2; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-image img { object-fit: contain; }
#ppr-kzh.ppr-kzh .ppr-kzh__zoom-hint { position: absolute; inset-inline-end: .6rem; inset-block-end: .6rem; padding: .35rem .65rem; border-radius: 5px; color: var(--ppr-kzh-on-green); background: var(--ppr-kzh-action); font-size: .875rem; font-weight: 600; }
#ppr-kzh.ppr-kzh .ppr-kzh__work-category { color: var(--ppr-kzh-link); font-size: .875rem; font-weight: 500; margin-block-end: .5rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__example-body p:last-child { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__carousel:focus-visible { outline: 3px solid var(--ppr-kzh-action); outline-offset: 4px; }
/* Fancybox is attached to body, so target only this gallery's private baseClass. */
.ppr-kzh-lightbox .fancybox-caption { font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.ppr-kzh-lightbox .fancybox-button:focus-visible { outline: 3px solid #81ca91; outline-offset: -3px; }
/* One spacing scale for mobile screens and narrow CMS columns.
16px gutter/card padding, 24px section padding, 32px between sections (at 16px root font).
Keep the media fallback identical to the container rules. */
@container ppr-kzh (max-width: 760px) {
#ppr-kzh.ppr-kzh .ppr-kzh__hero,
#ppr-kzh.ppr-kzh .ppr-kzh__section {
padding: var(--ppr-kzh-mobile-section-padding) var(--ppr-kzh-mobile-gutter);
}
#ppr-kzh.ppr-kzh .ppr-kzh__section {
margin: var(--ppr-kzh-mobile-section-gap) 0 0;
display: flow-root;
}
/* The contact border is included in the common 16px content inset. */
#ppr-kzh.ppr-kzh .ppr-kzh__contact {
padding-inline: calc(var(--ppr-kzh-mobile-gutter) - 1px);
padding-block: calc(var(--ppr-kzh-mobile-section-padding) - 1px);
}
#ppr-kzh.ppr-kzh .ppr-kzh__hero,
#ppr-kzh.ppr-kzh .ppr-kzh__visual-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--ppr-kzh-mobile-section-padding);
}
#ppr-kzh.ppr-kzh .ppr-kzh__hero-media { inline-size: 100%; }
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *) { font-size: 2.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__heading { margin: 0 auto var(--ppr-kzh-mobile-section-padding); }
#ppr-kzh.ppr-kzh .ppr-kzh__nav {
margin-block: var(--ppr-kzh-mobile-section-padding) 0;
padding: 0 var(--ppr-kzh-mobile-gutter);
gap: .25rem var(--ppr-kzh-mobile-item-gap);
justify-content: flex-start;
}
#ppr-kzh.ppr-kzh .ppr-kzh__grid,
#ppr-kzh.ppr-kzh .ppr-kzh__carousel:not(.owl-loaded),
#ppr-kzh.ppr-kzh .ppr-kzh__visual-copy { gap: var(--ppr-kzh-mobile-item-gap); }
#ppr-kzh.ppr-kzh .ppr-kzh__card,
#ppr-kzh.ppr-kzh .ppr-kzh__factor,
#ppr-kzh.ppr-kzh .ppr-kzh__condition,
#ppr-kzh.ppr-kzh .ppr-kzh__steps > li,
#ppr-kzh.ppr-kzh .ppr-kzh__callout,
#ppr-kzh.ppr-kzh .ppr-kzh__example-body,
#ppr-kzh.ppr-kzh .ppr-kzh__visual figcaption {
padding: var(--ppr-kzh-mobile-gutter);
}
#ppr-kzh.ppr-kzh .ppr-kzh__visual-label { padding-inline: var(--ppr-kzh-mobile-gutter); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point { padding-block-end: var(--ppr-kzh-mobile-item-gap); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point:last-child { padding-block-end: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__actions,
#ppr-kzh.ppr-kzh .ppr-kzh__callout {
flex-direction: column;
align-items: stretch;
gap: var(--ppr-kzh-mobile-item-gap);
}
#ppr-kzh.ppr-kzh .ppr-kzh__callout { margin-block-start: var(--ppr-kzh-mobile-section-padding); }
/* Reset the desktop flex-basis when the callout switches to a column. */
#ppr-kzh.ppr-kzh .ppr-kzh__callout > :is(div, p, a, button) {
flex: 0 1 auto;
min-inline-size: 0;
max-inline-size: 100%;
}
#ppr-kzh.ppr-kzh .ppr-kzh__button { inline-size: 100%; }
#ppr-kzh.ppr-kzh .ppr-kzh__note { margin-block-start: var(--ppr-kzh-mobile-section-padding); }
#ppr-kzh.ppr-kzh .ppr-kzh__faq {
display: grid;
gap: var(--ppr-kzh-mobile-item-gap);
}
#ppr-kzh.ppr-kzh .ppr-kzh__faq details { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__faq summary {
padding: var(--ppr-kzh-mobile-gutter) 3rem var(--ppr-kzh-mobile-gutter) var(--ppr-kzh-mobile-gutter);
}
#ppr-kzh.ppr-kzh .ppr-kzh__faq summary::after { inset-inline-end: var(--ppr-kzh-mobile-gutter); }
#ppr-kzh.ppr-kzh .ppr-kzh__faq details p {
padding: 0 var(--ppr-kzh-mobile-gutter) var(--ppr-kzh-mobile-gutter);
}
}
@media screen and (max-width: 760px) {
#sp-main-body {
padding: 0px 15px 0px 15px!important;
}
#ppr-kzh.ppr-kzh .ppr-kzh__hero,
#ppr-kzh.ppr-kzh .ppr-kzh__section {
padding: var(--ppr-kzh-mobile-section-padding) var(--ppr-kzh-mobile-gutter);
}
#ppr-kzh.ppr-kzh .ppr-kzh__section {
margin: var(--ppr-kzh-mobile-section-gap) 0 0;
display: flow-root;
}
/* The contact border is included in the common 16px content inset. */
#ppr-kzh.ppr-kzh .ppr-kzh__contact {
padding-inline: calc(var(--ppr-kzh-mobile-gutter) - 1px);
padding-block: calc(var(--ppr-kzh-mobile-section-padding) - 1px);
}
#ppr-kzh.ppr-kzh .ppr-kzh__hero,
#ppr-kzh.ppr-kzh .ppr-kzh__visual-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--ppr-kzh-mobile-section-padding);
}
#ppr-kzh.ppr-kzh .ppr-kzh__hero-media { inline-size: 100%; }
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *) { font-size: 2.25rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__heading { margin: 0 auto var(--ppr-kzh-mobile-section-padding); }
#ppr-kzh.ppr-kzh .ppr-kzh__nav {
margin-block: var(--ppr-kzh-mobile-section-padding) 0;
padding: 0 var(--ppr-kzh-mobile-gutter);
gap: .25rem var(--ppr-kzh-mobile-item-gap);
justify-content: flex-start;
}
#ppr-kzh.ppr-kzh .ppr-kzh__grid,
#ppr-kzh.ppr-kzh .ppr-kzh__carousel:not(.owl-loaded),
#ppr-kzh.ppr-kzh .ppr-kzh__visual-copy { gap: var(--ppr-kzh-mobile-item-gap); }
#ppr-kzh.ppr-kzh .ppr-kzh__card,
#ppr-kzh.ppr-kzh .ppr-kzh__factor,
#ppr-kzh.ppr-kzh .ppr-kzh__condition,
#ppr-kzh.ppr-kzh .ppr-kzh__steps > li,
#ppr-kzh.ppr-kzh .ppr-kzh__callout,
#ppr-kzh.ppr-kzh .ppr-kzh__example-body,
#ppr-kzh.ppr-kzh .ppr-kzh__visual figcaption {
padding: var(--ppr-kzh-mobile-gutter);
}
#ppr-kzh.ppr-kzh .ppr-kzh__visual-label { padding-inline: var(--ppr-kzh-mobile-gutter); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point { padding-block-end: var(--ppr-kzh-mobile-item-gap); }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-point:last-child { padding-block-end: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__actions,
#ppr-kzh.ppr-kzh .ppr-kzh__callout {
flex-direction: column;
align-items: stretch;
gap: var(--ppr-kzh-mobile-item-gap);
}
#ppr-kzh.ppr-kzh .ppr-kzh__callout { margin-block-start: var(--ppr-kzh-mobile-section-padding); }
/* Reset the desktop flex-basis when the callout switches to a column. */
#ppr-kzh.ppr-kzh .ppr-kzh__callout > :is(div, p, a, button) {
flex: 0 1 auto;
min-inline-size: 0;
max-inline-size: 100%;
}
#ppr-kzh.ppr-kzh .ppr-kzh__button { inline-size: 100%; }
#ppr-kzh.ppr-kzh .ppr-kzh__note { margin-block-start: var(--ppr-kzh-mobile-section-padding); }
#ppr-kzh.ppr-kzh .ppr-kzh__faq {
display: grid;
gap: var(--ppr-kzh-mobile-item-gap);
}
#ppr-kzh.ppr-kzh .ppr-kzh__faq details { margin: 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__faq summary {
padding: var(--ppr-kzh-mobile-gutter) 3rem var(--ppr-kzh-mobile-gutter) var(--ppr-kzh-mobile-gutter);
}
#ppr-kzh.ppr-kzh .ppr-kzh__faq summary::after { inset-inline-end: var(--ppr-kzh-mobile-gutter); }
#ppr-kzh.ppr-kzh .ppr-kzh__faq details p {
padding: 0 var(--ppr-kzh-mobile-gutter) var(--ppr-kzh-mobile-gutter);
}
}
/* Only the heading size changes at 420px; spacing stays the same. */
@container ppr-kzh (max-width: 420px) {
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *) { font-size: 2rem; }
}
@media screen and (max-width: 420px) {
#ppr-kzh.ppr-kzh h1:not(.ppr-kzh__bitrix *) { font-size: 2rem; }
}
@media print {
#ppr-kzh.ppr-kzh .ppr-kzh__section { margin-block-start: 1rem; padding: 1rem 0; }
#ppr-kzh.ppr-kzh .ppr-kzh__visual-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Certificate cards reuse the page gallery. */
#ppr-kzh.ppr-kzh .ppr-kzh__certificate .ppr-kzh__example-image { display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 1rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__certificate .ppr-kzh__example-image img { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
#ppr-kzh.ppr-kzh .ppr-kzh__certificate .ppr-kzh__example-body { border-top: 1px solid var(--ppr-kzh-line); background: #f9fbf9; }
#ppr-kzh.ppr-kzh .ppr-kzh__certificate h3 { margin: 0; font-size: 1.125rem; }
#ppr-kzh.ppr-kzh .ppr-kzh__button, #ppr-kzh.ppr-kzh .ppr-kzh__button:visited { color: #fff !important; }