/**
 * News Category Post Styles
 * Figma Node: 6002:21202 — News Post Layout (category "اخبار")
 *
 * Design tokens used:
 *   Neutral/01:  #C4C8CF  — breadcrumb / secondary text
 *   Neutral/02:  #8F96A3  — meta text
 *   Neutral/03:  #5E6573
 *   Neutral/08:  #25272D  — category button bg
 *   Neutral/09:  #1C1E22  — content section bg
 *   Primary/01:  #FFFFFF  — title / body text
 *   Heading/H2:  IRANSansX Regular 24px / line-height 32px
 *   Body/Body2:  IRANSansX Regular 16px / line-height 1.5
 *   Button/Btn2: IRANSansX Regular 14px / line-height 1.2
 *   Button/Btn1: IRANSansX Regular 16px / line-height 1.2
 *
 * @package Strategic_Club
 * @since 1.0.0
 */

/* ==========================================================================
   Page wrapper
   ========================================================================== */

.news-category-post-main {
    padding-top: 64px;
    padding-bottom: 48px;
}

.news-category-post-container {
    max-width: 1640px; /* 1592px content + 24px padding each side */
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ==========================================================================
   Article root — Figma Node 6002:21202
   flex-col gap-16px items-start
   ========================================================================== */

.ncp-article {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    direction: rtl;
}

/* ==========================================================================
   POST HEADER SECTION — Figma Node 6002:21203
   flex-col gap-24px items-start
   ========================================================================== */

.ncp-header-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    flex-shrink: 0;
}

/* Inner meta wrapper — flex-col gap-12px items-end */
.ncp-header-meta-wrapper {
    /* display: flex; */
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
    flex-shrink: 0;
}

/* ── Row 1: Title + Breadcrumb ── */

/* justify-between, items-center */
.ncp-breadcrumb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    gap: 16px;
}

/* Post Title — Figma: IRANSansX Regular 24px, line-height 32px, color #FFFFFF, text-right */
.ncp-post-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: right;
    margin: 0;
    flex-shrink: 0;
    max-width: 70%;
}

/* Breadcrumb — flex gap-4px items-center justify-end */
.ncp-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

/* Breadcrumb current (post title, truncated) — IRANSansX Regular 16px, color #C4C8CF */
.ncp-breadcrumb-current {
    display: inline-block;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #c4c8cf;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    vertical-align: middle;
}

.ncp-breadcrumb-item {
    min-width: 0;
    overflow: hidden;
}

/* Breadcrumb link — IRANSansX Regular 16px, color #C4C8CF */
.ncp-breadcrumb-link {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #c4c8cf;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.ncp-breadcrumb-link:hover {
    color: #ffffff;
}

/* Breadcrumb separator — caret-left icon 18×18 */
.ncp-breadcrumb-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ncp-breadcrumb-sep svg,
.ncp-breadcrumb-sep img {
    width: 18px;
    height: 18px;
    display: block;
}

/* ── Row 2: Meta + Selected Categories ── */

/* justify-between, items-center */
.ncp-meta-categories-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    gap: 16px;
}

