/* Бібліотека значень: карти таро, знаки зодіаку, числа (/tarot/karty/, /astrology/znaky/, /numerology/chysla/).
   Підключається лише на цих сторінках (inc/library.php). */

.lib-main{padding-block:34px 100px}

/* «Хлібні крихти» */
.lib-crumbs{margin-bottom:34px;font-size:13px;font-weight:750;line-height:1.5}
.lib-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.lib-crumbs li{display:inline-flex;align-items:center;min-width:0}
.lib-crumbs li+li::before{content:"›";margin:0 10px;color:var(--dim);font-weight:500}
.lib-crumbs a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.lib-crumbs a:hover{color:var(--blue)}
.lib-crumbs [aria-current]{color:var(--dim)}

/* Заголовок сторінки */
.lib-head h1{font-size:clamp(34px,4.2vw,58px);line-height:1.1;letter-spacing:-.065em;margin:14px 0 0;overflow-wrap:break-word}
.lib-head-note{margin-top:14px;font-size:14px;line-height:1.55;font-weight:650;max-width:60ch}

/* Сторінка карти: малюнок ліворуч (на комп'ютері лишається на місці під час прокрутки), текст праворуч */
.lib-card-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:"art head" "art body";column-gap:clamp(40px,6vw,80px);align-items:start}
.lib-card-layout>.lib-head{grid-area:head;padding-bottom:34px}
.lib-card-figure{grid-area:art;position:sticky;top:24px;margin:0}
.lib-card-figure .card-art{box-shadow:7px 7px 0 var(--ink)}
.lib-card-figure figcaption{display:grid;gap:3px;margin-top:20px;text-align:center}
.lib-card-figure figcaption strong{font-family:var(--font-display);font-size:18px;font-weight:750;letter-spacing:-.04em;line-height:1.25}
.lib-card-figure figcaption span{font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lib-card-fallback{display:grid;place-items:center;aspect-ratio:480/768;padding:20px;background:var(--blue);color:var(--ivory);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);font-family:var(--font-display);font-size:24px;text-align:center}
.lib-card-layout>.lib-body{grid-area:body}

/* Текст: розділи з позначкою-квадратиком, рядок до ~70 знаків */
.lib-body{min-width:0;max-width:720px}
.lib-body--single{max-width:760px}
.lib-lead{font-size:clamp(18px,1.9vw,21px);line-height:1.6;font-weight:550;margin-bottom:34px;max-width:62ch}
.lib-calc-link{margin-bottom:30px}
.lib-calc-link .text-link,.lib-hub-head .text-link,.lib-cta-actions .text-link{display:inline;line-height:1.6}
.lib-calc-link .text-link svg,.lib-hub-head .text-link svg,.lib-cta-actions .text-link svg{display:inline-block;vertical-align:-3px;margin-left:6px}
.lib-section{padding:30px 0;border-top:2px solid var(--ink)}
.lib-body>.lib-section:first-child,.lib-lead+.lib-section,.lib-calc-link+.lib-section{border-top:0;padding-top:0}
.lib-section h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(22px,2.3vw,30px);line-height:1.2;letter-spacing:-.05em;margin:0 0 14px;overflow-wrap:break-word;min-width:0}
.lib-section h2::before{content:"";flex-shrink:0;width:12px;height:12px;border:2px solid var(--ink);background:var(--lilac);transform:translateY(-1px)}
.lib-section--love h2::before{background:var(--coral)}
.lib-section--work h2::before{background:var(--blue)}
.lib-section--advice h2::before,.lib-section--strengths h2::before{background:var(--mint)}
.lib-section--hard h2::before{background:var(--ink)}
.lib-section p{font-size:17px;line-height:1.7;max-width:68ch}
.lib-section p+p{margin-top:14px}

