/**
 * Blog Page Styles
 * Styles for home.php (blog) template
 *
 * @package Teachers_Planit
 */

/* Blog Hero Featured Post */
.blog-hero-featured-content a {
    color: var(--tp-white);
    text-decoration: none;
}


.blog-hero-featured p {
    opacity: 0.9;
}

.blog-hero-featured .featured-badge {
    display: inline-block;
    background-color: var(--tp-secondary);
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.blog-hero-featured > div:not(.blog-hero-featured-content) {
    background: linear-gradient(135deg, var(--tp-primary), var(--tp-secondary));
    width: 100%;
    height: 100%;
}

.blog-hero-featured-content > div {
    font-size: 14px;
    opacity: 0.8;
}

/* Blog Hero Secondary Posts */
.blog-hero-secondary-content a {
    color: var(--tp-white);
    text-decoration: none;
}

.blog-hero-secondary-content h3 {
    margin-bottom: 0.5rem;
}

.blog-hero-secondary-content > div {
    font-size: 13px;
    opacity: 0.8;
}

.blog-hero-secondary-post > div:not(.blog-hero-secondary-content) {
    background: linear-gradient(135deg, var(--tp-accent), var(--tp-primary));
    width: 100%;
    height: 100%;
}

/* Most Read Articles Section */
.blog-most-read {
    background-color: var(--tp-light);
}
.blog-most-read h2 {
    text-align: center;
}
.blog-most-read-item-content > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--tp-gray);
}

.blog-most-read-item-content h3 {
    margin-bottom: 0.9rem;
    font-size: 1.25rem;
}

.blog-most-read-item-content h3 a {
    color: var(--tp-dark);
    text-decoration: none;
}

.blog-most-read-item-content p {
    color: var(--tp-gray);
}

.blog-most-read-item > div:not(.blog-most-read-item-content) {
    background: linear-gradient(135deg, var(--tp-primary), var(--tp-accent));
    height: 200px;
}

/* Our Blogs Section */

.blog-more-articles > .container > p {
    font-size: 1.2rem;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}