/*
Theme Name: Patrika Times News
Theme URI: https://patrikatimes.in/
Description: Google Discover News Theme - All in One Premium Light Weight Design & Discover Optimized for Patrika Times.
Author: Patrika Times Team
Author URI: https://patrikatimes.in/patrika-team/
Template: generatepress
Version: 1.0
Requires at least: 5.2
Tested up to: 6.4
Requires PHP: 7.4
Tags: Google News Discover Theme, News Website, Discover Ready, Social Share, Fixed Sticky Menu, Bottom Join, Author Bos, Category Page, Discover and Adsense Optimize News Templete
Patrika Times News, Copyright 2024 Patrika Times
*/

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Merriweather:wght@400;700&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

/* --- Specific Font Settings for Post Content --- */
.entry-content, /* This will target the main content of posts/pages */
.entry-content p,
.entry-content li,
.entry-content button,
.entry-content input,
.entry-content select,
.entry-content textarea {
    font-family: 'Noto Sans Devanagari', 'Hind Siliguri', 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222222; /* Text color dark black */
}



.kkb-related-posts:before {
    content: 'इसे भी पढ़े';
    position: absolute;
    top: -12px;
    font-size: 14px;
    color: #cb0000;
    left: 10px;
    background: #fff;
    padding: 0 4px;
    font-weight: 500;
    border-radius: 50px;
}

.kkb-related-posts {
    display: flex;
    border: 1px dashed #9b1717;
    border-radius: 5px;
    position: relative;
    padding: 9px;
    height: auto;
    margin-top: 20px;
    margin-bottom: 12px;
    background-color: #fffdf9;
}

.kkb-related-post {
    display: flex;
}

.inb-related-post {
    display: flex;
}

.kkb-rp-image {
    width: 75px;
    border-radius: 4px;
    max-width: 75px;
    margin: 8px 10px 0 0;
    height: 50px;
    box-shadow: 0px 1px 8px #70707096;
}

@media (max-width: 768px) {
    .kkb-related-posttitle {
        font-size: 13.2px;
        margin-top: 2px;
    }
}

.inb-related-posttitle {
    font-size: 18px;
    /*line-height: 1.5em;*/
    font-weight: 600;
    margin-top: 5px;
}

.kkb-rp-link {
    color: #000 !important;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .kkb-rp-link {
        font-size: 13px; /* Increased font size for better readability on mobile devices */
    }
    .kkb-related-posttitle {
        line-height: 15px;
        margin-top: 7px;
        font-weight: 700;
    }
}
/* --- END OF YOUR PROVIDED CSS --- */


/* --- Start: NEW Related Posts Card & Slider CSS (Added by saurabh) --- */
/* Common wrapper for "ये भी पढ़ें" heading */
.related-posts-section {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0px; /* Removed padding to match screenshot layout closer */
    background-color: transparent; /* Removed background color */
    border: none; /* Removed border */
    border-radius: 0px; /* Removed border-radius */
    box-shadow: none; /* Removed box-shadow */
}

/* Updated heading for "ये भी पढ़ें" */
.related-posts-section .related-posts-title-text {
    font-size: 14px; /* Fixed font size as per request */
    font-weight: bold;
    color: #333;
    display: block; /* Ensures it acts like a block element for text-align */
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
    width: auto;
    display: table; /* To make the border-bottom apply only to the text width */
    margin-left: auto;
    margin-right: auto;
}


/* Updated 3-column grid for related posts (Desktop default) */
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default to 3 columns on larger screens */
    gap: 20px; /* Space between cards */
    justify-content: center;
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
    margin-left: 0;
}

.related-post-card {
    background-color: #fff;
    border: none; /* Removed border */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex; /* Use flex for internal stacking of image/title */
    flex-direction: column; /* Default: image on top, title below */
}

.related-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.related-post-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column; /* Link content stacks vertically by default */
    height: 100%;
}

.related-post-card .post-thumbnail-wrapper {
    width: 100%;
    padding-bottom: 56.25%; /* Approx 16:9 aspect ratio */
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0; /* Placeholder background */
}

.related-post-card .related-post-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-in-out;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.related-post-card:hover .related-post-thumbnail {
    transform: scale(1.05);
}

.related-post-card .post-title {
    font-size: 16px; /* Fixed to 16px for larger screens */
    font-weight: bold; /* Bold for desktop */
    color: #333;
    margin: 10px; /* Adjusted margin */
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit title to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Placeholder thumbnail style, if used */
.related-post-card .placeholder-thumbnail {
    background-color: #e0e0e0;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    text-align: center;
}

/* Slider Section Styling (Kept in case you want to use it later) */
.related-posts-slider-wrapper {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
    position: relative;
}

.related-posts-slider-wrapper .slider-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
}

