/*
   PortKEY Portal — Design System КЛЮЧ
   DESIGN.md v1.1 · Квітень 2026
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Geologica:wght@300;400;500;600&display=swap');

:root {
    /* ── DESIGN.md v1.1 — Палітра КЛЮЧ ─────────────────────────── */
    --pk-color-ink:       #1a1410;
    --pk-color-paper:     #f7f3ec;
    --pk-color-warm:      #f0e8d8;
    --pk-color-white:     #ffffff;
    --pk-color-muted:     #8a7d6e;
    --pk-color-line:      #d4c9b8;
    --pk-color-gold:      #b8860b;
    --pk-color-gold-l:    #d4a843;
    --pk-color-accent:    #8b3a1a;
    --pk-focus-ring:      #b8860b;

    --pk-entity-book:     #8b3a1a;
    --pk-entity-person:   #3d5a6e;
    --pk-entity-inst:     #4a6741;
    --pk-entity-award:    #7d3c4a;
    --pk-entity-series:   #b8860b;
    --pk-entity-event:    #4a3d6e;

    --pk-font-sans:  'Geologica', system-ui, sans-serif;
    --pk-font-serif: 'Playfair Display', Georgia, serif;

    /* --- Color Palette (зворотна сумісність; значення оновлено) --- */
    /* Warm Dark (Primary) */
    --pk-color-primary:       var(--pk-color-ink);
    --pk-color-primary-light: #2d2520;

    /* Gold (Accent) — зберігаємо для зворотної сумісності */
    --pk-color-accent:        var(--pk-color-gold);
    --pk-color-accent-hover:  var(--pk-color-gold-l);

    /* Neutrals */
    --pk-color-bg:            var(--pk-color-paper);
    --pk-color-text:          var(--pk-color-ink);
    --pk-color-text-muted:    var(--pk-color-muted);

    /* --- Typography --- */
    --pk-font-heading: 'Playfair Display', serif;
    --pk-font-body:    var(--pk-font-sans);

    /* --- Effects --- */
    --pk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --pk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --pk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --pk-radius-sm: 2px;
    --pk-radius-md: 4px;
    --pk-radius-lg: 4px;

    --pk-transition: all 0.2s ease;

    /* Gradients */
    --pk-gradient-primary: linear-gradient(135deg, var(--pk-color-ink) 0%, #2d2520 100%);
    --pk-gradient-accent:  linear-gradient(135deg, var(--pk-color-gold) 0%, var(--pk-color-gold-l) 100%);
    --pk-gradient-glass:   linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);

    /* Перевизначення Bootstrap щоб --bs-primary
       не давав синій колір де не треба */
    --bs-primary:          var(--pk-color-ink);
    --bs-primary-rgb:      26, 20, 16;
    --bs-link-color:       var(--pk-color-gold);
    --bs-link-hover-color: var(--pk-color-gold-l);
}

/* --- Navbar — явні кольори поверх глобального a {} --- */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand,
.navbar-dark .dropdown-toggle.nav-link {
  color: rgba(247, 243, 236, 0.8) !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-brand:hover {
  color: var(--pk-color-paper) !important;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
  color: var(--pk-color-gold-l) !important;
}

/* --- Global Resets & Typography --- */
body {
    font-family: var(--pk-font-sans);
    color: var(--pk-color-ink);
    background-color: var(--pk-color-paper);
    font-size: 15px;
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--pk-font-heading);
    color: var(--pk-color-primary);
    font-weight: 700;
}

a {
    color: var(--pk-color-primary);
    transition: var(--pk-transition);
}

a:hover {
    color: var(--pk-color-accent);
    text-decoration: none;
}

/* --- Components --- */

/* Cards */
.card {
    border: none;
    border-radius: var(--pk-radius-md);
    box-shadow: var(--pk-shadow-sm);
    transition: var(--pk-transition);
    background: var(--pk-color-white);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--pk-shadow-lg);
}

.card-title a {
    color: var(--pk-color-primary);
    text-decoration: none;
}

.card-title a:hover {
    color: var(--pk-color-accent);
}

/* Buttons */
.btn-primary {
    background-color: var(--pk-color-primary);
    border-color: var(--pk-color-primary);
    color: var(--pk-color-white);
}

