/* Strony znaków horoskopu (/horoskop-dzienny/{znak}/, /horoskop-na-jutro/{znak}/) na fundamencie strony głównej
   (strona-glowna.css: tokeny, niebo, pasma, sg-h2, sg-btn) i z przyciskiem narzędzi (narzedzia-cta.css). Prefiks hzn-.
   Rytm: noc (hero z paskiem dwóch kartek) → kartka z całym horoskopem → jasny pas: koło albo kalendarz, pozostałe
   znaki, kwestionariusz, pytania. Kroje jak na /darmowe-pytanie-do-wrozki/: nagłówki Cormorant Garamond, tekst
   Poppins. Plik glifu jest w miedzi, a `filter` przebarwia go wszędzie: bordo na papierze (koło, pola, kafle), czerń na
   złocie, biel na bordo, złoto w środku koła. Drobne etykiety w rdzy (kontrast). */

body.hzn-body { background: var(--sg-noc-gleboka); }
.hzn {
    --hzn-kartka: #fbf8f2;
    --hzn-krem: #f4efe6;
    --hzn-krem-2: #ece4d5;
    --hzn-ramka: #f4ecdd;
    --hzn-atrament: #1c1a17;
    --hzn-atrament-2: #5a5248;
    --hzn-linia: #d8ccb4;
    --hzn-zloto: #d4b05a;
    --hzn-zloto-linia: rgba(212, 176, 90, 0.42);
    --hzn-mosiadz: #a47c48;        /* tylko linie i znak plusa, nie drobny tekst */
    --hzn-bordo: #7a2433;
    --hzn-bordo-jasny: #fff1e2;
    --hzn-etykieta: var(--sg-rdza);
    --hzn-glif-bordo: hue-rotate(-32deg) saturate(1.25) brightness(0.72);   /* miedź pliku → bordo, jak na hubie */
    font-family: var(--sg-font-tekst);
    font-size: 1.0625rem;
    line-height: 1.65;
}
.hzn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hzn-ikona { display: block; width: 1em; height: 1em; }
.hzn-glif { display: block; width: 50%; height: auto; }
/* akapity własnych pasm biorą interlinię z otoczenia (1.65 strony, 1.5 kafla i opisu dnia), nie 1.6 z ogólnej reguły motywu; kwestionariusz trzyma swoją */
:where(.hzn-hero, .hzn-odczyt, .hzn-kolumna) p { line-height: inherit; }
.hzn a:focus-visible,
.hzn summary:focus-visible { outline: 3px solid var(--sg-terakota); outline-offset: 4px; }