/* Swiper specific styles */
.related-posts-swiper {
    width: 100%;
    padding: 10px 0;
}

.related-posts-swiper .swiper-slide {
    height: auto;
    display: flex;
}

/* Navigation buttons (next/prev) */
.related-posts-swiper .swiper-button-next,
.related-posts-swiper .swiper-button-prev {
    color: #0073aa;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

.related-posts-swiper .swiper-button-next:hover,
.related-posts-swiper .swiper-button-prev:hover {
    background-color: #0073aa;
    color: #fff;
}

.related-posts-swiper .swiper-button-prev {
    left: -20px;
}

.related-posts-swiper .swiper-button-next {
    right: -20px;
}

/* Pagination dots */
.related-posts-swiper .swiper-pagination-bullet {
    background: #bbb;
    opacity: 0.8;
}

.related-posts-swiper .swiper-pagination-bullet-active {
    background: #0073aa;
    opacity: 1;
}

/* Hide mobile-specific header by default (desktop) */
.mobile-related-stories-header {
    display: none;
}

/* Responsive adjustments for Related Posts (Grid & Slider) */
@media (max-width: 1200px) {
    .related-posts-swiper .swiper-button-next,
    .related-posts-swiper .swiper-button-prev {
        width: 35px;
        height: 35px;
        font-size: 1em;
        top: 50%;
        transform: translateY(-50%);
    }
    .related-posts-swiper .swiper-button-prev {
        left: 5px;
    }
    .related-posts-swiper .swiper-button-next {
        right: 5px;
    }
}

/* Mobile-specific styles (<= 768px) */
@media (max-width: 768px) {
    .related-posts-grid {
        /* Override grid for mobile to use flexbox for stacked list */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        gap: 15px; /* Space between cards */
        padding: 0; /* Remove padding */
    }

    .related-post-card {
        flex-direction: row; /* Image and title side-by-side on mobile */
        align-items: center; /* Vertically align items in the middle */
        padding: 10px; /* Add some padding inside the card */
        border-radius: 8px; /* Maintain rounded corners */
        width: 100%; /* Ensure card takes full width */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Lighter shadow for mobile */
    }

    .related-post-card a {
        flex-direction: row; /* Link content also aligns image and text side-by-side */
        align-items: center;
    }

    .related-post-card .post-thumbnail-wrapper {
        width: 90px; /* Fixed width for thumbnail on mobile */
        height: 65px; /* Fixed height for thumbnail (approx 4:3) */
        padding-bottom: 0; /* Remove aspect ratio padding */
        flex-shrink: 0; /* Don't shrink the thumbnail */
        border-radius: 4px; /* Slightly smaller border radius for thumbnail */
        margin-right: 15px; /* Space between thumbnail and text */
        overflow: hidden;
    }

    .related-post-card .related-post-thumbnail {
        border-radius: 4px; /* Make image corners rounded on mobile */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .related-post-card .post-title {
        font-size: 12px; /* Changed to 12px for mobile */
        font-weight: bold; /* Ensure it's bold on mobile */
        margin: 0; /* Remove margin as padding is on card */
        text-align: left; /* Ensure left alignment */
        -webkit-line-clamp: 3; /* Still limit to 3 lines */
    }

    .related-posts-swiper .swiper-button-next,
    .related-posts-swiper .swiper-button-prev {
        display: none; /* Hide slider navigation on mobile */
    }

    /* Hide desktop title and show mobile-specific title */
    .related-posts-section .related-posts-title-text {
        display: none;
    }
    .mobile-related-stories-header {
        display: block; /* Show on mobile */
        font-size: 1.6em; /* Adjust font size as needed */
        font-weight: bold;
        color: #d63638; /* Red color as in the example */
        margin-bottom: 20px;
        text-align: left;
        padding-left: 10px; /* Some padding from the left edge */
        border-bottom: 1px solid #eee; /* Light line below it */
        padding-bottom: 10px;
    }

    .mobile-related-stories-header span.dashicons {
        color: #d63638; /* Icon color */
        margin-right: 8px;
        vertical-align: middle;
    }
}

/* Adjustments for smaller mobile screens (<= 480px) */
@media (max-width: 480px) {
    .related-post-card .post-thumbnail-wrapper {
        width: 80px; /* Slightly smaller thumbnail for very small screens */
        height: 60px;
        margin-right: 10px;
    }
    .related-post-card .post-title {
        font-size: 12px; /* Keep 12px for very small screens */
    }
    .mobile-related-stories-header {
        font-size: 1.4em;
    }
}
/* --- End: NEW Related Posts Card & Slider CSS (Added by saurabh) --- */