/* ==========================================================================
   MIKA — page regions: header, hero, product grid, materials, advantages,
   industries, CTA, footer. Component looks stay in components.css; this file
   only places things.
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--mika-z-header);
  background: var(--mika-surface);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
  min-height: var(--mika-header-h);
}

/* The wordmark is a link, not content: clicking or dragging it should never
   start a text selection or leave a highlight box behind. Keyboard focus is
   untouched — :focus-visible still rings it. */
.header__logo {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.header__logo img {
  height: var(--mika-logo-h);
  width: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.header__nav-link {
  font-size: var(--mika-body-sm);
  color: var(--mika-text-muted);
  white-space: nowrap;
  transition: color var(--mika-transition);
}

.header__nav-link:hover,
.header__nav-link.is-active {
  color: var(--mika-accent);
}

/* --- Hero ---------------------------------------------------------------- */

/* No bottom padding: the next section already brings its own top padding,
   and doubling them left a dead band under the hero. */
.hero {
  padding-bottom: 0;
}

/* The grey slab and the red band from the design.

   Both bars are ordinary blocks inside .container, so their RIGHT edge is the
   container's content edge — which is exactly where the last nav item ends.
   Each then bleeds off the left of the viewport by the distance between that
   content edge and the viewport (`50vw - 50%`), and the red band pushes its
   title back onto the container line with a matching padding, so the heading
   stays on the same vertical line as the rest of the page at any width.

   The grey bar is narrowed to end under one nav item: JS measures that item
   and writes --mika-band-grey-w (distance from the container's content left).
   It comes first in the DOM and is pulled down by half its height, so its top
   half sits above the red band and its bottom half lies over it; being later
   in paint order than nothing and given its own stacking position, it draws
   on top. Half-transparent, so the overlap blends. */
.hero__band-wrap {
  position: relative;
  /* room for the half of the grey bar that rises above the red one */
  padding-top: calc(var(--mika-band-grey-h) / 2);
  margin-bottom: var(--mika-block-gap);
}

.hero__band-top,
.hero__band {
  margin-left: calc(-1 * (50vw - 50%));
}

.hero__band-top {
  position: relative;
  z-index: 1;
  height: var(--mika-band-grey-h);
  width: calc((50vw - 50%) + var(--mika-band-grey-w, 40%));
  margin-bottom: calc(-1 * var(--mika-band-grey-h) / 2);
  background: var(--mika-surface-band);
  opacity: 0.5;
}

.hero__band {
  background: var(--mika-accent);
  padding-block: var(--spacing-4);
  padding-left: calc(50vw - 50%);
}

.hero__title {
  font-size: var(--mika-display-2);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--mika-tracking-display);
  color: var(--mika-text-on-accent);
  text-transform: uppercase;
}

.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--mika-block-gap);
  align-items: center;
}

.hero__media img {
  width: 100%;
}

/* --- Products ------------------------------------------------------------ */

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-6);
}

/* --- Materials -----------------------------------------------------------
   A block inside «Продукция», not a section — so it brings its own top gap
   instead of the section padding it used to sit on. */

.materials {
  margin-top: var(--mika-block-gap);
  /* the menu still links here, so it needs the header offset of a section */
  scroll-margin-top: var(--mika-header-h);
}

.materials__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--mika-block-gap);
  align-items: start;
}

.materials__pitch {
  height: 100%;
}

.materials__pitch-title {
  font-size: var(--mika-display-3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-6);
}

/* Two rows: the tab strip, then ONE cell that every panel shares. Because all
   panels stay in that cell (see .grade-panel[hidden] in components.css), its
   height is the tallest panel's and never changes when the tab does — which
   is what stopped «Почему мы» jumping up and down as photos of different
   proportions swapped in. */
.materials__picker {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0; /* `none` is not a valid padding keyword — it was being dropped */
}

/* --- Advantages ---------------------------------------------------------- */

/* Three shared rows — title / body / conclusion — filled column by column
   (each .advantage is display:contents, so its three children land in one
   column). All four conclusions therefore occupy the SAME row and start on
   one line; the middle row takes up the slack when a paragraph runs long. */
.advantages__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: column;
  column-gap: var(--mika-block-gap);
}

/* --- Industries ---------------------------------------------------------- */

.industries__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: var(--mika-block-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Hide the scrollbar — the arrows are the affordance here. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--spacing-1);
}

.industries__track::-webkit-scrollbar {
  display: none;
}

/* --- CTA ----------------------------------------------------------------- */

.cta {
  padding-block: 0;
  background: var(--mika-surface-alt);
}

.cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--mika-block-gap);
  align-items: center;
}

.cta__title {
  font-size: var(--mika-display-2);
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--mika-tracking-display);
  margin-bottom: var(--mika-block-gap);
}

.cta__contacts {
  display: grid;
  gap: var(--spacing-6);
}

.cta__phones {
  display: grid;
  gap: var(--spacing-1);
}

.cta__media img {
  width: 100%;
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  padding-block: var(--spacing-6);
  scroll-margin-top: var(--mika-header-h);
}

.footer__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.7fr)) minmax(0, 1.2fr);
  gap: var(--mika-block-gap);
}

.footer__legal-name {
  font-size: var(--mika-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.footer__tagline {
  font-size: var(--mika-body-sm);
  color: var(--mika-text-muted);
  margin-bottom: var(--spacing-4);
}

.footer__details {
  display: grid;
  gap: var(--spacing-2);
  font-size: var(--mika-body-sm);
  color: var(--mika-text-muted);
  line-height: var(--line-height-snug);
}

.footer__nav {
  display: grid;
  gap: var(--spacing-3);
  align-content: start;
  font-size: var(--mika-body-sm);
}

.footer__hours-label {
  font-size: var(--mika-body-sm);
  font-weight: var(--font-weight-semi-bold);
  margin-bottom: var(--spacing-3);
}

.footer__hours {
  display: grid;
  gap: var(--spacing-3);
  font-size: var(--mika-body-sm);
  color: var(--mika-text-muted);
}

.footer__copyright {
  margin-top: var(--mika-block-gap);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--mika-border);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--mika-text-muted);
}