/* Left side: stats + author/date — flex gap-16px items-center */
.ncp-meta-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Stats group — flex gap-8px items-center */
.ncp-meta-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Single stat — flex gap-4px items-center justify-end */
.ncp-meta-stat {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Stat value — IRANSansX Regular 14px, color #8F96A3 */
.ncp-meta-value {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #8f96a3;
    text-align: center;
    white-space: nowrap;
}

/* Stat icon — 14×14 */
.ncp-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.ncp-meta-icon svg,
.ncp-meta-icon img {
    width: 14px;
    height: 14px;
    display: block;
}

/* Author + Date — flex gap-8px items-center */
.ncp-meta-author-date {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Date — IRANSansX Regular 14px, color #8F96A3 */
.ncp-meta-date {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #8f96a3;
    text-align: center;
    white-space: nowrap;
}

/* Dot separator — Figma Ellipse 4×4 */
.ncp-meta-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #8f96a3;
    flex-shrink: 0;
}

/* Author link — IRANSansX Regular 14px, color #8F96A3 */
.ncp-meta-author {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    color: #8f96a3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.ncp-meta-author:hover {
    color: #c4c8cf;
}

/* ── Selected Categories (right side) ── */

/* flex gap-8px items-center justify-end */
.ncp-selected-categories {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Category button — Figma: bg #25272D, rounded-4px, h-32px, px-12px py-8px */
.ncp-category-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 8px 12px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.ncp-category-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

/* ==========================================================================
   Featured Image — Figma: rounded-8px, height 688px, width 1224px
   ========================================================================== */

.ncp-featured-image {
    position: relative;
    width: 100%;
    height: 688px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.ncp-featured-image-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    pointer-events: none;
}

/* ==========================================================================
   CONTENT SECTION — Figma Node 6002:21204
   bg #1C1E22, rounded-8px, padding 24px, flex-col gap-32px items-center
   ========================================================================== */

.ncp-content-section {
    background-color: #1c1e22;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Content wrapper — flex-col gap-24px items-end */
.ncp-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-end;
    width: 100%;
    flex-shrink: 0;
}

/* ── Post Body ── */

.ncp-post-body {
    width: 100%;
    text-align: right;
}

/* Body text — Figma: IRANSansX Regular 16px, line-height 1.5, color #FFFFFF */
.ncp-post-body p {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    margin-bottom: 16px;
    text-align: right;
}

.ncp-post-body p:last-child {
    margin-bottom: 0;
}

.ncp-post-body h1,
.ncp-post-body h2 {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 24px;
    margin-bottom: 16px;
    text-align: right;
    letter-spacing: -0.01em;
}

.ncp-post-body h3 {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 12px;
    text-align: right;
    letter-spacing: -0.005em;
}

.ncp-post-body h4,
.ncp-post-body h5,
.ncp-post-body h6 {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 16px;
    margin-bottom: 12px;
    text-align: right;
}

.ncp-post-body a {
    color: #1081df;
    text-decoration: underline;
    text-decoration-color: #1081df;
    transition: color 0.15s ease;
}

.ncp-post-body a:hover {
    color: #3a9aff;
}

/* HR - subtle divider with gradient fade edges */
.ncp-post-body hr {
    border: none;
    height: 1px;
    background: linear-gradient(to left, transparent, #30343B 20%, #30343B 80%, transparent);
    margin: 24px 0;
}

.ncp-post-body ul,
.ncp-post-body ol {
    margin: 12px 0 12px 0;
    padding-right: 24px;
    text-align: right;
}

.ncp-post-body li {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    margin-bottom: 8px;
}

.ncp-post-body blockquote {
    border-right: 4px solid #1081df;
    padding-right: 16px;
    margin: 24px 0;
    color: #c4c8cf;
    font-style: normal;
}

.ncp-post-body img {
    border-radius: 8px;
    margin: 16px 0;
    max-width: 100%;
    height: auto;
}

/* ── Tags Section — Figma: flex gap-8px items-start justify-start (right in RTL) ── */

.ncp-tags-section {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    flex-shrink: 0;
}

/* Tag button — same as category button: bg #25272D, rounded-4px, h-32px, px-12px py-8px */
.ncp-tag-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 8px 12px;
    background-color: #25272d;
    border-radius: 4px;
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    direction: rtl;
}

.ncp-tag-btn:hover {
    background-color: #2e3038;
    color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .ncp-featured-image {
        height: 480px;
    }

    .ncp-post-title {
        font-size: 21px;
        line-height: 28px;
        max-width: 60%;
    }
}

@media (max-width: 768px) {
    .news-category-post-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ncp-featured-image {
        height: 280px;
    }

    .ncp-breadcrumb-title-row {
        flex-direction: column-reverse;
        /* align-items: flex-end; */
        gap: 8px;
    }

    .ncp-post-title {
        font-size: 19px;
        line-height: 26px;
        max-width: 100%;
        text-align: center;
    }

    .ncp-breadcrumb-current {
        max-width: 140px;
    }

    .ncp-meta-categories-row {
        /* flex-direction: column-reverse; */
        /* align-items: flex-end; */
        gap: 12px;
    }

    .ncp-meta-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ncp-content-section {
        padding: 16px;
    }

    /* Tags: centered */
    .ncp-tags-section {
        justify-content: center;
    }

    /* Comments section: mobile responsive — full width within parent */
    .comments-section {
        max-width: 100%;
        width: 100%;
        margin-top: 32px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .comments-section__container {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .news-category-post-main {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .ncp-featured-image {
        height: 200px;
    }

    .ncp-selected-categories {
        flex-wrap: wrap;
    }

    /* Comments section: small mobile responsive — full width within parent */
    .comments-section {
        max-width: 100%;
        width: 100%;
        margin-top: 32px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .comments-section__container {
        padding: 16px;
    }
}

/* ==========================================================================
   RELATED NEWS SECTION — Figma Node 4001:8211 (SimilarPosts)
   Design tokens: Neutral/09 #1C1E22, Neutral/07 #30343B, Primary/01 #FFFFFF,
   Neutral/02 #8F96A3, Body/Body1 Regular 18px, Numbers/12 12px,
   Heading/Heading3 Medium 20px
   ========================================================================== */

.related-news-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-end;
    width: 100%;
    margin-top: 32px;
    direction: rtl;
}

/* Section header — flex gap-16px items-center justify-end */
.related-news-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
}

/* Title wrapper — flex gap-8px items-center */
.related-news-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Section title — Heading/Heading3: IRANSansX Medium 20px, line-height 1.5, #FFFFFF */
.related-news-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
}

/* Title icon — 32x32 */
.related-news-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.related-news-title-icon svg,
.related-news-title-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

/* Decorative line — flex-1, height 1px, color #30343B */
.related-news-line {
    flex: 1 0 0;
    height: 4px;
    min-height: 1px;
    background-color: #30343b;
    min-width: 0;
}

/* Grid — flex-col gap-24px */
.related-news-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    flex-shrink: 0;
}

/* Grid row — flex gap-24px items-stretch */
.related-news-grid-row {
    display: grid;
    gap: 24px;
    align-items: stretch;
    width: 100%;
    flex-shrink: 0;
    grid-template-columns: repeat(4, 1fr);
}

/* Card — flex-col, rounded-8px */
.related-news-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    overflow: hidden;
    flex: 1 0 0;
    min-width: 0;
    transition: opacity 0.2s ease;
}

.related-news-card:hover {
    opacity: 0.9;
}

.related-news-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

/* Card image — height 184px, rounded-tl-8px rounded-tr-8px */
.related-news-card-image {
    position: relative;
    width: 100%;
    height: 184px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
    background-color: #25272d;
}

.related-news-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    border-radius: 8px 8px 0 0;
    transition: transform 0.3s ease;
}

