/* "Keep reading" cards at the end of a post (partials/readmore.njk). Colours come from the theme variables, so
   light and dark both work. Accent #FF6B35. */

.pn { max-width: 1080px; margin: 0 auto; padding: 3.2rem 2rem 4.8rem; }
.pn-heading { margin: 0 0 1.6rem; font-size: 2.2rem; line-height: 1.2; color: var(--text-primary); }
.pn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.pn-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; min-width: 0;
    color: var(--text-primary); text-decoration: none;
    background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 1.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pn-card:hover { transform: translateY(-4px); border-color: #FF6B35; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
.pn-card:focus-visible { outline: 3px solid #FF6B35; outline-offset: 3px; }
.pn-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-secondary); }
.pn-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pn-card:hover .pn-media img { transform: scale(1.04); }
.pn-body { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.4rem 1.8rem 1.8rem; }
.pn-label { font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FF6B35; }
.pn-title { font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); overflow-wrap: anywhere; }
.pn-tag { text-transform: capitalize; align-self: flex-start; margin-top: auto; padding: .2rem .9rem; font-size: 1.2rem; font-weight: 600; border-radius: 99px; color: var(--text-secondary); border: 1px solid var(--border-color); }

/* No feature image: a plain card with an accent edge. */
.pn-noimg { border-left: 4px solid #FF6B35; }
.pn-noimg .pn-body { padding-top: 1.8rem; min-height: 12rem; }

@media (max-width: 800px) { .pn-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pn-card, .pn-media img { transition: none; } .pn-card:hover, .pn-card:hover .pn-media img { transform: none; } }