/* MR1-004 product page (mr1.html): page-specific layout only. Components and effects live in main.css. */

/* Anchor target for /mr1.html#kak-raboti (linked from the home hero). html carries scroll-padding-top:88px (main.css) so anchors clear the
   72px sticky header; this section is a full-bleed dark band with 64px+ of its own top padding, so -88px cancels that offset and the band
   lands flush with the top of the viewport. The sticky header (when visible) then floats over the dark band's padding, the heading
   (92-93px down on phones, 199px at 1280x720) stays clear of it, and no strip of the white section above shows when the header hides. */
#kak-raboti{scroll-margin-top:-88px}

/* 1. Page hero: text left, product photo right (tilt + glow come from .hero__frame / .tilt) */
.mr1-hero__inner{display:grid;gap:40px}
.mr1-hero__media{width:100%;max-width:340px;margin-inline:auto}
.mr1-hero .lead{max-width:56ch}
.mr1-hero .hero__actions{margin:28px 0 0}
@media (min-width:1024px){
  .mr1-hero__inner{grid-template-columns:1.25fr .75fr;align-items:center;gap:64px}
  .mr1-hero__media{margin-inline:0;justify-self:end}
}

/* 2. Principle diagram (inline SVG, drawn in the page so it can use currentColor) */
.mr1-principle p{max-width:56ch}
.mr1-principle .section-head{margin-bottom:28px}
.mr1-diagram{margin:0;padding:20px 12px 8px;border:1px solid var(--c-gray-200);border-radius:var(--radius-lg);background:var(--c-blue-50)}
.mr1-diagram__stage{position:relative;isolation:isolate}
.mr1-diagram__svg{display:block;width:100%;height:auto;color:var(--c-navy-700)}
.mr1-d-text{fill:currentColor;font-family:var(--f-body);font-weight:600}
.mr1-wave{fill:none;stroke:var(--c-sun-400);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
/* E2 rings radiate from the centre of the container (180,144 in a 360x280 viewBox = 50% / 51.43%) */
.mr1-diagram .pulse-rings{z-index:0;top:51.43%;width:42%}
@keyframes mr1-flow{to{stroke-dashoffset:-33}}
@keyframes mr1-arrow-pulse{0%,100%{transform:scale(.88);opacity:.7}50%{transform:scale(1.12);opacity:1}}
/* Motion only without a reduced-motion preference: the waves flow inward as dashes, the arrows pulse from the container centre.
   With reduced motion the waves stay solid lines and the arrows static (main.css also removes every animation there). */
@media (prefers-reduced-motion:no-preference){
  .mr1-wave{stroke-dasharray:24 9;animation:mr1-flow 2.5s linear infinite}
  .mr1-arrows{transform-box:view-box;transform-origin:180px 144px;animation:mr1-arrow-pulse 2.5s ease-in-out infinite}
}

/* 3. Story (E8): captions overlay the photos (small in the stacked 2 x 2 grid, larger when pinned) on a dark scrim */
.story__img{position:relative;background:var(--c-navy-900)}
.story__img--hmi img{object-fit:contain}
.story__cap{position:absolute;left:0;right:0;bottom:0;padding:32px 10px 10px;background:linear-gradient(transparent,rgb(6 15 31/.92));font-size:.75rem;line-height:1.35;color:#fff}
.story:not(.story--pinned) .story__media{grid-template-columns:repeat(2,1fr);gap:12px;max-width:560px}
@media (min-width:480px){.story__cap{padding:36px 14px 14px;font-size:.8125rem}}
.story--pinned .story__cap{padding:56px 22px 20px;font-size:.9375rem}

/* 4. What it processes + advantages */
.mr1-lists .grid-2{align-items:start}
.mr1-lists .section-head{margin-bottom:24px}
.mr1-lists__intro{margin-bottom:20px}
.mr1-lists__adv{padding:28px;border:1px solid var(--c-gray-200)}
.mr1-lists__adv .check-list{gap:16px}
@media (min-width:768px){.mr1-lists__adv{padding:40px}}
@media (min-width:1024px){.mr1-lists__proc{position:sticky;top:112px}} /* the advantages card is much taller: keep the short list in view beside it */

/* 5. Lower costs: five spotlight cards. 4 columns on desktop = wide + small + tall(photo) / small + wide, no holes. */
.mr1-save .section-head{margin-bottom:32px}
.mr1-save__grid .bento__item{display:flex;flex-direction:column;align-items:flex-start}
.mr1-save__grid .card__title{margin-bottom:0}
.mr1-save__grid .card__text{margin-top:8px}
.mr1-save__a .card__title,.mr1-save__e .card__title{font-size:1.5rem;max-width:22ch}
.mr1-deco{position:absolute;right:-20px;bottom:-20px;width:180px;height:180px;stroke-width:1;color:var(--c-blue-600);opacity:.07;pointer-events:none}
.mr1-save__photo{position:relative;align-self:stretch;margin-top:20px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);background:var(--c-gray-50)}
.mr1-save__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.mr1-save__photo picture{height:100%}
@media (min-width:768px){
  .mr1-save__a{grid-column:span 2}
  .mr1-save__c{grid-row:span 2}
}
@media (min-width:1024px){
  .mr1-save__c{grid-row:span 2}
  .mr1-save__e{grid-column:span 2}
  .mr1-save__photo{flex:1;aspect-ratio:auto;min-height:220px}
  .mr1-save__grid .bento__item{padding:32px}
}

/* 6. Technical data: table + side photo.
   main.css sets overflow-wrap:anywhere on cells, which also drops their min-content to one letter, so on phones the 42% label column
   broke words mid-word ("Производите/л"). break-word keeps whole words (a column never gets narrower than its longest word); under 400px
   the type and padding shrink a little so the two longest words still fit side by side. */
.mr1-specs .spec-table th,.mr1-specs .spec-table td{overflow-wrap:break-word}
@media (max-width:399.98px){.mr1-specs .spec-table th,.mr1-specs .spec-table td{padding:12px 10px;font-size:.9375rem}}
@media (max-width:359.98px){.mr1-specs .spec-table th,.mr1-specs .spec-table td{padding:12px 8px;font-size:.875rem}}
.mr1-specs .grid-2{align-items:start}
.mr1-specs .section-head{margin-bottom:32px}
.mr1-specs__photo{margin:0;max-width:360px}
.mr1-specs__frame{overflow:hidden;border-radius:var(--radius-lg);background:var(--c-gray-50);box-shadow:var(--shadow-card)}
.mr1-specs__photo figcaption{margin-top:14px;font-size:.9375rem;color:var(--c-slate-500)}
@media (min-width:1024px){
  .mr1-specs .grid-2{grid-template-columns:1.7fr 1fr;gap:64px}
  .mr1-specs__photo{justify-self:end;margin-top:104px;position:sticky;top:104px}
}

/* 7. Automatic control: HMI photo on a dark band; glow lives on the frame (the reveal clip-path would cut a shadow off the photo) */
.mr1-auto .section-head{margin-bottom:24px}
.mr1-auto__list{margin-top:24px}
.mr1-glow{border:1px solid rgb(255 255 255/.1);border-radius:var(--radius-lg);box-shadow:0 30px 100px -20px rgb(59 130 246/.55)}
.mr1-glow .reveal-img{overflow:hidden;border-radius:var(--radius-lg);background:#fff}

/* 8. Certification cards (same look as the home page) */
.mr1-cert .section-head{margin-bottom:24px}
.mr1-cert__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mr1-cert__cards .card{display:flex;align-items:center;gap:16px;padding:20px}
.mr1-cert__cards .card__icon{flex:none;margin:0}
.mr1-cert__cards .card__title{margin:0;font-size:1.0625rem}
.mr1-cert__cards .card--wide{grid-column:1/-1}
.mr1-cert__cards .card--iso{flex-direction:column;align-items:flex-start;gap:14px}
@media (max-width:479.98px){.mr1-cert__cards .card--iso{padding:16px 14px}.mr1-cert__cards .card--iso .card__title{font-size:.9375rem}}

/* 9. Gallery: portrait photos 2 per row (3 on desktop), the two landscape panel photos get their own full-width / half-width tiles */
.mr1-gallery{grid-template-columns:repeat(2,1fr);gap:12px}
.mr1-gallery a{aspect-ratio:3/4;border-radius:var(--radius-lg)}
.mr1-gallery a img{object-position:50% 20%}
.mr1-gallery a.is-wide{grid-column:1/-1;aspect-ratio:auto;align-self:center}
.mr1-gallery picture{transition:transform 600ms var(--ease-out)}
.mr1-gallery a:hover img{transform:none}
.mr1-gallery a:hover picture{transform:scale(1.03)}
.mr1-gallery a.is-wide picture,.mr1-gallery a.is-wide img{height:auto}
@media (min-width:768px){.mr1-gallery{gap:16px}}
@media (min-width:1024px){
  .mr1-gallery{grid-template-columns:repeat(6,1fr);gap:24px}
  .mr1-gallery a{grid-column:span 2}
  .mr1-gallery a.is-wide{grid-column:span 3}
}

/* 10. CTA: spacing between heading and text */
.cta-band h2+p{margin-top:8px}
.cta-band .btn{flex:none;white-space:nowrap}