/* ---------- hero (noc) i pasek dwóch kartek ---------- */
/* okruszki 32 px pod nagłówkiem serwisu (20 px na telefonie), jak pod paskiem makiety */
.hzn-hero {
    padding-block: 2rem 0;
    background: radial-gradient(80% 55% at 50% 0%, rgba(36, 21, 54, 0.55), transparent 72%);
}
.hzn-hero::before { content: ''; position: absolute; inset: 0; background: var(--sg-ziarno); opacity: 0.35; pointer-events: none; }
.sg-wrap.hzn-hero__wnetrze { max-width: 51.25rem; text-align: center; }
.hzn-hero__okruszki { margin: 0 0 0.875rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; color: rgba(244, 239, 230, 0.62); }
.hzn-hero__okruszki a { color: var(--sg-zloto-jasne); text-decoration: none; }
.hzn-hero__okruszki a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hzn-hero__okruszki span { margin: 0 0.375rem; opacity: 0.6; }
.hzn-hero__h1 {
    margin: 0;
    font: 500 clamp(2.25rem, 4.8vw, 3.625rem)/1.05 var(--sg-font-naglowek);
    letter-spacing: -0.005em;
    color: var(--sg-papier);
    text-wrap: balance;
}
/* data w drugiej linii: złoty połysk (blok, nie inline-block — inaczej `background-clip: text` nie maluje) */
.hzn-hero__data {
    display: block;
    font-style: italic;
    font-weight: 400;
    color: var(--sg-zloto-jasne);
    background: linear-gradient(100deg, #a8853f 0%, #e8c978 30%, #fff1c8 45%, #e8c978 60%, #a8853f 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hzn-polysk 14s ease-in-out infinite;
}
@keyframes hzn-polysk { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.hzn-hero__kreska { display: block; width: 56px; height: 1px; margin: 1.25rem auto 0; background: var(--hzn-zloto); opacity: 0.85; }
.hzn-hero__lede { max-width: 44ch; margin: 1rem auto 0; font-size: clamp(1rem, 2.2vw, 1.15625rem); color: rgba(244, 239, 230, 0.74); text-wrap: balance; }

.hzn-dni { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 0.875rem; margin: 2.125rem auto 0; }
.hzn-dni .hzn-dni__kartka {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 8.25rem;
    padding: 0 0 0.75rem;
    border-radius: 4px 4px 0 0;
    background: #e9e0ce;
    color: var(--hzn-atrament);
    text-decoration: none;
    box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, 0.7);
    opacity: 0.78;
    transform: translateY(10px);
    transition: transform 0.35s, opacity 0.35s;
}
.hzn-dni a.hzn-dni__kartka:hover { opacity: 1; transform: translateY(2px); }
.hzn-dni__pas { align-self: stretch; margin-bottom: 0.375rem; padding: 0.3125rem 0; border-radius: 4px 4px 0 0; background: var(--hzn-bordo); font-size: 0.625rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; color: var(--hzn-bordo-jasny); }
.hzn-dni__nr { font-size: 2.375rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--hzn-bordo); }
.hzn-dni__miesiac { font: italic 500 1.125rem/1.2 var(--sg-font-naglowek); }
.hzn-dni__etykieta { margin-top: 0.375rem; font-size: 0.65625rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hzn-etykieta); }
.hzn-dni .hzn-dni__kartka.is-biezaca,
.hzn-dni a.hzn-dni__kartka.is-biezaca:hover { width: 9.375rem; padding-bottom: 1rem; background: var(--hzn-kartka); opacity: 1; transform: none; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(201, 168, 76, 0.5); }
.hzn-dni__kartka.is-biezaca .hzn-dni__nr { font-size: 3rem; }

