/**
 * Jubiler Tina – Blog UX/UI v3
 * catalog/view/theme/jewelrythemes03/stylesheet/ux-blog.css
 * ============================================================
 * Nadpisuje/uzupełnia blog.css + atstyle.min.css
 * Paleta: #1a1a1a (tekst) | #c8a97e (złoty akcent) | #f8f5f0 (tło sekcji)
 */

/* ============================================================
   1. ARTYKUŁ – wrapper
   ============================================================ */
article.blog_post {
    border-radius: 12px;
    padding: 40px 48px;
    background-color: #fafafa;
    margin-top: 20px;
    line-height: 1.85;
    letter-spacing: 0.3px;
    /* nadpisuje asymetryczne 50px 10px z atstyle.min.css */
}

@media (max-width: 767px) {
    article.blog_post { padding: 18px 16px; border-radius: 8px; margin-top: 10px; }
}

/* ============================================================
   2. HERO IMAGE
   ============================================================ */
.blog_post .main_thumb {
    margin: 0 0 0 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    margin-bottom: 28px;
}
.blog_post .main_thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    transition: opacity 350ms ease;
}
.blog_post .main_thumb:hover img { opacity: 0.97; }

/* ============================================================
   3. NAGŁÓWEK – blog_header + blog_meta
   ============================================================ */
.blog_post .blog_header {
    background: #fff;
    border: 1px solid #ece8e1;
    border-radius: 10px;
    padding: 24px 28px 20px;
    margin-bottom: 28px;
    box-shadow: 0 2px 8px rgba(200,169,126,0.07);
}

.blog_post .blog_header h1 {
    font-size: 1.8em;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0 0 16px 0;
    padding: 0;
    letter-spacing: -0.2px;
    border-bottom: 2px solid #f0e8d8;
    padding-bottom: 14px;
}

@media (max-width: 767px) {
    .blog_post .blog_header { padding: 16px; border-radius: 8px; }
    .blog_post .blog_header h1 { font-size: 1.35em; }
}

/* META – autor, data, aktualizacja, widoki */
.blog_post .blog_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.blog_post .blog_meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    padding: 3px 0;
}

.blog_post .blog_meta .meta-item .fa {
    color: #c8a97e;
    font-size: 13px;
    flex-shrink: 0;
}

.blog_post .blog_meta .meta-item time,
.blog_post .blog_meta .meta-item span {
    color: #666;
    font-weight: 500;
}

