/* AstroPlus 2.0 „Aura”: strony znaków zodiaku (/znaki-zodiaku/ i /znaki-zodiaku/{znak}/).
   Plakat, zakładki okresów i nagłówek huba pochodzą z horoskop.css, karta znaku z zcard.css,
   artykuł z article.css. Tu tylko elementy własne stron znaków. */

/* ---------- strona znaku: plakat ---------- */
.sign-page .poster__date { margin: 0; }
.sign-page .poster__meta { margin: 0; }
.s-horo { display: grid; gap: 8px; justify-items: start; }

/* wstęp: esencja, triada cech, fakty + „dziś dla znaku” */
.s-intro { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); padding-block: clamp(36px, 6vw, 64px) clamp(8px, 2vw, 16px); align-items: start; }
.s-intro__main { display: grid; gap: 26px; min-width: 0; }
.s-lead { font-family: var(--f-lead); font-weight: var(--lead-weight); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.35; max-width: 34em; }
.s-triad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--f-display); font-style: italic; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.05; }
.s-triad__sep { width: .38em; height: .38em; color: var(--ink-soft); }
.sfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.sfacts > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.sfacts dt { font: 600 .68rem/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sfacts dd { margin: 6px 0 0; font: var(--t-sm)/1.45 var(--f-ui); display: flex; align-items: center; gap: 8px; }
.sfacts dd a { text-underline-offset: .2em; }
.sfacts__el { display: inline-grid; width: 16px; height: 16px; }
.sfacts__el svg { width: 100%; height: 100%; }
.s-today { position: relative; padding: 32px 28px; display: grid; gap: 14px; justify-items: start; background: color-mix(in srgb, var(--paper) 60%, white); }
.s-today .corner { width: 26px; color: var(--ink); }
.s-today__date { font-family: var(--f-display); font-style: italic; font-size: 1.6rem; line-height: 1.1; }
.s-today p:not(.s-today__date) { font: var(--t-sm)/1.6 var(--f-ui); color: var(--ink-soft); }
@media (max-width: 960px) { .s-intro { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* zgodność */
.compat-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.compat-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(80px, 200px) 3.2em; grid-template-areas: "dot name bar pct" "dot txt txt txt";
  gap: 4px 18px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--line);
}
.compat-row__dot { grid-area: dot; width: 44px; height: 44px; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; color: var(--card-ink); align-self: start; }
.compat-row__dot .g { position: relative; z-index: 1; width: 22px; height: 22px; }
.compat-row__name { grid-area: name; font-family: var(--f-display); font-style: italic; font-size: 1.45rem; line-height: 1.15; text-decoration: none; }
.compat-row__name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.compat-row__bar { grid-area: bar; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.compat-row__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.compat-row__pct { grid-area: pct; font: 600 var(--t-sm)/1 var(--f-ui); text-align: right; }
.compat-row__txt { grid-area: txt; font: var(--t-sm)/1.55 var(--f-ui); color: var(--ink-soft); max-width: 70ch; }
.compat-more > summary { cursor: pointer; list-style: none; padding: 16px 0; font: var(--ui-weight) var(--t-xs)/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.compat-more > summary::-webkit-details-marker { display: none; }
.compat-more > summary::after { content: " +"; }
.compat-more[open] > summary::after { content: " −"; }
.compat-more .compat-list { border-top: 0; }
@media (max-width: 640px) {
  .compat-row { grid-template-columns: auto minmax(0, 1fr) 3em; grid-template-areas: "dot name pct" "dot bar bar" "dot txt txt"; }
}

/* sąsiednie znaki */
.s-nav__in { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 220px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: end; }
.s-nav__item { display: grid; gap: 12px; }
.s-nav__all { display: grid; gap: 18px; justify-items: start; align-self: center; }
@media (max-width: 760px) {
  .s-nav__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-nav__all { grid-column: 1 / -1; }
}

/* ---------- hub: znak po dacie ---------- */
.z-head .lead { max-width: 36rem; }
/* nocny panel w hero: dzień wpisywany, kafelki miesięcy, karta odwraca się na miejscu (assets/js/znaki.js) */
.zfind {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 44px); align-items: center;
  max-width: 900px; margin-top: 6px; padding: clamp(20px, 3vw, 32px); border-radius: 24px;
}
.zfind .label { color: var(--star); }
.zfind__ask { display: grid; gap: 14px; min-width: 0; }
.zfind__q { font: 400 italic clamp(1.5rem, 3.6vw, 2rem)/1.15 var(--f-display); color: var(--on-night); }
.zfind__date { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px 22px; align-items: end; }
.zfind__day, .zfind__months { display: grid; gap: 8px; min-width: 0; }
.zfind__lbl { font: 600 .7rem/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-soft); }
.zfind__big {
  width: 100%; min-width: 0; padding: 2px 0 8px; border: 0; border-bottom: 1px solid var(--line-night); border-radius: 0; background: transparent;
  font: 300 italic 2.6rem/1.1 var(--f-display); color: var(--on-night); caret-color: var(--star); text-align: center;
}
.zfind__big::placeholder { color: var(--on-night-soft); opacity: .4; }
.zfind__big:focus { outline: none; border-bottom-color: var(--star); box-shadow: 0 1px 0 var(--star); }
.zfind__m { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.zfind__m label { position: relative; cursor: pointer; }
.zfind__m span {
  display: grid; place-items: center; height: 34px; border: 1px solid var(--line-night); border-radius: 999px;
  font: 600 .68rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-soft); transition: background .25s, color .25s, border-color .25s;
}
.zfind__m label:hover span { border-color: var(--star); color: var(--on-night); }
.zfind__m input:checked + span { background: var(--star); border-color: var(--star); color: #2A2440; }
.zfind__m input:focus-visible + span { outline: 1.5px solid var(--star); outline-offset: 3px; }
.zfind__reveal { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; align-items: center; min-width: 0; }
.zfind__card { perspective: 900px; }
.zfind__card .zcard { width: 100%; cursor: default; }
.zfind__card .zcard--unknown .zcard__q b { font-size: 40cqi; }
.zfind__card.is-set .zcard { animation: zf-flip .9s cubic-bezier(.2, .7, .2, 1) backwards, halo 6s ease-in-out .9s infinite; }
.zfind__card.is-set .cl-lines path { animation: draw 1.6s cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(.5s + var(--k, 0) * 90ms); }
@keyframes zf-flip { from { transform: rotateY(-95deg) translateY(12px); opacity: 0; } }
.zfind__out { display: grid; gap: 8px; justify-items: start; font: var(--t-sm)/1.55 var(--f-ui); color: var(--on-night-soft); min-width: 0; }
.zfind__hint.is-err { color: #F2A3AE; }
.zfind__name { color: var(--on-night-soft); }
.zfind__name a { display: block; font: 400 italic clamp(2rem, 5vw, 2.6rem)/1 var(--f-display); color: var(--on-night); text-decoration: none; }
.zfind__meta { letter-spacing: .04em; }
.zfind__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.zfind__links a { font-weight: 600; color: var(--star); text-decoration: none; }
.zfind__links a:hover { text-decoration: underline; }
.zfind__save {
  font: 600 .68rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; padding: .75em 1em; cursor: pointer;
  border: 1px solid var(--star); background: transparent; color: var(--star);
}
.zfind__save:hover { background: var(--star); color: #2A2440; }
.zfind__cusp { font-size: .8rem; }
.zfind__cusp a { color: var(--on-night); }
@media (max-width: 760px) {
  .zfind { grid-template-columns: minmax(0, 1fr); margin-inline: calc(var(--gutter) * -0.5); }
  .zfind__date { grid-template-columns: minmax(0, 1fr); }
  .zfind__day { max-width: 120px; }
  .zfind__reveal { grid-template-columns: 108px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .zfind__card .zcard, .zfind__card .cl-lines path { animation: none !important; } }

/* talia 12 kart */
.z-deck { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.z-deck .zcard { animation: rise-in .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.z-note { margin-top: 22px; font: var(--t-sm)/1.5 var(--f-ui); }
@media (max-width: 1080px) { .z-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .z-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .z-deck .zcard { animation: none; } }

/* żywioły */
.elements { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.element { display: grid; gap: 14px; align-content: start; padding: 26px 22px 26px 0; }
.element:not(:last-child) { border-right: 1px solid var(--line); }
.element:not(:first-child) { padding-left: 22px; }
.element__sym { width: 34px; height: 34px; }
.element__sym svg { width: 100%; height: 100%; }
.element h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.element p { font: var(--t-sm)/1.6 var(--f-ui); color: var(--ink-soft); }
.element ul { list-style: none; margin: 0; padding: 0; display: grid; }
.element li a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; font: var(--t-sm)/1.2 var(--f-ui); }
.element li a .g { width: 20px; height: 20px; }
.element li a small { color: var(--ink-soft); font-size: .78rem; }
.element li a:hover span { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 960px) {
  .elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .element:nth-child(2n) { border-right: 0; }
  .element:nth-child(2n+1) { padding-left: 0; }
  .element:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .elements { grid-template-columns: 1fr; }
  .element { border-right: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--line); }
}

/* tabela dat */
.z-table-wrap { overflow-x: auto; }
.z-table { width: 100%; border-collapse: collapse; font: var(--t-sm)/1.4 var(--f-ui); min-width: 560px; }
.z-table th, .z-table td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.z-table thead th { font: 600 .68rem/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.z-table tbody th a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; }
.z-table tbody th a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.z-table .g { width: 20px; height: 20px; }
.z-table__n { font: 600 .66rem/1 var(--f-ui); font-style: normal; letter-spacing: .1em; color: var(--ink-soft); width: 2.4em; }
.z-table tr.is-now { background: color-mix(in srgb, var(--paper-2) 80%, transparent); }