.btn-primary:hover {
    background-color: var(--pk-color-primary-light);
    border-color: var(--pk-color-primary-light);
}

.btn-outline-primary {
    color: var(--pk-color-primary);
    border-color: var(--pk-color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--pk-color-primary);
    color: var(--pk-color-white);
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.5em 0.8em;
}

.bg-primary {
    background-color: var(--pk-color-primary) !important;
}

.bg-secondary {
    background-color: var(--pk-color-primary-light) !important;
}

/* --- Utilities --- */

/* Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Specialty Widgets --- */

/* Hero Section */
.hero-banner {
    background: var(--pk-gradient-primary);
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    z-index: 0;
}

/* Anniversary Card */
.anniversary-card {
    border-radius: var(--pk-radius-lg);
    background: var(--pk-color-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    text-align: center;
    position: relative;
    transition: var(--pk-transition);
}

.anniversary-card:hover {
    box-shadow: var(--pk-shadow-lg);
    border-color: var(--pk-color-accent);
}

.anniversary-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--pk-gradient-accent);
    color: var(--pk-color-primary);
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: var(--pk-shadow-sm);
    font-size: 0.8rem;
}

/* Time Machine Widget */
.time-machine-widget {
    background: var(--pk-color-primary);
    color: var(--pk-color-white);
    padding: 3rem;
    border-radius: var(--pk-radius-lg);
    box-shadow: var(--pk-shadow-lg);
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="%23ffffff" fill-opacity="0.05" fill-rule="evenodd"><circle cx="3" cy="3" r="3"/><circle cx="13" cy="13" r="3"/></g></svg>');
}

.time-machine-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    text-align: center;
    border-radius: var(--pk-radius-md);
}

.time-machine-input:focus {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px var(--pk-color-accent);
}

/* --- Aspect Ratios --- */
.ratio-9x16 {
    --bs-aspect-ratio: 177.77%;
}

.ratio-1x1 {
    --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
    --bs-aspect-ratio: 75%;
}

