/* Naglowek: logo + przycisk menu, nachodzi na pierwsza sekcje strony (ujemny margines jak na PROD). */
.masthead {
  position: relative;
  z-index: 9;
  display: flex;
  flex-direction: column;
  margin-bottom: -187px;
}

.masthead__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--content-width));
  margin: 0 auto;
  padding-top: 21px;
}

.masthead__logo { flex: 0 1 auto; min-width: 0; }
.masthead__logo img {
  display: block;
  width: 19.213vw;
  max-width: 100%;
  height: 165px;
  object-fit: cover;
}

.masthead__menu {
  flex: 0 1 26px;
  min-width: 0;
  margin-right: 6.192vw;
  line-height: 0;
  cursor: pointer;
}
/* Tylko zerowanie resetu przyciskow motywu Hello ([type=button]: ramka, padding, tlo na :hover/:focus).
   Uklad zostaje w regule klasy - inaczej :focus po zamknieciu menu przywracal ustawienia z desktopu. */
.masthead__menu[type="button"],
.masthead__menu[type="button"]:hover,
.masthead__menu[type="button"]:focus { padding: 0; border: 0; background: none; }
.masthead__menu svg { display: block; width: 26px; height: 21px; fill: var(--color-primary); }

@media (max-width: 767px) {
  .masthead { padding: 0 20px; }
  .masthead__inner { gap: 20px; max-width: 100%; padding-top: 0; }
  /* Na PROD logo ma podstawe 100% - 20px, a oba elementy sie kurcza (przy 390 px: 305,9 i 24,09 px).
     Kurczenie z obrazkiem w % dawalo w Chrome uklad przeskakujacy co klatke, wiec rozmiary sa stale:
     przycisk 24 px (ikona 26 px wystaje jak na PROD), logo reszta wiersza. */
  .masthead__logo { flex: 0 0 calc(100% - 44px); }
  .masthead__logo img { width: 40%; }
  .masthead__menu { flex: 0 0 24px; margin-right: 0; }
}