/* ==========================================================================
   ŚWIAT HEAD SPA — szarozielona mięta + złoto
   Wyłącznie /head-spa. Osobny świat wizualny z wyraźnym przejściem
   z powrotem do strony głównej.

   Cała zmiana wyglądu polega na przemapowaniu tokenów semantycznych.
   Komponenty z base.css nie wymagają żadnych przeróbek.
   ========================================================================== */

.world-spa {
  --bg:            var(--szalwia-tlo);
  --bg-alt:        var(--szalwia-1);
  --bg-karta:      var(--szalwia-tlo);

  --naglowek:      var(--szalwia-ciemna);
  --tresc:         var(--szalwia-tekst);
  --przygaszony:   var(--szalwia-tekst-2);
  --eyebrow:       var(--szalwia-akcent-2);

  --akcent:        var(--zloto-spa);
  --akcent-jasny:  var(--zloto-spa-jasne);
  --akcent-grad:   linear-gradient(100deg, var(--zloto-swiatlo), var(--zloto));
  --akcent-tekst:  var(--szalwia-ciemna-3);

  --kreska:        var(--szalwia-linia);
  --kreska-mocna:  var(--szalwia-2);

  --stopka-bg:     var(--szalwia-ciemna);
  --stopka-tekst:  var(--szalwia-jasna);

  /* Pasek światów w oliwkowej szałwii — ten sam kolor co stopka.
     Złoto ma na nim kontrast 5,6:1. */
  --pasek-bg:      var(--szalwia-ciemna);
  --pasek-tekst:   var(--szalwia-jasna);
  --pasek-akcent:  var(--zloto-swiatlo);

  --header-bg:     var(--szalwia-tlo);
  --header-kreska: var(--szalwia-linia);
  --header-tekst:  var(--szalwia-tekst-5);

  /* Od 0.13 Head Spa pokazuje masaże twarzy wspólnym komponentem listy
     usług z base.css (sekcja 11) — ten token koloruje nagłówki grup. */
  --swiat-ciemny:  var(--szalwia-akcent-2);
}

/* Przycisk rezerwacji zostaje złoty jak w całym serwisie — to jedyny element,
   który celowo wygląda tak samo we wszystkich światach.
   Ma być rozpoznawalny niezależnie od tego, gdzie użytkownik się znajduje. */
.world-spa .mj-header__cta .mj-btn--zloty {
  background: linear-gradient(100deg, var(--zloto-jasne), var(--zloto));
  color: #fff;
}

/* Aktywna pozycja menu */
.world-spa .mj-nav__item.is-aktywny > .mj-nav__link {
  color: var(--naglowek);
  border-bottom-color: var(--szalwia-akcent);
}

/* Link powrotny — celowo przygaszony, żeby nie konkurował z nawigacją rytuału,
   ale zawsze widoczny. */
.world-spa .mj-nav__item--powrot .mj-nav__link { color: var(--szalwia-mgla); }

/* Hero — gradient szałwiowy przechodzący w piaskowy. */
.world-spa .mj-hero-sekcja {
  background: linear-gradient(155deg, var(--szalwia-1) 0%, var(--szalwia-2) 55%, var(--szalwia-4) 100%);
}

/* Pas z wariantami Basic / Deluxe. */
.world-spa .mj-pas-warianty {
  background: linear-gradient(150deg, var(--szalwia-4), var(--szalwia-2));
}

/* Karta ciemna — wariant Deluxe. */
.world-spa .mj-karta-ciemna {
  background: var(--szalwia-ciemna-2);
  color: var(--szalwia-jasna-3);
}
.world-spa .mj-karta-ciemna h3,
.world-spa .mj-karta-ciemna .mj-cena { color: var(--zloto-swiatlo); }
.world-spa .mj-karta-ciemna .mj-eyebrow { color: var(--szalwia-jasna-2); }

/* Siatka etapów rytuału — pięć kafli oddzielonych włoskową linią.
   Efekt tabeli bez używania <table>. */
.world-spa .mj-etapy {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--szalwia-2);
  border: 1px solid var(--szalwia-2);
}
.world-spa .mj-etapy > * {
  background: var(--bg);
  padding: 34px 24px;
  min-height: 220px;
}
.world-spa .mj-etap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.world-spa .mj-etap__opis { font-size: var(--fs-xs); }

