/* assets/blocks.css — styl klocków treści (Lex & Strategy)
   Scope: .ls-article (blog + podgląd panelu). Samowystarczalne — własne zmienne. */
.ls-article {
  --ls-navy: #0E1622; --ls-navy2: #111B29; --ls-navy3: #16233A;
  --ls-gold: #C9A158; --ls-goldL: #D9B36C; --ls-white: #F5F2EC; --ls-muted: #9AA3B2;
  --ls-line: rgba(201,161,88,.28); --ls-hair: rgba(255,255,255,.08);
  --ls-serif: 'Cormorant Garamond', Georgia, serif;
  --ls-sans: 'Inter', system-ui, sans-serif;
  color: #D7DAE0; font-family: var(--ls-sans);
}
.ls-article .ls-blk { margin: 30px 0; }
.ls-article .ls-blk:first-child { margin-top: 0; }

.ls-eyebrow { color: var(--ls-gold); font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 14px; }
.ls-ico { width: 40px; height: 40px; color: var(--ls-gold); flex-shrink: 0; }

/* Nagłówek / lead / tekst / cytat */
.ls-head h2 { font-family: var(--ls-serif); font-size: clamp(28px,3.4vw,40px); font-weight: 600; color: var(--ls-white); line-height: 1.12; margin: 0; }
.ls-head h3 { font-family: var(--ls-serif); font-size: clamp(22px,2.6vw,28px); font-weight: 600; color: var(--ls-white); margin: 0; }
.ls-lead { font-size: clamp(18px,2.2vw,22px); line-height: 1.6; color: var(--ls-white); font-family: var(--ls-serif); }
.ls-rich { font-size: 17.5px; line-height: 1.85; }
.ls-rich p { margin: 0 0 18px; } .ls-rich p:last-child { margin-bottom: 0; }
.ls-rich a { color: var(--ls-goldL); border-bottom: 1px solid var(--ls-line); }
.ls-rich ul, .ls-rich ol { margin: 0 0 18px 22px; } .ls-rich li { margin-bottom: 8px; }
.ls-rich strong { color: var(--ls-white); }
.ls-quote { border-left: 2px solid var(--ls-gold); padding: 6px 0 6px 28px; margin: 36px 0; font-family: var(--ls-serif); font-size: clamp(22px,2.8vw,28px); font-style: italic; color: var(--ls-white); line-height: 1.4; }
.ls-quote cite { display: block; margin-top: 14px; font-size: 14px; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-gold); font-family: var(--ls-sans); }

/* Statystyki */
.ls-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1px; background: var(--ls-hair); border: 1px solid var(--ls-hair); }
.ls-stat { background: var(--ls-navy2); padding: 28px 24px; }
.ls-stat-val { font-family: var(--ls-serif); font-size: 42px; font-weight: 600; color: var(--ls-goldL); line-height: 1; }
.ls-stat-lbl { color: var(--ls-muted); font-size: 14px; margin-top: 10px; line-height: 1.5; }
.ls-stat-src { color: var(--ls-muted); font-size: 11px; margin-top: 12px; opacity: .7; letter-spacing: .04em; }

/* Ikona + opis */
.ls-features { display: grid; gap: 1px; background: var(--ls-hair); border: 1px solid var(--ls-hair); }
.ls-features.cols-2 { grid-template-columns: repeat(2,1fr); }
.ls-features.cols-3 { grid-template-columns: repeat(3,1fr); }
.ls-features.cols-4 { grid-template-columns: repeat(4,1fr); }
.ls-feature { background: var(--ls-navy2); padding: 30px 26px; }
.ls-feature h4 { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-white); margin: 16px 0 10px; }
.ls-feature p { color: var(--ls-muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* Proces */
.ls-process { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--ls-hair); }
.ls-step { padding: 28px 22px; position: relative; border-left: 1px solid var(--ls-hair); }
.ls-step:first-child { border-left: none; }
.ls-step::before { content: '→'; position: absolute; left: -10px; top: 32px; color: var(--ls-gold); font-size: 18px; background: var(--ls-navy); width: 20px; text-align: center; }
.ls-step:first-child::before { display: none; }
.ls-step-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--ls-gold); border-radius: 50%; color: var(--ls-gold); font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.ls-step h4 { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-white); margin: 0 0 8px; }
.ls-step p { color: var(--ls-muted); font-size: 13.5px; line-height: 1.6; margin: 0; }

