/* ==========================================================================
   MASTER CSS - OGRZEWANIE PEX (Blog & Aktualności System)
   Wersja: Finalna (Zero-Margin Fix)
   ========================================================================== */

/* ==========================================================================
   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 */
.cross-sell-item { margin-bottom: 15px; }
.cross-sell-desc { font-size: 0.9em; color: #555; display: block; margin-bottom: 5px; }


/* --- 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;
}