/* Shared layout layer, loaded last on every existing page.
   Presentation, translations, media ratios and interaction behavior stay in
   their existing components; only available space and responsive sizing change. */
:root {
  --layout-content-max: 1840px;
  --layout-gutter: clamp(24px, 3.333333vw, 80px);
  --layout-column-gap: clamp(24px, 3vw, 64px);
  --layout-row-gap: clamp(28px, 2.5vw, 48px);
  --layout-copy-measure: 68ch;
  --layout-form-max: 1360px;
  --layout-diagram-height: clamp(248px, 15.5vw, 320px);
  --layout-symbol-height: clamp(76px, 4.8vw, 108px);
  --layout-technical-media-share: 0.55fr;
  --layout-technical-copy-share: 0.45fr;
  --layout-technical-photo-ratio: 3 / 2;
}

/* A single outer alignment across white/cream sections and the site shell.
   Reading widths are applied to copy, never to the entire picture-led section. */
.home-redesign :is(.home-section > .home-container, .home-hero-inner,
  .home-introduction__inner, .home-inquiry-inner),
.material-flow-page .flow-inner,
.material-flow-page .flow-inquiry .flow-inner,
.solution-page .solution-inner,
.solution-page .solution-inquiry .solution-inner,
.robotics-page .robotics-container,
.services-page .services-container,
.contact-main .contact-container,
.site-footer .site-shell-container,
.site-header :is(.mega-panel__top, .mega-panel__inner, .site-search__inner) {
  width: min(calc(100% - 2 * var(--layout-gutter)), var(--layout-content-max));
  max-width: var(--layout-content-max);
  margin-inline: auto;
  min-width: 0;
}

/* Keep the existing full-bleed, translucent header and its scroll behavior.
   Only the logo/navigation alignment changes on wide monitors. */
.site-header.site-header.has-utility-row {
  padding-inline: max(var(--layout-gutter), calc((100% - var(--layout-content-max)) / 2));
}
.site-header .mega-panel__inner {
  --mega-column-gap: var(--layout-column-gap);
}
.site-header .mega-panel__intro img {
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 300px;
}
.site-header :is(.mega-panel__intro p, .mega-panel__detail p) {
  max-width: var(--layout-copy-measure);
}

/* Home: preserve each approved grid, and give its imagery room to grow. */
.home-redesign :is(.home-area-grid, .home-industry-grid,
  .home-project-portrait-grid, .home-project-row) {
  column-gap: var(--layout-column-gap);
}
.home-redesign .home-project-portrait .home-project-media {
  width: min(100%, clamp(320px, 18vw, 420px));
}
.home-redesign .home-project-portrait .home-project-copy {
  width: 100%;
  max-width: 48ch;
  margin-inline: auto;
}
.home-redesign .home-faq-list {
  max-width: 1320px;
  margin-inline: auto;
}
.home-redesign :is(.home-work-step p, .home-capability-copy p) {
  max-width: var(--layout-copy-measure);
}

/* Solution photographs share one large editorial size, without nested
   thumbnail limits. Keep the existing row structures and photo/copy order. */
.solution-page :is(#assembly-systems, #process-modules,
  #inspection-verification, #packaging-operations) .solution-entry.solution-entry--technical {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.solution-page :is(.solution-entries, .solution-modules):has(.has-media) {
  row-gap: var(--layout-row-gap);
}
.solution-page .solution-entry.has-media,
.material-flow-page .flow-module.has-media {
  grid-template-columns: minmax(0, var(--layout-technical-media-share)) minmax(0, var(--layout-technical-copy-share));
  gap: var(--layout-column-gap);
}
.packaging-page .solution-entry.has-media:nth-child(even) {
  grid-template-columns: minmax(0, var(--layout-technical-copy-share)) minmax(0, var(--layout-technical-media-share));
}
.solution-page .solution-entry.has-media .solution-media,
.material-flow-page .flow-types [data-flow-media],
.material-flow-page .flow-feature.has-media .flow-media,
.material-flow-page .flow-module.has-media .flow-media {
  width: 100%;
  max-width: none;
}
.material-flow-page :is(.flow-types, .flow-feature.has-media),
.solution-page :is(.solution-entries, .solution-modules,
  .solution-projects, .solution-projects--single .solution-project) {
  column-gap: var(--layout-column-gap);
}
.material-flow-page .flow-type-body,
.material-flow-page .flow-module p,
.solution-page .solution-entry-copy p,
.robotics-page :is(.robotics-description, .robotics-applications,
  .robotics-platforms) {
  max-width: var(--layout-copy-measure);
}
.material-flow-page .flow-system-note,
.solution-page .solution-record-note,
.brochure-page .brochure-preview-contents,
.preparation-page .preparation-downloads p {
  max-width: 85ch;
}
.robotics-page .robotics-editorial.has-media {
  column-gap: var(--layout-column-gap);
}

