peptide-news-plugin/public/css/public-style.css

/**
 * Peptide News Aggregator – Public Styles
 *
 * Styles for the front-end display of peptide news articles.
 *
 * @since 1.0.0
 * @since 1.2.2 Rewritten for list layout with thumbnail left / text right.
 */

/* ── Feed container ────────────────────────────────────────────── */
.pn-news-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.pn-no-articles p {
    text-align: center;
    color: #666;
    padding: 2rem 1rem;
    font-size: 0.9375rem;
}

/* ── Individual article row ────────────────────────────────────── */
.pn-article {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e8e8e8;
    transition: background-color 0.15s ease;
}

.pn-article:last-child {
    border-bottom: none;
}

.pn-article:hover {
    background-color: #fafbfc;
}

/* ── Thumbnail (left column, fixed width) ──────────────────────── */
.pn-article-thumb {
    flex: 0 0 160px;
    width: 160px;
    min-height: 100px;
    overflow: hidden;
    border-radius: 6px;
}

.pn-article-thumb a {
    display: block;
    line-height: 0;
}

.pn-article-thumb img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s ease;
}

.pn-article:hover .pn-article-thumb img {
    transform: scale(1.03);
}

/* ── Content (right column, flexible) ──────────────────────────── */
.pn-article-content {
    flex: 1;
    min-width: 0;
}

/* ── Meta line (source · date) ─────────────────────────────────── */
.pn-article-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.pn-source {
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.7rem;
}

.pn-separator {
    color: #ccc;
}

.pn-date {
    color: #888;
}

/* ── Title ─────────────────────────────────────────────────────── */
.pn-article-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.4rem;
    color: #1a1a2e;
}

.pn-article-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.pn-article-title a:hover {
    color: #0073aa;
}

.pn-article-title a:focus,
.pn-article-thumb a:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* ── Excerpt / AI summary ──────────────────────────────────────── */
.pn-article-excerpt {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #555;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Author ────────────────────────────────────────────────────── */
.pn-author {
    display: inline-block;
    font-size: 0.775rem;
    color: #888;
    margin-bottom: 0.35rem;
}

.pn-author::before {
    content: "By ";
    font-style: italic;
}

/* ── Tags ──────────────────────────────────────────────────────── */
.pn-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.pn-tag {
    display: inline-block;
    font-size: 0.7rem;
    background: #f0f4f8;
    color: #4a6fa5;
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    line-height: 1.5;
    font-weight: 500;
}

/* ── Compact layout override (for widgets) ─────────────────────── */
.pn-layout-compact .pn-article {
    gap: 0.85rem;
    padding: 0.75rem 0;
}

.pn-layout-compact .pn-article-thumb {
    flex: 0 0 80px;
    width: 80px;
    min-height: 56px;
}

.pn-layout-compact .pn-article-thumb img {
    height: 56px;
}

.pn-layout-compact .pn-article-title {
    font-size: 0.9rem;
}

.pn-layout-compact .pn-article-excerpt,
.pn-layout-compact .pn-author,
.pn-layout-compact .pn-tags {
    display: none;
}

/* ── Responsive: stack on small screens ────────────────────────── */
@media (max-width: 600px) {
    .pn-article {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pn-article-thumb {
        flex: none;
        width: 100%;
    }

    .pn-article-thumb img {
        height: 180px;
    }
}