/* ==========================================================================
   ŚWIAT BARBER — pruski granat + proszkowy niebieski + złoto
   Wyłącznie /barber.

   Uwaga: oba kolory bazowe tego świata to kolory KANONICZNE z księgi znaku
   (Pruski Niebieski #003646, Proszkowy Niebieski #9BD8DA). Barber jest więc
   wizualnie najbliżej oryginalnej identyfikacji ze wszystkich trzech światów.
   ========================================================================== */

.world-barber {
  --bg:            var(--granat-4);
  --bg-alt:        var(--granat-3);
  --bg-karta:      var(--granat-4);

  --naglowek:      var(--kosc);
  --tresc:         var(--turkus-3);
  --przygaszony:   var(--turkus-5);
  --eyebrow:       var(--proszkowy);

  --akcent:        var(--zloto-swiatlo);
  --akcent-jasny:  var(--zloto-b-jasne);
  --akcent-grad:   linear-gradient(100deg, var(--zloto-b-jasne), var(--zloto-b));
  --akcent-tekst:  var(--granat-4);          /* ciemny tekst na jasnym złocie */

  --kreska:        var(--linia-b-2);
  --kreska-mocna:  var(--linia-b-3);

  --stopka-bg:     var(--granat-5);
  --stopka-tekst:  var(--turkus-8);

  /* Pasek światów w najciemniejszym granacie, jak stopka. */
  --pasek-bg:      var(--granat-5);
  --pasek-tekst:   var(--turkus-8);
  --pasek-akcent:  var(--zloto-swiatlo);

  --header-bg:     var(--granat-4);
  --header-kreska: var(--linia-b);
  --header-tekst:  var(--turkus-3);
}

/* Aktywna pozycja menu — proszkowy błękit zamiast złota,
   bo złoto na tym tle rezerwujemy dla cen i przycisków. */
.world-barber .mj-nav__item.is-aktywny > .mj-nav__link {
  color: var(--proszkowy);
  border-bottom-color: var(--proszkowy);
}

.world-barber .mj-nav__item--powrot .mj-nav__link { color: var(--turkus-7); }

.world-barber .mj-nav__podmenu { background: var(--granat-3); }

/* Hero — światło padające z lewej góry, jak reflektor nad fotelem. */
.world-barber .mj-hero-sekcja {
  background: radial-gradient(110% 90% at 20% 10%, var(--granat-6) 0%, var(--granat-4) 60%);
}

.world-barber .mj-pas-ciemny {
  background: linear-gradient(160deg, var(--granat-4), var(--granat-7));
}
.world-barber .mj-pas-ciemny--odwrocony {
  background: linear-gradient(150deg, var(--granat-7), var(--granat-4));
}

/* Siatka usług — cztery kafle oddzielone włoskową linią. */
.world-barber .mj-uslugi-siatka {
  display: grid;
  grid-template-columns: repeat(var(--kafle, 4), 1fr);
  gap: 1px;
  background: var(--linia-b-2);
  border: 1px solid var(--linia-b-2);
}
.world-barber .mj-uslugi-siatka > * {
  background: var(--bg);
  padding: 36px 26px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.world-barber .mj-uslugi-siatka h3 { color: var(--proszkowy); }
.world-barber .mj-uslugi-siatka .mj-cena { margin-top: auto; color: var(--zloto-swiatlo); font-weight: 500; }

/* Karty pakietów VIP — tylko obrys, bez wypełnienia. */
.world-barber .mj-karta-vip {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 30px;
  background: transparent;
  border: 1px solid var(--linia-b-3);
  border-top: 1px solid var(--linia-b-3);
}
.world-barber .mj-karta-vip h3 { color: var(--kosc); }
.world-barber .mj-karta-vip .mj-cena { margin-top: auto; font-size: 1.25rem; font-weight: 500; color: var(--zloto-swiatlo); }

/* Cennik barbera — dwie kolumny: usługi podstawowe po lewej, pakiety VIP po prawej.
   Siatka wypełniana wierszami daje ten podział automatycznie, bo pozycje
   w HTML idą naprzemiennie. */
.world-barber .mj-cennik-2kol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.world-barber .mj-pozycja__linia { border-bottom-color: var(--linia-b-4); }
.world-barber .mj-pozycja__cena  { color: var(--zloto-swiatlo); }

/* Sloty na zdjęcia w tonacji granatowej. */
.world-barber .mj-slot {
  background: repeating-linear-gradient(135deg, var(--granat-8) 0 11px, var(--granat-9) 11px 22px);
}
.world-barber .mj-slot__etykieta { color: var(--turkus-6); }

/* Hero ze zdjęciem roztapiającym się w tle — jak na Head Spa. */
.world-barber .mj-hero-foto {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 44%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
          mask-image: linear-gradient(90deg, transparent, #000 32%);
}

/* Sygnet w hero — proszkowy błękit. */
.world-barber .mj-hero__sygnet { color: var(--proszkowy); }
.world-barber .mj-hero__sygnet .mj-svg { width: 58px; height: auto; }

/* Przycisk konturowy tego świata. */
.world-barber .mj-btn--barber-kontur {
  border-color: var(--linia-b-3);
  color: var(--turkus-4);
  border-radius: var(--promien);
}
.world-barber .mj-btn--barber-kontur:hover { opacity: 1; border-color: var(--proszkowy); }

/* Nadtytuł w złocie — używany nad „Pakiety VIP". */
.world-barber .mj-eyebrow--zloty { color: var(--zloto-swiatlo); }

/* Nagłówek sekcji z tekstem po prawej. */
.world-barber .mj-naglowek-sekcji__boczny { max-width: 360px; text-align: right; }

/* Kropka w punktach i listach — na ciemnym tle proszkowy błękit. */
.world-barber .mj-punkt .mj-kropka { background: var(--proszkowy); }

@media (max-width: 767px) {
  .world-barber .mj-naglowek-sekcji__boczny { max-width: none; text-align: left; }
}

@media (max-width: 1023px) {
  .world-barber .mj-uslugi-siatka { grid-template-columns: repeat(2, 1fr); }
  /* Nieparzysty ostatni kafel na całą szerokość — bez pustej, szarej komórki. */
  .world-barber .mj-uslugi-siatka > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .world-barber .mj-cennik-2kol   { gap: 0 32px; }

  .world-barber .mj-hero-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
            mask-image: linear-gradient(180deg, transparent, #000 60%);
  }
  .world-barber .mj-hero-tresc { position: relative; z-index: 2; }
}

@media (max-width: 767px) {
  .world-barber .mj-uslugi-siatka { grid-template-columns: 1fr; }
  .world-barber .mj-uslugi-siatka > * { min-height: 0; padding: 26px 20px; }
  .world-barber .mj-cennik-2kol { grid-template-columns: 1fr; gap: 0; }
}