/* Technologies and the last two Solutions use the same large photo frame.
   Retain each photo's approved fit; diagrams keep their separate small scale. */
.robotics-page .robotics-editorial.has-media,
.inspection-page #inspection-verification .solution-entry.has-media,
.packaging-page #packaging-operations .solution-entry.has-media {
  grid-template-columns: minmax(0, var(--layout-technical-media-share)) minmax(0, var(--layout-technical-copy-share));
  grid-template-areas: "media copy";
}

.robotics-page :is(#scara, #six-axis) .robotics-editorial.has-media,
.inspection-page #inspection-verification .solution-entry.has-media:nth-child(even),
.packaging-page #packaging-operations .solution-entry.has-media:nth-child(even) {
  grid-template-columns: minmax(0, var(--layout-technical-copy-share)) minmax(0, var(--layout-technical-media-share));
  grid-template-areas: "copy media";
}

.robotics-page .robotics-media figure,
.inspection-page #inspection-verification .solution-media figure {
  aspect-ratio: var(--layout-technical-photo-ratio);
}

/* Short design notes and their guide links form one reading group.
   Content-sized columns keep the link near the text, not at the page edge. */
.material-flow-page .flow-section.flow-design,
.solution-page .solution-section.solution-design {
  padding-block: 20px;
}
.material-flow-page .flow-design .flow-heading,
.solution-page .solution-design .solution-heading {
  margin-bottom: 6px;
}
.material-flow-page .flow-design-body,
.solution-page .solution-design-body {
  grid-template-columns: fit-content(85ch) fit-content(20rem);
  justify-content: start;
  gap: 4px 24px;
}

/* Engineering drawings scale as drawings, not as enlarged typography.
   Keep the operators and all illustration bands vertically aligned. */
@media (min-width: 1001px) {
  .material-flow-page :is(.flow-illustration, .flow-operator),
  .solution-page :is(.engineering-illustration, .engineering-operator) {
    height: var(--layout-diagram-height);
  }
  .material-flow-page .flow-diagram-piece .flow-drawing,
  .solution-page .engineering-piece > [data-engineering] {
    max-width: 240px;
    height: var(--layout-symbol-height);
  }
  .solution-page .engineering-illustration > svg {
    max-width: 520px;
  }
  .inspection-page :is(.solution-result-stage > [data-engineering],
    .solution-result-operator) {
    height: clamp(96px, 6vw, 140px);
  }
  .inspection-page .solution-result-stage svg {
    max-width: 240px;
  }
}

/* Resources and forms share the outer alignment, but keep sensible reading
   and field lengths. Preview pages are allowed to use the whole container. */
.contact-main :is(.contact-email-options, .contact-inquiry.inquiry-form,
  .brochure-success) {
  max-width: var(--layout-form-max);
}
.contact-main :is(.contact-fields, .contact-email-options,
  .brochure-preview-grid, .preparation-categories) {
  column-gap: var(--layout-column-gap);
}
.contact-main :is(.contact-intro-text, .preparation-notice,
  .brochure-form-intro p, .brochure-success p) {
  max-width: 85ch;
}
.contact-main :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}

.site-footer .site-footer__main {
  column-gap: var(--layout-column-gap);
}
.site-footer .site-footer__tagline {
  max-width: 36ch;
}

