/* ==========================================================================
MASTER CSS - OGRZEWANIE PEX (Blog & Aktualności System)
Wersja: 11.01.26 (Patch IDEOLO 2.0)
========================================================================== */

/* ==========================================================================
1. UKŁAD STRONY (Layout & Grid)
========================================================================== */
/* Ukrycie lewego paska (tylko na stronie pojedynczego wpisu) */
.blog-item_page aside {
    display: none;
}
/* Rozciągnięcie kontenera z treścią na pełną szerokość (Pojedynczy wpis) */
.blog-item_page #layout > div:not(aside) {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
/* Ukrycie lewego paska (Lista wpisów) */
.blog-list_page .sidebar,
.blog-list_page aside {
    display: none;
}
/* Rozciągnięcie głównej treści na pełną szerokość (Lista wpisów) */
.blog-list_page .content,
.blog-list_page main {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* ==========================================================================
2. TYPOGRAFIA BLOGA (Czytelność)
========================================================================== */
/* Kontener główny treści */
.blog-item_page .blog-post-content {
    font-family: inherit;
    font-size: 16px;
    color: #333;
    line-height: 1.7;
}
/* Nagłówki */
.blog-item_page .blog-post-content h2 {
    font-size: 26px;
    font-weight: 700;
    margin-top: 45px;
    margin-bottom: 25px;
    color: #000;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.blog-item_page .blog-post-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 35px;
    margin-bottom: 15px;
    color: #222;
}
/* Paragrafy i Listy */
.blog-item_page .blog-post-content p,
.blog-item_page .blog-post-content ul,
.blog-item_page .blog-post-content ol {
    font-size: 16px;
    margin-bottom: 24px;
}
.blog-item_page .blog-post-content ul,
.blog-item_page .blog-post-content ol {
    padding-left: 20px;
}
.blog-item_page .blog-post-content li {
    margin-bottom: 8px;
}
/* Linki w tekście */
.blog-item_page .blog-post-content a {
    color: #0056b3;
    text-decoration: underline;
}
/* --- Link pomocniczy (np. pod listą) --- */
.blog-ref-link {
    font-size: 0.9em;
    font-weight: 600;
    color: #0056b3;
    text-decoration: underline;
    display: inline-block;
    margin-top: 4px;
}
.blog-ref-link:hover {
    text-decoration: none;
    color: #003d82;
}

/* ==========================================================================
3. OBRAZKI W TREŚCI (Full Width Fix)
========================================================================== */
div.blog-item_sub img.blog_image {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px 0 !important;
    height: auto !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}
@media (max-width: 768px) {
    div.blog-item_sub img.blog_image {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
4. SYSTEM SMART BLOCKS (Wersja Inteligentna)
========================================================================== */
/* BAZA: Zwykły szary blok (np. Parametry, Dobór) */
.smart-block {
    display: block;
    background-color: #f9f9f9;
    border: 1px solid #f0f0f0; /* Delikatna ramka dookoła */
    border-left: none; /* Brak grubej kreski w standardzie */
    padding: 20px 25px;
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    border-radius: 8px;
    box-sizing: border-box;
}
/* WNĘTRZE BLOKÓW */
.smart-block-title {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    border: none !important;
    text-transform: none !important;
    padding: 0 !important;
}
.smart-block hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}
.smart-block a {
    text-decoration: underline !important;
    color: #000 !important;
    font-weight: 700 !important;
}
.smart-block a:hover { opacity: 0.7; }
.smart-block ul { margin-bottom: 0 !important; padding-left: 20px; list-style-type: disc; }
.smart-block li { margin-bottom: 8px; color: #333; }

/* --- WARIANTY SAMODZIELNE (Na białym tle) --- */
/* UPDATE: USP / Gwarancje (Z kreską z lewej) */
.smart-block.update {
    background-color: #f8f9fa;
    border-left: 4px solid #0056b3; /* Tu jest ta ważna kreska! */
    border-radius: 0 8px 8px 0;
}
/* BLUE: Wskazówki / Upsell (np. INOX) */
.smart-block.blue {
    background-color: #eaf7ff !important;
    border: 1px solid #dbeafe !important;
    /* Samodzielny niebieski blok nie potrzebuje grubej krechy, sam kolor wystarczy */
}
.smart-block.blue .smart-block-title { color: #004494 !important; }
.smart-block.blue a { color: #0056b3 !important; }

/* ==========================================================================
5. KOMPONENTY BLOGA (Boxy, Karty, CTA)
========================================================================== */
/* Karta Produktu z Podpisem */
.blog-product-card {
    margin: 35px 0;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.blog-product-card img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 !important;
    border: none !important;
}
.blog-product-card .caption {
    background-color: #f9f9f9;
    padding: 12px;
    font-size: 14px;
    color: #555;
    text-align: center;
    border-top: 1px solid #eee;
}
/* Biały Box Informacyjny */
.blog-info-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    font-size: 16px;
}
.blog-info-box h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2c3e50;
    font-weight: 700;
    font-size: 18px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}
.blog-info-box ul {
    margin-bottom: 0;
    padding-left: 20px;
}
.blog-info-box li {
    margin-bottom: 10px;
}
/* CTA Box (Sprzedażowy) */
.blog-cta-box {
    background-color: #f8f9fa;
    border: 2px solid #0056b3;
    border-radius: 8px;
    padding: 30px;
    margin-top: 50px;
    text-align: center;
}
.blog-cta-btn {
    display: inline-block;
    background-color: #0056b3;
    color: white !important;
    padding: 15px 30px;
    text-decoration: none !important;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
    transition: background 0.2s;
}
.blog-cta-btn:hover {
    background-color: #004494;
}

/* ==========================================================================
6. SEKCJA AUTORA & UI SKLEPU
========================================================================== */
.author-signature-box {
    padding-top: 30px !important;
    margin-top: 50px;
    border-top: 1px solid #eee;
    font-family: inherit;
}
.author-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
.author-name {
    margin: 0 0 15px 0;
    font-size: 22px;
    color: #000;
    font-weight: 700;
}
.author-bio {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    max-width: 900px;
}
/* Poprawki systemowe IdoSell */
.dictionary__label {
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
}
.dictionary__group {
    margin-bottom: 15px;
}

/* ==========================================================================
7. SEKCJA HIGHLIGHT (Pełna szerokość - Cross-sell)
========================================================================== */
/* TŁO CAŁEJ SEKCJI */
.section__description.section--highlight {
    background-color: #eef7ff !important; /* Niebieski pas */
    border-top: 1px solid #dbeafe;
    border-bottom: 1px solid #dbeafe;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}
/* AUTOMATYZACJA: Co się dzieje z blokiem wewnątrz Highlight? */
/* CSS mówi: "Jeśli smart-block jest w highlight, zdejmij mu tło i ramki" */
.section__description.section--highlight .smart-block {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Kolorystyka tekstów wewnątrz Highlight (Zawsze niebieska) */
.section__description.section--highlight .smart-block-title { color: #004494 !important; }
.section__description.section--highlight hr { border-top-color: #d1e6f5 !important; }
.section__description.section--highlight a { color: #0056b3 !important; }

/* ELEMENTY CROSS-SELL (Zaktualizowane dla IDEOLO 2.0) */
.cross-sell-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cross-sell-item { 
    margin-bottom: 0; /* Reset - marginesy obsługuje gap */
}
.cross-sell-item strong {
    display: block;
    margin-bottom: 5px;
    color: #000;
}
.cross-sell-desc {
    font-size: 14px;
    color: #444;
    display: block;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* --- AUTHORITY BOX (Stopka) --- */
.authority-box {
    background-color: #f4f4f4;
    padding: 30px 20px;
    border-left: none !important;
    border-top: 5px solid #000; /* Stopka z kreską u góry */
    margin: 0 !important;
}
.authority-box h3 { font-size: 18px !important; font-weight: 800 !important; margin: 0 0 12px 0 !important; color:
#000 !important; }
.authority-box a { color: #000 !important; font-weight: 600 !important; text-decoration: underline !important; }

/* ==========================================================================
8. FAQ BOX STYLE (Final - Marginesy i Kontrast)
========================================================================== */
.faq-box {
/* ZEROWANIE MARGINESÓW */
margin: 0 !important;
}
.faq-box h3 {
font-size: 18px !important;
font-weight: 700 !important;
margin-bottom: 20px !important;
color: #000 !important;
}
/* Pojedynczy blok z pytaniem */
.faq-item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed #ddd;
}
.faq-item:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
/* Tytuł pytania - CZARNY i POGRUBIONY */
.faq-question {
display: block !important;
font-weight: bold !important;
color: #000 !important;
margin-bottom: 10px !important;
font-size: 15px !important;
position: relative;
padding-left: 32px;
line-height: 1.4;
font-family: inherit;
}
/* Ikonka: Czarne kółko z białym znakiem zapytania */
.faq-question::before {
content: '?';
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
background-color: #222;
color: #fff;
text-align: center;
line-height: 22px;
border-radius: 50%;
font-weight: bold;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Treść odpowiedzi */
.faq-answer {
display: block;
color: #333;
line-height: 1.6;
font-size: 15px;
padding-left: 32px;
}
/* Szara ramka z notatką - ZWIĘKSZONY MARGINES */
.faq-note {
display: block !important;
margin-top: 15px !important;
padding: 12px 15px;
background-color: #f4f4f4;
border-left: 4px solid #444;
font-style: italic;
color: #444;
font-size: 0.95em;
border-radius: 3px;
}
/* ==========================================================================
LINK W STOPCE (Authority Box) - FIX LŻEJSZY
========================================================================== */
.authority-box a {
color: #000 !important;
font-weight: 600 !important; /* Zmienione z 700 na 600 (Lżejsze) */
text-decoration: underline !important;
}
.authority-box a:hover {
text-decoration: none !important;
color: #333 !important;
}

/* ==========================================================================
9. KOMPONENTY IDEOLO 2.0 (Listy Edukacyjne)
========================================================================== */
/* Lista wyboru rozmiaru/wariantu (Zastępuje style inline) */
.size-guide-list {
    list-style: none;
    padding-left: 0 !important;
    margin: 15px 0;
}
.size-guide-item {
    margin-bottom: 10px;
    color: #777;
    padding: 8px;
    border-radius: 5px;
    transition: all 0.2s;
}
/* Wyróżniony element listy (Ten Produkt) */
.size-guide-item.active {
    background: #eef9e6;
    border-radius: 5px;
    border-left: 4px solid #4CAF50;
    color: #000;
    padding: 12px;
    font-weight: 500;
}