.ratio>iframe,
.ratio>embed,
.ratio>object,
.ratio>video {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.video-container {
    transition: transform 0.3s ease;
}

.video-container:hover {
    transform: scale(1.02);
}

/* Vertical Video refinement */
.video-container.v-9x16 {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Signpost / Seminal Work Badge --- */
.badge-signpost {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a1a !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Publication Type Badges --- */
.badge-article {
    background-color: #f3e5f5;
    color: #4a148c;
}

.badge-research {
    background-color: #fce4ec;
    color: #880e4f;
}

.badge-methodic {
    background-color: #e8f5e9;
    color: #1b5e20;
}

.badge-review {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.badge-interview,
.badge-key_conversation {
    background-color: #fff3e0;
    color: #e65100;
}

.badge-survey {
    background-color: #efebe9;
    color: #4e342e;
}

.badge-writer_on_writer {
    background-color: #fff9c4;
    color: #fbc02d;
}

.badge-jubilee_essay {
    background-color: #e0f2f1;
    color: #00695c;
}

.badge-overview {
    background-color: #ede7f6;
    color: #512da8;
}

.badge-default {
    background-color: #f5f5f5;
    color: #616161;
}


/* --- Footer --- */
footer {
  background: var(--pk-color-ink) !important;
}

footer h1,
footer h2,
footer h3,
footer h4 {
    color: var(--pk-color-gold) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.2rem;
}

footer h5,
footer h6 {
  color: var(--pk-color-gold) !important;
  font-family: var(--pk-font-sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

footer p,
footer .small,
footer li {
    color: rgba(247, 243, 236, 0.5) !important;
}

footer span {
  color: rgba(247, 243, 236, 0.5) !important;
}

footer a {
    color: rgba(247, 243, 236, 0.6) !important;
    text-decoration: none !important;
}

footer a:hover {
    color: var(--pk-color-gold-l) !important;
    text-decoration: none !important;
}

/* ── Смуга засновника ── */
.pk-founder-bar {
  background: var(--pk-color-warm);
  border-top: 1px solid var(--pk-color-line);
  padding: 12px clamp(16px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.pk-founder-logo {
  height: 48px;
  width: auto;
  filter: brightness(0) saturate(100%)
          invert(12%) sepia(15%)
          saturate(800%) hue-rotate(340deg)
          brightness(0.9);
}

.pk-founder-label {
  font-family: var(--pk-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pk-color-muted);
}

@media (max-width: 640px) {
  .pk-founder-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .pk-founder-logo {
    height: 40px;
  }
}

/* ============================================================
   PUBLICATION PAGE — двоколонковий layout
   ============================================================ */

:root {
  --pub-text-width: 680px;
  --pub-border: #e4e4e4;
  --pub-muted: var(--pk-color-text-muted);
}

/* ---------- Шапка публікації ---------- */
.pub-hero {
  background: #fff;
  border-bottom: 1px solid var(--pub-border);
  padding: 36px 32px 28px;
}
.pub-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.pub-title {
  font-family: var(--pk-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  max-width: var(--pub-text-width);
  margin: 12px 0 16px;
  color: var(--pk-color-primary);
}
.pub-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--pub-muted);
}
.pub-meta-author-link {
  color: var(--pk-color-primary);
  text-decoration: none;
  font-weight: 500;
}
.pub-meta-author-link:hover { text-decoration: underline; }
.pub-meta-sep { color: var(--pub-border); }
.pub-meta-added { font-style: italic; }

/* ---------- Badge типу публікації ---------- */
.pub-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pub-type-article          { background: #eaf0f6; color: #2e4057; }
.pub-type-research         { background: #eaf2fb; color: #1a4a7a; }
.pub-type-methodic         { background: #e9f7ef; color: #145a32; }
.pub-type-review           { background: #fef6e7; color: #7d4e00; }
.pub-type-overview         { background: #fdedec; color: #7b241c; }
.pub-type-interview        { background: #f5eef8; color: #6e2f8a; }
.pub-type-writer_on_writer { background: #fdedec; color: #7b241c; }
.pub-type-key_conversation { background: #f5eef8; color: #6e2f8a; }
.pub-type-jubilee_essay    { background: #fef9e7; color: #8a6500; }
.pub-type-survey           { background: #e6f4f4; color: #2c6e6e; }

/* ---------- Двоколонковий layout ---------- */
.pub-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  display: grid;
  grid-template-columns: var(--pub-text-width) 1fr;
  gap: 48px;
  align-items: start;
}

/* ---------- Текстова колонка ---------- */
.pub-body { min-width: 0; }
.pub-text { font-size: 15px; line-height: 1.85; color: var(--pk-color-text); }
.pub-text p { margin-bottom: 20px; }
.pub-text h2 { font-family: var(--pk-font-heading); font-size: 22px; margin-top: 36px; margin-bottom: 12px; }
.pub-text h3 { font-family: var(--pk-font-heading); font-size: 18px; margin-top: 28px; margin-bottom: 10px; }

/* Теги внизу тіла */
.pub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--pub-border);
}
.pub-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--pk-color-bg);
  border: 1px solid var(--pub-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--pub-muted);
  text-decoration: none;
}
.pub-tag:hover { border-color: var(--pk-color-primary); color: var(--pk-color-primary); }

/* ---------- Sticky сайдбар ---------- */
.pub-sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Widgets ---------- */
.pub-widget {
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  overflow: hidden;
}
.pub-widget-header {
  padding: 9px 16px;
  border-bottom: 1px solid var(--pub-border);
  font-size: 10px;
  font-weight: 700;
  color: var(--pub-muted);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.pub-widget-body { padding: 12px 16px; }
.pub-widget-body--books { padding: 8px 12px; }

/* Персони в сайдбарі */
.pub-widget-person { padding: 5px 0; }
.pub-widget-person + .pub-widget-person { border-top: 1px solid var(--pub-border); }
.pub-widget-person-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--pk-color-primary);
  text-decoration: none;
}
.pub-widget-person-link:hover { text-decoration: underline; }
.pub-widget-person-name { font-size: 14px; color: var(--pk-color-text); }
.pub-widget-more {
  padding: 5px 0 2px;
  font-size: 12px;
  color: var(--pub-muted);
  font-style: italic;
  border-top: 1px solid var(--pub-border);
}

/* Книги в сайдбарі */
.pub-linked-book {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 4px;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s;
}
.pub-linked-book:hover { background: var(--pk-color-bg); }
.pub-linked-book + .pub-linked-book { border-top: 1px solid var(--pub-border); }
.pub-linked-book-cover { flex-shrink: 0; width: 42px; }
.pub-linked-book-img { width: 42px; height: auto; border-radius: 3px; box-shadow: var(--pk-shadow-sm); }
.pub-linked-book-placeholder {
  width: 42px; height: 60px;
  background: var(--pk-color-bg);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pub-muted);
}
.pub-linked-book-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pub-linked-book-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pk-color-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-linked-book-author { font-size: 11px; color: var(--pub-muted); }

/* Інструменти */
.pub-tools { display: flex; flex-direction: column; gap: 6px; }
.pub-tools-divider { border: none; border-top: 1px solid var(--pub-border); margin: 4px 0; }
.pub-tool-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--pk-color-primary);
  border-radius: 6px;
  background: var(--pk-color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.pub-tool-btn:hover { opacity: .85; color: #fff; }
.pub-tool-btn--secondary {
  background: #fff;
  color: var(--pk-color-primary);
}
.pub-tool-btn--secondary:hover { background: var(--pk-color-bg); color: var(--pk-color-primary); }
.pub-tool-btn--success {
  background: #198754;
  border-color: #198754;
  color: #fff;
}

/* Блок ДСТУ-цитати */
.pub-citation-text {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--pk-color-bg);
  border-left: 3px solid var(--pk-color-accent);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--pk-color-text);
  word-break: break-word;
}

/* Метадані-рядки */
.pub-meta-list { display: flex; flex-direction: column; gap: 8px; }
.pub-meta-row { display: flex; flex-direction: column; gap: 2px; }
.pub-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--pub-muted); }
.pub-meta-val { font-size: 13px; color: var(--pk-color-text); word-break: break-word; }
a.pub-meta-val { color: var(--pk-color-primary); text-decoration: none; }
a.pub-meta-val:hover { text-decoration: underline; }

/* Схожі публікації */
.pub-similar-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--pub-border);
}
.pub-similar-item:last-child { border-bottom: none; }
.pub-similar-year { font-size: 10px; color: var(--pub-muted); text-transform: uppercase; letter-spacing: .4px; }
.pub-similar-title { font-size: 13px; color: var(--pk-color-primary); line-height: 1.35; font-weight: 500; }
.pub-similar-item:hover .pub-similar-title { text-decoration: underline; }

/* ---------- Планшет (769px – 1100px): менша текстова колонка ---------- */
@media (min-width: 769px) and (max-width: 1100px) {
  .pub-layout {
    grid-template-columns: 1fr 280px;
    gap: 32px;
    padding: 24px 20px 48px;
  }
}

/* ---------- Мобільний (<= 768px) ---------- */
@media (max-width: 768px) {
  .pub-hero { padding: 24px 16px 20px; }
  .pub-title { font-size: 24px; }
  .pub-layout {
    grid-template-columns: 1fr;
    padding: 20px 16px 48px;
  }
  .pub-sidebar {
    position: static;
    max-height: none;
  }
}

/* ============================================================
   PUBLICATION INDEX PAGE  (pix-*)
   ============================================================ */

/* ---------- Шапка ---------- */
.pix-header {
  background: var(--pk-color-primary, #0A192F);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 36px 32px 28px;
  position: relative;
  overflow: hidden;
}
.pix-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(212,175,55,.08) 0%, transparent 60%);
  pointer-events: none;
}
.pix-header-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.pix-title {
  font-family: var(--pk-font-heading);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.pix-intro { font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 0; max-width: 560px; line-height: 1.55; }

/* Пошуковий рядок */
.pix-search-form { margin-top: 20px; }
.pix-search-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pix-search-field {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.pix-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.4);
  font-size: 14px;
  pointer-events: none;
}
.pix-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.pix-search-input::placeholder { color: rgba(255,255,255,.38); }
.pix-search-input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.pix-year-select {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  font-size: 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  outline: none;
  min-width: 110px;
}
.pix-year-select option { background: #0A192F; color: #fff; }
.pix-search-btn {
  padding: 9px 20px;
  background: var(--pk-color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.pix-search-btn:hover { opacity: .85; }

/* ---------- Перемикач режимів ---------- */
.pix-tabs-wrap {
  background: #fff;
  border-bottom: 1px solid var(--pub-border);
  padding: 0 32px;
}
.pix-tabs {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 0;
}
.pix-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pk-color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.pix-tab:hover { color: var(--pk-color-primary); }
.pix-tab--active {
  color: var(--pk-color-primary);
  border-bottom-color: var(--pk-color-primary);
}

/* ---------- Основний контент ---------- */
.pix-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}

/* ---------- Фільтр-чіпи (стрічка) ---------- */
.pix-chips-wrap { margin-bottom: 20px; }
.pix-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pix-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--pub-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pk-color-text-muted);
  text-decoration: none;
  transition: all .15s;
}
.pix-chip:hover, .pix-chip--active {
  background: var(--pk-color-primary);
  border-color: var(--pk-color-primary);
  color: #fff;
}

/* ---------- Картка публікації ---------- */
.pix-list { display: flex; flex-direction: column; gap: 12px; }

.pix-card {
  display: flex;
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .15s, transform .1s;
}
.pix-card:hover {
  box-shadow: var(--pk-shadow-md);
  transform: translateY(-1px);
}

/* Кольорова смужка зліва */
.pix-card-stripe { width: 4px; flex-shrink: 0; }
.pix-card--article        .pix-card-stripe { background: #2e4057; }
.pix-card--research       .pix-card-stripe { background: #1a4a7a; }
.pix-card--methodic       .pix-card-stripe { background: #145a32; }
.pix-card--review         .pix-card-stripe { background: #7d4e00; }
.pix-card--overview       .pix-card-stripe { background: #7b241c; }
.pix-card--interview      .pix-card-stripe { background: #6e2f8a; }
.pix-card--writer_on_writer .pix-card-stripe { background: #7b241c; }
.pix-card--key_conversation .pix-card-stripe { background: #6e2f8a; }
.pix-card--survey         .pix-card-stripe { background: #2c6e6e; }
.pix-card--jubilee_essay  .pix-card-stripe { background: #8a6500; }

.pix-card-body { flex: 1; padding: 14px 16px; min-width: 0; }
.pix-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pix-card-date { font-size: 12px; color: var(--pk-color-text-muted); margin-left: auto; }
.pix-card-title {
  font-family: var(--pk-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--pk-color-primary);
  line-height: 1.3;
  margin-bottom: 5px;
}
.pix-card:hover .pix-card-title { text-decoration: underline; }
.pix-card-authors { font-size: 13px; color: var(--pk-color-text-muted); margin-bottom: 4px; }
.pix-card-author-link { color: var(--pk-color-text-muted); text-decoration: none; }
.pix-card-more { font-style: italic; }
.pix-card-excerpt { font-size: 13px; color: var(--pk-color-text); line-height: 1.6; margin: 0; }

/* ---------- Пагінація ---------- */
.pix-pagination { margin-top: 32px; }
.pix-pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.pix-page-btn {
  padding: 8px 16px;
  border: 1px solid var(--pub-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--pk-color-primary);
  text-decoration: none;
  background: #fff;
  transition: background .15s;
}
.pix-page-btn:hover { background: var(--pk-color-bg); }
.pix-page-info { font-size: 13px; color: var(--pk-color-text-muted); }

/* ---------- Секції «За темою» ---------- */
.pix-section { margin-bottom: 40px; }
.pix-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pub-border);
}
.pix-section-label { display: flex; align-items: center; gap: 10px; }
.pix-section-stripe {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}
.pix-section-stripe--article        { background: #2e4057; }
.pix-section-stripe--research       { background: #1a4a7a; }
.pix-section-stripe--methodic       { background: #145a32; }
.pix-section-stripe--review         { background: #7d4e00; }
.pix-section-stripe--overview       { background: #7b241c; }
.pix-section-stripe--interview      { background: #6e2f8a; }
.pix-section-stripe--writer_on_writer { background: #7b241c; }
.pix-section-stripe--key_conversation { background: #6e2f8a; }
.pix-section-stripe--survey         { background: #2c6e6e; }
.pix-section-stripe--jubilee_essay  { background: #8a6500; }
.pix-section-title {
  font-family: var(--pk-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--pk-color-primary);
  margin: 0;
}
.pix-section-count {
  font-size: 12px;
  color: var(--pk-color-text-muted);
  background: var(--pk-color-bg);
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  padding: 1px 8px;
}
.pix-section-all {
  font-size: 13px;
  font-weight: 500;
  color: var(--pk-color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.pix-section-all:hover { text-decoration: underline; }

/* Сітка карток в секції — 3 колонки × 2 рядки = 6 карток */
.pix-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pix-section-grid .pix-card { flex-direction: column; }
.pix-section-grid .pix-card-stripe { width: 100%; height: 4px; }

/* ---------- Спецпроекти ---------- */
.pix-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.pix-project-card {
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pix-project-body { padding: 18px 18px 12px; flex: 1; }
.pix-project-title {
  font-family: var(--pk-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--pk-color-primary);
  margin-bottom: 8px;
}
.pix-project-desc { font-size: 13px; color: var(--pk-color-text); line-height: 1.6; }
.pix-project-desc p { margin-bottom: 8px; }
.pix-project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid var(--pub-border);
  background: var(--pk-color-bg);
}
.pix-project-meta { display: flex; gap: 10px; align-items: center; }
.pix-project-books { font-size: 12px; color: var(--pk-color-text-muted); }
.pix-project-dates { font-size: 12px; color: var(--pk-color-text-muted); }
.pix-project-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--pk-color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.pix-project-link:hover { text-decoration: underline; }

/* ---------- Empty state ---------- */
/* ---------- Статистика шапки ---------- */
.pix-stats {
  display: flex;
  gap: 28px;
  margin-top: 16px;
  margin-bottom: 4px;
}
.pix-stat-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 3px;
}
.pix-stat-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ---------- Мініатюра в картці ---------- */
/* Контейнер: фіксована ширина, розтягується на повну висоту flex-батька */
.pix-card-thumb {
  width: 110px;
  flex-shrink: 0;
  overflow: hidden;
}
.pix-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Книжкові обкладинки — верх кадру (назва + арт зазвичай там) */
.pix-card-thumb-img--book { object-position: center top; }
/* Фото людей — обличчя в кадрі (15% від верху замість 50% center) */
.pix-card-thumb-img--person { object-position: center 15%; }

/* ---------- Grid-картки: горизонтальний layout (image збоку) ---------- */
/* Повертаємо row-layout замість column — image зліва, текст справа */
.pix-section-grid .pix-card { flex-direction: row; min-height: 140px; }
.pix-section-grid .pix-card-stripe { width: 4px; height: auto; flex-shrink: 0; }
.pix-section-grid .pix-card-thumb { width: 130px; }

.pix-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--pk-color-text-muted);
}
.pix-empty-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.pix-empty p { font-size: 15px; margin: 0; }

/* ---------- Планшет ---------- */
@media (max-width: 960px) {
  .pix-section-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Мобільний ---------- */
@media (max-width: 768px) {
  .pix-header { padding: 20px 16px 16px; }
  .pix-stats { gap: 16px; }
  .pix-stat-num { font-size: 20px; }
  .pix-tabs-wrap { padding: 0 12px; overflow-x: auto; }
  .pix-content { padding: 20px 16px 48px; }
  .pix-title { font-size: 22px; }
  .pix-tab { padding: 12px 14px; font-size: 13px; }
  .pix-section-grid { grid-template-columns: 1fr; }
  .pix-projects-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   БЛОК 2 — Компоненти та утиліти DESIGN.md v1.1
   ============================================================ */

/* ── 2а: Кнопки ────────────────────────────────────────────── */
.btn-accent,
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
  color: var(--pk-color-ink) !important;
  background: var(--pk-color-gold);
  border: none;
  font-weight: 600;
  font-family: var(--pk-font-sans);
}
.btn-accent:hover,
.btn-accent:focus {
  background: var(--pk-color-gold-l);
}

.btn-pk-primary {
  background: var(--pk-color-ink);
  color: var(--pk-color-paper);
  border: none;
  font-weight: 600;
  font-family: var(--pk-font-sans);
  border-radius: var(--pk-radius-sm);
}
.btn-pk-primary:hover {
  background: #2d2520;
  color: var(--pk-color-paper);
}

.btn-pk-ghost {
  background: transparent;
  border: 1px solid var(--pk-color-line);
  color: var(--pk-color-ink);
  font-family: var(--pk-font-sans);
}
.btn-pk-ghost:hover {
  border-color: var(--pk-color-gold);
  color: var(--pk-color-gold);
}

/* ── 2а: Текстові утиліти ───────────────────────────────────── */
.text-accent   { color: var(--pk-color-gold) !important; }
.text-pk-muted { color: var(--pk-color-muted) !important; }
.text-pk-gold  { color: var(--pk-color-gold) !important; }

/* ── 2а: Фонові утиліти ─────────────────────────────────────── */
.bg-pk-paper { background: var(--pk-color-paper) !important; }
.bg-pk-warm  { background: var(--pk-color-warm) !important; }
.bg-pk-ink   { background: var(--pk-color-ink) !important; }

/* ── 2б: Hero — єдиний стиль для всіх каталогових сторінок ─── */
.pk-hero,
.page-hero,
.catalog-hero,
.hero-section {
  background: var(--pk-color-ink);
  color: var(--pk-color-paper);
}

.pk-hero h1,
.pk-hero .hero-title,
.page-hero h1,
.catalog-hero h1 {
  color: var(--pk-color-paper);
  font-family: var(--pk-font-serif);
}

.pk-hero .hero-subtitle,
.page-hero .lead,
.catalog-hero .text-muted {
  color: rgba(247, 243, 236, 0.7);
}

/* Статистика у hero */
.pk-hero .stat-number,
.page-hero .stat-number,
.catalog-hero .stat-number {
  color: var(--pk-color-gold-l);
  font-family: var(--pk-font-serif);
}

.pk-hero .stat-label,
.page-hero .stat-label {
  color: rgba(247, 243, 236, 0.5);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── 2в: Базовий компонент .pk-card ────────────────────────── */
.pk-card {
  border: 1px solid var(--pk-color-line);
  background: var(--pk-color-white);
  position: relative;
  overflow: hidden;
  border-radius: var(--pk-radius-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pk-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pk-color-gold);
}

.pk-card:hover {
  box-shadow: 0 4px 20px rgba(26, 20, 16, 0.08);
  transform: translateY(-1px);
}

/* Модифікатори кольору смуги */
.pk-card--book   { --card-entity-color: var(--pk-entity-book); }
.pk-card--person { --card-entity-color: var(--pk-entity-person); }
.pk-card--inst   { --card-entity-color: var(--pk-entity-inst); }
.pk-card--award  { --card-entity-color: var(--pk-entity-award); }
.pk-card--series { --card-entity-color: var(--pk-entity-series); }
.pk-card--pub    { --card-entity-color: var(--pk-color-gold); }

.pk-card--book::before,
.pk-card--person::before,
.pk-card--inst::before,
.pk-card--award::before,
.pk-card--series::before,
.pk-card--pub::before {
  background: var(--card-entity-color);
}

/* ── 2г: Картка діяча (.person-card) ───────────────────────── */
.person-card {
  border: 1px solid var(--pk-color-line);
  background: var(--pk-color-white);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border-radius: var(--pk-radius-sm);
}

.person-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pk-entity-person);
}

.person-card:hover {
  box-shadow: 0 4px 20px rgba(26, 20, 16, 0.08);
  transform: translateY(-1px);
}

/* ── 2д: Sidebar заголовки (уніфікація) ─────────────────────── */
.sidebar-section-title,
.sidebar .section-label,
.sidebar h6,
.aside-title,
[class*="sidebar"] h5,
[class*="sidebar"] h6 {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--pk-color-gold) !important;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pk-color-line);
  font-family: var(--pk-font-sans) !important;
}

/* ── 2е: Sticky sidebar ─────────────────────────────────────── */
.sticky-sidebar,
.sidebar-sticky,
aside.sticky-top,
.col-sidebar .sticky-top {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pk-color-line) transparent;
}

@media (max-width: 900px) {
  .sticky-sidebar,
  .sidebar-sticky,
  aside.sticky-top,
  .col-sidebar .sticky-top {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* ── 2є: Фільтр-чіпси (flex-wrap) ──────────────────────────── */
.role-filters,
.filter-chips,
.filters-row,
[class*="role-filter"],
[class*="chip-container"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  row-gap: 8px !important;
  align-items: center;
}

/* ── Доступність (WCAG 2.2 AA) ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--pk-focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}