/* ============================================================================
   Smart News — Reporter Profile Page (single-sn_reporter.php)
   হুবহু (pixel-matched) রিডিজাইন — স্কিনশট রেফারেন্স অনুযায়ী
   Version: 2.9.88
   ============================================================================ */

:root {
    --sn-rep-bg: #eef2f6;
    --sn-rep-white: #ffffff;
    --sn-rep-blue: #1f7ec4;
    --sn-rep-blue-dark: #185f8e;
    --sn-rep-teal: #0b5d75;
    --sn-rep-title: #1c2733;
    --sn-rep-text: #5f6672;
    --sn-rep-muted: #8a8f98;
    --sn-rep-border: #e3e7ec;
}

.sn-reporter-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 15px 40px;
}

/* ===== Profile head ===== */
.sn-reporter-head {
    background: var(--sn-rep-bg);
    border-radius: 12px;
    text-align: center;
    padding: 26px 20px 22px;
}

.sn-reporter-photo,
.sn-reporter-photo-placeholder {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 12px;
    border: 3px solid var(--sn-rep-white);
    box-shadow: 0 0 0 1px var(--sn-rep-border);
}

.sn-reporter-photo-placeholder {
    background: linear-gradient(135deg, var(--sn-rep-blue), var(--sn-rep-teal));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
}

.sn-reporter-name {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--sn-rep-blue);
}

.sn-reporter-designation {
    font-size: 14px;
    font-weight: 500;
    color: var(--sn-rep-muted);
    margin: 0;
}

/* ===== Bio (shown only if the reporter has written content) ===== */
.sn-reporter-bio {
    max-width: 760px;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--sn-rep-text);
    text-align: justify;
    padding: 0 6px;
}
.sn-reporter-bio:empty { display: none; }

/* ===== Stats (kept for admins/functionality, subtle, matches page tone) ===== */
.sn-reporter-stats {
    text-align: center;
    font-size: 13px;
    color: var(--sn-rep-muted);
    margin: 14px 0 0;
}
.sn-reporter-stats strong { color: var(--sn-rep-blue-dark); }

/* ===== Card wrapping the article list ===== */
.sn-reporter-card {
    background: var(--sn-rep-white);
    border-radius: 12px;
    margin-top: 4px;
    overflow: hidden;
}

/* ---- Featured (latest) article — big row ---- */
.sn-rep-featured {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 18px 20px 20px;
}
.sn-rep-featured-img {
    flex: 0 0 42%;
    max-width: 42%;
    border-radius: 10px;
    overflow: hidden;
    background: #ddd;
}
.sn-rep-featured-img img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    display: block;
}
.sn-rep-featured-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sn-rep-featured-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sn-rep-blue);
    margin: 0 0 8px;
    display: block;
}
.sn-rep-featured-title:hover { color: var(--sn-rep-blue-dark); }
.sn-rep-featured-excerpt {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--sn-rep-text);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sn-rep-date {
    font-size: 13px;
    color: var(--sn-rep-muted);
    display: flex;
    align-items: center;
    margin: 0;
}
.sn-rep-date i { margin-right: 6px; color: #a3a8b0; }

/* ---- Divider between featured item and the list ---- */
.sn-rep-divider { height: 1px; background: var(--sn-rep-border); margin: 0 20px; }

/* ---- Regular article rows ---- */
.sn-rep-list { }
.sn-rep-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sn-rep-border);
    text-decoration: none;
}
.sn-rep-row:last-child { border-bottom: none; }

.sn-rep-row-body {
    flex: 1;
    min-width: 0;
}
.sn-rep-row-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sn-rep-title);
    margin: 0 0 6px;
    display: block;
}
.sn-rep-row:hover .sn-rep-row-title { color: var(--sn-rep-blue); }
.sn-rep-row-excerpt {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--sn-rep-text);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* plain post thumbnail — right side of each row */
.sn-rep-thumb {
    flex: 0 0 150px;
    width: 150px;
    height: 108px;
    border-radius: 8px;
    overflow: hidden;
}
.sn-rep-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== Empty state ===== */
.sn-reporter-empty {
    text-align: center;
    padding: 46px 20px;
    color: var(--sn-rep-muted);
    font-size: 15px;
}

/* ===== Pagination ===== */
.sn-rep-pagination {
    padding: 18px 20px 22px;
    text-align: center;
}
.sn-rep-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    margin: 0 3px;
    border-radius: 6px;
    background: var(--sn-rep-bg);
    color: var(--sn-rep-title);
    text-decoration: none;
    font-size: 13px;
}
.sn-rep-pagination .page-numbers.current,
.sn-rep-pagination .page-numbers:hover {
    background: var(--sn-rep-blue);
    color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .sn-reporter-page { padding: 12px 10px 30px; }
    .sn-reporter-name { font-size: 20px; }
    .sn-reporter-photo, .sn-reporter-photo-placeholder { width: 70px; height: 70px; }

    .sn-rep-featured { flex-wrap: wrap; padding: 14px; }
    .sn-rep-featured-img { flex: 0 0 100%; max-width: 100%; height: 160px; }
    .sn-rep-featured-body { margin-top: 12px; }
    .sn-rep-featured-title { font-size: 17px; }

    .sn-rep-row { padding: 12px 14px; gap: 10px; }
    .sn-rep-thumb { flex: 0 0 108px; width: 108px; height: 84px; }
    .sn-rep-row-title { font-size: 14.5px; }
}

@media (max-width: 420px) {
    .sn-rep-thumb { flex: 0 0 92px; width: 92px; }
}