/*
 * grafo74 — Modern UI Phase 3: Layout
 * Responsive container, section rhythm, grid and media foundations.
 * Version: var.5 grafo74
 */

:root {
  --layout-content-max: 1200px;
  --layout-reading-max: 76ch;
  --layout-gutter: clamp(1rem, 2.7vw, 2rem);
  --layout-section-space: clamp(2.75rem, 6vw, 6rem);
  --layout-grid-gap: clamp(1rem, 2.4vw, 2rem);
  --layout-card-min: 16rem;
  --layout-header-height: clamp(4.5rem, 9vw, 6.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 0;
  max-width: 100%;
}

body {
  overflow-x: clip;
}

.wrapper {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
}

.page,
main {
  min-width: 0;
  flex: 1 0 auto;
}

/* One fluid container model for the legacy and BEM containers. */
._container,
[class$="__container"],
[class*="__container "] {
  width: min(100% - (2 * var(--layout-gutter)), var(--layout-content-max));
  max-width: var(--layout-content-max);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Prevent wide descendants from forcing horizontal scrolling. */
.wrapper > *,
.page > *,
[class$="__container"] > *,
[class*="__container "] > * {
  min-width: 0;
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
  height: auto;
}

iframe,
embed,
object {
  display: block;
}

/* Header: flexible wrapping without changing navigation behavior. */
.header__container {
  min-height: var(--layout-header-height);
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.25rem);
  flex-wrap: wrap;
}

.header__logo {
  flex: 0 0 auto;
  margin-left: 0;
}

.header__datetime {
  min-width: 0;
  margin-left: auto;
}

.topnav {
  min-width: 0;
  max-width: 100%;
}

.dropdown-content {
  max-width: min(22rem, calc(100vw - 2 * var(--layout-gutter)));
}

/* Consistent vertical rhythm for principal content sections. */
.services,
.practice,
.whoweare,
.man,
.contact,
.categories,
.products,
.news,
.clients,
.subscribe,
.getintouch {
  padding-block: var(--layout-section-space);
}

.page > section:first-child,
.page > div:first-child {
  scroll-margin-top: calc(var(--layout-header-height) + 1rem);
}

.header-block,
.practice__header,
.man__header,
.categories__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.header-block__text,
.main-block__text,
.whoweare__text,
.contact__text,
.news__text,
.item-service__text,
.item-practice__text,
.item-man__text {
  max-width: var(--layout-reading-max);
}

/* Replace negative-margin card rows with gap-based layouts. */
.services__body,
.practice__body,
.man__body {
  margin: 0;
  gap: var(--layout-grid-gap);
}

.services__column,
.practice__column,
.practice__column_2,
.practice__column_2h,
.man__column {
  min-width: 0;
  padding: 0;
  margin: 0;
}

@supports (display: grid) {
  .services__body,
  .practice__body,
  .man__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-card-min)), 1fr));
    align-items: stretch;
  }

  .services__column,
  .practice__column,
  .practice__column_2,
  .practice__column_2h,
  .man__column {
    width: auto;
    max-width: none;
    flex: none;
  }
}

.categories__items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--layout-grid-gap);
}

.item-practice,
.item-man,
.services__item,
.item-category {
  min-width: 0;
}

.item-practice__content,
.services__item {
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Two-column editorial/media blocks collapse naturally. */
.whoweare__body,
.contact__body {
  gap: clamp(1.5rem, 4vw, 4rem);
}

.whoweare__video,
.whoweare__content,
.contact__content {
  min-width: 0;
}

.whoweare__video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Tables remain usable on narrow screens without widening the page. */
table {
  max-width: 100%;
}

.table-scroll,
.table-responsive,
[role="region"][aria-label*="таблиц" i] {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Legacy hero stays full-width while its content follows the shared container. */
.main-block {
  min-width: 0;
}

.main-block__body {
  width: min(100%, 54rem);
}

.main-block__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3, 0.75rem);
}

.main-block__button {
  min-width: 0;
}

/* Preserve dedicated document/gallery viewers: only guard their outer width. */
.doc2026,
.viewer-shell,
.viewer-container,
.swiper,
.bx-wrapper {
  max-width: 100%;
}

@media (max-width: 900px) {
  :root {
    --layout-card-min: 14rem;
  }

  .header__container {
    align-content: center;
  }

  .header__datetime {
    flex-basis: 100%;
    margin-left: 0;
  }

  .whoweare__body,
  .contact__body {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --layout-gutter: 1rem;
    --layout-section-space: clamp(2rem, 10vw, 3.5rem);
  }

  .header__container {
    gap: 0.5rem 0.75rem;
  }

  .header__logo {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
  }

  .main-block__body {
    width: 100%;
  }

  .main-block__buttons,
  .contact__body,
  .contact__button {
    width: 100%;
  }

  .main-block__button,
  .contact__button {
    max-width: 100%;
  }

  .services__body,
  .practice__body,
  .man__body,
  .categories__items {
    grid-template-columns: 1fr;
  }
}

@media print {
  :root {
    --layout-content-max: none;
    --layout-gutter: 0;
    --layout-section-space: 1.5rem;
  }

  ._container,
  [class$="__container"],
  [class*="__container "] {
    width: 100%;
    max-width: none;
  }
}