/**
 * pn_blog — front-end styles. Scoped to .pn-blog* to avoid clashing with theme.
 * Designed to be minimally opinionated — themes are expected to extend this.
 */

/* ---------- Layout helpers ---------- */
.pn-blog { display: block; }
.pn-blog__header { margin-bottom: 1.5rem; }
.pn-blog__empty { padding: 2rem; text-align: center; }

/* ---------- Grid ---------- */
.pn-blog__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 576px) {
    .pn-blog__grid--cols-2,
    .pn-blog__grid--cols-3,
    .pn-blog__grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 992px) {
    .pn-blog__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pn-blog__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pn-blog--layout-full .pn-blog__grid {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- Card ---------- */
.pn-blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #5be3a0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pn-blog-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.pn-blog-card__thumb-link { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.pn-blog-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-blog-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.pn-blog-card__category {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #666;
    text-decoration: none;
}
.pn-blog-card__title { font-size: 1.25rem; line-height: 1.3; margin: 0; }
.pn-blog-card__title a { color: inherit; text-decoration: none; }
.pn-blog-card__title a:hover { text-decoration: underline; }
.pn-blog-card__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .85rem;
    color: #777;
}
.pn-blog-card__excerpt { color: #444; font-size: .95rem; line-height: 1.5; }
.pn-blog-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; }
.pn-blog-card__tags a { color: #555; text-decoration: none; }
.pn-blog-card__more { align-self: flex-start; margin-top: .5rem; }

/* ---------- Pagination ---------- */
.pn-blog__pagination { margin-top: 2rem; text-align: center; }
.pn-blog__pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.pn-blog__pagination-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
.pn-blog__pagination-item a,
.pn-blog__pagination-item span {
    display: block;
    padding: .5rem .85rem;
    text-decoration: none;
    color: #333;
}
.pn-blog__pagination-item.is-current span { background: #222; color: #fff; }
.pn-blog__pagination-summary { margin-top: .75rem; color: #777; font-size: .85rem; }

/* ---------- Single post ---------- */
.pn-blog-post__title { margin: 0 0 1rem; }
.pn-blog-post__meta ul {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: #666;
    font-size: .9rem;
}
.pn-blog-post__featured { margin: 0 0 1.5rem; }
.pn-blog-post__featured img { width: 100%; height: auto; display: block; border-radius: 8px; }
.pn-blog-post__content { font-size: 1.05rem; line-height: 1.7; }
.pn-blog-post__content img { max-width: 100%; height: auto; }
.pn-blog-post__video iframe,
.pn-blog-post__video video { width: 100%; aspect-ratio: 16 / 9; }

.pn-blog-post__tags { margin-top: 1.5rem; padding: 1rem 0; border-top: 1px solid #eee; font-size: .9rem; }
.pn-blog-post__tags-label { color: #777; margin-right: .5rem; }
.pn-blog-post__tag { color: #444; text-decoration: none; }

.pn-blog-post__nav ul {
    list-style: none;
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.pn-blog-post__nav-prev { text-align: left; }
.pn-blog-post__nav-home { text-align: center; flex-grow: 1; }
.pn-blog-post__nav-next { text-align: right; }
.pn-blog-post__nav a { text-decoration: none; color: #333; }
.pn-blog-post__nav a:hover { text-decoration: underline; }

.pn-blog-post__like-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-size: .9rem;
}
.pn-blog-post__like-btn.is-liked { background: #ffe6e6; border-color: #f5b8b8; color: #c00; }
.pn-blog-post__like-icon { color: #c00; }

/* ---------- Gallery ---------- */
.pn-blog-gallery {
    display: grid;
    gap: .5rem;
    margin: 1.5rem 0;
}
.pn-blog-gallery--2columns { grid-template-columns: repeat(2, 1fr); }
.pn-blog-gallery--3columns { grid-template-columns: repeat(3, 1fr); }
.pn-blog-gallery--4columns { grid-template-columns: repeat(4, 1fr); }
.pn-blog-gallery--masonry { columns: 3 240px; column-gap: .5rem; display: block; }
.pn-blog-gallery--masonry .pn-blog-gallery__item { break-inside: avoid; margin-bottom: .5rem; display: block; }
.pn-blog-gallery__item img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* ---------- Author card ---------- */
.pn-blog__author-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: #fafafa;
    border-radius: 8px;
    margin: 2rem 0;
}
.pn-blog__author-card--inline { align-items: flex-start; }
.pn-blog__author-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pn-blog__author-photo--large { width: 120px; height: 120px; }
.pn-blog__author-bio { color: #555; font-size: .95rem; line-height: 1.6; }
.pn-blog__author-socials {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.pn-blog__author-socials a {
    font-size: .8rem;
    padding: .25rem .6rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #444;
    text-decoration: none;
}

/* ---------- Authors page ---------- */
.pn-blog__authors-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pn-blog__author-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.pn-blog__author-card-link:hover .pn-blog__author-name { text-decoration: underline; }
.pn-blog__author-name { margin-top: .75rem; font-size: 1.1rem; }

/* ---------- Share ---------- */
.pn-blog__share { margin: 2rem 0; }
.pn-blog__share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.pn-blog__share-btn {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    font-size: .85rem;
}
.pn-blog__share-btn--facebook { background: #1877f2; }
.pn-blog__share-btn--twitter { background: #000; }
.pn-blog__share-btn--linkedin { background: #0a66c2; }
.pn-blog__share-btn--whatsapp { background: #25d366; }
.pn-blog__share-btn--email { background: #444; }

/* ---------- Subcategories ---------- */
.pn-blog__subcategories {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.pn-blog__subcategories a {
    padding: .35rem .85rem;
    background: #f0f0f0;
    border-radius: 999px;
    text-decoration: none;
    color: #333;
    font-size: .85rem;
}

.pn-blog__category-cover { margin-bottom: 1rem; border-radius: 8px; overflow: hidden; }
.pn-blog__category-cover img { width: 100%; height: auto; display: block; }
.pn-blog__category-desc { color: #555; }

/* ---------- Sidebar widget ---------- */
.pn-blog-sidebar { margin-bottom: 1.5rem; }
.pn-blog-sidebar__section { margin-bottom: 1.5rem; }
.pn-blog-sidebar__title { font-size: 1.05rem; margin: 0 0 .75rem; }
.pn-blog-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pn-blog-sidebar__subcats {
    margin-left: 1rem;
    margin-top: .25rem;
    font-size: .9rem;
    color: #666;
}
.pn-blog-sidebar__recent-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: .75rem;
}
.pn-blog-sidebar__recent-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
}
.pn-blog-sidebar__recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pn-blog-sidebar__recent-title { font-size: .9rem; color: #333; text-decoration: none; }
.pn-blog-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.pn-blog-sidebar__tags a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    background: #f0f0f0;
    border-radius: 999px;
    font-size: .8rem;
    color: #333;
    text-decoration: none;
}
.pn-blog-sidebar__tag-count { color: #888; font-size: .75rem; }

/* ---------- Comments ---------- */
.pn-blog-comments { margin-top: 2.5rem; }
.pn-blog-comments__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pn-blog-comment {
    padding: 1rem;
    margin: 0 0 .75rem;
    background: #fafafa;
    border-radius: 6px;
}
.pn-blog-comment.depth-1 { margin-left: 1.5rem; background: #f4f4f4; }
.pn-blog-comment.depth-2 { margin-left: 3rem; background: #efefef; }
.pn-blog-comment.depth-3 { margin-left: 4.5rem; }
.pn-blog-comment.is-highlighted {
    border-left: 3px solid #d4a017;
    background: #fff8e1;
}
.pn-blog-comment__meta {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    margin-bottom: .5rem;
}
.pn-blog-comment__date { color: #888; font-size: .8rem; }
.pn-blog-comment__body { color: #333; line-height: 1.5; }
.pn-blog-comment__reply-btn {
    margin-top: .5rem;
    padding: .25rem .75rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: .8rem;
}
.pn-blog-comment__replies { list-style: none; margin: .75rem 0 0; padding: 0; }
.pn-blog-comments__form .form-group { margin-bottom: 1rem; }
.pn-blog-comments__form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.pn-blog-comments__form input,
.pn-blog-comments__form textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: .95rem;
}