/* ============================================================
   5 · KNJIŽNICA ZMOŽNOSTI — section styles
   Ported 1:1 from prototype Alfred.dc.html (section 5, #EFE7D8).
   Values match prototype exactly; established tokens from
   css/variables.css used with prototype-hex fallbacks.
   Depends on shared base for: .wrap, .eyebrow, h2, .lead, reveal,
   :focus-visible. Scoped overrides below guarantee prototype look
   even against the current production base.
   ============================================================ */

.knjiznica {
  background: #EFE7D8;                     /* cream variant — alternating sections */
  color: var(--navy, #0B1929);
  padding-block: clamp(64px, 9vw, 120px);  /* prototype section rhythm */
}
.knjiznica .wrap {
  max-width: 1140px;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* header — prototype spec (scoped so production base can't distort it) */
.knjiznica .eyebrow {
  font: 600 12px var(--sans, 'Inter', sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass, #B8935A);
  margin: 0;
}
.knjiznica .eyebrow::before { content: none; } /* no dash in prototype eyebrow */
.knjiznica h2 {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.knjiznica .lead {
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--graphite, #2C3440);
  max-width: 64ch;
}

/* 1px-brass-fuga grid — gap shows brass through card seams */
.knj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: rgba(184, 147, 90, .35);
  border: 1px solid rgba(184, 147, 90, .35);
  border-radius: var(--radius, 2px);
  overflow: hidden;
}

.knj-card {
  background: #EFE7D8;
  padding: clamp(24px, 3vw, 32px);
}

/* 38px pictogram — line-art, brass stroke */
.knj-icon {
  stroke: var(--brass, #B8935A);
  stroke-width: var(--illo-sw, 1.6);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knj-title {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 20px;
  margin: 16px 0 12px;
  text-wrap: balance;
}

.knj-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--graphite, #2C3440);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.knj-list li { display: flex; gap: 8px; }
.knj-list li::before {
  content: '·';
  color: var(--brass, #B8935A);
  flex: none;
}

/* »KAKO — mehanizem« line, hairline above */
.knj-kako {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(184, 147, 90, .3);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--graphite, #2C3440);
}
.knj-kako-label {
  font: 600 11px var(--sans, 'Inter', sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass, #B8935A);
}

/* navy »40+« card */
.knj-card--navy {
  background: var(--navy, #0B1929);
  color: var(--cream, #F4EDE0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
.knj-graph {
  position: absolute;
  top: 22px;
  right: 22px;
  stroke: rgba(184, 147, 90, .55);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}
.knj-40-num {
  margin: 0;
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: clamp(46px, 6vw, 66px);
  color: var(--brass, #B8935A);
  line-height: .85;
}
.knj-40-title {
  margin: 0;
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
}
.knj-40-sub {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244, 237, 224, .72);
}
.knj-live {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 600 12px var(--sans, 'Inter', sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage, #7A8B5C);
}
.knj-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage, #7A8B5C);
  animation: pulseDot 2.4s ease-in-out infinite;
}

/* canonical keyframes (same as prototype/global — identical redefinition is safe) */
@keyframes pulseDot {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.3); }
}

/* most-kartica → #kako-deluje */
.knj-bridge {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  justify-content: space-between;
  border: 1px solid rgba(184, 147, 90, .4);
  border-radius: var(--radius, 2px);
  padding: 20px clamp(18px, 2.5vw, 28px);
  background: var(--cream, #F4EDE0);
}
.knj-bridge-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--graphite, #2C3440);
  max-width: 62ch;
}
.knj-bridge-lead {
  font-family: var(--serif, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy, #0B1929);
}
.knj-bridge-cta {
  font: 600 14px var(--sans, 'Inter', sans-serif);
  color: var(--navy, #0B1929);
  text-decoration: none;
  border: 1px solid var(--brass, #B8935A);
  border-radius: var(--radius, 2px);
  padding: 12px 18px;
  white-space: nowrap;
  transition: background .2s ease;
}
.knj-bridge-cta:hover { background: rgba(184, 147, 90, .12); }

/* micro note under bridge (production canon sales beat) */
.knj-micro {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--graphite, #2C3440);
  opacity: .8;
}

@media (max-width: 640px) {
  .knj-bridge-cta { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .knj-live-dot { animation: none; }
}