/*
 * NPL Sports Pro Theme - Single Post Styles
 * File: Assets/css/single-post.css
 */

/* ===================================================================
 * TABLE OF CONTENTS
 * 1. Single Post - Content & Meta Styling (UPDATED INNER HEADER)
 * 2. Single Post - Boxed & No Sidebar Layouts
 * 3. Single Post - Content Image Sizing
 * 4. Single Post - Prev/Next Navigation
 * 5. Single Post - Author Bio Box
 * 6. Single Post - Social Share Icons & Post Like Button
 * 7. Single Post - Video Ad-Sandwich Layout 
 * 8. Single Post - Image Gallery Slider
 * 9. Related Posts
 * 10. New Template Parts - Utility Bar & Nav Card
 * 11. Post Reactions & Source Attribution Box
 * 12. Floating Vertical Social Share Bar
 * 13. Responsive Styles - Single Post
 * =================================================================== */

/* ===================================================================
 * 1. Single Post - Content & Meta Styling
 * =================================================================== */

/* NEW: Inner Post Header Styling (Title & Meta block inside left column) */
.single .entry-header.inner-post-header {
    background: #fff;
    padding: 20px 25px;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

/* FIX FOR TITLE TEXT */
.single .entry-header.inner-post-header .entry-title,
h1.entry-title {
    font-size: 26px !important; /* Adjusted for better look */
    line-height: 1.4 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    display: block !important; 
    height: auto !important;   
    min-height: 0 !important;  
    overflow: visible !important; 
    word-wrap: break-word !important;
}

/* NEW WRAPPER: To put Meta and Utility on the same line (Exactly like Screenshot 2) */
.pro-meta-utility-wrapper {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9; 
    padding: 10px 15px; 
    border-radius: 4px; 
    border: 1px solid #eeeeee;
    gap: 15px;
    flex-wrap: wrap;
}

/* Updated Meta bar to sit inside the wrapper without double borders */
.single .entry-header.inner-post-header .entry-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px 15px; 
    font-size: 13px;
    color: #555;
    margin: 0 !important; 
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.single .entry-header.inner-post-header .entry-meta span {
    display: inline-flex;
    align-items: center;
}
.single .entry-header.inner-post-header .entry-meta i {
    margin-right: 8px;
    color: #888;
}
.single .entry-header.inner-post-header .entry-meta a {
    color: #333; 
    text-decoration: none;
    font-weight: 600; 
}
.single .entry-header.inner-post-header .entry-meta a:hover {
    color: #0010a0; 
}

/* Integration of Utility Bar (Reading Time / Font Resizer) inside the Meta row */
.pro-meta-utility-wrapper .article-utility-bar {
    display: flex !important;
    align-items: center;
    gap: 15px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

.pro-meta-utility-wrapper .utility-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pro-meta-utility-wrapper .utility-right button {
    background: #fff;
    border: 1px solid #ddd;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 3px;
    font-weight: bold;
    font-size: 11px;
}

.npl-single-article {
    background: #fff;
    padding: 15px; 
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}

.post-media-wrapper {
    margin-bottom: 25px;
}
.post-media-wrapper img,
.post-media-wrapper iframe {
    width: 100%;
    height: 350px ! important;
    border-radius: 4px;
}
.post-thumbnail-wrapper figcaption {
    font-size: 14px;
    color: #666;
    font-style: italic;
    text-align: center;
    padding-top: 10px;
}
.npl-single-article .entry-content {
    color: #333333;
    font-size: 17px;
    line-height: 1.8;
}
.npl-single-article .entry-content p {
    margin-bottom: 1.5em;
}
.npl-single-article .entry-content h2,
.npl-single-article .entry-content h3,
.npl-single-article .entry-content h4 {
    color: #111;
    margin-top: 2em;
    margin-bottom: 1em;
}
.npl-single-article .entry-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.entry-footer .post-tags {
    margin-bottom: 25px;
}
.entry-footer .author-and-share {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.author-info-footer {
    font-size: 15px;
}
.entry-subtitle {
    font-size: 1.5rem; 
    color: #555;
    font-weight: 400; 
    line-height: 1.4;
    margin-top: -10px; 
    margin-bottom: 25px;
    border-bottom: 1px solid #eee; 
    padding-bottom: 20px;
}

/* ===================================================================
 * 2. Single Post - Boxed & No Sidebar Layouts
 * =================================================================== */
.single-post-grid {
    border: 1.3px solid #e0e0e0;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.single-post-grid.has-sidebar {
    display: grid;
    grid-template-columns: 1fr 400px; 
    gap: 5px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.single-post-grid.has-sidebar .post-content-area,
.single-post-grid.has-sidebar .post-sidebar {
    border: none;
    padding: 0;
}
.single-post-grid.no-sidebar {
    display: block; 
    max-width: 850px; 
    margin-left: auto;
    margin-right: auto;
}
.no-sidebar .entry-header {
    text-align: center;
}
.no-sidebar .entry-meta {
    justify-content: center;
}
body.single .post-thumbnail img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 5px;
}

/* Increased container width to fit Side Ads + Sidebar room */
.single .container {
    max-width: 1200px !important; 
    padding-left: 5px;
    padding-right: 5px;
    position: relative; /* Needed for share bar positioning */
}

.single .site-body-flex {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

/* ===================================================================
 * 3. Single Post - Content Image Sizing
 * =================================================================== */
.single .entry-content .wp-block-image,
.single .entry-content figure,
.single .entry-content .featured-image-in-content {
    max-width: 100% !important;
    margin: 25px auto !important;
    padding: 0;
    border: 1px solid #eee;
    background-color: #fcfcfc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-radius: 6px;
    overflow: hidden; 
}
.single .entry-content .wp-block-image img,
.single .entry-content figure img,
.single .entry-content .featured-image-in-content img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    transition: transform 0.5s ease;
}
.single .entry-content .wp-block-image:hover img,
.single .entry-content figure:hover img,
.single .entry-content .featured-image-in-content:hover img {
    transform: scale(1.04);
}
.single .entry-content figcaption,
.single .entry-content .wp-caption-text {
    padding: 12px 15px;
    font-size: 13px; 
    font-style: italic;
    color: #666; 
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    line-height: 1.5;
    font-family: inherit;
    display: block;
}
.single .entry-content figcaption::before {
    content: "\f030"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    color: #999;
    font-size: 11px;
}
.single .entry-content .alignleft,
.single .entry-content .alignright {
    max-width: 45% !important;
}
.single .entry-content .alignleft {
    margin-right: 25px !important;
    margin-left: 0 !important;
    float: left;
}
.single .entry-content .alignright {
    margin-left: 25px !important;
    margin-right: 0 !important;
    float: right;
}

/* ===================================================================
 * 4. Single Post - Prev/Next Navigation
 * =================================================================== */
.post-navigation-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
.post-navigation-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #f0f0f0;
    border-radius: 50%;
    color: #555;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.post-navigation-links a:hover {
    background-color: #e0e0e0;
    color: #0010a0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.post-navigation-links .nav-previous:empty,
.post-navigation-links .nav-next:empty {
    display: none;
}

/* ===================================================================
 * 5. Single Post - Author Bio Box
 * =================================================================== */
.author-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-left: 4px solid #0010a0; 
    padding: 25px;
    margin: 40px 0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.author-avatar {
    margin-right: 25px;
    flex-shrink: 0;
}
.author-avatar img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    border: 3px solid #f0f0f0;
    object-fit: cover;
    display: block;
}
.author-info {
    flex: 1;
}
.author-info .author-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 5px;
    font-weight: 700;
}
.author-info .author-name {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 800;
}
.author-info .author-name a {
    text-decoration: none;
    color: #222;
    transition: color 0.3s;
}
.author-info .author-name a:hover {
    color: #dd0000; 
}
.author-info .author-description {
    margin: 0 0 15px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}
.author-social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.auth-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 15px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
    color: #555;
    background: #f9f9f9;
}
.auth-link-btn i {
    margin-right: 7px;
    font-size: 14px;
}
.auth-link-btn:hover {
    background: #0010a0;
    color: #fff;
    border-color: #0010a0;
    text-decoration: none;
}
.auth-link-btn.all-posts:hover {
    background: #dd0000;
    border-color: #dd0000;
}

