/* ============================================================
   95 — pasy sekcji: biel, zimna biel, granat

   Projekt zleceniodawcy prowadzi stronę rytmem pełnowymiarowych tł:
   biel, biel, granat, biel, głęboki granat, biel... Zamiast dopisywać
   każdej sekcji wariant „na ciemnym", pas granatowy PRZEDEFINIOWUJE
   tokeny lokalnie. Własności niestandardowe dziedziczą, więc wszystko,
   co siedzi w środku — karty, linie, eyebrow, liczby — dostaje właściwe
   wartości bez ani jednej reguły więcej. Nowa sekcja działa od razu.

   Plik ładuje się PO plikach sekcji (priorytet 83 w base.html.twig),
   bo musi wygrywać z regułami, które zapisują kolory wprost.
   Stąd numer 95, mimo że tematycznie to układ.

   Zmierzone kontrasty par użytych niżej: .agents/brand.md
   ============================================================ */

.ai-pas { background: var(--ai-bg); }

/* --- pas zimny ----------------------------------------------- */

.ai-pas--zimny { background: var(--ai-bg-alt); }

/* --- pas granatowy ------------------------------------------- */

.ai-pas--granat,
.ai-pas--granat-gl {
  --ai-heading:      var(--ai-heading-ciemne);   /* 13,32:1 */
  --ai-text:         var(--ai-text-ciemne);      /*  9,52:1 */
  --ai-text-mute:    var(--ai-text-ciemne);
  --ai-rose:         var(--ai-rose-ciemne);      /*  7,74:1 */
  --ai-magenta:      var(--ai-rose-ciemne);      /* karmin na granacie ma 2,69:1 — nie wolno */
  --ai-card:         rgba(255,255,255,.05);
  --ai-card-alt:     rgba(255,255,255,.08);
  --ai-line:         rgba(255,255,255,.12);
  --ai-line-strong:  rgba(255,255,255,.16);
  --ai-line-ui:      rgba(255,255,255,.55);
  --ai-tint:         rgba(255,255,255,.06);
  --ai-focus:        var(--ai-rose-ciemne);
  --ai-cien:         none;
  --ai-cien-mocny:   none;
  color: var(--ai-text-ciemne);
}
.ai-pas--granat    { background: var(--ai-bg-ciemne); }
.ai-pas--granat-gl { background: var(--ai-bg-ciemne-gl); }

/* --- pas karminowy ------------------------------------------- */
/* W projekcie zleceniodawcy blok domykający („Zarezerwuj miejsce") jest
   pełnowymiarową plamą karminu. Biel na #C73778 daje 4,95:1, więc cała
   treść na tym pasie musi być biała — róż i granat tam nie wchodzą. */

.ai-pas--karmin {
  --ai-heading:      var(--ai-biel);
  --ai-text:         var(--ai-biel);
  --ai-text-mute:    var(--ai-biel);
  --ai-rose:         var(--ai-biel);
  --ai-magenta:      var(--ai-biel);
  --ai-card:         rgba(255,255,255,.10);
  --ai-card-alt:     rgba(255,255,255,.14);
  --ai-line:         rgba(255,255,255,.22);
  --ai-line-strong:  rgba(255,255,255,.28);
  --ai-line-ui:      rgba(255,255,255,.70);
  --ai-tint:         rgba(255,255,255,.10);
  --ai-focus:        var(--ai-biel);
  --ai-cien:         none;
  --ai-cien-mocny:   none;
  background: var(--ai-karmin);
  color: var(--ai-biel);
}
/* Przycisk odwrócony: biel z karminowym napisem — 4,95:1. */
.ai-pas--karmin .ai-btn {
  background: var(--ai-biel);
  color: var(--ai-karmin);
}

/* Hover NIE może sięgać po `--ai-bg-alt`: ten token zmienia się razem z motywem
   i w ciemnym jest granatem (#191D40). Przycisk na karminowym pasie robił się
   wtedy granatowy z karminowym napisem — wyglądało to jak usterka, bo pas jest
   karminowy w obu motywach i jego wnętrze nie ma prawa reagować na wygląd strony.
   Stąd domieszka karminu do bieli zamiast tokenu: różowawa biel siedzi w palecie
   pasa i zachowuje się tak samo niezależnie od motywu. */
.ai-pas--karmin .ai-btn:hover {
  background: color-mix(in srgb, var(--ai-biel) 88%, var(--ai-karmin));
  color: var(--ai-karmin-ciemny);
}

/* Przycisk jest jedynym miejscem, gdzie samo przedefiniowanie tokenów nie
   wystarcza: na granacie jego tłem byłby jasny róż, a napis na nim miałby
   1,9:1. Na ciemnym pasie przycisk odwraca się — biel z granatowym napisem. */
.ai-pas--granat .ai-btn,
.ai-pas--granat-gl .ai-btn {
  background: var(--ai-heading-ciemne);
  color: var(--ai-bg-ciemne-gl);            /* 15,71:1 */
}
.ai-pas--granat .ai-btn:hover,
.ai-pas--granat-gl .ai-btn:hover {
  background: var(--ai-rose-ciemne);
  color: var(--ai-bg-ciemne-gl);            /* 12,4:1 */
}

/* --- rytm pionowy wewnątrz pasa ------------------------------ */
/* Sekcja na własnym tle nie potrzebuje linii rozdzielającej — rozdziela
   ją zmiana koloru. Za to potrzebuje oddechu również od góry, bo tło
   zaczyna się dokładnie tam, gdzie treść. */

.ai-pas--zimny > *,
.ai-pas--granat > *,
.ai-pas--granat-gl > *,
.ai-pas--karmin > * { padding-block: var(--ai-s7); }

.ai-pas--zimny > *::before,
.ai-pas--granat > *::before,
.ai-pas--granat-gl > *::before,
.ai-pas--karmin > *::before { display: none; }

/* Stopka też jest pasem, ale ma własny, ciaśniejszy rytm — odstęp sekcji
   zrobiłby pod nią dziurę na pół ekranu. */
.ai-stopka.ai-pas > * { padding-block: 0; }

/* Kotwica nawigacji to pusty div wstawiany przez Grava przed każdym modułem.
   Wewnątrz pasa nie może dostać paddingu, bo rozpychałby tło o dwa odstępy. */
.ai-pas > .module-anchor { padding-block: 0; }