/* eXtremeMem – odtworzenie układu 900 px na podstawie oryginalnego css/style.css.
   Wszystkie tła z katalogu images/ (bgr_01, bgr_02, bgr_03, bgr_07, grad_02). */

:root {
  --offer-text: #0faee2;   /* kolor tekstu oferty (na screenach niebieski; w starym CSS dziedziczył #CCC) */
  --heading: #0faee2;
  --link: #0a96e2;
}

html { background: #000; }

body {
  padding: 0;
  margin: 0 auto;
  background: #000 url(images/grad_02.jpg) repeat-x;
  text-align: center;
  color: #ccc;
  font-family: Arial, Helvetica, sans-serif;
}

a {
  font-weight: bold;
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { border: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

p {
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align: justify;
}

h2 {
  margin: 10px 0 30px;
  padding: 0;
  display: block;
  font: normal 1.2em Arial, Helvetica, sans-serif;
  color: var(--heading);
}

#main {
  font-size: 0.8em;
  color: #ccc;
  text-align: left;
  background: #000;
  margin: 0 auto;
  width: 900px;
  border: 1px solid #000;
  border-top: 0;
}

/* ---------- Nagłówek ---------- */
#header { width: 900px; height: 168px; }
#header img { display: block; width: 900px; height: 168px; }

/* ---------- Pasek kontaktowy ---------- */
#menu {
  display: flex;
  width: 860px;
  height: 63px;
  padding: 1px 0 0 40px;
  background-image: url(images/bgr_02.jpg);
}
#menu p { margin: 6px 2px 3px 2px; font-size: 11px; }
#menup1 { width: 290px; }
#menup1 p { margin-top: 19px; }
#menup2 { width: 280px; }
#menup3 { width: 120px; }
#menu .map { margin-left: auto; }
#menu .map img { display: block; width: 161px; height: 53px; }

/* ---------- Treść ---------- */
#tekst {
  width: 860px;
  padding: 3px 0 30px 40px;
  background: url(images/bgr_03.jpg) no-repeat;
}

.promo { text-align: center; margin-bottom: 15px; }
.promo img { display: inline-block; max-width: 100%; height: auto; }

.cols { display: flex; }

#cleft { width: 433px; }
#cleft h2 { margin-bottom: 10px; }
#cleft p {
  font-size: 1.2em;
  margin-top: 1.15em;
  color: var(--offer-text);
}

#cright { width: 240px; margin-left: 121px; }
#cright p { font-size: 0.8em; margin: 0; }
#cright p.sp { margin-top: 1.15em; }

/* ---------- Marki ---------- */
#footer {
  width: 840px;
  min-height: 460px;
  background: url(images/bgr_07.jpg) no-repeat;
  margin: 0;
  padding: 5px 20px 10px 40px;
  text-align: center;
}
#footer h2 { margin: 20px 10px; text-align: left; }

#brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#brands a, #brands .logo { display: block; line-height: 0; }
#brands img { display: block; margin: 5px 10px; }
#brands .brk { flex-basis: 100%; height: 0; }

/* ---------- Mobile / wąskie okna ----------
   Tła z grafik mają stałe wymiary, więc poniżej 920 px układ jest uproszczony. */
@media (max-width: 920px) {
  #main { width: 100%; border: 0; }
  #header, #header img { width: 100%; height: auto; }

  #menu {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "p1 p3"
      "p2 p3"
      "map map";
    column-gap: 14px;
    width: auto;
    height: auto;
    padding: 8px 14px 14px;
    background: #06263f;
  }
  #menup1 { grid-area: p1; width: auto; }
  #menup2 { grid-area: p2; width: auto; }
  #menup3 { grid-area: p3; width: auto; }
  #menup1 p { margin-top: 6px; }
  #menu .map { grid-area: map; display: block; margin-top: 10px; }
  #menu .map img { width: 100%; height: auto; }

  #tekst { width: auto; padding: 12px 14px 20px; background: none; }
  .cols { display: block; }
  #cleft, #cright { width: auto; margin-left: 0; }
  #cright { margin-top: 24px; }
  #cright p { font-size: 1em; }

  #footer {
    width: auto;
    min-height: 0;
    background: #0a4274;
    padding: 10px 14px 20px;
  }
  #brands {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: center;
    justify-items: center;
  }
  #brands .brk { display: none; }
  #brands a, #brands .logo { display: flex; justify-content: center; }
  #brands img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 64px;
    margin: 4px;
  }
}

@media (min-width: 600px) and (max-width: 920px) {
  #brands { grid-template-columns: repeat(3, 1fr); }
  #brands img { max-height: 80px; }
}