/* ===================================================================
 * 6. Single Post - Social Share Icons & Post Like Button
 * =================================================================== */
.social-share .social-icon {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.social-share .facebook-icon:hover {
    background-color: #3b5998 !important;
    color: #fff;
}
.social-share .twitter-icon:hover {
    background-color: #1da1f2 !important;
    color: #fff;
}
.social-share .linkedin-icon:hover {
    background-color: #0077b5 !important;
    color: #fff;
}
.social-share .whatsapp-icon:hover {
    background-color: #25d366 !important;
    color: #fff;
}
.social-share .email-icon:hover {
    background-color: #848484 !important; 
    color: #fff;
}
.social-share .share-title {
    font-weight: bold;
    margin-right: 10px;
}
.npl-like-wrapper {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.npl-like-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 50px; 
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.npl-like-button:hover {
    border-color: #ccc;
    background-color: #e5e5e5;
}
.npl-like-button .fa-heart {
    font-size: 16px;
}
.npl-like-button .fas.fa-heart { 
    display: none;
}
.npl-like-button .far.fa-heart { 
    display: inline-block;
}
.npl-like-button.liked {
    background-color: #ffeff2; 
    border-color: #dd0000; 
    color: #dd0000; 
}
.npl-like-button.liked .fas.fa-heart {
    display: inline-block;
}
.npl-like-button.liked .far.fa-heart {
    display: none;
}
.npl-like-button.loading {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===================================================================
 * 7. Single Post - Video Embed Layout (FIXED GRID & ADS)
 * =================================================================== */
.npl-video-sandwich-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #ffffff;
    padding: 10px;
    border: 1px solid #eee;
    margin-bottom: 30px;
}

.video-player-main-grid {
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) 90px !important;
    gap: 15px;
    align-items: stretch;
    width: 100% !important;
}

.video-ad-slot {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-weight: bold;
    color: #888;
    text-align: center;
    font-size: 10px;
}

.video-ad-slot.ad-left, 
.video-ad-slot.ad-right { 
    min-width: 90px !important; 
    max-width: 90px !important;
    min-height: 450px; 
}

.video-ad-slot.ad-top, 
.video-ad-slot.ad-bottom { 
    width: 100%; 
    min-height: 90px; 
}

.video-center-column {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}

.video-player-frame { position: relative; padding-bottom: 56.25%; height: 0; background: #000;}
.video-player-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.video-gallery-strip {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
}
.gallery-v-item img { width: 110px; height: 70px; object-fit: cover; border-radius: 4px; border: 1px solid #eee; }

/* ===================================================================
 * 8. Single Post - Image Gallery Slider
 * =================================================================== */
.post-gallery-slider-wrapper {
    position: relative;
    margin-bottom: 15px;
}
.post-gallery-slider .swiper-slide {
    width: 100%;
    height: auto;
    background: #f0f0f0; 
}
.post-gallery-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.gallery-slider-prev,
.gallery-slider-next {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}
.gallery-slider-prev:after,
.gallery-slider-next:after {
    font-size: 18px;
    font-weight: bold;
}
.gallery-slider-prev:hover,
.gallery-slider-next:hover {
    background-color: #d13639; 
}
.gallery-slider-pagination {
    bottom: 15px !important;
}
.gallery-slider-pagination .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7);
    width: 10px;
    height: 10px;
    opacity: 1;
}
.gallery-slider-pagination .swiper-pagination-bullet-active {
    background-color: #d13639; 
}

/* ===================================================================
 * 9. Related Posts
 * =================================================================== */
.related-posts {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    padding: 25px;
    margin-top: 40px;
    border-radius: 5px;
}
.related-posts-title {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    color: #333;
    margin: 0 0 25px 0;
    padding: 0 0 12px 0;
    border-bottom: 2px solid #f1f1f1;
    position: relative;
    display: flex;
    align-items: center;
}
.related-posts-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #dd0000; 
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.related-post-item {
    background: #fff;
    transition: transform 0.3s ease;
}
.related-post-item:hover {
    transform: translateY(-5px); 
}
.related-post-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 12px;
}
.related-post-thumbnail img {
    width: 100%;
    height: 180px; 
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.related-post-thumbnail:hover img {
    transform: scale(1.1); 
}
.related-post-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
}
.related-post-title a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s;
}
.related-post-title a:hover {
    color: #0010a0; 
}

