/* ═══════════════════════════════════════════
   SAHAR PARTS - BLOG PAGE STYLES
   Fully standalone - every value uses --sb-* variable.
   All --sb-* map to --sp-blog-* from database settings.
   ═══════════════════════════════════════════ */

@keyframes sbFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sbPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}
@keyframes sbSpin {
    to { transform: rotate(360deg); }
}

.blog-page {
    --sb-bg: var(--sp-blog-page_bg, #f4f6f9);
    --sb-text: var(--sp-blog-page_text_color, #333333);
    --sb-font: var(--sp-blog-page_font_family, inherit);
    --sb-primary: #D4A017;
    --sb-primary-hover: #b8890f;
    --sb-text-light: #666666;
    --sb-text-muted: #999999;
    --sb-border: #e0e0e0;
    --sb-dark-bg: #1a1a2e;
    --sb-dark-card: #2d3748;
    --sb-dark-border: #4a5568;
    --sb-dark-text: #e2e8f0;

    /* Title */
    --sb-title-color: var(--sp-blog-title_color, #1a202c);
    --sb-title-size: var(--sp-blog-title_size, 2rem);
    --sb-title-weight: var(--sp-blog-title_weight, 800);
    --sb-title-margin: var(--sp-blog-title_margin, 0 0 30px 0);

    /* Card */
    --sb-card-bg: var(--sp-blog-card_bg, #ffffff);
    --sb-card-radius: var(--sp-blog-card_radius, 16px);
    --sb-card-shadow: var(--sp-blog-card_shadow, 0 2px 12px rgba(0,0,0,0.08));
    --sb-card-border: var(--sp-blog-card_border, 1px solid #e0e0e0);
    --sb-card-padding: var(--sp-blog-card_padding, 20px);
    --sb-card-margin: var(--sp-blog-card_margin, 0 0 24px 0);
    --sb-card-hover-shadow: var(--sp-blog-card_hover_shadow, 0 8px 30px rgba(0,0,0,0.15));
    --sb-card-hover-transform: var(--sp-blog-card_hover_transform, translateY(-4px));

    /* Card Image */
    --sb-card-img-radius: var(--sp-blog-card_image_radius, 16px);
    --sb-card-img-height: var(--sp-blog-card_image_height, 200px);
    --sb-card-img-bg: var(--sp-blog-card_image_bg, #e9ecef);

    /* Card Title */
    --sb-card-title-color: var(--sp-blog-card_title_color, #1a202c);
    --sb-card-title-size: var(--sp-blog-card_title_size, 1.15rem);
    --sb-card-title-weight: var(--sp-blog-card_title_weight, 700);
    --sb-card-title-lh: var(--sp-blog-card_title_line_height, 1.4);
    --sb-card-title-margin: var(--sp-blog-card_title_margin, 0 0 10px 0);

    /* Card Excerpt */
    --sb-card-excerpt-color: var(--sp-blog-card_excerpt_color, #666666);
    --sb-card-excerpt-size: var(--sp-blog-card_excerpt_size, 0.9rem);
    --sb-card-excerpt-lh: var(--sp-blog-card_excerpt_line_height, 1.7);
    --sb-card-excerpt-margin: var(--sp-blog-card_excerpt_margin, 0 0 14px 0);

    /* Card Meta */
    --sb-card-meta-color: var(--sp-blog-card_meta_color, #999999);
    --sb-card-meta-size: var(--sp-blog-card_meta_size, 0.8rem);
    --sb-card-meta-gap: var(--sp-blog-card_meta_gap, 12px);
    --sb-card-meta-icon-color: var(--sp-blog-card_meta_icon_color, #D4A017);
    --sb-card-meta-icon-size: var(--sp-blog-card_meta_icon_size, 0.8rem);
    --sb-cat-badge-bg: var(--sp-blog-card_category_badge_bg, #D4A017);
    --sb-cat-badge-color: var(--sp-blog-card_category_badge_color, #ffffff);
    --sb-cat-badge-radius: var(--sp-blog-card_category_badge_radius, 20px);
    --sb-cat-badge-padding: var(--sp-blog-card_category_badge_padding, 4px 12px);
    --sb-cat-badge-size: var(--sp-blog-card_category_badge_size, 0.75rem);
    --sb-date-color: var(--sp-blog-card_date_color, #999999);
    --sb-date-size: var(--sp-blog-card_date_size, 0.8rem);

    /* Card Button */
    --sb-card-btn-bg: var(--sp-blog-card_btn_bg, #D4A017);
    --sb-card-btn-color: var(--sp-blog-card_btn_color, #ffffff);
    --sb-card-btn-radius: var(--sp-blog-card_btn_radius, 12px);
    --sb-card-btn-padding: var(--sp-blog-card_btn_padding, 10px 20px);
    --sb-card-btn-size: var(--sp-blog-card_btn_size, 0.85rem);
    --sb-card-btn-hover-bg: var(--sp-blog-card_btn_hover_bg, #b8890f);
    --sb-card-btn-weight: var(--sp-blog-card_btn_weight, 600);

    /* Sidebar */
    --sb-sidebar-bg: var(--sp-blog-sidebar_bg, #ffffff);
    --sb-sidebar-radius: var(--sp-blog-sidebar_radius, 16px);
    --sb-sidebar-shadow: var(--sp-blog-sidebar_shadow, 0 2px 12px rgba(0,0,0,0.08));
    --sb-sidebar-padding: var(--sp-blog-sidebar_padding, 20px);
    --sb-sidebar-title-color: var(--sp-blog-sidebar_title_color, #1a202c);
    --sb-sidebar-title-size: var(--sp-blog-sidebar_title_size, 1.1rem);
    --sb-sidebar-title-weight: var(--sp-blog-sidebar_title_weight, 700);
    --sb-sidebar-title-margin: var(--sp-blog-sidebar_title_margin, 0 0 16px 0);
    --sb-sidebar-title-border: var(--sp-blog-sidebar_title_border, 3px solid #D4A017);
    --sb-sidebar-link-color: var(--sp-blog-sidebar_link_color, #333333);
    --sb-sidebar-link-size: var(--sp-blog-sidebar_link_size, 0.9rem);
    --sb-sidebar-link-hover-color: var(--sp-blog-sidebar_link_hover_color, #D4A017);
    --sb-sidebar-link-padding: var(--sp-blog-sidebar_link_padding, 10px 0);
    --sb-sidebar-link-border: var(--sp-blog-sidebar_link_border, 1px solid #f0f0f0);
    --sb-sidebar-count-color: var(--sp-blog-sidebar_category_count_color, #ffffff);
    --sb-sidebar-count-size: var(--sp-blog-sidebar_category_count_size, 0.75rem);
    --sb-sidebar-count-bg: var(--sp-blog-sidebar_category_count_bg, #D4A017);
    --sb-sidebar-count-radius: var(--sp-blog-sidebar_category_count_radius, 50%);
    --sb-sidebar-active-color: var(--sp-blog-sidebar_active_link_color, #D4A017);
    --sb-sidebar-active-weight: var(--sp-blog-sidebar_active_link_weight, 700);

    /* No Data */
    --sb-no-data-color: var(--sp-blog-no_data_color, #999999);
    --sb-no-data-size: var(--sp-blog-no_data_size, 1rem);
    --sb-no-data-padding: var(--sp-blog-no_data_padding, 40px 20px);
    --sb-no-data-icon-size: var(--sp-blog-no_data_icon_size, 3rem);

    /* Pagination */
    --sb-pagination-bg: var(--sp-blog-pagination_bg, transparent);
    --sb-pagination-radius: var(--sp-blog-pagination_radius, 12px);
    --sb-pagination-gap: var(--sp-blog-pagination_gap, 6px);
    --sb-pagination-link-color: var(--sp-blog-pagination_link_color, #333333);
    --sb-pagination-link-bg: var(--sp-blog-pagination_link_bg, #ffffff);
    --sb-pagination-link-radius: var(--sp-blog-pagination_link_radius, 10px);
    --sb-pagination-link-padding: var(--sp-blog-pagination_link_padding, 10px 16px);
    --sb-pagination-link-size: var(--sp-blog-pagination_link_size, 0.85rem);
    --sb-pagination-link-weight: var(--sp-blog-pagination_link_weight, 500);
    --sb-pagination-link-hover-bg: var(--sp-blog-pagination_link_hover_bg, #D4A017);
    --sb-pagination-link-hover-color: var(--sp-blog-pagination_link_hover_color, #ffffff);
    --sb-pagination-active-bg: var(--sp-blog-pagination_active_bg, #D4A017);
    --sb-pagination-active-color: var(--sp-blog-pagination_active_color, #ffffff);

    /* Section */
    --sb-section-gap: var(--sp-blog-section_gap, 30px);
    --sb-section-margin: var(--sp-blog-section_margin, 0 0 40px 0);
    --sb-container-padding: var(--sp-blog-container_padding, 0 16px);

    /* Content (Article Show) */
    --sb-content-bg: var(--sp-blog-content_bg, #ffffff);
    --sb-content-radius: var(--sp-blog-content_radius, 16px);
    --sb-content-shadow: var(--sp-blog-content_shadow, 0 2px 12px rgba(0,0,0,0.08));
    --sb-content-padding: var(--sp-blog-content_padding, 24px);
    --sb-article-bg: var(--sp-blog-content_article_bg, transparent);
    --sb-article-padding: var(--sp-blog-content_article_padding, 0);
    --sb-article-radius: var(--sp-blog-content_article_radius, 0);
    --sb-article-shadow: var(--sp-blog-content_article_shadow, none);
    --sb-article-title-color: var(--sp-blog-article_title_color, #1a202c);
    --sb-article-title-size: var(--sp-blog-article_title_size, 1.8rem);
    --sb-article-title-weight: var(--sp-blog-article_title_weight, 800);
    --sb-article-title-margin: var(--sp-blog-article_title_margin, 0 0 20px 0);
    --sb-article-body-color: var(--sp-blog-article_body_color, #444444);
    --sb-article-body-size: var(--sp-blog-article_body_size, 1rem);
    --sb-article-body-lh: var(--sp-blog-article_body_line_height, 1.9);
    --sb-article-body-margin: var(--sp-blog-article_body_margin, 0 0 24px 0);
    --sb-article-img-radius: var(--sp-blog-article_image_radius, 16px);
    --sb-article-img-margin: var(--sp-blog-article_image_margin, 0 0 24px 0);
    --sb-article-meta-color: var(--sp-blog-article_meta_color, #999999);
    --sb-article-meta-size: var(--sp-blog-article_meta_size, 0.85rem);
    --sb-article-meta-gap: var(--sp-blog-article_meta_gap, 16px);
    --sb-article-cat-badge-bg: var(--sp-blog-article_category_badge_bg, #D4A017);
    --sb-article-cat-badge-color: var(--sp-blog-article_category_badge_color, #ffffff);
    --sb-article-cat-badge-radius: var(--sp-blog-article_category_badge_radius, 20px);
    --sb-article-cat-badge-padding: var(--sp-blog-article_category_badge_padding, 6px 16px);

    /* Tags */
    --sb-tags-gap: var(--sp-blog-article_tags_gap, 8px);
    --sb-tag-bg: var(--sp-blog-article_tag_bg, #f0f0f0);
    --sb-tag-color: var(--sp-blog-article_tag_color, #555555);
    --sb-tag-radius: var(--sp-blog-article_tag_radius, 8px);
    --sb-tag-padding: var(--sp-blog-article_tag_padding, 6px 14px);
    --sb-tag-size: var(--sp-blog-article_tag_size, 0.8rem);
    --sb-tag-hover-bg: var(--sp-blog-article_tag_hover_bg, #D4A017);

    /* Related */
    --sb-related-title-color: var(--sp-blog-related_section_title_color, #1a202c);
    --sb-related-title-size: var(--sp-blog-related_section_title_size, 1.3rem);
    --sb-related-title-weight: var(--sp-blog-related_section_title_weight, 700);
    --sb-related-title-margin: var(--sp-blog-related_section_title_margin, 0 0 20px 0);
    --sb-related-border: var(--sp-blog-related_section_border, 2px solid #e0e0e0);

    /* Search */
    --sb-search-input-border: var(--sp-blog-search_input_border, #e0e0e0);
    --sb-search-input-radius: var(--sp-blog-search_input_radius, 12px);
    --sb-search-input-padding: var(--sp-blog-search_input_padding, 12px 16px);
    --sb-search-input-size: var(--sp-blog-search_input_size, 0.9rem);
    --sb-search-input-bg: var(--sp-blog-search_input_bg, #f8f9fa);
    --sb-search-input-focus-border: var(--sp-blog-search_input_focus_border, #D4A017);
    --sb-search-input-focus-shadow: var(--sp-blog-search_input_focus_shadow, 0 0 0 3px rgba(212,160,23,0.1));
    --sb-search-btn-bg: var(--sp-blog-search_btn_bg, #D4A017);
    --sb-search-btn-color: var(--sp-blog-search_btn_color, #ffffff);
    --sb-search-btn-radius: var(--sp-blog-search_btn_radius, 12px);
    --sb-search-btn-padding: var(--sp-blog-search_btn_padding, 12px 20px);
    --sb-search-btn-size: var(--sp-blog-search_btn_size, 0.9rem);
    --sb-search-btn-hover-bg: var(--sp-blog-search_btn_hover_bg, #b8890f);

    /* RSS */
    --sb-rss-btn-bg: var(--sp-blog-rss_btn_bg, #f26522);
    --sb-rss-btn-color: var(--sp-blog-rss_btn_color, #ffffff);
    --sb-rss-btn-radius: var(--sp-blog-rss_btn_radius, 12px);
    --sb-rss-btn-padding: var(--sp-blog-rss_btn_padding, 10px 18px);

    font-family: var(--sb-font);
    background: var(--sb-bg);
    color: var(--sb-text);
    min-height: 60vh;
}

.blog-page * { -webkit-tap-highlight-color: transparent; }

.blog-page .container { max-width: 100%; margin: 0 auto; padding: var(--sb-container-padding); width: 100%; }

/* ===== Section ===== */
.blog-section { margin: var(--sb-section-margin); }

/* ===== Title Header ===== */
.blog-page-header {
    text-align: center;
    margin: var(--sb-title-margin);
}
.blog-page-header h1 {
    font-size: var(--sb-title-size);
    font-weight: var(--sb-title-weight);
    color: var(--sb-title-color);
    margin: 0;
}

/* ===== Blog Grid ===== */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sb-section-gap);
    margin-bottom: var(--sb-section-gap);
}

/* ===== Blog Card ===== */
.blog-card {
    background: var(--sb-card-bg);
    border-radius: var(--sb-card-radius);
    box-shadow: var(--sb-card-shadow);
    border: var(--sb-card-border);
    padding: var(--sb-card-padding);
    margin: var(--sb-card-margin);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
    animation: sbFadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
    display: flex;
    flex-direction: column;
}
.blog-card:nth-child(1) { animation-delay: 0.05s; }
.blog-card:nth-child(2) { animation-delay: 0.1s; }
.blog-card:nth-child(3) { animation-delay: 0.15s; }
.blog-card:nth-child(4) { animation-delay: 0.2s; }
.blog-card:nth-child(5) { animation-delay: 0.25s; }
.blog-card:nth-child(6) { animation-delay: 0.3s; }
.blog-card:hover {
    box-shadow: var(--sb-card-hover-shadow);
    transform: var(--sb-card-hover-transform);
}

/* ===== Card Image ===== */
.card-image {
    border-radius: var(--sb-card-img-radius);
    height: var(--sb-card-img-height);
    background: var(--sb-card-img-bg);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    flex-shrink: 0;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.blog-card:hover .card-image img { transform: scale(1.05); }
.card-image .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-text-muted);
    font-size: 2rem;
}
.card-image .category-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--sb-cat-badge-bg);
    color: var(--sb-cat-badge-color);
    border-radius: var(--sb-cat-badge-radius);
    padding: var(--sb-cat-badge-padding);
    font-size: var(--sb-cat-badge-size);
    font-weight: 600;
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
}

/* ===== Card Title ===== */
.card-title {
    font-size: var(--sb-card-title-size);
    font-weight: var(--sb-card-title-weight);
    color: var(--sb-card-title-color);
    line-height: var(--sb-card-title-lh);
    margin: var(--sb-card-title-margin);
    display: block;
    text-decoration: none;
    transition: color 0.3s ease;
}
.card-title:hover { color: var(--sb-primary); }

/* ===== Card Excerpt ===== */
.card-excerpt {
    font-size: var(--sb-card-excerpt-size);
    color: var(--sb-card-excerpt-color);
    line-height: var(--sb-card-excerpt-lh);
    margin: var(--sb-card-excerpt-margin);
    flex: 1;
}

/* ===== Card Meta ===== */
.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sb-card-meta-gap);
    color: var(--sb-card-meta-color);
    font-size: var(--sb-card-meta-size);
    margin-bottom: 14px;
}
.card-meta i {
    color: var(--sb-card-meta-icon-color);
    font-size: var(--sb-card-meta-icon-size);
    margin-left: 4px;
}
.card-meta .meta-item {
    display: flex;
    align-items: center;
}
.card-meta .category-badge {
    background: var(--sb-cat-badge-bg);
    color: var(--sb-cat-badge-color);
    border-radius: var(--sb-cat-badge-radius);
    padding: var(--sb-cat-badge-padding);
    font-size: var(--sb-cat-badge-size);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.card-meta .category-badge:hover { opacity: 0.85; }
.card-meta .blog-date {
    color: var(--sb-date-color);
    font-size: var(--sb-date-size);
}

/* ===== Card Button ===== */
.card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sb-card-btn-bg);
    color: var(--sb-card-btn-color);
    border-radius: var(--sb-card-btn-radius);
    padding: var(--sb-card-btn-padding);
    font-size: var(--sb-card-btn-size);
    font-weight: var(--sb-card-btn-weight);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    align-self: flex-start;
    line-height: 1;
}
.card-btn:hover { background: var(--sb-card-btn-hover-bg); color: var(--sb-card-btn-color); }
.card-btn:active { transform: scale(0.97); }

/* ===== Sidebar ===== */
.blog-sidebar {
    background: var(--sb-sidebar-bg);
    border-radius: var(--sb-sidebar-radius);
    box-shadow: var(--sb-sidebar-shadow);
    padding: var(--sb-sidebar-padding);
    margin-bottom: var(--sb-section-gap);
}
.blog-sidebar .sidebar-title {
    font-size: var(--sb-sidebar-title-size);
    font-weight: var(--sb-sidebar-title-weight);
    color: var(--sb-sidebar-title-color);
    margin: var(--sb-sidebar-title-margin);
    padding-bottom: 12px;
    border-bottom: var(--sb-sidebar-title-border);
}
.blog-sidebar .sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-sidebar .sidebar-links li {
    border-bottom: var(--sb-sidebar-link-border);
}
.blog-sidebar .sidebar-links li:last-child { border-bottom: none; }
.blog-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sb-sidebar-link-padding);
    color: var(--sb-sidebar-link-color);
    font-size: var(--sb-sidebar-link-size);
    text-decoration: none;
    transition: all 0.3s ease;
}
.blog-sidebar .sidebar-link:hover { color: var(--sb-sidebar-link-hover-color); }
.blog-sidebar .sidebar-link.active {
    color: var(--sb-sidebar-active-color);
    font-weight: var(--sb-sidebar-active-weight);
}
.blog-sidebar .category-count {
    background: var(--sb-sidebar-count-bg);
    color: var(--sb-sidebar-count-color);
    font-size: var(--sb-sidebar-count-size);
    border-radius: var(--sb-sidebar-count-radius);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
}

/* ===== Article Show Page ===== */
.article-content {
    background: var(--sb-content-bg);
    border-radius: var(--sb-content-radius);
    box-shadow: var(--sb-content-shadow);
    padding: var(--sb-content-padding);
    margin-bottom: var(--sb-section-gap);
}
.article-content .article-inner {
    background: var(--sb-article-bg);
    padding: var(--sb-article-padding);
    border-radius: var(--sb-article-radius);
    box-shadow: var(--sb-article-shadow);
}
.article-content .article-title {
    font-size: var(--sb-article-title-size);
    font-weight: var(--sb-article-title-weight);
    color: var(--sb-article-title-color);
    margin: var(--sb-article-title-margin);
    line-height: 1.3;
}
.article-content .article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sb-article-meta-gap);
    color: var(--sb-article-meta-color);
    font-size: var(--sb-article-meta-size);
    margin-bottom: 20px;
}
.article-content .article-meta i {
    color: var(--sb-card-meta-icon-color);
    margin-left: 4px;
}
.article-content .article-meta .meta-item {
    display: flex;
    align-items: center;
}
.article-content .article-meta .category-badge {
    background: var(--sb-article-cat-badge-bg);
    color: var(--sb-article-cat-badge-color);
    border-radius: var(--sb-article-cat-badge-radius);
    padding: var(--sb-article-cat-badge-padding);
    font-size: var(--sb-cat-badge-size);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}
.article-content .article-meta .category-badge:hover { opacity: 0.85; }
.article-content .article-image {
    border-radius: var(--sb-article-img-radius);
    margin: var(--sb-article-img-margin);
    overflow: hidden;
}
.article-content .article-image img {
    width: 100%;
    height: auto;
    display: block;
}
.article-content .article-body {
    font-size: var(--sb-article-body-size);
    color: var(--sb-article-body-color);
    line-height: var(--sb-article-body-lh);
    margin: var(--sb-article-body-margin);
}
.article-content .article-body p { margin: 0 0 16px; }
.article-content .article-body p:last-child { margin-bottom: 0; }
.article-content .article-body img { max-width: 100%; height: auto; border-radius: var(--sb-article-img-radius); }

/* ===== Article Tags ===== */
.article-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sb-tags-gap);
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sb-border);
}
.article-tags .tag-label {
    font-size: var(--sb-tag-size);
    color: var(--sb-text-light);
    font-weight: 600;
    margin-left: 4px;
}
.article-tags .tag-link {
    display: inline-block;
    background: var(--sb-tag-bg);
    color: var(--sb-tag-color);
    border-radius: var(--sb-tag-radius);
    padding: var(--sb-tag-padding);
    font-size: var(--sb-tag-size);
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1;
}
.article-tags .tag-link:hover {
    background: var(--sb-tag-hover-bg);
    color: #ffffff;
}

/* ===== Related Posts ===== */
.related-posts {
    margin-top: 30px;
    padding-top: 24px;
    border-top: var(--sb-related-border);
}
.related-posts .related-title {
    font-size: var(--sb-related-title-size);
    font-weight: var(--sb-related-title-weight);
    color: var(--sb-related-title-color);
    margin: var(--sb-related-title-margin);
}
.related-posts .related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sb-section-gap);
}

/* ===== Search Form ===== */
.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.search-form .search-input {
    flex: 1;
    border: 2px solid var(--sb-search-input-border);
    border-radius: var(--sb-search-input-radius);
    padding: var(--sb-search-input-padding);
    font-size: var(--sb-search-input-size);
    background: var(--sb-search-input-bg);
    color: var(--sb-text);
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    outline: none;
}
.search-form .search-input:focus {
    border-color: var(--sb-search-input-focus-border);
    box-shadow: var(--sb-search-input-focus-shadow);
}
.search-form .search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sb-search-btn-bg);
    color: var(--sb-search-btn-color);
    border: none;
    border-radius: var(--sb-search-btn-radius);
    padding: var(--sb-search-btn-padding);
    font-size: var(--sb-search-btn-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
}
.search-form .search-btn:hover { background: var(--sb-search-btn-hover-bg); color: var(--sb-search-btn-color); }
.search-form .search-btn:active { transform: scale(0.97); }

/* ===== RSS Button ===== */
.rss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sb-rss-btn-bg);
    color: var(--sb-rss-btn-color);
    border: none;
    border-radius: var(--sb-rss-btn-radius);
    padding: var(--sb-rss-btn-padding);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    font-family: inherit;
}
.rss-btn:hover { opacity: 0.85; color: var(--sb-rss-btn-color); }
.rss-btn:active { transform: scale(0.97); }

/* ===== Pagination ===== */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-pagination-gap);
    margin: var(--sb-section-gap) 0;
    background: var(--sb-pagination-bg);
    border-radius: var(--sb-pagination-radius);
    padding: 10px 0;
}
.blog-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-pagination-link-bg);
    color: var(--sb-pagination-link-color);
    border-radius: var(--sb-pagination-link-radius);
    padding: var(--sb-pagination-link-padding);
    font-size: var(--sb-pagination-link-size);
    font-weight: var(--sb-pagination-link-weight);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid var(--sb-border);
    line-height: 1;
    min-width: 40px;
}
.blog-pagination .page-link:hover {
    background: var(--sb-pagination-link-hover-bg);
    color: var(--sb-pagination-link-hover-color);
    border-color: var(--sb-pagination-link-hover-bg);
}
.blog-pagination .page-link.active {
    background: var(--sb-pagination-active-bg);
    color: var(--sb-pagination-active-color);
    border-color: var(--sb-pagination-active-bg);
    font-weight: 700;
}
.blog-pagination .page-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== Empty / No Data ===== */
.blog-empty {
    text-align: center;
    padding: var(--sb-no-data-padding);
    color: var(--sb-no-data-color);
}
.blog-empty .empty-icon {
    font-size: var(--sb-no-data-icon-size);
    margin-bottom: 16px;
    opacity: 0.6;
}
.blog-empty p {
    font-size: var(--sb-no-data-size);
    margin: 0;
}

/* ===== Responsive ===== */
@media (min-width: 576px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .related-posts .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .blog-page .container { max-width: 720px; padding: 0 24px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .blog-card { margin: 0; }
    .related-posts .related-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .article-content { padding: 30px; }
    .search-form .search-input { font-size: var(--sb-search-input-size); }
}
@media (min-width: 992px) {
    .blog-page .container { max-width: 960px; }
    .blog-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: var(--sb-section-gap);
        align-items: start;
    }
    .blog-layout .blog-main { min-width: 0; }
    .blog-sidebar { margin-bottom: 0; position: sticky; top: 20px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .related-posts .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .blog-page .container { max-width: 1140px; }
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
    .related-posts .related-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
    .blog-page {
        --sb-bg: var(--sb-dark-bg);
        --sb-text: var(--sb-dark-text);
        --sb-text-light: #999999;
        --sb-border: var(--sb-dark-border);
        --sb-card-bg: var(--sb-dark-card);
        --sb-card-border: 1px solid var(--sb-dark-border);
        --sb-card-shadow: 0 2px 12px rgba(0,0,0,0.3);
        --sb-card-title-color: var(--sb-dark-text);
        --sb-card-excerpt-color: #999999;
        --sb-sidebar-bg: var(--sb-dark-card);
        --sb-sidebar-shadow: 0 2px 12px rgba(0,0,0,0.3);
        --sb-sidebar-title-color: var(--sb-dark-text);
        --sb-sidebar-link-color: var(--sb-dark-text);
        --sb-sidebar-link-border: 1px solid var(--sb-dark-border);
        --sb-content-bg: var(--sb-dark-card);
        --sb-content-shadow: 0 2px 12px rgba(0,0,0,0.3);
        --sb-article-title-color: var(--sb-dark-text);
        --sb-article-body-color: #cccccc;
        --sb-tag-bg: var(--sb-dark-bg);
        --sb-tag-color: var(--sb-dark-text);
        --sb-pagination-link-bg: var(--sb-dark-bg);
        --sb-pagination-link-color: var(--sb-dark-text);
        --sb-search-input-bg: var(--sb-dark-bg);
        --sb-search-input-border: var(--sb-dark-border);
        --sb-related-border: 2px solid var(--sb-dark-border);
        --sb-card-img-bg: #333333;
        --sb-no-data-color: #666666;
        --sb-card-meta-color: #777777;
        --sb-date-color: #777777;
        --sb-article-meta-color: #777777;
        --sb-sidebar-count-bg: #D4A017;
        --sb-primary: #D4A017;
        --sb-primary-hover: #e6b422;
        --sb-pagination-active-bg: #D4A017;
        --sb-pagination-link-hover-bg: #D4A017;
        --sb-search-btn-hover-bg: #e6b422;
        --sb-card-btn-hover-bg: #e6b422;
        --sb-tag-hover-bg: #D4A017;
    }
    .blog-page .search-form .search-input { color: var(--sb-dark-text); }
}

/* ===== Print ===== */
@media print {
    .blog-page .search-form, .blog-page .blog-sidebar,
    .blog-page .rss-btn, .blog-page .card-btn,
    .blog-page .blog-pagination { display: none !important; }
    .blog-page { background: white; color: black; font-size: 12pt; }
    .blog-page .container { max-width: 100%; margin: 0; padding: 0; box-shadow: none; }
    .blog-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
    .blog-card:hover { transform: none; box-shadow: none; }
    .article-content { box-shadow: none; }
    .blog-layout { display: block; }
    .blog-grid { display: block; }
    .blog-card { margin-bottom: 20px; }
}