/* Mid-size displays keep two-column photography and two-column footers.
   The existing mobile menu/engineering breakpoints remain unchanged. */
@media (max-width: 1150px) {
  :root {
    --layout-gutter: 24px;
    --layout-column-gap: 28px;
  }
  .site-header :is(.mega-panel__top, .mega-panel__inner) {
    width: 100%;
    padding-inline: var(--layout-gutter);
  }
  .site-header.has-utility-row .site-nav.open {
    padding-inline: var(--layout-gutter);
  }
}

/* Long Russian engineering labels need enough space between the two drawing
   rows just above the vertical-flow breakpoint. Keep the operator band equal. */
@media (min-width: 1001px) and (max-width: 1150px) {
  .material-flow-page :is(.flow-illustration, .flow-operator),
  .solution-page :is(.engineering-illustration, .engineering-operator) {
    height: 288px;
  }
}

@media (max-width: 1000px) {
  .material-flow-page .flow-projects,
  .solution-page .solution-projects:not(.solution-projects--single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .material-flow-page .flow-illustration.flow-parts-grid,
  .solution-page .engineering-illustration.engineering-parts {
    height: auto;
    min-height: 248px;
    grid-template-rows: repeat(2, minmax(min-content, 1fr));
  }
}

/* Medium tablets get stacked editorial photos before either column becomes
   too narrow. Grid-based projects keep their existing two-column breakpoint. */
@media (max-width: 900px) {
  .material-flow-page .flow-design-body,
  .solution-page .solution-design-body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 4px;
  }
  .material-flow-page .flow-design-link,
  .solution-page .solution-design-link {
    justify-self: start;
    max-width: 100%;
  }
  .solution-page .solution-entry.has-media,
  .inspection-page #inspection-verification .solution-entry.has-media,
  .inspection-page #inspection-verification .solution-entry.has-media:nth-child(even),
  .packaging-page #packaging-operations .solution-entry.has-media,
  .packaging-page #packaging-operations .solution-entry.has-media:nth-child(even),
  .packaging-page .solution-entry.has-media:nth-child(even),
  .material-flow-page :is(.flow-feature.has-media, .flow-module.has-media),
  .solution-page .solution-projects--single .solution-project,
  .robotics-page .robotics-editorial.has-media,
  .robotics-page :is(#scara, #six-axis) .robotics-editorial.has-media {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }
  .robotics-page .robotics-editorial.has-media,
  .robotics-page :is(#scara, #six-axis) .robotics-editorial.has-media,
  .inspection-page #inspection-verification .solution-entry.has-media,
  .inspection-page #inspection-verification .solution-entry.has-media:nth-child(even),
  .packaging-page #packaging-operations .solution-entry.has-media,
  .packaging-page #packaging-operations .solution-entry.has-media:nth-child(even) {
    grid-template-areas: "media" "copy";
  }
  .packaging-page .solution-entry.has-media:nth-child(even) .solution-media {
    order: 0;
  }
  .material-flow-page .flow-module:not(.has-media) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .material-flow-page .flow-module:not(.has-media) .flow-module-copy {
    display: block;
  }
  .home-redesign .home-project-portrait .home-project-media {
    width: min(100%, 360px);
  }
}

@media (max-width: 720px) {
  :root {
    --layout-gutter: 18px;
    --layout-column-gap: 22px;
    --layout-row-gap: 28px;
  }
  /* Use the available phone width; never stretch or change object-fit.
     Originals and all existing aspect ratios remain untouched. */
  .solution-page .solution-entry.has-media .solution-media,
  .material-flow-page .flow-types [data-flow-media],
  .material-flow-page .flow-feature.has-media .flow-media,
  .material-flow-page .flow-module.has-media .flow-media {
    width: 100%;
    max-width: none;
  }
  .home-redesign .home-project-portrait .home-project-media {
    width: min(100%, 360px);
  }
  .site-footer .site-footer__tagline {
    max-width: 100%;
  }
  .material-flow-page .flow-projects,
  .solution-page .solution-projects:not(.solution-projects--single) {
    grid-template-columns: minmax(0, 1fr);
  }
}