/* These proposals affect only the narrow header. The approved desktop CSS stays intact. */
@media (max-width: 760px) {
  html[data-mobile-layout] .site-header {
    min-height: 0;
    padding: 18px 18px;
    gap: 8px;
    border-radius: 0 0 28px 28px;
  }
  html[data-mobile-layout] .brand { margin: 0; min-width: 0; }
  html[data-mobile-layout] .contacts { grid-area: auto; justify-self: auto; }
  html[data-mobile-layout] .menu { grid-area: auto; position: static; }
  html[data-mobile-layout] .menu-panel {
    top: calc(100% + 8px);
    right: 0;
    width: 100%;
    border-radius: 24px;
    padding: 10px;
    box-shadow: 0 8px 24px #1f29360c;
  }
  html[data-mobile-layout] .menu-panel a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 12px;
  }
  html[data-mobile-layout] .menu-panel a::before {
    content: "";
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    background: center / contain no-repeat;
  }
  html[data-mobile-layout] .menu-panel a[href^="tel:"]::before { background-image: url("assets/phone.svg"); }
  html[data-mobile-layout] .menu-panel a[href^="mailto:"]::before { background-image: url("assets/mail.svg"); }
  html[data-mobile-layout] .menu-panel a[href^="https://t.me"]::before { background-image: url("assets/telegram.svg"); }
  html[data-mobile-layout] .menu-panel a[href^="https://max.ru"]::before { background-image: url("assets/max.svg"); }

  /* Full logo on the first row; all actions share the second row. */
  html[data-mobile-layout="all"] .site-header {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: "brand brand" "contacts menu";
    row-gap: 14px;
  }
  html[data-mobile-layout="all"] .brand { grid-area: brand; width: min(100%, 340px); justify-self: center; }
  html[data-mobile-layout="all"] .contacts { grid-area: contacts; justify-self: start; }
  html[data-mobile-layout="all"] .menu { grid-area: menu; }

  /* A direct phone action and the menu fit next to the full wordmark. */
  html[data-mobile-layout="call"] .site-header {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    grid-template-areas: "brand contacts menu";
    padding-inline: 16px;
  }
  html[data-mobile-layout="call"] .brand { grid-area: brand; width: min(100%, 300px); }
  html[data-mobile-layout="call"] .contacts { grid-area: contacts; }
  html[data-mobile-layout="call"] .contacts .icon-link:not([href^="tel:"]) { display: none; }
  html[data-mobile-layout="call"] .menu { grid-area: menu; }

  /* The largest possible wordmark, with all contacts in one disclosure. */
  html[data-mobile-layout="menu"] .site-header {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: "brand menu";
    column-gap: 16px;
  }
  html[data-mobile-layout="menu"] .brand { grid-area: brand; width: min(100%, 340px); }
  html[data-mobile-layout="menu"] .contacts { display: none; }
  html[data-mobile-layout="menu"] .menu { grid-area: menu; }
}