/* ---------- cały horoskop: tabliczka i rozdziały ---------- */
.hzn-odczyt { position: relative; border-top: 1px solid rgba(201, 168, 76, 0.4); background-color: var(--hzn-kartka); background-image: var(--sg-ziarno); color: var(--hzn-atrament); }
.hzn-odczyt__wnetrze { max-width: 67.5rem; margin: 0 auto; padding: 3rem 1rem 3.75rem; }
.hzn-tabliczka { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.hzn-tabliczka__glif { flex: none; display: grid; place-items: center; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: var(--hzn-zloto); }
.hzn-tabliczka__glif .hzn-glif { filter: brightness(0); }
.hzn-tabliczka__opis { margin: 0; }
.hzn-tabliczka__nazwa { display: block; font: 500 1.75rem/1.1 var(--sg-font-naglowek); }
.hzn-tabliczka__meta { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--hzn-atrament-2); }
.hzn-odczyt__dopisek { max-width: 35rem; margin: 0.875rem auto 0; padding: 0.5rem 0.75rem; border-left: 2px solid var(--hzn-zloto); background: var(--hzn-ramka); font: italic 500 1.1875rem/1.4 var(--sg-font-naglowek); color: var(--hzn-atrament-2); }
.hzn-rozdzialy { margin-top: 1.75rem; }
.hzn-rozdzial { display: grid; gap: 0.625rem; padding: 1.875rem 0; border-top: 1px solid var(--hzn-linia); }
.hzn-rozdzial__h { display: flex; align-items: center; gap: 0.625rem; margin: 0; font: 600 0.75rem/1.2 var(--sg-font-tekst); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hzn-etykieta); }
.hzn-rozdzial__ikona { flex: none; display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border: 1px solid var(--hzn-zloto-linia); border-radius: 50%; font-size: 1.1875rem; color: var(--hzn-bordo); }
.hzn-rozdzial__tresc p { margin: 0; font-size: 1.21875rem; line-height: 1.75; text-wrap: pretty; }
.hzn-rozdzial--ruch .hzn-rozdzial__tresc { padding: 1.125rem 1.25rem; border-left: 3px solid var(--hzn-zloto); border-radius: 0 8px 8px 0; background: var(--hzn-ramka); }
.hzn-rozdzial__glif { float: left; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0.25rem 0.875rem 0.25rem 0; border-radius: 50%; background: var(--hzn-bordo); }
.hzn-rozdzial__glif .hzn-glif { filter: brightness(0) invert(1); }
.hzn-rozdzial__link { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--hzn-bordo); text-decoration: none; }
.hzn-rozdzial__link:hover { color: var(--hzn-bordo); text-decoration: underline; text-underline-offset: 3px; }
/* dolny margines akapitu z renderu makiety: pod przyciskiem 17 + 60 px do końca pasma */
.hzn-odczyt__cta { display: flex; justify-content: center; margin: 1.875rem 0 1.0625rem; }
/* etykieta złamana na dwie linie (poniżej 390 px) stoi do lewej, jak w makiecie i na kartce hubu */
.hzn-odczyt__cta .sg-btn { text-align: left; }
.hzn-odczyt__brak { margin: 1.625rem 0 0; font: italic 500 1.4375rem/1.4 var(--sg-font-naglowek); text-align: center; }
.hzn-odczyt__brak a { display: inline-block; margin-top: 0.5rem; font: 600 0.9375rem/1.3 var(--sg-font-tekst); color: var(--hzn-bordo); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- jasny pas: sekcje ---------- */
.hzn-papier {
    padding-block: 1.5rem;
    background-color: var(--hzn-krem);
    background-image: var(--sg-linia-zlota), var(--sg-ziarno);
    background-size: min(560px, 70%) 1px, auto;
    background-position: center top, 0 0;
    background-repeat: no-repeat, repeat;
    color: var(--hzn-atrament);
}
.sg-wrap.hzn-kolumna { width: min(100% - 2rem, 65.5rem); }
/* kolumna przed kwestionariuszem zamyka się jak pasmo makiety: 24 px pod „pozostałymi znakami”, potem złota kreska */
.hzn-papier > .hzn-kolumna:first-child { padding-bottom: 1.5rem; }
.hzn-sekcja { padding: 3.75rem 0; border-top: 1px solid var(--hzn-linia); scroll-margin-top: 5rem; }
.hzn-sekcja--pierwsza { padding-top: 0.5rem; border-top: 0; }
.hzn-kolumna .hzn-h2 { max-width: 30ch; margin: 0 0 1rem; font-size: clamp(1.875rem, 4.4vw, 2.75rem); line-height: 1.1; color: var(--hzn-atrament); text-wrap: wrap; }
.hzn-kolumna p { margin: 0 0 1rem; text-wrap: pretty; }
.hzn-kolumna p a { color: var(--hzn-bordo); text-decoration: underline; text-decoration-color: rgba(122, 36, 51, 0.35); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- koło znaku ---------- */
.hzn-kolo { position: relative; width: min(100%, 27.5rem); aspect-ratio: 1; margin: 1.125rem auto 2.125rem; }
.hzn-kolo__rysunek { display: block; width: 100%; height: 100%; overflow: visible; }
.hzn-kolo__pole { fill: var(--hzn-kartka); stroke: var(--hzn-linia); stroke-width: 1; }
.hzn-kolo__pole.is-dzis { fill: #f3e2b3; }
.hzn-kolo__pierscien { fill: none; stroke: var(--hzn-zloto); stroke-width: 1.2; }
.hzn-kolo__etykieta { font: 500 9.5px/1 var(--sg-font-tekst); letter-spacing: 0.02em; fill: var(--hzn-atrament-2); text-anchor: middle; dominant-baseline: central; }
.hzn-kolo__srodek { fill: #0c0a18; }
.hzn-kolo__nazwa { font: 600 9px/1 var(--sg-font-tekst); letter-spacing: 0.2em; fill: rgba(244, 239, 230, 0.78); text-anchor: middle; }
.hzn-kolo__tarcza { fill: var(--hzn-krem); filter: drop-shadow(0 0 6px rgba(232, 201, 120, 0.9)); }
.hzn-kolo__poswiata { fill: none; stroke: #e8c978; stroke-width: 1.2; opacity: 0.8; transform-box: fill-box; transform-origin: center; animation: hzn-poswiata 3.2s ease-in-out infinite; }
@keyframes hzn-poswiata { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.35); opacity: 0.2; } }
/* Księżyc stoi na polu dnia: obrót wokół środka koła o 30° na pole. Skrypt tylko odgrywa dojście od pola 1. */
.hzn-kolo__ksiezyc { transform: rotate(var(--hzn-kat, 0deg)); }
.hzn-kolo.is-czeka .hzn-kolo__ksiezyc { transform: rotate(0deg); }
.hzn-kolo.is-ruch .hzn-kolo__ksiezyc { animation: hzn-ksiezyc 1.8s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
@keyframes hzn-ksiezyc { from { transform: rotate(0deg); } to { transform: rotate(var(--hzn-kat, 0deg)); } }
.hzn-kolo--dzis-2 { --hzn-kat: 30deg; }
.hzn-kolo--dzis-3 { --hzn-kat: 60deg; }
.hzn-kolo--dzis-4 { --hzn-kat: 90deg; }
.hzn-kolo--dzis-5 { --hzn-kat: 120deg; }
.hzn-kolo--dzis-6 { --hzn-kat: 150deg; }
.hzn-kolo--dzis-7 { --hzn-kat: 180deg; }
.hzn-kolo--dzis-8 { --hzn-kat: 210deg; }
.hzn-kolo--dzis-9 { --hzn-kat: 240deg; }
.hzn-kolo--dzis-10 { --hzn-kat: 270deg; }
.hzn-kolo--dzis-11 { --hzn-kat: 300deg; }
.hzn-kolo--dzis-12 { --hzn-kat: 330deg; }
/* glify na pierścieniu: promień 168 z 210, czyli 40% szerokości od środka */
.hzn-kolo .hzn-kolo__glif { position: absolute; width: 5%; height: auto; transform: translate(-50%, -50%); pointer-events: none; filter: var(--hzn-glif-bordo); }
.hzn-kolo .hzn-kolo__glif.is-dzis { filter: brightness(0); }
.hzn-kolo__glif--1 { left: 50%; top: 10%; }
.hzn-kolo__glif--2 { left: 70%; top: 15.36%; }
.hzn-kolo__glif--3 { left: 84.64%; top: 30%; }
.hzn-kolo__glif--4 { left: 90%; top: 50%; }
.hzn-kolo__glif--5 { left: 84.64%; top: 70%; }
.hzn-kolo__glif--6 { left: 70%; top: 84.64%; }
.hzn-kolo__glif--7 { left: 50%; top: 90%; }
.hzn-kolo__glif--8 { left: 30%; top: 84.64%; }
.hzn-kolo__glif--9 { left: 15.36%; top: 70%; }
.hzn-kolo__glif--10 { left: 10%; top: 50%; }
.hzn-kolo__glif--11 { left: 15.36%; top: 30%; }
.hzn-kolo__glif--12 { left: 30%; top: 15.36%; }
.hzn-kolo .hzn-kolo__glif--srodek { left: 50%; top: 47.4%; width: 8.5%; filter: brightness(0) invert(0.79) sepia(0.72) saturate(3) brightness(0.9); }

.hzn-obszary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.hzn-obszar { position: relative; display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 0.875rem 0.875rem; border: 1px solid var(--hzn-linia); border-radius: 8px; background: var(--hzn-kartka); font-size: 0.90625rem; line-height: 1.5; color: var(--hzn-atrament-2); }
.hzn-obszar__gora { display: flex; align-items: center; gap: 0.5rem; font-size: 0.65625rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hzn-etykieta); }
.hzn-obszar__glif { flex: none; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 1px solid var(--hzn-zloto-linia); border-radius: 50%; }
.hzn-obszar__glif .hzn-glif { filter: var(--hzn-glif-bordo); }
.hzn-obszar__tytul { margin: 0; font: 500 1.375rem/1.15 var(--sg-font-naglowek); color: var(--hzn-atrament); }
.hzn-kolumna .hzn-obszar__zdanie { margin: 0; }
.hzn-obszar.is-dzis { border-color: var(--hzn-zloto); background: #f7ebcb; box-shadow: 0 12px 28px -16px rgba(28, 26, 23, 0.45); }
.hzn-obszar.is-dzis .hzn-obszar__glif { border-color: var(--hzn-zloto); background: var(--hzn-zloto); }
.hzn-obszar.is-dzis .hzn-glif { filter: brightness(0); }
.hzn-obszar.is-dzis .hzn-obszar__gora { padding-right: 3rem; }
.hzn-obszar__dzis { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.125rem 0.4375rem; border-radius: 999px; background: var(--hzn-bordo); font-size: 0.625rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hzn-bordo-jasny); }

/* ---------- kalendarz znaku ---------- */
.hzn-kalendarz { display: grid; gap: 1.75rem; }
.hzn-miesiac { max-width: 35rem; }
.hzn-miesiac__siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.hzn-miesiac__dzien-tygodnia { padding: 0.25rem 0; font-size: 0.65625rem; font-weight: 600; line-height: 1; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; color: var(--hzn-atrament-2); }
/* Barwy dnia idą przez zmienne: reguły przycisków Storefronta (także :hover) biją pojedynczą klasę. */
.hzn-miesiac__dzien { --hzn-dzien-tlo: var(--hzn-kartka); --hzn-dzien-brzeg: var(--hzn-linia); --hzn-dzien-kolor: var(--hzn-atrament); }
.hzn-miesiac .hzn-miesiac__dzien,
.hzn-miesiac .hzn-miesiac__dzien:hover,
.hzn-miesiac .hzn-miesiac__dzien:focus,
.hzn-miesiac .hzn-miesiac__dzien:active {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hzn-dzien-brzeg);
    border-radius: 8px;
    background: var(--hzn-dzien-tlo);
    box-shadow: none;
    font: 500 0.9375rem/1 var(--sg-font-tekst);
    letter-spacing: 0;
    text-shadow: none;
    text-transform: none;
    color: var(--hzn-dzien-kolor);
    cursor: pointer;
}
.hzn-miesiac .hzn-miesiac__glif { display: block; width: 0.75rem; height: auto; filter: brightness(0); opacity: 0.62; }
.hzn-miesiac .hzn-miesiac__dzien--pusty { visibility: hidden; }
.hzn-miesiac .hzn-miesiac__dzien--milosny { --hzn-dzien-tlo: #f7e4e6; --hzn-dzien-brzeg: #e7bec4; }
.hzn-miesiac .hzn-miesiac__dzien--twoj { --hzn-dzien-tlo: var(--hzn-zloto); --hzn-dzien-brzeg: var(--hzn-zloto); --hzn-dzien-kolor: #1a1406; }
.hzn-miesiac .hzn-miesiac__dzien--twoj .hzn-miesiac__glif { opacity: 1; }
.hzn-miesiac .hzn-miesiac__dzien--brak[disabled] { --hzn-dzien-tlo: transparent; --hzn-dzien-kolor: #b9ae9b; opacity: 1; cursor: default; }
.hzn-miesiac__dzien--now::after,
.hzn-miesiac__dzien--pelnia::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; }
.hzn-miesiac__dzien--now::after { background: var(--hzn-atrament); box-shadow: 0 0 0 1.5px var(--hzn-kartka); }
.hzn-miesiac__dzien--pelnia::after { background: #fff; box-shadow: 0 0 0 1.5px var(--hzn-mosiadz); }
.hzn-miesiac .hzn-miesiac__dzien--jutro { outline: 2px solid var(--hzn-bordo); outline-offset: 2px; }
.hzn-miesiac .hzn-miesiac__dzien.is-aktywny { box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.45); }
.hzn-miesiac .hzn-miesiac__dzien:focus-visible { outline: 3px solid var(--sg-noc); outline-offset: 3px; }
/* opis dnia przylega do siatki, 16 px zostaje pod nim: tak stoi w renderze makiety */
.hzn-miesiac__info { min-height: 3.2em; margin: 0 0 1rem; padding: 0.625rem 0.875rem; border-left: 2px solid var(--hzn-zloto); background: var(--hzn-kartka); font-size: 0.9375rem; line-height: 1.5; }
.hzn-kolumna .hzn-miesiac__opis { margin: 0; }
.hzn-miesiac__opis[hidden] { display: none; }
.hzn-legenda { display: grid; gap: 0.625rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.5; }
.hzn-legenda__pozycja { display: grid; grid-template-columns: 1.375rem 1fr; gap: 0.625rem; align-items: start; }
.hzn-legenda__znak { display: block; width: 1.125rem; height: 1.125rem; margin-top: 2px; border: 1px solid var(--hzn-linia); border-radius: 5px; background: var(--hzn-kartka); }
.hzn-legenda__znak--twoje { border-color: var(--hzn-zloto); background: var(--hzn-zloto); }
.hzn-legenda__znak--milosne { border-color: #e7bec4; background: #f7e4e6; }
.hzn-legenda__znak--now { border-radius: 50%; background: var(--hzn-atrament); }
.hzn-legenda__znak--pelnia { border-color: var(--hzn-mosiadz); border-radius: 50%; background: #fff; }
.hzn-legenda__znak--jutro { outline: 2px solid var(--hzn-bordo); outline-offset: 1px; }
.hzn-miesiac__fazy { display: grid; gap: 0.625rem; margin: 1.125rem 0 0; padding: 0; list-style: none; }
.hzn-miesiac__fazy li { padding: 0.75rem 0.875rem; border-radius: 8px; background: var(--hzn-krem-2); font-size: 0.96875rem; line-height: 1.5; }

/* ---------- pozostałe znaki ---------- */
.hzn-inne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.hzn-inne .hzn-inne__kafel { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0.25rem 0.625rem; border: 1px solid var(--hzn-linia); border-radius: 8px; background: var(--hzn-kartka); font: 500 1.1875rem/1.15 var(--sg-font-naglowek); color: var(--hzn-atrament); text-decoration: none; }
.hzn-inne .hzn-inne__kafel:hover { border-color: var(--hzn-zloto); color: var(--hzn-atrament); }
.hzn-inne__glif { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border: 1px solid var(--hzn-zloto-linia); border-radius: 50%; }
.hzn-inne__glif img { filter: var(--hzn-glif-bordo); }
.hzn-inne__dopisek { font: 600 0.625rem/1.2 var(--sg-font-tekst); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hzn-etykieta); }
.hzn-kolumna .hzn-inne__wszystkie { margin: 1rem 0 0; }

/* ---------- kwestionariusz: role komponentu przepięte wartościami, bez zmiany jego pól i zdań ---------- */
.sg-wrap.hzn-pytanie { width: min(100% - 2rem, 43rem); padding-top: 1.5rem; padding-bottom: 0.5rem; scroll-margin-top: 4rem; }
.hzn-pytanie::before { content: ''; position: absolute; left: 50%; top: 0; width: min(560px, 70%); height: 1px; background: var(--sg-linia-zlota); transform: translateX(-50%); }
.hzn-pytanie .kzw {
    --kzw-miara: 43rem;
    --kzw-ground: var(--hzn-kartka);
    --kzw-rule: #e3d7c0;
    --kzw-rule-live: #c9a84c;
    --kzw-opinie-kroj: var(--sg-font-naglowek);
    --kzw-opinie-stopien: 1.25rem;
}
.hzn-pytanie .kzw__plyta { padding: 2.125rem 1.375rem 1.75rem; border-radius: 2px; box-shadow: 0 24px 50px -24px rgba(28, 26, 23, 0.25); }
.hzn-pytanie .kzw__plyta::before { height: 3px; }
.hzn-pytanie .kzw__glowa { gap: 0; padding-bottom: max(0px, 1.625rem - var(--space-md)); }
.hzn-pytanie .kzw__eyebrow { font-size: 0.71875rem; letter-spacing: 0.24em; }
.hzn-pytanie .kzw__naglowek { margin: 0.75rem 0 0.875rem; font: 500 clamp(1.8125rem, 4.8vw, 2.5rem)/1.12 var(--sg-font-naglowek); letter-spacing: -0.005em; text-wrap: balance; }
.hzn-pytanie .kzw__lede { max-width: none; font-size: 1.0625rem; line-height: 1.65; color: var(--hzn-atrament-2); text-wrap: pretty; }
.hzn-pytanie .kzw-opinie { margin-top: 1.375rem; }
.hzn-pytanie .kzw-opinie .kzw-opinie__dalej { width: 2.5rem; height: 2.5rem; }
.hzn-pytanie + .hzn-kolumna { padding-top: 6.5rem; }

/* ---------- pytania ---------- */
.hzn-faq { max-width: 56.25rem; margin-top: 0.25rem; border-top: 1px solid var(--hzn-linia); }
.hzn-faq__pozycja { border-bottom: 1px solid var(--hzn-linia); }
.hzn-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; list-style: none; cursor: pointer; }
.hzn-faq summary::-webkit-details-marker { display: none; }
.hzn-faq__pytanie { margin: 0; font: 500 1.4375rem/1.3 var(--sg-font-naglowek); color: var(--hzn-atrament); }
.hzn-faq__znak { position: relative; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.4375rem; color: var(--hzn-mosiadz); transition: transform 0.2s; }
.hzn-faq__znak::before,
.hzn-faq__znak::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; }
.hzn-faq__znak::after { transform: rotate(90deg); }
.hzn-faq details[open] .hzn-faq__znak { transform: rotate(45deg); }
.hzn-kolumna .hzn-faq__pozycja > p { margin: 0 0 1.25rem; font-size: 1rem; color: var(--hzn-atrament-2); }

/* ---------- szerokości ---------- */
@media (min-width: 640px) {
    .hzn-inne { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hzn-pytanie .kzw__plyta { padding: 2.75rem 3rem 2.25rem; }
}
@media (min-width: 760px) {
    .hzn-rozdzial { grid-template-columns: 9.375rem minmax(0, 1fr); gap: 2.5rem; }
    .hzn-rozdzial__h { flex-direction: column; align-items: flex-start; padding-top: 0.25rem; }
    .hzn-obszary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .hzn-kalendarz { grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
}
@media (min-width: 980px) {
    .hzn-hero__h1 { font-size: clamp(2.75rem, 3.7vw, 3.375rem); }
    .hzn-hero__lede { max-width: 46ch; }
    .hzn-inne { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .hzn-obszary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .hzn-hero { padding-top: 1.25rem; }
    .hzn-hero__h1 { font-size: 2.125rem; line-height: 1.08; }
    .hzn-hero__lede { font-size: 1rem; }
    .hzn-dni .hzn-dni__kartka { width: 7.25rem; }
    .hzn-dni .hzn-dni__kartka.is-biezaca { width: 8.25rem; }
    .hzn-odczyt__wnetrze { padding-top: 2.125rem; }
    .hzn-rozdzial__tresc p { font-size: 1.0625rem; }
    .hzn-sekcja { padding: 2.875rem 0; }
    .sg-wrap.hzn-pytanie { width: min(100% - 1.5rem, 43rem); }
    .hzn-pytanie .kzw__plyta { padding: 1.875rem 1.125rem 1.5rem; }
    .hzn-pytanie .kzw { --kzw-opinie-stopien: 1.1875rem; }
    .hzn-pytanie + .hzn-kolumna { padding-top: 1.75rem; }
}
@media (max-width: 479px) {
    .hzn-obszar { padding: 0.875rem 0.75rem 0.75rem; }
    .hzn-obszar__tytul { font-size: 1.25rem; }
    .hzn-kolo__etykieta { font-size: 10.5px; }
    /* w kaflu dnia etykieta schodzi pod glif: obok plakietki „Dziś” drugie słowo („Koziorożcu”) się nie mieści */
    .hzn-obszar.is-dzis .hzn-obszar__gora { flex-direction: column; align-items: flex-start; padding-right: 0; }
}
/* etykieta „Księżyc w …” ma zostać w kaflu: kółko o 2 px węższe z glifem tej samej wielkości (14 px), a na najwęższych ekranach glif nad etykietą */
@media (max-width: 399px) {
    .hzn-obszar__gora { gap: 0.375rem; }
    .hzn-obszar__glif { width: 1.75rem; height: 1.75rem; }
    .hzn-obszar__glif .hzn-glif { width: 0.875rem; }
}
@media (max-width: 359px) {
    .hzn-obszar__gora { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .hzn-hero__data,
    .hzn-kolo__poswiata,
    .hzn-kolo.is-ruch .hzn-kolo__ksiezyc { animation: none; }
    .hzn-dni .hzn-dni__kartka,
    .hzn-faq__znak { transition: none; }
}