/* ========================================
   PROFESSIONAL BLOG – ZERO CONFLICTS
   Prefix: .problog-*
   ======================================== */

.problog-wrapper {
    padding: 4rem 0;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.problog-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
.problog-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.problog-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 .5rem;
}
.problog-intro {
    font-size: 1.1rem;
    color: #444;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Grid */
.problog-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    margin-bottom: 3rem;
}

.problog-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
    transition: all .3s ease;
    display: flex;
    flex-direction: column;
}
.problog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

/* Thumbnail */
.problog-thumb-link {
    display: block;
    overflow: hidden;
}
.problog-thumb-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .4s ease;
}
.problog-thumb-link:hover .problog-thumb-img {
    transform: scale(1.05);
}

/* Card Body */
.problog-card-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.problog-card-title {
    font-size: 1.45rem;
    margin: 0 0 .75rem;
    line-height: 1.3;
}
.problog-card-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color .2s;
}
.problog-card-title a:hover {
    color: #0066cc;
}

.problog-meta {
    font-size: .9rem;
    color: #666;
    margin-bottom: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.problog-sep { color: #aaa; }
.problog-cats a { color: #0066cc; text-decoration: none; }
.problog-cats a:hover { text-decoration: underline; }
.problog-readtime { color: #0066cc; font-weight: 600; }

.problog-excerpt {
    color: #444;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.problog-readmore {
    color: #0066cc;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
}
.problog-readmore .problog-arrow {
    margin-left: .4rem;
    transition: transform .2s;
}
.problog-readmore:hover .problog-arrow {
    transform: translateX(4px);
}

/* Pagination */
.problog-pagination {
    text-align: center;
    margin-top: 2rem;
}
.problog-pagination .page-numbers {
    display: inline-block;
    padding: .6rem 1rem;
    margin: 0 .25rem;
    border: 1px solid #e0e0e0;
    border-radius: .5rem;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all .2s;
}
.problog-pagination .page-numbers.current,
.problog-pagination .page-numbers:hover {
    background: #0066cc;
    color: #fff;
    border-color: #0066cc;
}

/* No posts */
.problog-no-posts {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 3rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .problog-grid { grid-template-columns: 1fr; }
    .problog-title { font-size: 2.2rem; }
    .problog-thumb-img { height: 180px; }
}



/* ========================================
   PROPOST – PROFESSIONAL SINGLE POST
   Only affects regular blog posts
   Zero conflicts with cover template
   ======================================== */

.propost-article { margin: 0; 
width: 80%;
margin: auto;}

/* Featured Image */
.propost-featured {
    margin-bottom: 2.5rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.propost-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
}

/* Header */
.propost-header {
    text-align: center;
    margin-bottom: 3rem;
}
.propost-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1rem 0 1rem;
    line-height: 1.2;

}
.propost-meta {
    font-size: 1rem;
    color: #666;
}
.propost-sep { margin: 0 .5rem; color: #aaa; }
.propost-readtime { color: #0066cc; font-weight: 600; }

/* Content */
.propost-content {
    font-size: 1.12rem;
    line-height: 1.85;
    color: #333;
    margin-bottom: 3rem;
}
.propost-content p { margin-bottom: 1.6rem; }
.propost-content h2, .propost-content h3 {
    margin: 2.8rem 0 1.2rem;
    color: #1a1a1a;
    font-weight: 600;
}
.propost-content img {
    border-radius: .8rem;
    margin: 2.2rem 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    max-width: 100%;
    height: auto;
}

/* Tags */
.propost-tags {
    text-align: center;
    margin: 2.5rem 0;
}
.propost-tags a {
    display: inline-block;
    background: #f0f4ff;
    color: #0066cc;
    padding: .45rem .9rem;
    margin: 0 .3rem .6rem 0;
    border-radius: .6rem;
    font-size: .88rem;
    text-decoration: none;
}
.propost-tags a:hover {
    background: #0066cc;
    color: #fff;
}

/* Author */
.propost-author {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 1rem;
    margin: 3.5rem 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.propost-avatar img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.propost-author-info {
    margin-left: 1.6rem;
    flex: 1;
}
.propost-author-name a {
    color: #1a1a1a;
    text-decoration: none;
}
.propost-author-desc {
    margin: 0;
    color: #555;
    font-size: .95rem;
}

/* Related */
.propost-related-title {
    font-size: 1.7rem;
    margin: 4rem 0 1.8rem;
    text-align: center;
	color: blue;
	background-color: skyblue;
}
.propost-related-grid {
    display: grid;
    gap: 1.8rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.propost-related-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 5px 16px rgba(0,0,0,.08);
    transition: transform .25s;
	margin-top: 10px;
	margin-bottom: 30px;
}
.propost-related-card:hover { transform: translateY(-5px); }
.propost-related-thumb img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.propost-related-post-title {
    margin: 1.1rem;
    font-size: 1.12rem;
}
.propost-related-post-title a {
    color: #1a1a1a;
    text-decoration: none;
}
.propost-related-post-title a:hover { color: #0066cc; }
.propost-related-meta {
    font-size: .88rem;
    color: #777;
    padding: 0 1.1rem 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .propost-title { font-size: 2.2rem; }
    .propost-author { flex-direction: column; text-align: center; }
    .propost-author-info { margin: 1.2rem 0 0; }
    .propost-related-grid { grid-template-columns: 1fr; }
}



/* ========================================
   PROFESSIONAL COMMENT SECTION
   Works with propost-, procover-, problog-
   ======================================== */

.procomment-wrapper {
    margin-top: 4rem;
    padding: 2.5rem;
    background: #f9f9f9;
    border-radius: 1.2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.procomment-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1.5rem;
    text-align: center;
}

.procomment-loggedin {
    font-size: .95rem;
    color: #555;
    text-align: center;
    margin-bottom: 1.8rem;
}
.procomment-loggedin a {
    color: #0066cc;
    text-decoration: none;
}
.procomment-loggedin a:hover {
    text-decoration: underline;
}

/* Comment Form */
.procomment-form {
    display: grid;
    gap: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

.procomment-form label {
    font-weight: 600;
    color: #333;
    font-size: .95rem;
    margin-bottom: .4rem;
    display: block;
}

.procomment-form input[type="text"],
.procomment-form input[type="email"],
.procomment-form input[type="url"],
.procomment-form textarea {
    width: 100%;
    padding: .9rem 1.1rem;
    border: 1.5px solid #ddd;
    border-radius: .8rem;
    font-size: 1rem;
    background: #fff;
    transition: all .2s ease;
    box-sizing: border-box;
}
.procomment-form input:focus,
.procomment-form textarea:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0,102,204,.15);
}

.procomment-form textarea {
    min-height: 140px;
    resize: vertical;
}

.procomment-form .required {
    color: #e74c3c;
}

/* Submit Button */
.procomment-form .submit {
    background: #0066cc;
    color: #fff;
    padding: .9rem 2rem;
    border: none;
    border-radius: .8rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    justify-self: start;
}
.procomment-form .submit:hover {
    background: #0055aa;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,102,204,.3);
}

/* Comment List */
.procomment-list {
    margin-top: 3rem;
    list-style: none;
    padding: 0;
}

.procomment-item {
    background: #fff;
    padding: 1.6rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 3px 12px rgba(0,0,0,.05);
    transition: transform .2s;
}
.procomment-item:hover {
    transform: translateY(-2px);
}

.procomment-author {
    display: flex;
    align-items: center;
    margin-bottom: .8rem;
}
.procomment-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: .9rem;
    object-fit: cover;
}
.procomment-author-name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 1rem;
}
.procomment-author-name a {
    color: inherit;
    text-decoration: none;
}
.procomment-date {
    font-size: .85rem;
    color: #777;
    margin-left: .5rem;
}

.procomment-content {
    color: #444;
    line-height: 1.7;
    font-size: 1rem;
}
.procomment-content p {
    margin: 0;
}

.procomment-reply {
    margin-top: .8rem;
}
.procomment-reply a {
    color: #0066cc;
    font-size: .9rem;
    text-decoration: none;
    font-weight: 500;
}
.procomment-reply a:hover {
    text-decoration: underline;
}

/* Nested Comments */
.procomment-children {
    margin-left: 3rem;
    margin-top: 1.5rem;
    padding-left: 0;
}
.procomment-children .procomment-item {
    background: #f5f5f5;
}

/* No Comments */
.procomment-none {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 2rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .procomment-wrapper { padding: 2rem 1.5rem; }
    .procomment-form { gap: 1rem; }
    .procomment-children { margin-left: 1.5rem; }
}