/* Так чи ні */
.lib-section.lib-yesno{margin:6px 0 30px;padding:24px 26px 26px;background:var(--mint);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.lib-yesno h2::before{background:var(--ivory)}
.lib-answer{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.05em;color:var(--blue)}
.lib-yesno+.lib-section{border-top:0;padding-top:0}

/* Питання до себе */
.lib-question blockquote{margin:0;padding:4px 0 4px 20px;border-left:4px solid var(--blue);font-family:var(--font-display);font-size:clamp(18px,2vw,22px);font-weight:650;line-height:1.45;letter-spacing:-.03em;color:var(--blue);max-width:40ch}

/* Сонце, Місяць, асцендент у знаку */
.lib-planet-hint{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.lib-planet-hint svg{flex-shrink:0}
.lib-planet h2::before{background:var(--coral)}
.lib-planet--moon h2::before{background:var(--lilac)}
.lib-planet--asc h2::before{background:var(--mint)}

/* Сумісність і списки-посилання */
.lib-match h3{margin:20px 0 10px;font-family:var(--font-body);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.lib-match h2+h3{margin-top:4px}
.lib-match .lib-chips{margin-bottom:14px}
.lib-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.lib-chips a{display:inline-flex;align-items:center;min-height:42px;padding:6px 15px;background:#fffdf8;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:800;font-size:14px;line-height:1.3;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.lib-chips a:hover{background:var(--mint);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* Пропозиція */
.lib-cta{display:grid;gap:22px;margin-top:40px;padding:clamp(22px,3.4vw,36px);background:var(--coral);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.lib-cta--astrology{background:var(--lilac)}
.lib-cta--numerology{background:var(--mint)}
.lib-cta .eyebrow{color:var(--ink)}
.lib-cta h2{font-size:clamp(24px,2.8vw,34px);line-height:1.15;letter-spacing:-.055em;margin:8px 0 10px}
.lib-cta p:not(.eyebrow){font-size:15px;line-height:1.6;max-width:60ch}
.lib-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px}
.lib-cta-actions .button{gap:14px;text-align:left}
.lib-cta-actions .text-link{flex-basis:100%;font-size:14px}
.lib-hub .lib-cta{margin-top:70px}

/* Знак і число: текст ліворуч, праворуч (на комп'ютері) — інші знаки чи числа, лишаються на місці під час прокрутки */
.lib-columns{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr);column-gap:clamp(40px,6vw,80px);align-items:start}
.lib-aside{position:sticky;top:24px;min-width:0}
.lib-aside .lib-others{margin-top:0;padding:24px;background:#fffdf8;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.lib-aside .lib-others h2{font-size:20px;letter-spacing:-.045em;margin-bottom:16px}
.lib-aside .lib-chips{gap:8px}
.lib-aside .lib-chips a{min-height:40px;padding:5px 12px;font-size:13px}
.lib-aside .lib-back{margin-top:22px}

/* Сусідні карти */
.lib-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:64px}
.lib-pager-link{display:grid;align-content:start;gap:6px;padding:18px 20px;background:#fffdf8;border:2px solid var(--ink);transition:background .15s ease,box-shadow .15s ease}
.lib-pager-link:hover{background:var(--lilac);box-shadow:4px 4px 0 var(--ink)}
.lib-pager-link span{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.lib-pager-link strong{font-family:var(--font-display);font-size:clamp(17px,2vw,22px);font-weight:750;line-height:1.2;letter-spacing:-.04em;overflow-wrap:break-word}
.lib-pager-link--next{justify-items:end;text-align:right}

/* Інші карти / знаки / числа */
.lib-others{margin-top:64px;padding-top:34px;border-top:2px solid var(--ink)}
.lib-others h2,.lib-group h2{font-size:clamp(24px,2.8vw,34px);line-height:1.2;letter-spacing:-.055em;margin-bottom:24px}
.lib-back{margin-top:40px}
.lib-back .text-link svg{flex-shrink:0}

/* Сітки плиток */
.lib-grid{display:grid;gap:26px 18px;margin:0;padding:0;list-style:none}
.lib-grid>li{min-width:0}
.lib-grid--cards{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
.lib-tile{display:grid;height:100%;min-width:0}
.lib-tile--card{gap:12px;align-content:start;text-align:center}
.lib-tile--card .card-art{box-shadow:4px 4px 0 var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.lib-tile--card:hover .card-art{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.lib-thumb--empty{display:block;aspect-ratio:480/768;background:var(--blue);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.lib-tile-name{font-weight:800;font-size:14px;line-height:1.3;overflow-wrap:break-word}
.lib-tile--card:hover .lib-tile-name{color:var(--blue)}

.lib-grid--signs,.lib-grid--numbers{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lib-tile--sign,.lib-tile--number{gap:6px;align-content:start;min-height:160px;padding:20px 20px 18px;background:#fffdf8;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.lib-tile--sign:hover,.lib-tile--number:hover{background:var(--lilac);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.lib-tile--sign .lib-tile-name,.lib-tile--number .lib-tile-name{font-family:var(--font-display);font-size:clamp(19px,1.9vw,25px);font-weight:750;letter-spacing:-.05em;line-height:1.2}
.lib-tile-meta{font-size:13px;font-weight:650;line-height:1.45;color:var(--dim)}
.lib-tile-tag{justify-self:start;align-self:end;margin-top:14px;padding:3px 9px;border:2px solid var(--ink);background:var(--lilac);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.lib-tile-tag--fire{background:var(--coral)}
.lib-tile-tag--earth{background:var(--mint)}
.lib-tile-tag--water{background:var(--blue);color:var(--ivory)}
.lib-tile-digit{font-family:var(--font-display);font-size:56px;font-weight:800;line-height:1;letter-spacing:-.08em;color:var(--blue);margin-bottom:8px}

/* Змісти розділів */
.lib-hub-head{max-width:800px;padding-bottom:44px}
.lib-hub-head h1{font-size:clamp(40px,5vw,72px);line-height:1.1;letter-spacing:-.075em;margin:16px 0 22px}
.lib-hub-head>p:not(.eyebrow){font-size:18px;line-height:1.55;max-width:640px;margin-bottom:18px}
.lib-jump{display:flex;flex-wrap:wrap;gap:10px;padding:16px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.lib-jump a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 14px;background:#fffdf8;border:2px solid var(--ink);font-size:14px;font-weight:800}
.lib-jump a span{font-size:12px;color:var(--dim)}
.lib-jump a:hover{background:var(--lilac)}
.lib-group{padding-top:44px;scroll-margin-top:16px}

/* Шапки знака й числа */
.lib-head--panel,.lib-head--number{margin-bottom:44px;padding:clamp(22px,4vw,44px);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.lib-head--panel{background:var(--lilac)}
.lib-head--panel h1{max-width:18ch}
.lib-facts{display:flex;flex-wrap:wrap;gap:14px 40px;margin:28px 0 0;padding-top:20px;border-top:2px solid var(--ink)}
.lib-facts div{display:grid;gap:2px}
.lib-facts dt{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.lib-facts dd{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.03em}
.lib-head--number{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;background:var(--mint)}
.lib-head--number h1{font-size:clamp(30px,3.6vw,50px)}
.lib-digit{font-family:var(--font-display);font-size:clamp(96px,12vw,168px);font-weight:800;line-height:.9;letter-spacing:-.1em;color:var(--blue);min-width:.7em;text-align:center}

/* Низьке вікно: карта й бічна колонка не «прилипають», інакше низ не вміститься на екран */
@media(max-height:720px){.lib-card-figure,.lib-aside{position:static}}
@media(max-width:1180px){
  .lib-grid--signs,.lib-grid--numbers{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .lib-columns{grid-template-columns:minmax(0,1fr)}
  .lib-aside{position:static}
  .lib-aside .lib-others{margin-top:64px;padding:34px 0 0;background:none;border:0;border-top:2px solid var(--ink);box-shadow:none}
  .lib-aside .lib-others h2{font-size:clamp(24px,2.8vw,34px);margin-bottom:24px}
  .lib-aside .lib-chips a{min-height:42px;padding:6px 15px;font-size:14px}
}
@media(max-width:900px){
  /* Одна колонка: заголовок, карта по центру, текст */
  .lib-card-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "art" "body"}
  .lib-card-layout>.lib-head{padding-bottom:26px}
  .lib-card-figure{position:static;width:min(260px,66%);margin:0 auto 40px}
  .lib-body,.lib-body--single{max-width:none}
}
@media(max-width:620px){
  .lib-main{padding-block:22px 70px}
  .lib-crumbs{margin-bottom:24px;font-size:12px}
  .lib-crumbs li+li::before{margin:0 7px}
  .lib-head h1{font-size:clamp(28px,8.4vw,40px);letter-spacing:-.06em}
  .lib-card-figure .card-art{box-shadow:4px 4px 0 var(--ink)}
  .lib-section{padding:26px 0}
  .lib-section h2{font-size:22px;gap:10px}
  .lib-section h2::before{width:10px;height:10px}
  .lib-section p{font-size:16px;line-height:1.65}
  .lib-section.lib-yesno{padding:20px;box-shadow:4px 4px 0 var(--ink)}
  .lib-question blockquote{padding-left:16px}
  .lib-cta{box-shadow:4px 4px 0 var(--ink)}
  .lib-cta-actions{display:grid}
  .lib-cta-actions .button{width:100%;white-space:normal;padding-inline:16px;justify-content:space-between}
  .lib-pager{gap:12px;margin-top:48px}
  .lib-pager-link{padding:14px}
  .lib-pager-link span{font-size:10px;letter-spacing:.08em;gap:6px}
  .lib-pager-link strong{font-size:16px}
  .lib-others,.lib-aside .lib-others{margin-top:48px;padding-top:28px}
  .lib-grid--cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
  .lib-tile--card{gap:9px}
  .lib-tile--card .card-art{box-shadow:3px 3px 0 var(--ink)}
  .lib-tile-name{font-size:12px;line-height:1.25}
  .lib-grid--signs,.lib-grid--numbers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lib-tile--sign,.lib-tile--number{min-height:132px;padding:14px 14px 12px;box-shadow:3px 3px 0 var(--ink)}
  .lib-tile--sign .lib-tile-name{font-size:18px}
  .lib-tile--number .lib-tile-name{font-size:clamp(14px,4.2vw,18px)} /* «Мандрівниця» цілим словом і на 360 px */
  .lib-tile-meta{font-size:12px}
  .lib-tile-tag{font-size:10px;margin-top:10px}
  .lib-tile-digit{font-size:44px}
  .lib-hub-head{padding-bottom:32px}
  .lib-hub-head h1{font-size:clamp(34px,10vw,46px)}
  .lib-hub-head>p:not(.eyebrow){font-size:16px}
  .lib-jump{gap:8px}
  .lib-jump a{padding:6px 11px;font-size:13px}
  .lib-group{padding-top:34px}
  .lib-head--panel,.lib-head--number{margin-bottom:34px;box-shadow:4px 4px 0 var(--ink)}
  .lib-facts{gap:12px 26px}
  .lib-facts dd{font-size:16px}
  .lib-head--number{grid-template-columns:minmax(0,1fr);gap:6px}
  .lib-digit{font-size:88px;text-align:left}
  .lib-head--number h1{font-size:clamp(26px,7.4vw,34px)}
  .lib-lead{font-size:17px;margin-bottom:28px}
}
