/* ==========================================================================
   RTL Blog Page - Blog Page Specific Styles for Right-to-Left Languages
   ========================================================================== */

/*
   Blog page specific RTL styles
   - Blog hero section
   - Search and filters
   - Blog cards and listings
   - Blog content and meta
*/

/* ==========================================================================
   1. BLOG HERO SECTION
   ========================================================================== */

/* Blog hero section */
[dir="rtl"] .compact-hero {
    text-align: center; /* Keep hero centered */
    direction: rtl;
}

[dir="rtl"] .compact-hero h1 {
    text-align: center;
}

[dir="rtl"] .compact-hero p {
    text-align: center;
}

/* ==========================================================================
   2. SEARCH & FILTERS
   ========================================================================== */

/* Search Bar */
[dir="rtl"] .search-form {
    direction: rtl;
}

[dir="rtl"] .search-input {
    text-align: start;
    direction: rtl;
}

[dir="rtl"] .search-btn {
    inset-inline-start: 0.5rem;
    inset-inline-end: auto;
}

/* Search bar positioning */
[dir="rtl"] .relative input {
    text-align: start;
    direction: rtl;
}

/* Swap input padding for RTL - button on left, icon on right */
[dir="rtl"] .pl-10.pr-24 {
    padding-left: 6rem; /* 24 -> left for button */
    padding-right: 2.5rem; /* 10 -> right for icon */
}

[dir="rtl"] .absolute.left-3 {
    inset-inline-start: auto;
    inset-inline-end: 0.75rem;
}

[dir="rtl"] .absolute.right-1 {
    inset-inline-start: 0.25rem !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: 0.25rem !important;
}

/* Filter Buttons */
[dir="rtl"] .filter-btn svg {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

[dir="rtl"] .filter-btn {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

[dir="rtl"] .filter-container {
    flex-direction: row-reverse;
}

/* Sort Dropdown */
[dir="rtl"] .sort-dropdown {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

[dir="rtl"] .sort-dropdown svg {
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

/* View Toggle */
[dir="rtl"] .view-toggle-container {
    flex-direction: row-reverse;
}

/* ==========================================================================
   3. BLOG CARDS & LISTINGS
   ========================================================================== */

/* Blog Cards */
[dir="rtl"] .blog-card {
    text-align: start;
    direction: rtl;
}

[dir="rtl"] .blog-card .category-tags {
    justify-content: flex-end;
}

[dir="rtl"] .blog-card .featured-badge {
    inset-inline-start: 1rem;
    inset-inline-end: auto;
}

[dir="rtl"] .blog-card .reading-time-badge {
    inset-inline-start: auto;
    inset-inline-end: 1rem;
}

[dir="rtl"] .blog-card .card-title {
    text-align: start;
}

[dir="rtl"] .blog-card .card-excerpt {
    text-align: start;
}

[dir="rtl"] .blog-card .card-meta {
    flex-direction: row-reverse;
    text-align: start;
}

[dir="rtl"] .blog-card .author-info {
    flex-direction: row-reverse;
}

[dir="rtl"] .blog-card .author-avatar {
    margin-inline-start: 0.75rem;
    margin-inline-end: 0;
}

[dir="rtl"] .blog-card .stats-container {
    flex-direction: row-reverse;
}

[dir="rtl"] .blog-card .stat-item {
    margin-inline-start: 0.75rem;
    margin-inline-end: 0;
}

[dir="rtl"] .blog-card .stat-item svg {
    margin-inline-start: 0.25rem;
    margin-inline-end: 0;
}

/* List View */
[dir="rtl"] .blog-card-list {
    direction: rtl;
}

[dir="rtl"] .blog-card-list .flex-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .blog-card-list .card-content {
    text-align: start;
}

[dir="rtl"] .blog-card-list .categories-meta {
    justify-content: space-between;
    flex-direction: row-reverse;
}

[dir="rtl"] .blog-card-list .author-stats {
    flex-direction: row-reverse;
}

/* ==========================================================================
   4. BLOG CONTENT & META
   ========================================================================== */

/* Blog Post Content */
[dir="rtl"] .prose-custom {
    direction: rtl;
    text-align: start;
}

[dir="rtl"] .prose-custom h1,
[dir="rtl"] .prose-custom h2,
[dir="rtl"] .prose-custom h3,
[dir="rtl"] .prose-custom h4,
[dir="rtl"] .prose-custom h5,
[dir="rtl"] .prose-custom h6 {
    text-align: start;
}

[dir="rtl"] .prose-custom ul,
[dir="rtl"] .prose-custom ol {
    padding-inline-start: 0;
    padding-inline-end: 1.5rem;
}

[dir="rtl"] .prose-custom blockquote {
    border-inline-start-width: 0;
    border-inline-end-width: 4px;
    padding-inline-start: 0;
    padding-inline-end: 1rem;
    text-align: start;
}

[dir="rtl"] .prose-custom table {
    direction: rtl;
}

[dir="rtl"] .prose-custom th,
[dir="rtl"] .prose-custom td {
    text-align: start;
}

/* Blog Meta Information */
[dir="rtl"] .blog-meta {
    direction: rtl;
    text-align: start;
}

[dir="rtl"] .blog-author {
    text-align: start;
}

[dir="rtl"] .blog-date {
    text-align: start;
}

[dir="rtl"] .blog-categories {
    text-align: start;
}

[dir="rtl"] .blog-tags {
    text-align: start;
}

/* ==========================================================================
   5. COMMENTS & SOCIAL
   ========================================================================== */

/* Comments */
[dir="rtl"] .comment {
    text-align: start;
}

[dir="rtl"] .comment-author {
    text-align: start;
}

[dir="rtl"] .comment-content {
    text-align: start;
}

[dir="rtl"] .comment-reply {
    margin-inline-start: 2rem;
    margin-inline-end: 0;
}

/* Social Share Buttons */
[dir="rtl"] .social-share {
    direction: rtl;
}

[dir="rtl"] .social-share .btn {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* Badge/Tag */
[dir="rtl"] .badge,
[dir="rtl"] .tag {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* ==========================================================================
   6. RESPONSIVE BLOG PAGE
   ========================================================================== */

/* Mobile responsive RTL adjustments for blog */
@media (max-width: 768px) {
    [dir="rtl"] .filter-container {
        flex-direction: column;
        align-items: flex-end;
    }

    [dir="rtl"] .sort-dropdown {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    [dir="rtl"] .blog-card-list .flex-row {
        flex-direction: column;
    }

    [dir="rtl"] .blog-card-list .card-content {
        text-align: start;
    }

    /* Search adjustments */
    [dir="rtl"] .search-form {
        width: 100%;
    }

    /* Filter buttons stack */
    [dir="rtl"] .filter-container .filter-btn {
        margin: 0.25rem 0;
    }
}