/* ===================================================================
 * 10. New Template Parts - Utility Bar & Nav Cards
 * =================================================================== */

/* Reading Progress Bar */
.reading-progress-container {
    width: 100%; height: 4px; background: #eee; position: fixed; top: 0; left: 0; z-index: 9999;
}
.reading-progress-bar {
    height: 4px; background: #dd0000; width: 0%; transition: width 0.1s;
}

/* Utility Bar */
.article-utility-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; margin-top: 15px; background: #fdfdfd;
    border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 13px;
}
.utility-left .reading-time { font-weight: bold; color: #666; }
.utility-right { display: flex; align-items: center; gap: 8px; }
.utility-right button {
    background: #f0f0f0; border: 1px solid #ddd; padding: 4px 10px; cursor: pointer;
    border-radius: 3px; font-weight: bold; transition: 0.2s;
}
.utility-right button:hover { background: #0010a0; color: #fff; }

/* Post Navigation Cards */
.post-nav-cards-wrapper {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 30px 0;
}
.post-nav-card {
    background: #fff; border: 1px solid #eee; border-radius: 5px; overflow: hidden;
    transition: transform 0.3s;
}
.post-nav-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.nav-card-link { text-decoration: none; display: block; padding: 15px; }
.nav-label { font-size: 11px; text-transform: uppercase; color: #999; font-weight: bold; margin-bottom: 10px; }
.nav-card-flex { display: flex; align-items: center; gap: 12px; }
.nav-card-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.nav-card-title { font-size: 14px; font-weight: 700; color: #222; line-height: 1.4; }

@media (max-width: 768px) {
    .post-nav-cards-wrapper { grid-template-columns: 1fr; }
    .nav-card-flex { flex-direction: column; text-align: center; }
}

/* ===================================================================
 * 11. Post Reactions & Source Attribution Box
 * =================================================================== */

/* Post Source Box */
.post-source-attribution {
    background: #f9f9f9; padding: 10px 15px; border-left: 4px solid #0010a0;
    margin-bottom: 25px; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.source-label { font-weight: bold; color: #555; }
.post-source-attribution a { color: #dd0000; text-decoration: none; font-weight: 600; }
.post-source-attribution a:hover { text-decoration: underline; }

/* Post Reactions Section */
.post-reactions-section {
    margin-top: 35px; padding: 25px; background: #ffffff; border: 1px solid #eee;
    border-radius: 8px; text-align: center;
}
.reaction-title { font-size: 18px; font-weight: 800; margin-bottom: 20px; color: #333; }
.reactions-flex { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.reaction-item {
    cursor: pointer; padding: 10px 15px; border: 1px solid #f0f0f0; border-radius: 50px;
    transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; min-width: 60px;
}
.reaction-icon { font-size: 24px; margin-bottom: 5px; }
.reaction-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #888; }
.reaction-item:hover { border-color: #dd0000; background: #fffefe; transform: translateY(-3px); }
.reaction-item.active { background: #ffeff2; border-color: #dd0000; }
.reaction-item.active .reaction-label { color: #dd0000; }

@media (max-width: 480px) {
    .reactions-flex { gap: 10px; }
    .reaction-item { min-width: 50px; padding: 8px 10px; }
}


/* ===================================================================
 * 12. FIXED: Social Share Bar & Sidebars Visibility
 * =================================================================== */

/* SOCIAL BAR - Aba yo screen ko left edge ma fix dekhinechha */
.npl-floating-share-bar {
    position: fixed;
    top: 50%;
    left: 20px !important; /* Force to left edge */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 99999 !important; /* Highest priority visibility */
}

.share-btn {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    color: #fff !important; text-decoration: none !important; border-radius: 50%; font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.3s; border: none; cursor: pointer;
}
.share-btn.fb { background: #3b5998; }
.share-btn.tw { background: #1da1f2; }
.share-btn.wa { background: #25d366; }
.share-btn.mail { background: #848484; }
.share-btn.print { background: #333; }
.share-btn:hover { transform: scale(1.15); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }

/* READING PROGRESS BAR FIX */
.reading-progress-container {
    width: 100%; height: 4px; background: rgba(0,0,0,0.05);
    position: fixed; top: 0; left: 0; z-index: 100000;
}
.reading-progress-bar { height: 4px; background: #dd0000; width: 0%; transition: width 0.1s; }

/* STICKY SIDEBAR FIX */
.post-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    height: fit-content !important;
}

@media (max-width: 1100px) {
    .npl-floating-share-bar { display: none; }
    .pro-meta-utility-wrapper { flex-direction: column; align-items: flex-start; }
}-webkit-sticky !important; position: sticky !important; top: 20px !important; height: fit-content !important; }

/* ===================================================================
 * 13. Responsive Styles - Single Post
 * =================================================================== */
@media (min-width: 1441px) {
    .video-player-main-grid { grid-template-columns: 120px minmax(0, 1fr) 120px !important; }
    .video-ad-slot.ad-left, .video-ad-slot.ad-right { min-width: 120px !important; max-width: 120px !important; }
}

@media (max-width: 992px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 991px) {
    .single-post-grid.has-sidebar {
        grid-template-columns: 1fr; 
        display: block;
    }
    .single-post-grid.has-sidebar .post-sidebar {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .single .entry-content .alignleft,
    .single .entry-content .alignright {
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .single .entry-content figcaption {
        font-size: 12px;
        padding: 10px;
    }
    .video-player-main-grid {
        grid-template-columns: 1fr !important; 
    }
    .video-ad-slot.ad-left, .video-ad-slot.ad-right { display: none !important; } 
    .gallery-v-item img { width: 70px; height: 45px; }
}

@media (max-width: 767px) {
    .single .entry-header.inner-post-header { padding: 15px; border-radius: 0; }
    .single .entry-header.inner-post-header .entry-title { font-size: 1.4rem !important; margin-bottom: 10px !important; }
    .single .entry-header.inner-post-header .entry-meta { padding: 10px; font-size: 10px; }
    
    .npl-single-article {
        padding: 10px;
        border: none;
    }
    .single-post-grid {
        padding: 15px; 
        margin-top: 20px;
        margin-bottom: 20px;
    }
    body.single .post-thumbnail img {
        max-height: 350px;
        object-fit: cover;
    }
}

@media (max-width: 640px) {
    .author-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .author-avatar {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .author-social-links {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .related-posts-grid {
        grid-template-columns: 1fr; 
        gap: 25px;
    }
    .related-post-thumbnail img {
        height: 200px;
    }
    .related-posts-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .single .entry-header.inner-post-header .entry-title {
        font-size: 1.2rem !important;
    }
    body.single .post-thumbnail img {
        max-height: 250px;
    }
}

@media (max-width: 425px) {
    .single .entry-header.inner-post-header .entry-title { font-size: 1.2rem !important; }
}

@media (min-width: 321px) and (max-width: 375px) {
    .single .entry-header.inner-post-header .entry-title { font-size: 1.2rem !important; }
}

@media (max-width: 320px) {
    .single .entry-header.inner-post-header .entry-title { font-size: 1.2rem !important; }
    .npl-video-sandwich-wrapper { padding: 5px; }
    .video-ad-slot.ad-top, .video-ad-slot.ad-bottom { min-height: 50px; }
}