/* Porównanie */
.ls-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ls-col { border: 1px solid var(--ls-hair); padding: 28px 26px; }
.ls-col.good { border-top: 2px solid var(--ls-gold); }
.ls-col.bad { border-top: 2px solid #C46A5A; }
.ls-col h4 { font-family: var(--ls-serif); font-size: 22px; font-weight: 600; color: var(--ls-white); margin: 0 0 18px; }
.ls-col ul { list-style: none; margin: 0; padding: 0; }
.ls-col li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ls-hair); color: var(--ls-muted); font-size: 15px; }
.ls-col li:last-child { border-bottom: none; }
.ls-col li .ls-ico { width: 20px; height: 20px; margin-top: 2px; }
.ls-col.good li .ls-ico { color: var(--ls-gold); }
.ls-col.bad li .ls-ico { color: #C46A5A; }

/* Callout */
.ls-callout { display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px; border: 1px solid var(--ls-line); background: rgba(201,161,88,.06); }
.ls-callout.danger { border-color: rgba(196,106,90,.5); background: rgba(196,106,90,.07); }
.ls-callout.danger .ls-ico { color: #C46A5A; }
.ls-callout h4 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-white); margin: 0 0 8px; }
.ls-callout p { margin: 0; color: #C9CDD6; font-size: 15.5px; line-height: 1.6; }

/* Wykres */
.ls-chart { border: 1px solid var(--ls-hair); background: var(--ls-navy2); padding: 26px; margin: 30px 0; }
.ls-chart-title { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-white); margin-bottom: 14px; }
.ls-chart-svg { width: 100%; height: auto; }
.ls-chart-svg .ls-grid { stroke: var(--ls-hair); stroke-width: 1; }
.ls-chart-svg .ls-axis { fill: var(--ls-muted); font: 12px var(--ls-sans); }
.ls-chart-svg .ls-area { fill: rgba(201,161,88,.12); }
.ls-chart-svg .ls-line { fill: none; stroke: var(--ls-gold); stroke-width: 2.5; }
.ls-chart-svg .ls-dot { fill: var(--ls-navy2); stroke: var(--ls-goldL); stroke-width: 2; }
.ls-chart-svg .ls-pt { fill: var(--ls-white); font: 600 13px var(--ls-sans); }
.ls-chart-cap { color: var(--ls-muted); font-size: 12px; margin-top: 14px; }

/* Obraz */
.ls-image { margin: 30px 0; }
.ls-image img { width: 100%; border: 1px solid var(--ls-hair); }
.ls-image figcaption { color: var(--ls-muted); font-size: 13px; margin-top: 10px; text-align: center; }

/* Źródła */
.ls-sources { border-top: 1px solid var(--ls-hair); padding-top: 24px; }
.ls-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ls-sources li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; color: var(--ls-muted); }
.ls-src-name { color: var(--ls-white); font-weight: 600; }
.ls-src-note { color: var(--ls-muted); }
.ls-sources a { color: var(--ls-goldL); border-bottom: 1px solid var(--ls-line); }

@media (max-width: 760px) {
  .ls-features.cols-3, .ls-features.cols-4 { grid-template-columns: repeat(2,1fr); }
  .ls-process { grid-auto-flow: row; }
  .ls-step { border-left: none; border-top: 1px solid var(--ls-hair); }
  .ls-step:first-child { border-top: none; }
  .ls-step::before { content: '↓'; left: 50%; top: -10px; transform: translateX(-50%); }
  .ls-compare { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ls-features.cols-2, .ls-features.cols-3, .ls-features.cols-4 { grid-template-columns: 1fr; }
}