/* ─────────────────────────────────────────────────────────────
   guide.css — shared primitives for /poradniki/* articles.
   Loaded from _guide.html for every guide page.

   Guide-specific color tokens (--green, --orange) are scoped to
   .guide-hero + .article-body so they do not leak into :root and
   collide with globals defined in main.css (e.g. --green #22c55e).
   ───────────────────────────────────────────────────────────── */

.guide-hero,
.article-body {
  --green: #3ddc84;
  --orange: #ff7b2b;
}

.u-container--narrow { position:relative; z-index:1; }

/* Guide hero frame — matches guide-card outer width (960px),
   text inside capped at 72ch to match article reading column */
.guide-hero-inner {
  max-width: var(--article--max-width);
  margin: 0 auto 0 0;
  padding: 0 var(--nav--frame-padding);
  position: relative;
  z-index: 1;
}
.guide-hero-inner .article-header,
.guide-hero-inner .breadcrumb {
  max-width: 72ch;
  margin-left: 0;
  margin-right: auto;
}

/* Guide body frame (defined from scratch — does not extend .topic-card) */
.guide-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--card--radius);
  padding: var(--space--md) var(--nav--frame-padding) var(--nav--frame-padding);
  max-width: var(--article--max-width);
  margin: 0 auto 0 0;
}
.guide-card .article-body {
  max-width: 72ch;
  margin: 0;
}

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text3); margin-bottom:28px; flex-wrap:wrap; }
.breadcrumb a { color:var(--text3); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--text2); }
.breadcrumb span { opacity:.4; }
.breadcrumb-current { color:var(--text2); opacity:1; }

/* Article header */
.article-header { margin-bottom:36px; }
.article-cats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.cat-tag { font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; background:rgba(192,39,45,.15); color:var(--accent); border:1px solid rgba(192,39,45,.3); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.5px; }
.article-title { font-family:var(--font-display); font-size:clamp(32px, 5vw, 48px); font-weight:600; line-height:1.15; margin-bottom:16px; }
.article-title .accent { color:var(--accent); }
.article-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:16px; color:var(--text3); }
.article-meta span { display:flex; align-items:center; gap:5px; }

/* Article body */
.article-body { font-size:16px; color:var(--text2); line-height:1.75; }
.article-body > p { margin-bottom:16px; }
.article-body h2 { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--text); margin-top:var(--space--xl); margin-bottom:var(--space--sm); }
.article-body h3 { font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--text); margin-top:var(--space--xl); margin-bottom:var(--space--sm); }
.article-body ul, .article-body ol { padding-left:20px; margin-bottom:16px; }
.article-body li { margin-bottom:6px; }
.article-body strong { color:var(--text); font-weight:600; }
.article-body a:not(.cta-link) { color:var(--accent); text-decoration:none; }
.article-body a:not(.cta-link):hover { text-decoration:underline; }

/* CTA inline link */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #9A1E22 0%, #85191C 40%, #6E1418 100%);
  color: #E8EAF0;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 0;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  filter: drop-shadow(0 2px 12px var(--accent-glow));
  text-decoration: none;
  transition: background 0.2s, filter 0.2s, transform 0.2s;
}
.cta-link:hover {
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #B02528 0%, #9A1E22 40%, #85191C 100%);
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 20px rgba(192, 39, 45, 0.45));
}
.cta-block { margin:28px 0; }

/* Summary box */
.summary-box { background:var(--surface); border-left:3px solid var(--accent); border-radius:var(--card--radius); padding:var(--space--md); margin:var(--space--lg) 0; }
.summary-box h2 { font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--text); margin-bottom:10px; }
.summary-box p { font-size:14px; color:var(--text2); line-height:1.7; margin-bottom:8px; }
.summary-box p:last-child { margin:0; }

/* FAQ */
.faq { margin-top:40px; }
.faq h2 { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--text); margin-bottom:20px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 20px; margin-bottom:10px; }
.faq-q { font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; }
.faq-a { font-size:14px; color:var(--text2); line-height:1.6; }

/* Article footer */
.article-footer { margin-top:48px; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:12px; color:var(--text3); }

/* Related guides — rendered outside the guide-card frame */
.related-guides { max-width:var(--article--max-width); margin:var(--space--xl) auto 0; padding:0 var(--nav--frame-padding); }
.related-guides h2 { font-size:16px; font-weight:600; color:var(--text); margin-bottom:16px; }
.related-guides ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.related-guides li a { color:var(--text2); text-decoration:none; font-size:14px; transition:color .15s; }
.related-guides li a:hover { color:var(--text); }

/* Divider */
hr { border:none; border-top:1px solid var(--border); margin:36px 0; }

/* ─────────────────────────────────────────────────────────────
   Shared content primitives — used by 2+ guides.
   ───────────────────────────────────────────────────────────── */

/* Rank cards (ranking guides) */
.rank-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px 22px; margin-bottom:14px; display:flex; gap:16px; align-items:flex-start; }
.rank-card.top {
  background: rgba(192, 39, 45, 0.06);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: rgba(192, 39, 45, 0.4);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.rank-num { font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--accent); flex-shrink:0; line-height:1; min-width:32px; }
.rank-body h3 { font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--text); margin:0 0 6px; }
.rank-body p { font-size:14px; color:var(--text2); line-height:1.6; margin:0 0 10px; }

/* Comparison tables */
.comp-table-wrap { overflow-x:auto; margin:20px 0 24px; border-radius:10px; border:1px solid var(--border); }
.comp-table { width:100%; border-collapse:collapse; min-width:380px; }
.comp-table thead tr { background:var(--bg3); }
.comp-table th { padding:10px 14px; text-align:left; font-size:12px; color:var(--text3); text-transform:uppercase; letter-spacing:1.5px; font-family:var(--font-mono); border-bottom:1px solid var(--border); }
.comp-table td { padding:11px 14px; font-size:14px; color:var(--text2); border-bottom:1px solid var(--border); }
.comp-table tr:last-child td { border-bottom:none; }
.comp-table tr:hover td { background:var(--surface2); }

/* Verdict grid (good vs bad comparisons) */
.verdict-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.verdict-card { background:var(--surface); border-radius:var(--card--radius); padding:var(--space--md); }
.verdict-card.v-good,
.verdict-card.v-ddr4,
.verdict-card.v-ok { border-left:3px solid var(--ok); }
.verdict-card.v-bad,
.verdict-card.v-ddr5,
.verdict-card.v-warn { border-left:3px solid var(--warn); }
.verdict-card h3 { font-family:var(--font-display); font-size:16px; font-weight:600; margin-bottom:10px; }
.verdict-card ul { padding-left:16px; }
.verdict-card li { font-size:14px; color:var(--text2); margin-bottom:5px; line-height:1.5; }

@media (max-width:768px) {
  .rank-card { flex-direction:column; gap:8px; }
  .verdict-grid { grid-template-columns:1fr; }
}