/* =============================================================
   7rool.pl — Style artykułów blogowych
   Moduł: rool_blogcss | v1.0
   ============================================================= */

/* ===== ZMIENNE ===== */
:root {
  --r-green:       #008E47;
  --r-green-dark:  #006633;
  --r-green-light: #E8F5EE;
  --r-orange:      #E8780A;
  --r-orange-dark: #C4620A;
  --r-orange-light:#FEF3E8;
  --r-ink:         #1A1A1A;
  --r-ink-mid:     #3D3D3D;
  --r-ink-light:   #6B6B6B;
  --r-border:      #E0E0D8;
}

/* ===== HERO ===== */
.rool-hero {
  background: linear-gradient(135deg, #006633 0%, #008E47 55%, #00B860 100%);
  border-radius: 14px;
  padding: 48px 40px 42px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.rool-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.rool-hero__bc { font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.6); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rool-hero__bc a { color: #B8F0D0; text-decoration: none; }
.rool-hero__bc a:hover { color: #fff; }
.rool-hero__tag { display: inline-block; background: var(--r-orange); color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: 3px; margin-bottom: 16px; font-weight: 700; }
.rool-hero h1 { font-size: clamp(24px,4.5vw,44px); font-weight: 900; color: #fff; line-height: 1.12; margin-bottom: 16px; }
.rool-hero__lead { font-size: 17px; color: rgba(255,255,255,.88); max-width: 580px; line-height: 1.65; margin-bottom: 22px; }
.rool-hero__meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: rgba(255,255,255,.6); }

/* ===== LAYOUT ===== */
.rool-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
@media (max-width: 860px) { .rool-layout { grid-template-columns: 1fr; } .rool-sidebar { order: -1; } }

/* ===== ARTYKUŁ — NAGŁÓWKI ===== */
.rool-article { counter-reset: sec; }
.rool-article h2 { font-size: 24px; font-weight: 800; color: var(--r-green-dark); margin: 44px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--r-green-light); line-height: 1.3; counter-increment: sec; }
.rool-article h2::before { content: counter(sec) '. '; color: var(--r-orange); }
.rool-article h3 { font-size: 19px; font-weight: 700; color: var(--r-ink); margin: 28px 0 12px; }
.rool-article p { margin-bottom: 16px; font-size: 16.5px; color: var(--r-ink-mid); line-height: 1.8; }
.rool-article strong { color: var(--r-ink); }
.rool-article a { color: var(--r-green-dark); font-weight: 600; }

/* ===== SPIS TREŚCI ===== */
.rool-toc { background: var(--r-green-light); border-left: 4px solid var(--r-green); border-radius: 0 8px 8px 0; padding: 20px 24px; margin-bottom: 36px; }
.rool-toc__ttl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--r-green-dark); font-weight: 700; margin-bottom: 12px; }
.rool-toc ol { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rool-toc li { margin: 0; }
.rool-toc a { color: var(--r-green-dark); text-decoration: none; font-size: 14.5px; }
.rool-toc a:hover { color: var(--r-orange); text-decoration: underline; }

/* ===== ZDJĘCIA ===== */
.rool-fig { margin: 0 0 6px; }
.rool-fig img { width: 100%; height: auto; display: block; border-radius: 10px; }
.rool-fig figcaption { font-size: 13px; color: var(--r-ink-light); font-style: italic; text-align: center; margin: 6px 0 28px; }

/* ===== CALLOUT BOXY ===== */
.rool-call { padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 22px 0; font-size: 15.5px; line-height: 1.7; color: var(--r-ink-mid); }
.rool-call strong { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.rool-call--tip  { background: var(--r-green-light); border-left: 4px solid var(--r-green); }
.rool-call--tip strong { color: var(--r-green-dark); }
.rool-call--warn { background: #FFF8E1; border-left: 4px solid #F9A825; }
.rool-call--warn strong { color: #C4620A; }
.rool-call--info { background: var(--r-orange-light); border-left: 4px solid var(--r-orange); }
.rool-call--info strong { color: var(--r-orange-dark); }

/* ===== TABELA PORÓWNAWCZA ===== */
.rool-tbl-wrap { overflow-x: auto; margin: 16px 0 28px; border-radius: 8px; border: 1px solid var(--r-border); }
.rool-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rool-tbl th { background: var(--r-green-dark); color: #fff; padding: 12px 14px; text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.rool-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--r-border); vertical-align: top; }
.rool-tbl tr:nth-child(even) td { background: var(--r-green-light); }
.rool-tbl tr:last-child td { border-bottom: none; }
.rool-tbl .hl td { background: var(--r-orange-light) !important; font-weight: 600; }
.rool-badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rool-badge--g { background: var(--r-green); color: #fff; }
.rool-badge--o { background: var(--r-orange); color: #fff; }

/* ===== OBJAWY GRID ===== */
.rool-syms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 28px; }
@media (max-width: 560px) { .rool-syms { grid-template-columns: 1fr; } }
.rool-sym { background: #fff; border: 1px solid var(--r-border); border-top: 3px solid var(--r-orange); border-radius: 8px; padding: 16px; }
.rool-sym__ico { font-size: 22px; display: block; margin-bottom: 7px; }
.rool-sym h4 { font-size: 14.5px; font-weight: 700; color: var(--r-ink); margin-bottom: 4px; }
.rool-sym p { font-size: 13px; color: var(--r-ink-light); margin: 0; line-height: 1.5; }

/* ===== NARZĘDZIA ===== */
.rool-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
.rool-tool { background: #fff; border: 1.5px solid var(--r-border); border-radius: 6px; padding: 5px 11px; font-size: 13px; color: var(--r-ink-mid); }

/* ===== KROKI ===== */
.rool-steps { list-style: none; padding: 0; margin: 16px 0 32px; display: flex; flex-direction: column; }
.rool-step { display: flex; gap: 16px; padding-bottom: 24px; position: relative; }
.rool-step:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 43px; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--r-green), var(--r-green-light)); }
.rool-step__n { width: 43px; height: 43px; min-width: 43px; background: var(--r-green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; position: relative; z-index: 1; box-shadow: 0 3px 10px rgba(0,142,71,.3); flex-shrink: 0; }
.rool-step__c { padding-top: 9px; }
.rool-step__c h4 { font-size: 15.5px; font-weight: 700; color: var(--r-ink); margin-bottom: 5px; }
.rool-step__c p { font-size: 14.5px; color: var(--r-ink-mid); margin: 0; line-height: 1.65; }
.rool-step__c a { color: var(--r-green-dark); font-weight: 600; }

/* ===== KARTY PRODUKTÓW ===== */
.rool-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 32px; }
@media (max-width: 560px) { .rool-prods { grid-template-columns: 1fr; } }
.rool-prod { background: #fff; border: 2px solid var(--r-border); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.rool-prod:hover { border-color: var(--r-green); box-shadow: 0 6px 22px rgba(0,142,71,.14); }
.rool-prod__ico { height: 72px; background: var(--r-green-light); display: flex; align-items: center; justify-content: center; font-size: 32px; border-bottom: 1px solid var(--r-border); }
.rool-prod__b { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.rool-prod__tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-green); font-weight: 700; display: block; margin-bottom: 5px; }
.rool-prod h4 { font-size: 14px; font-weight: 700; color: var(--r-ink); margin-bottom: 7px; line-height: 1.4; }
.rool-prod p { font-size: 13px; color: var(--r-ink-light); margin-bottom: 14px; flex: 1; line-height: 1.55; }

/* ===== PRZYCISKI ===== */
.rool-btn { display: inline-block; padding: 10px 18px; border-radius: 6px; text-decoration: none !important; font-size: 13px; font-weight: 700; letter-spacing: .04em; transition: opacity .2s, transform .15s; cursor: pointer; align-self: flex-start; }
.rool-btn:hover { opacity: .85; transform: translateY(-1px); }
.rool-btn--g  { background: var(--r-green); color: #fff !important; }
.rool-btn--o  { background: var(--r-orange); color: #fff !important; }
.rool-btn--og { background: transparent; color: var(--r-green) !important; border: 2px solid var(--r-green); }
.rool-btn--w  { background: #fff; color: var(--r-green-dark) !important; }
.rool-btn--wo { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.65); }

/* ===== CTA BLOCK ===== */
.rool-cta { background: linear-gradient(135deg, #006633 0%, #008E47 100%); border-radius: 14px; padding: 34px 28px; margin: 40px 0 24px; text-align: center; }
.rool-cta h3 { font-size: 21px; color: #fff; margin-bottom: 10px; }
.rool-cta p { color: rgba(255,255,255,.85); margin-bottom: 20px; font-size: 15px; }
.rool-cta .rool-btn { margin: 4px 5px; }

/* ===== FAQ ===== */
.rool-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.rool-faq__item { background: #fff; border: 1px solid var(--r-border); border-radius: 10px; overflow: hidden; }
.rool-faq__q { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--r-ink); gap: 12px; list-style: none; transition: background .2s; user-select: none; }
.rool-faq__q::-webkit-details-marker { display: none; }
.rool-faq__q:hover { background: var(--r-green-light); }
.rool-faq__ico { width: 26px; height: 26px; min-width: 26px; background: var(--r-green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 300; transition: transform .25s, background .2s; line-height: 1; flex-shrink: 0; }
details[open] .rool-faq__ico { transform: rotate(45deg); background: var(--r-orange); }
.rool-faq__a { padding: 14px 20px 18px; border-top: 1px solid var(--r-border); font-size: 15px; color: var(--r-ink-mid); line-height: 1.75; }
.rool-faq__a a { color: var(--r-green-dark); font-weight: 600; }

/* ===== SIDEBAR ===== */
.rool-sidebar { position: sticky; top: 20px; }
.rool-scard { background: #fff; border: 1px solid var(--r-border); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.rool-scard__hd { background: var(--r-green); color: #fff; padding: 13px 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.rool-sprod { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--r-border); text-decoration: none !important; transition: background .2s; }
.rool-sprod:hover { background: var(--r-green-light); }
.rool-sprod__ico { width: 40px; height: 40px; min-width: 40px; background: var(--r-green-light); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.rool-sprod__name { font-size: 13px; font-weight: 700; color: var(--r-ink) !important; line-height: 1.3; margin-bottom: 2px; }
.rool-sprod__spec { font-size: 11px; color: var(--r-ink-light); }
.rool-sprod__arr { color: var(--r-green); font-size: 18px; margin-left: auto; }
.rool-scard__ft { display: block; padding: 13px 16px; text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-green-dark) !important; text-decoration: none !important; font-weight: 700; transition: background .2s; }
.rool-scard__ft:hover { background: var(--r-green-light); }
.rool-scontact { background: #F5EDE3; border-radius: 12px; padding: 18px 16px; }
.rool-scontact h4 { font-size: 15px; color: #6B4C2A; margin-bottom: 9px; font-weight: 700; }
.rool-scontact p { color: var(--r-ink-mid); margin-bottom: 11px; font-size: 13px; line-height: 1.5; }
.rool-scontact a { color: var(--r-green-dark) !important; font-weight: 700; text-decoration: none !important; display: block; margin-bottom: 4px; font-size: 13.5px; }
.rool-scontact a:hover { text-decoration: underline !important; }

/* ===== POWIĄZANE ARTYKUŁY ===== */
.rool-related { margin-top: 48px; }
.rool-related h3 { font-size: 21px; color: var(--r-green-dark); margin-bottom: 16px; font-weight: 800; }
.rool-rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 560px) { .rool-rel-grid { grid-template-columns: 1fr; } }
.rool-rel { background: #fff; border: 1px solid var(--r-border); border-top: 3px solid var(--r-green); border-radius: 10px; padding: 17px; text-decoration: none !important; transition: all .2s; display: block; }
.rool-rel:hover { border-top-color: var(--r-orange); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.rool-rel__tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--r-ink-light); margin-bottom: 6px; }
.rool-rel__title { font-size: 14.5px; font-weight: 700; color: var(--r-ink); line-height: 1.4; }

/* ===== AUTOR ===== */
.rool-author { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 12px; padding: 20px; border: 1px solid var(--r-border); margin-top: 40px; border-top: 3px solid var(--r-green); }
.rool-author__av { width: 52px; height: 52px; min-width: 52px; background: var(--r-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.rool-author p { font-size: 13.5px; color: var(--r-ink-light); margin: 3px 0 0; }
.rool-author strong { font-size: 15px; color: var(--r-ink); }

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
  .rool-hero { padding: 32px 20px 28px; }
  .rool-hero h1 { font-size: 24px; }
  .rool-cta { padding: 24px 16px; }
  .rool-cta h3 { font-size: 18px; }
  .rool-tbl { font-size: 13px; }
  .rool-tbl th, .rool-tbl td { padding: 9px 10px; }
}