/* ============================================================
   TikoPet — Blog list + single post
   ============================================================ */

.blog-page,
.blog-show-page {
    padding: 100px 0 70px;
}

/* ---------- Breadcrumb ---------- */
.blog-breadcrumb ol {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    list-style: none; margin: 0 0 22px; padding: 0;
    font-size: .85rem; color: #6b7280;
}
.blog-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.blog-breadcrumb li + li::before { content: "›"; color: #e5e7eb; }
.blog-breadcrumb a { color: #6b7280; text-decoration: none; }
.blog-breadcrumb a:hover { color: #1B7A4E; }
.blog-breadcrumb .active { color: #1f2937; font-weight: 500; }

/* ---------- Header ---------- */
.blog-header { margin-bottom: 26px; }
.blog-title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 800; color: #1f2937; margin: 0 0 8px;
}
.blog-subtitle { color: #6b7280; font-size: .95rem; margin: 0; }

/* ---------- Filters ---------- */
.blog-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}
.filter-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border-radius: 40px;
    font-size: .88rem; font-weight: 600;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.filter-tab:hover { border-color: #1B7A4E; color: #1B7A4E; }
.filter-tab.active {
    background: #1B7A4E; color: #fff; border-color: #1B7A4E;
}
.filter-tab i { font-size: 1rem; }

/* ---------- Grid ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* ---------- Card ---------- */
.blog-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,0,0,.08);
    border-color: transparent;
}

.blog-card-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f8fafb;
}
.blog-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s;
    display: block;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-img-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: #1B7A4E; font-size: 3rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

.blog-card-cat {
    position: absolute; top: 12px; inset-inline-start: 12px;
    background: rgba(27,122,78,.95); color: #fff;
    font-size: .74rem; font-weight: 700;
    padding: 4px 12px; border-radius: 20px;
    backdrop-filter: blur(4px);
}

.blog-card-body {
    padding: 18px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
}

.blog-card-meta {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: .8rem; color: #6b7280;
}
.blog-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog-card-meta i { font-size: .9rem; }

.blog-card-title {
    font-size: 1.05rem; font-weight: 700;
    margin: 0; line-height: 1.5;
}
.blog-card-title a {
    color: #1f2937; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}
.blog-card-title a:hover { color: #1B7A4E; }

.blog-card-excerpt {
    font-size: .88rem; color: #6b7280;
    line-height: 1.8; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-read-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto;
    font-size: .88rem; font-weight: 700;
    color: #1B7A4E; text-decoration: none;
    transition: gap .2s, color .2s;
}
.blog-card-read-more:hover { gap: 10px; color: #15643f; }

/* ---------- Empty ---------- */
.blog-empty {
    background: #fff; border: 1px dashed #e5e7eb;
    border-radius: 16px; padding: 60px 20px;
    text-align: center; color: #6b7280;
}
.blog-empty i {
    font-size: 3rem; color: #e5e7eb; margin-bottom: 14px; display: block;
}
.blog-empty h3 { font-size: 1.2rem; color: #1f2937; font-weight: 700; margin: 0 0 8px; }
.blog-empty p { margin: 0 0 20px; }

/* ---------- Pagination ---------- */
.blog-pagination {
    display: flex; justify-content: center; align-items: center;
    gap: 6px; margin-top: 36px; flex-wrap: wrap;
}
.page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; color: #1f2937;
    text-decoration: none; font-weight: 600; font-size: .9rem;
    transition: all .2s;
}
.page-btn:hover { border-color: #1B7A4E; color: #1B7A4E; }
.page-btn.active { background: #1B7A4E; border-color: #1B7A4E; color: #fff; }
.page-dots { color: #6b7280; padding: 0 4px; }

/* ============================================================
   Single post
   ============================================================ */
.blog-show-page .container-narrow {
    max-width: 860px; margin: 0 auto; padding: 0 15px;
}

.post-article {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}

.post-header { margin-bottom: 22px; }

.post-cat-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(27,122,78,.10); color: #1B7A4E;
    padding: 6px 14px; border-radius: 20px;
    font-size: .82rem; font-weight: 700;
    text-decoration: none; margin-bottom: 14px;
}
.post-cat-badge:hover { background: rgba(27,122,78,.16); }

.post-title {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 800; color: #1f2937;
    line-height: 1.45; margin: 0 0 16px;
}

.post-meta {
    display: flex; flex-wrap: wrap; gap: 18px;
    font-size: .85rem; color: #6b7280;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e5e7eb;
}
.post-meta span { display: inline-flex; align-items: center; gap: 5px; }
.post-meta i { color: #1B7A4E; }

.post-hero {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    margin: 8px 0 22px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}
.post-hero img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.post-hero-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: #1B7A4E; font-size: 5rem;
}

.post-lead {
    font-size: 1.05rem; line-height: 1.9;
    color: #374151;
    background: #f8fafb;
    border-inline-start: 4px solid #1B7A4E;
    padding: 16px 20px;
    border-radius: 10px;
    margin: 0 0 22px;
}

.post-content {
    font-size: .98rem;
    line-height: 2.05;
    color: #374151;
    white-space: pre-line;
}
.post-content a { color: #1B7A4E; }

.post-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
    padding-top: 20px; margin-top: 22px;
    border-top: 1px solid #e5e7eb;
}
.tags-label {
    color: #6b7280; font-size: .85rem; font-weight: 600;
}
.post-tag {
    background: #f3f4f6; color: #4b5563;
    padding: 5px 14px; border-radius: 20px;
    font-size: .8rem; font-weight: 500;
}

.post-share {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding-top: 20px; margin-top: 20px;
    border-top: 1px solid #e5e7eb;
}
.share-label {
    color: #6b7280; font-size: .88rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.share-actions { display: flex; gap: 8px; }
.share-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s;
}
.share-btn:hover {
    border-color: #1B7A4E; color: #1B7A4E;
    background: rgba(27,122,78,.06);
}

/* ---------- Related posts ---------- */
.related-posts {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 2px solid #e5e7eb;
}
.related-posts-title {
    font-size: 1.25rem; font-weight: 800; color: #1f2937;
    margin: 0 0 20px;
    display: flex; align-items: center; gap: 10px;
}
.related-posts-title::before {
    content: ""; width: 4px; height: 22px;
    background: #1B7A4E; border-radius: 3px;
}

.post-footer-nav { margin-top: 32px; text-align: center; }
.post-footer-nav .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] .blog-card,
[data-theme="dark"] .post-article,
[data-theme="dark"] .filter-tab,
[data-theme="dark"] .page-btn {
    background: #1a1d21; border-color: #343a40; color: #e9ecef;
}
[data-theme="dark"] .filter-tab.active,
[data-theme="dark"] .page-btn.active {
    background: #1B7A4E; color: #fff;
}
[data-theme="dark"] .blog-title,
[data-theme="dark"] .post-title,
[data-theme="dark"] .blog-card-title a,
[data-theme="dark"] .related-posts-title,
[data-theme="dark"] .blog-empty h3 { color: #e9ecef; }
[data-theme="dark"] .blog-subtitle,
[data-theme="dark"] .blog-card-meta,
[data-theme="dark"] .blog-card-excerpt,
[data-theme="dark"] .post-meta,
[data-theme="dark"] .post-content,
[data-theme="dark"] .post-lead { color: #adb5bd; }
[data-theme="dark"] .post-lead { background: #23272d; border-color: #1B7A4E; }
[data-theme="dark"] .blog-card-img-placeholder,
[data-theme="dark"] .post-hero-placeholder { background: #23272d; color: #4ade80; }
[data-theme="dark"] .post-tag { background: #23272d; color: #adb5bd; }
[data-theme="dark"] .share-btn { background: #23272d; border-color: #343a40; color: #adb5bd; }
[data-theme="dark"] .share-btn:hover { background: rgba(27,122,78,.15); color: #6ee7b7; border-color: #1B7A4E; }
[data-theme="dark"] .blog-empty { background: #1a1d21; border-color: #343a40; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .blog-page,
    .blog-show-page { padding-top: 88px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .post-article { padding: 24px; }
    .post-hero, .post-hero-placeholder { aspect-ratio: 16 / 10; }
}
@media (max-width: 575.98px) {
    .blog-page,
    .blog-show-page { padding-top: 84px; padding-bottom: 50px; }
    .blog-grid { grid-template-columns: 1fr; gap: 16px; }
    .filter-tab { padding: 7px 14px; font-size: .82rem; }
    .post-article { padding: 18px; border-radius: 14px; }
    .post-title { font-size: 1.25rem; }
    .post-lead { font-size: .95rem; padding: 12px 14px; }
    .post-content { font-size: .92rem; line-height: 1.95; }
    .post-meta { gap: 12px; font-size: .78rem; }
    .blog-show-page .container-narrow { padding: 0; }
}