/**
 * Strona znaku zodiaku — style w konwencji serwisu.
 *
 * Paleta i typografia jak w sekcjach kategorii (granat #0d1240, złoto #b3922e,
 * tekst #5a5870). Krój zostawiamy globalnemu plain-font.css, jedyny wyjątek to
 * glify zodiaku, bo font systemowy ich nie ma i przeglądarka podstawiłaby
 * kolorowe emoji.
 *
 * Świadome odstępstwa od makiety, zgodne z zasadami serwisu:
 *   - przełączniki dni i okresów to linki tekstowe ze złotym podkreśleniem,
 *     nie zaokrąglone pigułki (pigułki są u nas wycofane),
 *   - FAQ w naszym formacie: numer, pytanie, odpowiedź, siatka dwukolumnowa,
 *   - bez szeryfów i kursyw ozdobnych.
 */

.wwh-main{background:#fff;}
.wwh-in{max-width:1180px;margin:0 auto;padding:0 40px;}

/* ── Okruszki ─────────────────────────────────────────────────── */
/* Biały pasek w konwencji reszty serwisu (jak .wiem-cp-crumbs na kategoriach):
   linki stonowany fiolet #5b6280, pozycja bieżąca ciemniejszym złotem #b88a3a,
   bo jasne #e8b64c na bieli byłoby nieczytelne. Kolory wpisane wprost, a nie
   zmiennymi --wiem-*, bo na stronach znaków category.css się nie ładuje
   (dociąga go tylko hub) i zmienne byłyby puste.
   Dopełnienie z dołu potrzebne, odkąd tło nie zlewa się już z hero. */
.wwh-crumbs{background:#fff;padding:18px 0;}
.wwh-crumbs .wwh-in{display:flex;gap:10px;align-items:center;font-size:11px;
	letter-spacing:.16em;text-transform:uppercase;color:#9197ad;}
.wwh-crumbs a{color:#5b6280;text-decoration:none;transition:color .2s;}
.wwh-crumbs a:hover{color:#0c1330;}
.wwh-crumbs-cur{color:#b88a3a;}

/* ── Hero ─────────────────────────────────────────────────────── */
/* Złoty pas zamiast granatu (2026-08-19). Para #fbf6e8 do #f4ead0 to te same
   odcienie, których używa category.css, więc pas trzyma się palety serwisu.
   Obwódka od dołu jest konieczna: pasek wskaźników pod hero ma #faf7f0, czyli
   niemal to samo, i bez kreski oba bloki zlewały się w jedną plamę.
   Rozświetlenie w ::after zmienione ze złotego na białe, bo złoto na złocie
   przy tej przezroczystości było niewidoczne. */
.wwh-hero{background:linear-gradient(180deg,#fbf6e8 0%,#f4ead0 100%);
	border-bottom:1px solid #e2d5b0;padding:34px 0 46px;position:relative;overflow:hidden;}
.wwh-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.6),transparent 58%);}
.wwh-hero-grid{position:relative;z-index:1;display:grid;
	grid-template-columns:150px minmax(0,1fr) auto;gap:34px;align-items:center;}

.wwh-hero-medal{position:relative;width:132px;height:132px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:radial-gradient(circle at 50% 32%,#1c2559,#0b1038 74%);
	box-shadow:0 0 0 1px #c9a961,0 0 0 5px rgba(13,18,64,1),0 0 0 6px rgba(201,169,97,.45),
		0 14px 30px rgba(13,18,64,.20);}
.wwh-hero-medal::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
	background:
		radial-gradient(1.8px 1.8px at 24% 26%,rgba(255,248,224,.95),transparent 62%),
		radial-gradient(1.2px 1.2px at 72% 20%,rgba(255,248,224,.75),transparent 62%),
		radial-gradient(2.1px 2.1px at 80% 62%,rgba(255,248,224,.9),transparent 62%),
		radial-gradient(1.1px 1.1px at 34% 76%,rgba(255,248,224,.7),transparent 62%),
		radial-gradient(1.5px 1.5px at 60% 84%,rgba(255,248,224,.8),transparent 62%),
		radial-gradient(1.1px 1.1px at 16% 56%,rgba(255,248,224,.6),transparent 62%),
		radial-gradient(1.7px 1.7px at 50% 12%,rgba(255,248,224,.85),transparent 62%);}
.wwh-glyph{font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",Georgia,serif !important;
	font-variant-emoji:text;font-size:58px;line-height:1;color:#e8b64c;}

.wwh-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
	color:#e8b64c;font-weight:700;margin-bottom:10px;}
.wwh-eyebrow--ciemny{color:#b3922e;}
/* Kolory tekstu w hero przestawione z białych na ciemne, bo tło jest jasne.
   Wartości wzięte z jasnego hero strony zbiorczej (hub.css), żeby obie
   strony horoskopów wyglądały jak jeden serwis, a nie dwa. Jasne złoto
   #e8b64c ustępuje ciemniejszemu #b3922e, które jest czytelne na kremie. */
.wwh-hero .wwh-eyebrow{color:#b3922e;}
.wwh-hero h1{font-size:46px;line-height:1.1;font-weight:700;color:#0d1240;margin:0 0 12px;letter-spacing:-.5px;}
.wwh-hero h1 em{font-style:normal;color:#b3922e;}
.wwh-hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:11px;letter-spacing:.14em;
	text-transform:uppercase;color:#8a87a0;margin-bottom:14px;}
.wwh-hero-lead{font-size:16px;line-height:1.7;color:#4a4860;margin:0;max-width:540px;}
/* Hasła prognozy w hero: rząd krótkich określeń rozdzielonych złotą kropką.
   Świadomie NIE są pigułkami ani ramkami, bo te są w serwisie wycofane.
   Wyglądem różnią się od stojącego wyżej wiersza z datami i władcą (tamten
   jest drobny i wersalikami), żeby dwa rzędy nie zlały się w jeden. */
.wwh-hasla{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
	gap:4px 0;max-width:560px;font-size:13.5px;line-height:1.65;color:#0d1240;}
.wwh-hasla li{display:flex;align-items:center;}
.wwh-hasla li:not(:last-child)::after{content:"";flex:none;width:4px;height:4px;
	border-radius:50%;background:#c9a14a;margin:0 12px;}

.wwh-hero-nav{text-align:right;}
.wwh-date{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
	color:#9a8f74;margin-bottom:16px;}
.wwh-days,.wwh-okresy{display:flex;gap:20px;justify-content:flex-end;flex-wrap:wrap;}
.wwh-days{margin-bottom:14px;}
.wwh-day,.wwh-okres{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
	color:#8a87a0;text-decoration:none;padding-bottom:5px;border-bottom:1px solid transparent;
	transition:color .18s ease,border-color .18s ease;}
.wwh-day:hover,.wwh-okres:hover{color:#0d1240;border-color:#e2d5b0;}
.wwh-day.is-akt,.wwh-okres.is-akt{color:#b3922e;border-color:#b3922e;}

/* ── Pasek wskaźników ─────────────────────────────────────────── */
.wwh-oceny{background:#faf7f0;border-bottom:1px solid #ece5d6;padding:26px 0;}
.wwh-oceny-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:26px;align-items:center;}
.wwh-ocena-et{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
	color:#b3922e;font-weight:700;margin-bottom:8px;}
.wwh-ocena-row{display:flex;align-items:center;gap:12px;}
.wwh-kropki{display:inline-flex;gap:4px;flex-shrink:0;}
.wwh-kropki i{width:7px;height:7px;border-radius:50%;background:#e0dbcb;display:block;}
.wwh-kropki i.on{background:#d8b15e;}
.wwh-ocena-opis{font-size:13px;color:#5a5870;}
.wwh-atrybuty{display:flex;gap:26px;padding-left:26px;border-left:1px solid #e5ddcb;}
.wwh-atrybuty div{display:flex;flex-direction:column;gap:4px;}
.wwh-atrybuty span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#b3922e;font-weight:700;}
.wwh-atrybuty strong{font-size:13.5px;color:#0d1240;font-weight:700;}
.wwh-liczba{font-size:22px !important;line-height:1;}

/* ── Treść i kolumna boczna ───────────────────────────────────── */
/* Prognoza i FAQ w jednym strumieniu (2026-08-19). Wcześniej FAQ było
   przypisane do drugiego wiersza siatki, a kolumna boczna rozpinała się na oba
   wiersze. Gdy bok wychodził wyższy niż prognoza, nadmiar wysokości rozkładał
   się na wiersze i między prognozą a FAQ otwierała się pusta plama na kilkaset
   pikseli. Teraz lewa kolumna to jeden kontener, więc FAQ zaczyna się tuż pod
   prognozą, niezależnie od tego, jak długi jest bok. */
.wwh-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-top:52px;padding-bottom:56px;
	align-items:start;}
.wwh-kolumna{display:flex;flex-direction:column;gap:14px;min-width:0;}
.wwh-tresc p{font-size:15.5px;line-height:1.8;color:#4a4860;margin:0 0 18px;}
/* Akapit otwierający: lead, a nie wyróżnienie (2026-08-19). Wcześniej całe
   trzy zdania szły półgrubym krojem 20 px w granacie i blok czytał się jak
   jeden ciężki prostokąt, bo pogrubienie nic tu nie wyróżnia, skoro obejmuje
   wszystko. Zostaje sam rozmiar, o 3,5 px większy od tekstu poniżej, i to on
   niesie hierarchię. Interlinia luźniejsza, kolor o pół tonu jaśniejszy od
   granatu nagłówków, żeby akapit nie konkurował z H2. !important jak
   w poprzedniej wersji, bo reguła bije .wwh-tresc p. */
.wwh-otwarcie{font-size:19px !important;line-height:1.78 !important;color:#33314a !important;
	font-weight:400;font-style:italic;margin-bottom:26px !important;}
/* Kursywa zamiast pogrubienia (2026-08-19). Pogrubienie miało wyróżniać samo
   zdanie otwierające, ale przy krótkim pierwszym zdaniu obejmowało cały
   akapit i blok robił się ciężki. Szablon nie stawia już <strong>, więc
   gdyby gdzieś taki znacznik został, prostujemy mu grubość. */
.wwh-otwarcie strong{font-weight:400;color:inherit;}
.wwh-sekcja{margin-top:34px;padding-top:30px;border-top:1px solid #ecebf3;}
.wwh-sekcja-et{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#b3922e;font-weight:700;margin-bottom:9px;}
.wwh-tresc h2{font-size:24px;line-height:1.28;font-weight:700;color:#0d1240;margin:0 0 12px;letter-spacing:-.2px;}
.wwh-h-mala{font-size:19px !important;}

/* Rada dnia bez pudła (2026-08-19). Granatowy prostokąt był ostatnim ciemnym
   elementem w treści i rozbijał kolumnę na pół. Wyróżnienie niesie teraz sam
   tekst: złoto, większy stopień i kreska u góry, w konwencji reszty strony. */
.wwh-rada{margin:38px 0 0;background:none;padding:22px 0 0;position:relative;
	border-top:1px solid rgba(187,154,87,.45);}
.wwh-rada-et{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
	color:#b88a3a;font-weight:700;margin-bottom:10px;}
.wwh-rada p{font-size:20px !important;line-height:1.55 !important;
	color:#b3922e !important;margin:0 !important;font-weight:600;}

.wwh-godziny{margin-top:44px;}
.wwh-godziny-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px;}
.wwh-godzina{border:1px solid #e8e6f0;border-top:2px solid #d8b15e;padding:18px 18px 16px;background:#fff;}
.wwh-godzina-zakres{font-size:19px;font-weight:700;color:#0d1240;margin-bottom:4px;}
.wwh-godzina-et{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b3922e;font-weight:700;margin-bottom:9px;}
.wwh-godzina p{font-size:13.5px !important;line-height:1.65 !important;margin:0 !important;color:#5a5870 !important;}

/* ── Kolumna boczna ───────────────────────────────────────────── */
.wwh-side{display:flex;flex-direction:column;gap:30px;}
/* Jasne kafle bez obwódki (2026-08-19). Prostokąt wokół „Karty dnia" nic nie
   wnosił, bo kafel stoi na białym tle i sam się nie zlewa z treścią: oddziela
   go złota etykieta i odstęp kolumny. Ciemny wariant obwódkę zachowuje, bo
   u niego kreska jest w kolorze tła i tak naprawdę tylko domyka prostokąt.
   Odstęp między kaflami podniesiony, bo bez ramek to on niesie podział. */
.wwh-box{border:0;padding:0;background:#fff;}
/* Kafel „Niebo dziś" zszedł z granatu na złoto (2026-08-19), w tej samej
   konwencji co box kontaktowy pod FAQ kategorii. Klasa zmieniła nazwę
   z --ciemny na --zloty, bo stara myliła przy czytaniu kodu. */
.wwh-box--zloty{background:linear-gradient(180deg,#fffdf9 0%,#f5f2ea 100%);
	border:1.5px solid rgba(187,154,87,.5);border-radius:14px;padding:22px;}
.wwh-box-et{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#b3922e;font-weight:700;margin-bottom:14px;}
.wwh-box--zloty .wwh-box-et{color:#b88a3a;}

.wwh-karta{display:block;text-decoration:none;}
/* Obrazek karty pokazujemy w całości, bez własnej obwódki i bez przycinania.
   Skany Rider-Waite mają wypaloną w pliku krawędź, ale to element karty,
   a nie ramka do usunięcia (próba przycięcia ścinała samą kartę). */
.wwh-karta img{width:100%;height:auto;display:block;margin-bottom:14px;}
.wwh-karta-tytul{font-size:16px;font-weight:700;color:#0d1240;margin-bottom:8px;line-height:1.3;}
/* Jedno zdanie o znaczeniu karty, żeby miniatura nie była zagadką dla kogoś,
   kto nie zna tarota. */
.wwh-karta-sens{font-size:13.5px;line-height:1.65;color:#5a5870;margin:0 0 12px;}
.wwh-link{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b3922e;}
.wwh-link span{padding-left:4px;}
.wwh-karta:hover .wwh-link{color:#0d1240;}

/* Kolory wnętrza kafla przestawione z białych na ciemne, bo tło jest jasne. */
.wwh-faza{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:12px;
	border-bottom:1px solid rgba(187,154,87,.35);}
.wwh-faza-ic{font-size:26px;color:#b3922e;line-height:1;}
.wwh-faza strong{display:block;font-size:16px;color:#0d1240;font-weight:700;margin-bottom:2px;}
.wwh-faza span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a87a0;}
.wwh-niebo{margin:0;}
/* flex-wrap, bo wyjaśnienie wchodzi jako trzeci element wiersza i ma zająć
   pełną szerokość pod nazwą planety i jej pozycją. */
.wwh-niebo div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;
	padding:10px 0;border-bottom:1px solid rgba(187,154,87,.22);}
.wwh-niebo div:last-child{border-bottom:none;padding-bottom:0;}
.wwh-niebo dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a87a0;margin:0;}
.wwh-niebo dd{font-size:12.5px;color:#0d1240;margin:0;font-weight:600;}

/* Wyjaśnienia: drobniejsze i stonowane, żeby nie konkurowały z liczbami,
   ale nadal czytelne. To one niosą treść dla kogoś, kto pierwszy raz
   otwiera horoskop, i to je indeksuje wyszukiwarka. */
.wwh-niebo dd.wwh-niebo-opis{flex-basis:100%;font-size:12px;line-height:1.6;
	color:#5a5870;font-weight:400;margin:5px 0 0;}
.wwh-wyjasnienie{font-size:12.5px;line-height:1.65;color:#5a5870;margin:0 0 14px;}

.wwh-dopasowania{list-style:none;margin:0;padding:0;}
.wwh-dopasowania li + li{margin-top:6px;padding-top:12px;border-top:1px solid #f0eef6;}
.wwh-dopasowania a{display:flex;gap:12px;align-items:center;text-decoration:none;}
.wwh-mini{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
	background:radial-gradient(circle at 50% 32%,#1c2559,#0d1240 74%);box-shadow:0 0 0 1px #c9a961;
	font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",Georgia,serif !important;
	font-variant-emoji:text;font-size:17px;color:#d8b15e;}
.wwh-dopasowania strong{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#0d1240;font-weight:700;}
.wwh-dopasowania em{font-style:normal;font-size:12.5px;color:#8a87a0;}
.wwh-dopasowania a:hover strong{color:#b3922e;}
/* Powód dopasowania: dlaczego akurat ten znak. Wcięcie równe szerokości
   medalionu z odstępem, żeby tekst zaczynał się pod nazwą znaku, a nie
   pod kółkiem. */
.wwh-dop-czemu{font-size:12px;line-height:1.6;color:#5a5870;margin:6px 0 0;padding-left:50px;}

/* ── Inne znaki ───────────────────────────────────────────────── */
/* Pas „Sprawdź inny znak" na całą szerokość zszedł do kolumny bocznej
   (2026-08-19). Pod kaflami bocznymi zostawało kilkaset pikseli pustki obok
   FAQ i to właśnie miejsce zajmuje teraz siatka znaków, po trzy w rzędzie.
   Tło kafla musi zostać #faf7f0, bo tym kolorem malowany jest pierścień
   wokół medalionu w box-shadow. */
.wwh-inne-side{background:#faf7f0;border:1px solid #ece5d6;border-radius:14px;padding:20px 16px 16px;}
.wwh-inne-side h2{font-size:19px;font-weight:700;color:#0d1240;margin:0 0 16px;letter-spacing:-.2px;}
.wwh-inne-side h2 em{font-style:normal;color:#b3922e;}
.wwh-inne-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 6px;}
.wwh-inny{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;padding:6px 2px;}
.wwh-inny-glif{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	background:radial-gradient(circle at 50% 32%,#1c2559,#0d1240 74%);
	box-shadow:0 0 0 1px #c9a961,0 0 0 3px #faf7f0,0 0 0 4px rgba(201,169,97,.3);
	font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",Georgia,serif !important;
	font-variant-emoji:text;font-size:22px;color:#d8b15e;transition:box-shadow .18s ease,transform .18s ease;}
.wwh-inny-nazwa{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#0d1240;font-weight:700;text-align:center;}
.wwh-inny:hover .wwh-inny-glif{transform:scale(1.07);color:#f2d79a;
	box-shadow:0 0 0 1px #f2d79a,0 0 0 3px #faf7f0,0 0 0 5px rgba(216,177,94,.8),0 0 18px rgba(216,177,94,.45);}
.wwh-inny:hover .wwh-inny-nazwa{color:#b3922e;}

/* ── O znaku i metoda ─────────────────────────────────────────── */
/* Opis znaku i nota o metodzie stały wcześniej pod siatką jako osobny pas
   z własnymi dwiema kolumnami (2026-08-19). Kolumna boczna kończyła się niżej
   niż FAQ, więc nad tym pasem otwierała się pusta luka. Teraz opis dopisuje się
   do lewej kolumny pod FAQ, a metoda z gwiazdozbiorem do kolumny bocznej, więc
   obie kolumny biegną bez przerw i kończą się mniej więcej równo. */
.wwh-kolumna > .wwh-oznaku{padding:34px 0 0;}
.wwh-side > .wwh-oznaku{padding:0;}
.wwh-oznaku h2{font-size:26px;line-height:1.25;font-weight:700;color:#0d1240;margin:0 0 14px;letter-spacing:-.2px;}
.wwh-oznaku h2 em{font-style:normal;color:#b3922e;}
.wwh-oznaku p{font-size:15px;line-height:1.8;color:#5a5870;margin:0 0 14px;}
.wwh-oznaku a{color:#b3922e;text-decoration:none;border-bottom:1px solid rgba(179,146,46,.4);}
.wwh-oznaku a:hover{color:#0d1240;border-color:#0d1240;}
/* Nota o metodzie bez ramki i tła (2026-08-19): pudło rozciągało się na całą
   wysokość sąsiedniej kolumny i większość jego powierzchni była pusta.
   Zostaje sam tekst, oddzielony złotą kreską u góry, żeby nadal czytał się
   jako komentarz z boku, a nie jako ciąg dalszy opisu znaku. */
.wwh-metoda{background:none;border:0;border-top:1px solid rgba(187,154,87,.45);
	padding:18px 0 0;}
.wwh-metoda p{font-size:14px;}

/* ── FAQ ──────────────────────────────────────────────────────── */
/* W siatce treści FAQ nie jest już pasem pełnej szerokości, więc traci tło,
   kreskę i pionowe dopełnienie pasa. Wewnętrzny .wwh-in też trzeba wyzerować,
   bo ustawia własny max-width i marginesy, a stoi już w kontenerze. */
.wwh-kolumna > .wwh-faq{background:none;padding:34px 0 0;}
.wwh-kolumna > .wwh-faq > .wwh-in{max-width:none;margin:0;padding:0;}
.wwh-faq-top{margin-bottom:22px;}
.wwh-faq-top h2{font-size:24px;}
.wwh-faq-top h2{font-size:28px;font-weight:700;color:#0d1240;margin:0;letter-spacing:-.2px;}
.wwh-faq-top h2 em{font-style:normal;color:#b3922e;}
.wwh-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.wwh-faq-item{background:#fff;border:1px solid #ece5d6;padding:22px 24px;}
.wwh-faq-q{display:flex;gap:10px;align-items:baseline;margin-bottom:10px;}
/* Emotka przy pytaniu. Krój systemowy wymuszony, bo globalny plain-font.css
   podstawiłby bezszeryfowy, w którym część tych znaków nie istnieje. */
.wwh-faq-emo{font-size:16px;line-height:1;flex-shrink:0;
	font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;}
.wwh-faq-q .num{font-size:11px;font-weight:700;color:#d8b15e;letter-spacing:.1em;flex-shrink:0;}
.wwh-faq-q .qtext{font-size:16.5px;font-weight:700;color:#0d1240;line-height:1.35;}
.wwh-faq-a p{font-size:14px;line-height:1.75;color:#5a5870;margin:0;padding-left:25px;}
.wwh-faq-a a{color:#b3922e;text-decoration:none;border-bottom:1px solid rgba(179,146,46,.4);}
.wwh-faq-a a:hover{color:#0d1240;border-color:#0d1240;}

/* ── Responsywność ────────────────────────────────────────────── */
@media (max-width:1100px){
	.wwh-hero-grid{grid-template-columns:110px minmax(0,1fr);gap:24px;}
	.wwh-hero-nav{grid-column:1 / -1;text-align:left;}
	.wwh-days,.wwh-okresy{justify-content:flex-start;}
	.wwh-hero-medal{width:104px;height:104px;}
	.wwh-glyph{font-size:44px;}
	.wwh-body{grid-template-columns:minmax(0,1fr);gap:40px;}
	/* Jedna kolumna: kontener lewej kolumny znika z układu, a kolejność
	   ustawiamy wprost, żeby bok wszedł między prognozę a FAQ, tak jak wcześniej. */
	.wwh-kolumna{display:contents;}
	.wwh-tresc{order:1;}
	.wwh-side{order:2;}
	.wwh-faq{order:3;}
	.wwh-kolumna > .wwh-oznaku{order:4;}
	.wwh-oceny-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.wwh-atrybuty{grid-column:1 / -1;padding-left:0;border-left:none;padding-top:16px;border-top:1px solid #e5ddcb;}
	.wwh-inne-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (max-width:760px){
	.wwh-in{padding:0 20px;}
	.wwh-hero h1{font-size:33px;}
	/* Cztery okresy nie mieszczą się w jednym rzędzie na telefonie: bez zawijania
	   ostatni („Roczny") wychodził poza ekran i był nieklikalny. */
	.wwh-days,.wwh-okresy{gap:14px 18px;}
	.wwh-day,.wwh-okres{font-size:11.5px;letter-spacing:.1em;}
	.wwh-oceny-grid{grid-template-columns:minmax(0,1fr);gap:18px;}
	.wwh-godziny-grid{grid-template-columns:minmax(0,1fr);}
	.wwh-faq-grid{grid-template-columns:minmax(0,1fr);}
	.wwh-inne-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
	.wwh-rada p{font-size:17px !important;}
}
@media (prefers-reduced-motion:reduce){
	.wwh-inny-glif{transition:none;}
	.wwh-inny:hover .wwh-inny-glif{transform:none;}
}

/* ── Układy planet do znaku ───────────────────────────────────── */
.wwh-retro{display:inline-block;margin-left:5px;font-size:10px;font-weight:700;color:#e08a5a;
	letter-spacing:.05em;vertical-align:super;}
.wwh-aspekty{list-style:none;margin:0;padding:0;}
.wwh-asp{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding:11px 0;border-bottom:1px solid #f0eef6;}
.wwh-asp-opis{flex-basis:100%;font-size:12px;line-height:1.6;color:#5a5870;margin-top:5px;}
.wwh-asp:last-child{border-bottom:none;}
.wwh-asp-pl{font-size:12.5px;font-weight:700;color:#0d1240;min-width:64px;}
.wwh-asp-nazwa{font-size:12.5px;color:#5a5870;flex:1;}
.wwh-asp-orb{font-size:11px;color:#a5a2b5;white-space:nowrap;}
.wwh-asp--dobry .wwh-asp-pl{color:#3f7a52;}
.wwh-asp--trudny .wwh-asp-pl{color:#b05656;}

/* Podnagłówki w bloku o znaku. */
.wwh-oznaku-h3{font-size:19px;font-weight:700;color:#0d1240;margin:26px 0 10px;letter-spacing:-.1px;}
/* Rozwinięcie dalszej części opisu znaku (2026-08-19). Kanon przycisków na
   serwisie to tekstowy link ze złotym akcentem, więc summary dostaje kreskę
   i strzałkę z kresek, a nie pigułkę. Marker listy trzeba zdjąć dwa razy:
   list-style dla Firefoksa i ::-webkit-details-marker dla Safari. */
.wwh-wiecej{margin:24px 0 20px;}
.wwh-wiecej > summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
	font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0d1240;
	padding-bottom:5px;border-bottom:1px solid rgba(187,154,87,.55);transition:color .2s;}
.wwh-wiecej > summary::-webkit-details-marker{display:none;}
.wwh-wiecej > summary::after{content:"";width:7px;height:7px;flex-shrink:0;
	border-right:1.6px solid #b88a3a;border-bottom:1.6px solid #b88a3a;
	transform:translateY(-2px) rotate(45deg);transition:transform .2s;}
.wwh-wiecej[open] > summary::after{transform:translateY(1px) rotate(225deg);}
.wwh-wiecej > summary:hover{color:#b88a3a;}
.wwh-wiecej-tresc > .wwh-oznaku-h3:first-child{margin-top:20px;}
@media (prefers-reduced-motion:reduce){.wwh-wiecej > summary,.wwh-wiecej > summary::after{transition:none;}}

/* Zakres dat pod nazwą znaku w bloku „Sprawdź inny znak”. Ujemny margines
   ściąga je pod nazwę, bo wspólny gap 9px w .wwh-inny jest dobrany pod glif.
   Kreska w zakresie dat to świadomy wyjątek od zasady bez myślników. */
.wwh-inny-daty{margin-top:-5px;font-size:10px;color:#8a87a0;font-weight:600;text-align:center;
	font-variant-numeric:tabular-nums;white-space:nowrap;}
.wwh-inny:hover .wwh-inny-daty{color:#b3922e;}

/* ── Kalendarz dowolnego dnia (hero) ──────────────────────────────
   Panel to element <details>, więc rozwija się bez JavaScriptu, a skrypt
   tylko przewija miesiące. Stoi między przełącznikiem dni a przełącznikiem
   okresów, czyli tam, gdzie czytelniczka szuka wyboru daty. Wyzwalacz jest
   tekstowym linkiem ze złotą strzałką, zgodnie z kanonem serwisu.

   Panel jest warstwą NAD treścią, żeby otwarcie kalendarza nie przesuwało
   niczego na stronie. Przeszkadza w tym overflow:hidden na .wwh-hero, które
   ucinało panel w połowie siatki, więc zdejmujemy je na czas otwarcia: klasą
   ze skryptu, a bez skryptu regułą :has(). Dwie osobne reguły, bo przeglądarka
   bez :has() odrzuciłaby całą listę selektorów razem z klasą. */
.wwh-hero--kal{overflow:visible !important;}
.wwh-hero:has(.wwh-kal[open]){overflow:visible;}
.wwh-kal{position:relative;display:inline-block;margin:0 0 14px;text-align:left;}
.wwh-kal-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
	font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
	color:#8a87a0;padding-bottom:5px;border-bottom:1px solid transparent;
	transition:color .18s ease,border-color .18s ease;list-style:none;}
.wwh-kal-toggle::-webkit-details-marker{display:none;}
.wwh-kal-toggle::marker{content:"";}
.wwh-kal-toggle:hover{color:#0d1240;border-color:#e2d5b0;}
.wwh-kal-toggle span{color:#b3922e;transition:transform .18s ease;}
.wwh-kal[open] .wwh-kal-toggle{color:#b3922e;border-color:#b3922e;}
.wwh-kal[open] .wwh-kal-toggle span{transform:rotate(90deg);}

.wwh-kal-panel{position:absolute;z-index:40;top:calc(100% + 12px);right:0;width:276px;
	background:#fff;border:1px solid #e5ddcb;box-shadow:0 18px 40px rgba(13,18,64,.13);
	padding:14px 14px 10px;}
.wwh-kal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
	margin-bottom:10px;}
.wwh-kal-mies{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
	font-weight:700;color:#0d1240;}
.wwh-kal-nav{font-size:20px;line-height:1;color:#b3922e;text-decoration:none;cursor:pointer;
	background:none;border:0;padding:0 6px;font-family:inherit;}
.wwh-kal-nav:hover{color:#0d1240;}
.wwh-kal-nav.is-poza,.wwh-kal-nav:disabled{color:#dcd7c6;cursor:default;pointer-events:none;}

.wwh-kal-siatka{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.wwh-kal-dn{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
	color:#b3922e;text-align:center;padding-bottom:4px;}
.wwh-kal-d{display:flex;align-items:center;justify-content:center;height:30px;
	font-size:12.5px;font-weight:600;color:#0d1240;text-decoration:none;
	font-variant-numeric:tabular-nums;transition:background .14s ease,color .14s ease;}
a.wwh-kal-d:hover{background:#faf7f0;color:#b3922e;}
.wwh-kal-d.is-dzis{box-shadow:inset 0 0 0 1px #d8b15e;}
.wwh-kal-d.is-akt{background:#0d1240;color:#fff;}
a.wwh-kal-d.is-akt:hover{background:#0d1240;color:#fff;}
.wwh-kal-d.is-poza{color:#cbc7d6;cursor:default;}
.wwh-kal-stopka{margin:10px 0 0;font-size:10.5px;line-height:1.5;color:#8a87a0;
	border-top:1px solid #f0ebdd;padding-top:8px;}

@media (max-width:1100px){
	/* Hero-nav schodzi do lewej krawędzi, więc panel też. */
	.wwh-kal-panel{right:auto;left:0;}
}
@media (max-width:760px){
	.wwh-kal-toggle{font-size:11.5px;letter-spacing:.1em;}
	.wwh-kal-panel{width:min(290px,calc(100vw - 60px));}
}
/* ── Gwiazdozbiór znaku (kolumna „Jak powstaje ta prognoza") ───────
   Kolejność animacji: zapalają się gwiazdy, łączą się linie, na końcu
   wchodzi rysunek postaci. Stan domyślny jest WIDOCZNY: klasę `is-arm`
   dokłada JS, więc bez JS zostaje statyczny obrazek zamiast pustki. */
.wwh-konst{margin:26px 0 0;padding:0;}
.wwh-konst-ramka{display:block;padding:14px 12px 10px;border-radius:14px;
	background:linear-gradient(160deg,#fffdf9 0%,#f5f2ea 100%);
	border:1px solid rgba(187,154,87,.5);}
.wwh-k-svg{display:block;width:100%;height:auto;overflow:visible;}
.wwh-konst-podpis{margin:12px 2px 0;text-align:left;font-size:12.5px;line-height:1.65;color:#8a87a0;}

.wwh-k-linie line{stroke:#b3922e;stroke-width:.9;opacity:.5;}
.wwh-k-gwiazda{fill:#b3922e;}
.wwh-k-poswiata{fill:#b3922e;opacity:.12;}
.wwh-k-rys{opacity:.4;}
.wwh-k-rys path,.wwh-k-rys circle{fill:none;stroke:#0d1240;stroke-width:1.4;
	stroke-linecap:round;stroke-linejoin:round;}
.wwh-k-rys .wwh-k-kropka{fill:#0d1240;stroke:none;}

/* stan uzbrojony: wszystko schowane, czeka na wejście w kadr */
.wwh-konst.is-arm .wwh-k-linie line{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;}
.wwh-konst.is-arm .wwh-k-rys{opacity:0;}
.wwh-konst.is-arm .wwh-k-rys path,
.wwh-konst.is-arm .wwh-k-rys circle:not(.wwh-k-kropka){stroke-dasharray:1;stroke-dashoffset:1;}
.wwh-konst.is-arm .wwh-k-gwiazda,
.wwh-konst.is-arm .wwh-k-poswiata{opacity:0;}

.wwh-konst.is-arm.is-on .wwh-k-gwiazda{transform-box:fill-box;transform-origin:50% 50%;
	animation:wwh-k-star .55s cubic-bezier(.2,.8,.3,1) forwards,
	          wwh-k-tw 4.2s ease-in-out infinite;
	animation-delay:calc(var(--i)*.1s),calc(3.4s + var(--i)*.37s);}
.wwh-konst.is-arm.is-on .wwh-k-poswiata{animation:wwh-k-glow .9s ease-out forwards;
	animation-delay:calc(var(--i)*.1s);}
.wwh-konst.is-arm.is-on .wwh-k-linie line{animation:wwh-k-rysuj .6s ease forwards;
	animation-delay:calc(1.05s + var(--i)*.1s);}
.wwh-konst.is-arm.is-on .wwh-k-rys{animation:wwh-k-wejdz .9s ease forwards;animation-delay:2.15s;}
.wwh-konst.is-arm.is-on .wwh-k-rys path,
.wwh-konst.is-arm.is-on .wwh-k-rys circle:not(.wwh-k-kropka){
	animation:wwh-k-rysuj 1.15s ease forwards;animation-delay:calc(2.15s + var(--i)*.09s);}

@keyframes wwh-k-star{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:scale(1);}}
@keyframes wwh-k-glow{from{opacity:0;}to{opacity:.12;}}
@keyframes wwh-k-tw{0%,100%{opacity:1;}45%{opacity:.5;}}
@keyframes wwh-k-rysuj{from{stroke-dashoffset:1;opacity:0;}
	8%{opacity:1;}to{stroke-dashoffset:0;opacity:1;}}
@keyframes wwh-k-wejdz{from{opacity:0;}to{opacity:.4;}}

@media (prefers-reduced-motion:reduce){
	.wwh-konst.is-arm .wwh-k-linie line,.wwh-konst.is-arm .wwh-k-gwiazda{opacity:1;stroke-dashoffset:0;}
	.wwh-konst.is-arm .wwh-k-poswiata{opacity:.12;}
	.wwh-konst.is-arm .wwh-k-rys{opacity:.4;}
	.wwh-konst.is-arm .wwh-k-rys path,.wwh-konst.is-arm .wwh-k-rys circle{stroke-dashoffset:0;}
	.wwh-konst.is-arm.is-on *{animation:none !important;}
}
@media (max-width:860px){
	.wwh-konst{max-width:420px;}
}

/* Przejscie z bloku „O znaku” na pelny portret znaku (/znaki-zodiaku/<znak>/).
   Kanon tekstowy: granatowy napis, zlote podkreslenie, zlota strzalka
   odjezdzajaca w prawo. Pigulki sa u nas wycofane. */
.wwh-oznaku-cta{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
	font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:#001470;text-decoration:none;border-bottom:1px solid #c9a14a;
	padding:0 0 4px;transition:color .25s;}
.wwh-oznaku-cta:hover{color:#b88a3a;}
.wwh-oznaku-cta svg{color:#b88a3a;transition:transform .25s;}
.wwh-oznaku-cta:hover svg{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){.wwh-oznaku-cta svg{transition:none;}}

/* Testowa podmiana 2026-08-20: zamiast granatowych medalionów z glifem
   stoją gotowe okrągłe ikonki SVG (assets/znaki/). Ikonka ma własne tło,
   więc medalion oddaje tylko wymiar i kształt; pierścienie i gwiazdki
   schodzą. Dotyczy hero, dopasowań i siatki „Sprawdź inny znak". */
.wwh-hero-medal--obraz{background:none;box-shadow:none;}
.wwh-hero-medal--obraz::after{content:none;}
.wwh-hero-medal--obraz img{display:block;width:100%;height:100%;border-radius:50%;}
.wwh-mini--obraz{background:none;box-shadow:none;}
.wwh-mini--obraz img{display:block;width:100%;height:100%;border-radius:50%;}
.wwh-inny-glif--obraz{background:none;
	box-shadow:0 0 0 3px #faf7f0,0 0 0 4px rgba(201,169,97,.3);}
.wwh-inny-glif--obraz img{display:block;width:100%;height:100%;border-radius:50%;}
.wwh-inny:hover .wwh-inny-glif--obraz{box-shadow:0 0 0 3px #faf7f0,
	0 0 0 5px rgba(216,177,94,.8),0 0 18px rgba(216,177,94,.45);}

/* Medalion z glifem (dawne hero) w miejscu gwiazdozbioru, w kolumnie
   „Jak powstaje ta prognoza". Bez kremowej ramki: medal sam ma pierścienie,
   stoi wyśrodkowany, a podpis pod nim zostaje wyrównany do lewej. */
.wwh-konst--medal{text-align:center;}
.wwh-konst--medal .wwh-hero-medal{margin:10px auto 0;}
.wwh-konst--medal .wwh-konst-podpis{text-align:left;}