/**
 * AFAM Design: blog / news templates (U-027 B1).
 * Author: Kiriago <kiryc0de@gmail.com> (https://github.com/kirycode/)
 * Loaded only on the News page, categories, tags, authors, dates, search and single posts. Colours come from tokens.css.
 */

/* ---------- hero extras ---------- */
.afam-blog-hero__intro { margin: 10px 0 0; max-width: 60rem; color: #eaf2e3; font-size: 1.0625rem; }
.afam-blog-search { display: flex; gap: 8px; max-width: 34rem; margin-top: 18px; }
.afam-blog-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 8px 14px; border: 2px solid #fff; border-radius: 8px; background: #fff; color: var(--afam-ink-900, #1d2b27); font: inherit; }
.afam-blog-search button { min-height: 46px; padding: 8px 20px; border: 2px solid var(--afam-gold-500); border-radius: 8px; background: var(--afam-gold-500); color: #07442a; font: inherit; font-weight: 700; cursor: pointer; }
.afam-blog-search button:is(:hover, :focus-visible) { background: #fff; border-color: #fff; }
.afam-blog-search :is(input, button):focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--afam-green-600); }
.afam-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 14px 0 0; font-size: 0.9375rem; color: #eaf2e3; }
.afam-entry__meta > span + span::before, .afam-entry__meta time + span::before { content: "·"; margin-right: 18px; color: var(--afam-gold-500); }
.afam-entry__cats { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.afam-entry__cats::before { display: none; }

/* ---------- chips ---------- */
.afam-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #e3efd9; color: #1f4d08; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; text-decoration: none; }
a.afam-chip:is(:hover, :focus-visible) { background: var(--afam-green-600); color: #fff; }
.afam-chip--plain { background: #f1ece0; color: #5c4400; }
.afam-chip--light { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
a.afam-chip--light:is(:hover, :focus-visible) { background: #fff; color: var(--afam-green-900); }

/* ---------- layout ---------- */
.afam-blog-main { background: #fff; padding: 0 0 56px; }
.afam-blog-wrap { max-width: var(--afam-hdr-box, 1400px); margin: 0 auto; padding: 32px 24px 0; }
@media (max-width: 1024px) { .afam-blog-wrap { padding: 24px 16px 0; } }

/* category filter */
.afam-blog-filter ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.afam-blog-filter a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 16px; border: 2px solid var(--afam-green-600); border-radius: 999px; color: var(--afam-green-600); font-weight: 700; text-decoration: none; }
.afam-blog-filter a[aria-current="page"], .afam-blog-filter a:is(:hover, :focus-visible) { background: var(--afam-green-600); color: #fff; }
.afam-blog-filter a:focus-visible { outline: 3px solid var(--afam-green-900); outline-offset: 2px; }
.afam-blog-filter__n { font-weight: 600; opacity: 0.85; font-size: 0.8125rem; }

/* ---------- card grid (3 x 3), the same card everywhere ---------- */
.afam-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .afam-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .afam-blog-grid { grid-template-columns: minmax(0, 1fr); } }
.afam-post-card__img img { aspect-ratio: 16 / 10; height: auto; max-height: none; object-fit: contain; object-position: center; background: #eef3ea; } /* posters are shown whole, never cropped */
.afam-post-card .afam-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: var(--afam-sp-4, 16px) var(--afam-sp-5, 24px) 0; }
.afam-post-card .afam-post-card__meta .afam-post-card__date { margin: 0; }
.afam-post-card__excerpt { margin: 0 var(--afam-sp-5, 24px) var(--afam-sp-5, 24px); color: var(--afam-ink-700, #3f4f49); font-size: 0.9375rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.afam-post-card h3 { margin-bottom: var(--afam-sp-3, 12px); }
.afam-post-card h3 a:focus-visible, .afam-post-card .afam-chip:focus-visible { outline: 3px solid var(--afam-green-900); outline-offset: 2px; }

/* pagination */
.afam-pager { margin: 40px 0 0; }
.afam-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.afam-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 14px; border: 2px solid var(--afam-green-600); border-radius: 10px; color: var(--afam-green-600); font-weight: 700; text-decoration: none; }
.afam-pager .page-numbers.current { background: var(--afam-green-600); color: #fff; }
.afam-pager a.page-numbers:is(:hover, :focus-visible) { background: var(--afam-green-900); border-color: var(--afam-green-900); color: #fff; }
.afam-pager .page-numbers.dots { border-color: transparent; }

.afam-blog-empty { padding: 24px 0 8px; }
.afam-blog-empty h2 { color: var(--afam-green-900); }

/* ---------- single post: reading width ---------- */
.afam-entry { max-width: 52rem; margin: 0 auto; padding: 36px 20px 0; }
.afam-entry__feat { margin: 0 0 28px; }
.afam-entry__feat img { display: block; width: 100%; height: auto; border-radius: 14px; background: #eef3ea; }
.afam-entry__feat figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--afam-ink-700, #3f4f49); }
.afam-entry__content { font-size: 1.125rem; line-height: 1.75; color: var(--afam-ink-900, #1d2b27); overflow-wrap: anywhere; }
.afam-entry__content > * { max-width: 100%; }
.afam-entry__content img { max-width: 100%; height: auto; }
.afam-entry__content :is(h2, h3, h4) { color: var(--afam-green-900); font-family: var(--afam-font-head); line-height: 1.3; margin: 1.8em 0 0.6em; }
.afam-entry__content a { color: var(--afam-green-600); text-underline-offset: 3px; }
.afam-entry__content blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--afam-gold-500); font-style: italic; }
.afam-entry__content :is(table, iframe, video) { max-width: 100%; }
.afam-entry__content table { display: block; overflow-x: auto; }
.afam-entry__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.afam-entry__tags a { display: inline-block; padding: 4px 14px; border: 1px solid #b9c9ad; border-radius: 999px; color: var(--afam-green-900); font-size: 0.875rem; text-decoration: none; }
.afam-entry__tags a:is(:hover, :focus-visible) { background: var(--afam-green-900); color: #fff; }

/* share */
.afam-share { margin: 28px 0 0; padding: 18px 0; border-top: 1px solid #dfe8d8; border-bottom: 1px solid #dfe8d8; }
.afam-share__label { margin: 0 0 8px; font-weight: 700; color: var(--afam-green-900); }
.afam-share ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.afam-share :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 2px solid var(--afam-green-600); border-radius: 8px; background: #fff; color: var(--afam-green-600); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.afam-share :is(a, button):is(:hover, :focus-visible) { background: var(--afam-green-600); color: #fff; }
.afam-share :is(a, button):focus-visible { outline: 3px solid var(--afam-green-900); outline-offset: 2px; }

/* previous / next */
.afam-entry__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 0; }
.afam-entry__nav a { display: block; padding: 14px 18px; border: 1px solid #dfe8d8; border-radius: 12px; color: var(--afam-green-900); font-weight: 700; text-decoration: none; line-height: 1.35; }
.afam-entry__nav a span { display: block; margin-bottom: 4px; color: var(--afam-ink-700, #3f4f49); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.afam-entry__nav .afam-entry__next { text-align: right; grid-column: 2; }
.afam-entry__nav a:is(:hover, :focus-visible) { background: #f2f7ee; border-color: var(--afam-green-600); }
.afam-entry__nav a:focus-visible { outline: 3px solid var(--afam-green-900); outline-offset: 2px; }
@media (max-width: 640px) { .afam-entry__nav { grid-template-columns: 1fr; } .afam-entry__nav .afam-entry__next { grid-column: 1; text-align: left; } }

/* related */
.afam-related { margin: 48px 0 0; padding-top: 32px; border-top: 4px solid var(--afam-gold-500); }
.afam-related h2 { margin: 0 0 20px; color: var(--afam-green-900); font-size: 1.5rem; }
.afam-related .afam-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .afam-related .afam-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .afam-related .afam-cards { grid-template-columns: minmax(0, 1fr); } }

/* the old theme band and sidebar never show on these pages */
.afam-blog header.page-header, .afam-blog .sidebar, .afam-blog #sidebar { display: none !important; } /* !important: theme rules set display with higher specificity */
@media print { .afam-share, .afam-entry__nav, .afam-related, .afam-blog-search { display: none; } }
@media (prefers-reduced-motion: reduce) { .afam-blog * { transition: none !important; } } /* !important: overrides theme transitions */

/* specificity fixes (home.css and the theme load later or are more specific) */
.afam-blog .afam-post-card__img img, .afam-post-card .afam-post-card__img img { height: auto; aspect-ratio: 16 / 10; object-fit: contain; object-position: center; background: #eef3ea; width: 100%; display: block; }
.afam-post-card .afam-post-card__excerpt { margin: 0 var(--afam-sp-5, 24px) var(--afam-sp-5, 24px); }
.afam-pagehead a.afam-chip--light, .afam-pagehead a.afam-chip--light:visited { color: #fff; background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.afam-pagehead a.afam-chip--light:is(:hover, :focus-visible) { color: var(--afam-green-900); background: #fff; }

/* post bodies written by hand: WCAG AA for the orange role line of the spotlight card (was 3.4:1) */
.afam-entry__content .profile-role { color: #8f4300; }
.afam-entry__content h4 { color: #8f4300; }
.afam-entry__content .yr { color: #f0dd8a; }
.afam-entry__content :is(h4, .profile-role, .profile-title) { color: #8f4300 !important; } /* !important: the hand-written post HTML sets the colour inline */
.afam-entry__content :is(.yr, .year) { color: #f0dd8a !important; } /* !important: same reason */
.afam-entry__content .highlights h3 { color: #f0dd8a !important; } /* !important: hand-written inline colour */
.afam-entry__content blockquote p { color: #1d2b27 !important; } /* !important: hand-written inline colour (white on light) */
.afam-entry__content .tag.featured { background: #8f4300 !important; color: #fff !important; }