.related-news-card:hover .related-news-card-image img {
    transform: scale(1.04);
}

.related-news-card-placeholder {
    position: absolute;
    inset: 0;
    background-color: #25272d;
}

/* Card content — bg #1C1E22, flex-col gap-16px items-end justify-center p-16px, rounded-bl-8px rounded-br-8px */
.related-news-card-content {
    background-color: #1c1e22;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    border-radius: 0 0 8px 8px;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

/* Card title — Body/Body1 Regular: IRANSansX Regular 18px, line-height 1.5, #FFFFFF, single line ellipsis */
.related-news-card-title {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
    text-align: right;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card meta row — flex items-center justify-between */
.related-news-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
}

/* Meta left (views + comments) — flex gap-8px items-center */
.related-news-card-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Meta right (date + author) — flex gap-8px items-center */
.related-news-card-meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Meta item — flex gap-4px items-center justify-end */
.related-news-meta-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Meta icon — 12x12 */
.related-news-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.related-news-meta-icon svg,
.related-news-meta-icon img {
    width: 12px;
    height: 12px;
    display: block;
}

/* Meta value — Numbers/12: IRANSansX Regular 12px, color #8F96A3 */
.related-news-meta-value {
    font-family: 'Vazir', 'Vazir', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: #8f96a3;
    white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE — Related News Section
   Mobile breakpoints following project patterns (game-download-post, mod-download-post)
   ========================================================================== */

/* Tablet breakpoint — 2 column grid */
@media (max-width: 1024px) {
    .related-news-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile breakpoint — single column, compact cards */
@media (max-width: 640px) {
    .related-news-section {
        gap: 24px;
    }

    .related-news-header {
        justify-content: center;
    }

    .related-news-line {
        display: none;
    }

    .related-news-title {
        font-size: 18px;
    }

    .related-news-grid-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .related-news-card {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    .related-news-card-image {
        height: 153px;
    }

    .related-news-card-content {
        padding: 12px;
    }

    .related-news-card-title {
        font-size: 16px;
    }

    .related-news-card-meta-left,
    .related-news-card-meta-right {
        gap: 6px;
    }

    .related-news-meta-item {
        gap: 3px;
    }
}

/* Small mobile breakpoint — tighter spacing */
@media (max-width: 480px) {
    .related-news-section {
        gap: 20px;
        margin-top: 24px;
    }

    .related-news-grid {
        gap: 20px;
    }

    .related-news-grid-row {
        gap: 20px;
    }

    .related-news-card-image {
        height: 140px;
    }

    .related-news-card-content {
        padding: 10px;
        gap: 12px;
    }

    .related-news-card-title {
        font-size: 15px;
    }

    .related-news-meta-value {
        font-size: 11px;
    }
}