/* Przyciski świata — wypełniony i konturowy. */
.world-spa .mj-btn--spa-pelny {
  background: var(--szalwia-ciemna-2);
  color: var(--szalwia-1);
  border-radius: var(--promien);
}
.world-spa .mj-btn--spa-kontur {
  border-color: var(--szalwia-jasna);
  color: var(--szalwia-ciemna-2);
  border-radius: var(--promien);
}

/* Siatka wariantów — tyle kolumn, ile wariantów w cenniku (od 0.13.2
   trzy: Basic, Deluxe, VIP). Na tablecie i telefonie jedna kolumna:
   trzy karty z listą zabiegów w dwóch kolumnach byłyby za wąskie. */
.world-spa .mj-siatka--warianty {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
@media (max-width: 1023px) {
  .world-spa .mj-siatka--warianty {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Karty wariantów Basic / Deluxe / VIP */
.world-spa .mj-wariant-karta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
  padding: 44px 38px;
  background: var(--bg-karta);
}
.world-spa .mj-wariant-karta__opis { font-size: var(--fs-body-s); line-height: 1.9; }
.world-spa .mj-wariant-karta__btn  { margin-top: auto; }

/* Deluxe na ciemnym tle. Reguła wyżej (.mj-wariant-karta) ma tę samą
   wagę co .mj-karta-ciemna i stoi później, więc zamalowywała ciemne tło
   jasnym — karta Deluxe wychodziła blada, z tekstem prawie niewidocznym.
   Podwójna klasa wygrywa niezależnie od kolejności. Poprawka w 0.13.1. */
.world-spa .mj-wariant-karta.mj-karta-ciemna { background: var(--szalwia-ciemna-2); }

.world-spa .mj-karta-ciemna .mj-eyebrow      { color: var(--szalwia-jasna-2); }
.world-spa .mj-karta-ciemna .mj-cena-duza    { color: var(--zloto-swiatlo); }
.world-spa .mj-karta-ciemna .mj-tresc        { color: var(--szalwia-jasna-3); }
.world-spa .mj-karta-ciemna .mj-plakietka    { color: var(--szalwia-ciemna-3); }

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

/* Od 1023 px nagłówek sekcji układa się w kolumnę (base.css), więc
   notka nie może dalej trzymać się prawej krawędzi. */
@media (max-width: 1023px) {
  .world-spa .mj-naglowek-sekcji__boczny { max-width: none; text-align: left; }
}
@media (max-width: 767px) {
  .world-spa .mj-wariant-karta { min-height: 0; padding: 32px 24px; }
}

/* Sloty na zdjęcia w tonacji szałwiowej. */
.world-spa .mj-slot {
  background: repeating-linear-gradient(135deg, var(--szalwia-2) 0 11px, var(--szalwia-3) 11px 22px);
}
.world-spa .mj-slot__etykieta { color: var(--szalwia-tekst-4); }

/* Hero ze zdjęciem roztapiającym się w tle po lewej stronie.
   Maska sprawia, że zdjęcie nie ma twardej krawędzi — dlatego kadr
   musi mieć zapas po lewej, inaczej maska utnie temat. */
.world-spa .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%);
}

@media (max-width: 1023px) {
  .world-spa .mj-etapy { grid-template-columns: repeat(2, 1fr); }
  .world-spa .mj-etapy > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Na tablecie i telefonie zdjęcie przestaje być pasem z boku
     i staje się tłem całej sekcji z pionowym przejściem. */
  .world-spa .mj-hero-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
            mask-image: linear-gradient(180deg, transparent, #000 60%);
  }
  .world-spa .mj-hero-tresc { position: relative; z-index: 2; }
}

@media (max-width: 767px) {
  .world-spa .mj-etapy {
    grid-template-columns: 1fr;
  }
  .world-spa .mj-etapy > * { min-height: 0; padding: 24px 20px; }
  .world-spa .mj-etapy > *:last-child:nth-child(odd) { grid-column: auto; }
}

/* Masaże twarzy (od 0.13) — karta listy na białym, bo --bg-karta w tym
   świecie ma kolor tła strony i lista zlewała się z sekcją. */
.world-spa .mj-masaze .mj-zwijka {
  background: #ffffff;
  border-top: 2px solid var(--szalwia-akcent);
  border-bottom: 0;
}