/* Data aktualizacji – wyróżniona subtelnie */
.blog_post .blog_meta .meta-updated {
    background: #fdf8f0;
    border: 1px solid #f0e4cc;
    border-radius: 20px;
    padding: 3px 10px;
}
.blog_post .blog_meta .meta-updated .fa { color: #b8935a; }
.blog_post .blog_meta .meta-updated span,
.blog_post .blog_meta .meta-updated time { color: #8a6a3a; }

/* Separator między metadanymi */
.blog_post .blog_meta .meta-item + .meta-item::before {
    content: '';
    width: 3px;
    height: 3px;
    background: #ddd;
    border-radius: 50%;
    display: inline-block;
    margin-right: 2px;
    flex-shrink: 0;
}
/* Nie pokazuj separatora przed meta-updated (ma własny styl) */
.blog_post .blog_meta .meta-updated::before { display: none; }

/* ============================================================
   4. TREŚĆ ARTYKUŁU – typografia
   ============================================================ */
.blog_post .main_description {
    font-size: 1em;
    color: #333;
    margin-bottom: 30px;
}
.blog_post .main_description p {
    margin-bottom: 16px !important;
    color: #333 !important;
    line-height: 1.85;
}
.blog_post .main_description h2 {
    font-size: 1.35em;
    font-weight: 700;
    color: #1a1a1a;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #c8a97e;
    display: inline-block;
}
.blog_post .main_description h3 {
    font-size: 1.08em;
    font-weight: 700;
    color: #2d2d2d;
    margin: 22px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eeeeee;
}
.blog_post .main_description h3,
.blog_post .main_description h2 { display: block; }

.blog_post .main_description strong { color: #1a1a1a; font-weight: 700; }
.blog_post .main_description a {
    color: #c8a97e;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 200ms;
}
.blog_post .main_description a:hover { color: #a07840; }

.blog_post .main_description ul,
.blog_post .main_description ol { padding-left: 22px; margin-bottom: 16px; color: #333; }
.blog_post .main_description li { margin-bottom: 6px; line-height: 1.7; }

/* Tabele */
.blog_post .main_description .table {
    font-size: 0.9em;
    margin: 24px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.blog_post .main_description .table thead tr th {
    background-color: #2d2d2d;
    color: #fff;
    font-weight: 600;
    padding: 12px 14px;
    border: none;
    letter-spacing: 0.3px;
}
.blog_post .main_description .table tbody tr:nth-child(odd) td { background-color: #fff; }
.blog_post .main_description .table tbody tr:nth-child(even) td { background-color: #faf7f3; }
.blog_post .main_description .table tbody tr:hover td {
    background-color: #fdf3e7;
    transition: background 150ms;
}
.blog_post .main_description .table td {
    padding: 10px 14px !important;
    border-color: #eee;
    color: #333;
    vertical-align: top;
}

/* ============================================================
   5. STOPKA – tagi + share, dwa wiersze (kolumnowy układ)
   UWAGA: używamy .blog_footer jako DIV (nie footer element!)
   bo <footer> element dostaje z fixes.css: left:50%; margin:-50vw
   co powoduje rozciąganie na całą szerokość viewportu.
   ============================================================ */
.blog_post .blog_footer {
    margin-top: 32px;
    padding: 20px 0 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* reset na wypadek gdyby coś odziedziczyło width/position */
    width: auto;
    position: static;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    background: none;
    overflow: visible;
}

/* ---- TAGI ---- */
.blog_post .post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 0;
    margin: 0;
}

.blog_post .post-tags .fa-tag {
    color: #c8a97e;
    font-size: 13px;
    flex-shrink: 0;
    margin-right: 4px;
}

.blog_post .post-tags .tag-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 13px;
    background: #f4ede2;
    color: #7a5c30;
    border-radius: 20px;
    border: 1px solid #e8d9c4;
    text-decoration: none;
    transition: all 200ms ease;
    white-space: nowrap;
    line-height: 1.4;
}
.blog_post .post-tags .tag-pill:hover {
    background: #c8a97e;
    color: #fff;
    border-color: #c8a97e;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(200,169,126,0.3);
}

/* ---- SHARE BLOCK ---- */
.blog_post .share-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #f9f6f1;
    border-radius: 10px;
    border: 1px solid #ece8e0;
}

.blog_post .share-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    margin-right: 4px;
}
.blog_post .share-label .fa { color: #c8a97e; }

.blog_post .share-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Bazowy styl przycisku share */
.blog_post .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 22px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    font-family: inherit;
}
.blog_post .share-btn .fa { font-size: 13px; }

/* Web Share (natywny, mobile) */
.blog_post .share-native {
    background: #f0ebe3;
    color: #7a5c30;
}
.blog_post .share-native:hover {
    background: #c8a97e; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200,169,126,0.35);
}

/* Facebook */
.blog_post .share-fb { background: #1877f2; color: #fff; }
.blog_post .share-fb:hover {
    background: #1259c3; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24,119,242,0.4);
}

/* Pinterest */
.blog_post .share-pi { background: #e60023; color: #fff; }
.blog_post .share-pi:hover {
    background: #ad081b; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230,0,35,0.35);
}

/* Kopiuj link */
.blog_post .share-copy {
    background: #f0f0f0;
    color: #555;
}
.blog_post .share-copy:hover {
    background: #333; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.blog_post .share-copy.copied {
    background: #2d8a4e;
    color: #fff;
}

/* Na bardzo wąskich ekranach – tylko ikony (ukryj tekst) */
@media (max-width: 400px) {
    .blog_post .share-btn span { display: none; }
    .blog_post .share-btn { padding: 9px 11px; }
}

/* ============================================================
   6. SEKCJE – powiązane produkty i artykuły
   ============================================================ */
.blog_post .blog_related_products,
.blog_post .blog_related_posts {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid #eeeeee;
}

.blog_post .blog_related_products h2,
.blog_post .blog_related_posts h2 {
    font-size: 1.15em;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0ebe3;
}
.blog_post .blog_related_products h2 .fa,
.blog_post .blog_related_posts h2 .fa { color: #c8a97e; font-size: 1em; }

/* ---- KARTY PRODUKTÓW ---- */
.blog_post .blog_product {
    text-align: center;
    font-size: 14px;
    padding: 0 10px;
    display: inline-block;
    vertical-align: top;
}
.blog_post .blog_product .image {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eeeeee;
    background: #fff;
    transition: box-shadow 250ms;
    line-height: 0;
}
.blog_post .blog_product .image:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.blog_post .blog_product .image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 400ms ease;
}
.blog_post .blog_product .image:hover img { transform: scale(1.04); }
.blog_post .blog_product .name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    line-height: 1.35;
    text-decoration: none;
    transition: color 200ms;
    text-transform: none !important;
}
.blog_post .blog_product .name:hover { color: #c8a97e; }
.blog_post .blog_product .price {
    font-size: 15px !important;
    font-weight: 700;
    color: #1a1a1a;
    margin: 6px 0 10px;
    display: block;
}
.blog_post .blog_product .btn-primary {
    font-size: 11px;
    padding: 7px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    width: auto;
}

/* ---- POWIĄZANE ARTYKUŁY ---- */
.blog_post .related.blog_grid_holder {
    padding-top: 0;
}
.blog_post .related .blog_item {
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 250ms, transform 250ms;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}
.blog_post .related .blog_item:hover {
    box-shadow: 0 5px 18px rgba(0,0,0,0.09);
    transform: translateY(-2px);
}
.blog_post .related .blog_item .image {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    line-height: 0;
}
.blog_post .related .blog_item .image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 400ms ease;
}
.blog_post .related .blog_item:hover .image img { transform: scale(1.04); }
.blog_post .related .blog_item .summary {
    padding: 14px 16px 16px;
}
.blog_post .related .blog_title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    line-height: 1.35;
}
.blog_post .related .blog_title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 200ms;
}
.blog_post .related .blog_title a:hover { color: #c8a97e; }
.blog_post .related .blog_stats {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 8px;
    border: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.blog_post .related .blog_stats .fa { color: #c8a97e; margin-right: 3px; }
.blog_post .related p {
    font-size: 13px;
    color: #777 !important;
    line-height: 1.6;
    margin: 0 0 10px;
}
.blog_post .read-more-link {
    font-size: 12px;
    font-weight: 600;
    color: #c8a97e;
    text-decoration: none;
    transition: color 200ms;
}
.blog_post .read-more-link:hover { color: #a07840; }
.blog_post .read-more-link .fa { margin-left: 3px; }

/* ============================================================
   7. KOMENTARZE
   ============================================================ */
.blog_post .blog_comments {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid #eeeeee;
}
.blog_post .blog_comments h2 {
    font-size: 1.1em;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.blog_post .blog_comments h2 .fa { color: #c8a97e; }
.blog_post .blog_comments h3 {
    font-size: 1em;
    font-weight: 700;
    color: #2d2d2d;
    margin: 28px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 7px;
}
.blog_post .blog_comments .form-control {
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    font-size: 14px;
    transition: border-color 200ms, box-shadow 200ms;
}
.blog_post .blog_comments .form-control:focus {
    border-color: #c8a97e !important;
    box-shadow: 0 0 0 3px rgba(200,169,126,0.15) !important;
}
.blog_post .blog_comments #button-comment {
    border-radius: 22px;
    padding: 9px 26px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* ============================================================
   8. LISTING BLOGA – home / kategorie (karty z hover)
   Struktura: article.blog_item > div.image + div.summary
   ============================================================ */

/* Grid listingu – flex dla equal-height kart */
.extension-blog-home .blog_grid_holder,
.extension-blog-blog.blog-category-page .blog_grid_holder {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}
.extension-blog-home .blog_grid_holder.column-2 > .blog_item,
.extension-blog-blog.blog-category-page .blog_grid_holder.column-2 > .blog_item {
    flex: 0 0 calc(50% - 12px);
    width: calc(50% - 12px);
}
.extension-blog-home .blog_grid_holder.column-3 > .blog_item,
.extension-blog-blog.blog-category-page .blog_grid_holder.column-3 > .blog_item {
    flex: 0 0 calc(33.333% - 16px);
    width: calc(33.333% - 16px);
}
@media (max-width: 767px) {
    .extension-blog-home .blog_grid_holder,
    .extension-blog-blog.blog-category-page .blog_grid_holder {
        gap: 16px;
    }
    .extension-blog-home .blog_grid_holder > .blog_item,
    .extension-blog-blog.blog-category-page .blog_grid_holder > .blog_item {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* Karta – border/hover/overflow na article.blog_item */
.extension-blog-home .blog_item,
.extension-blog-blog.blog-category-page .blog_item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 250ms, transform 250ms;
    display: flex;
    flex-direction: column;
}
.extension-blog-home .blog_item:hover,
.extension-blog-blog.blog-category-page .blog_item:hover {
    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* Obrazek na górze karty */
.extension-blog-home .blog_item .image,
.extension-blog-blog.blog-category-page .blog_item .image {
    margin: 0;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 0;
    border-radius: 0;
}
.extension-blog-home .blog_item .image img,
.extension-blog-blog.blog-category-page .blog_item .image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 400ms ease;
}
.extension-blog-home .blog_item:hover .image img,
.extension-blog-blog.blog-category-page .blog_item:hover .image img {
    transform: scale(1.04);
}

/* Summary – rośnie, wypełnia kartę */
.extension-blog-home .blog_item .summary,
.extension-blog-blog.blog-category-page .blog_item .summary {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tytuł kafelka */
.extension-blog-home .blog_title,
.extension-blog-blog.blog-category-page .blog_title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
    line-height: 1.35;
}
.extension-blog-home .blog_title a,
.extension-blog-blog.blog-category-page .blog_title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 200ms;
}
.extension-blog-home .blog_title a:hover,
.extension-blog-blog.blog-category-page .blog_title a:hover {
    color: #c8a97e;
}

/* Meta (autor, data) */
.extension-blog-home .blog_item .blog_stats,
.extension-blog-blog.blog-category-page .blog_item .blog_stats {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 10px;
    border: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.extension-blog-home .blog_item .blog_stats .fa,
.extension-blog-blog.blog-category-page .blog_item .blog_stats .fa {
    color: #c8a97e;
    margin-right: 3px;
}

/* Opis – rośnie, pcha "Czytaj dalej" na dół */
.extension-blog-home .blog_item .summary > p,
.extension-blog-blog.blog-category-page .blog_item .summary > p {
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    margin: 0 0 12px;
    flex: 1;
}

/* "Czytaj dalej" */
.extension-blog-home .read-more-link,
.extension-blog-blog.blog-category-page .read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #c8a97e;
    text-decoration: none;
    transition: color 200ms;
    margin-top: auto;
    align-self: flex-start;
}
.extension-blog-home .read-more-link:hover,
.extension-blog-blog.blog-category-page .read-more-link:hover {
    color: #a07840;
}

/* ============================================================
   9. BREADCRUMB
   ============================================================ */
.breadcrumb li:last-child > a {
    color: #888;
    pointer-events: none;
}

/* ============================================================
   10. DROBNE POPRAWKI GLOBALNE
   ============================================================ */

/* Usuń stary styl .blog_post h3 z blog.css który nakłada border */
.blog_post .main_description h3 { border-bottom: 1px solid #f0ebe3; }

/* Fixuje zbyt duży padding w starym .blog_post h3 (atstyle) */
.blog_post h3 { margin: 0; }