/* Pages: the blog directory, blog pages, post cards, the article page, comments, the front page and Admin › Pages.
   Built on the Float tokens in float.css, so it follows every theme and the aurora backdrop. A blog's own accent
   color arrives as --blog-accent and falls back to the forum's accent. */

.pg-head, .pg-bhead, .pg-article, .pg-card, .pg-blog { --pg-accent: var(--blog-accent, var(--accent)); }
.pg-head { padding-bottom: var(--s-5); margin-bottom: var(--gap-float); }
.pg-head-text { min-width: 0; flex: 1 1 280px; }
.pg-head-text h1, .pg-head-text p { overflow-wrap: anywhere; }
.pg-head-text h1 .chip { vertical-align: middle; }
.pg-head .greet-tools { min-width: 0; }
.pg-head .greet-tools .btn { max-width: 100%; min-width: 0; }
.pg-btn-t { min-width: 0; overflow-wrap: anywhere; text-align: left; }
.pg-bhead { align-items: flex-start; gap: var(--s-4); }
.pg-bmeta { flex-wrap: wrap; margin-top: var(--s-2, 8px); }
.pg-bmeta span { overflow-wrap: anywhere; min-width: 0; }
.pg-about { margin-top: var(--s-3); overflow-wrap: anywhere; }

/* blog initial tile */
.pg-blog-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); color: #fff;
  font: 800 1.3rem/1 var(--font-display); background: linear-gradient(135deg, var(--pg-accent), color-mix(in oklab, var(--pg-accent) 55%, #000)); }
.pg-blog-ico.lg { width: 64px; height: 64px; font-size: 1.7rem; border-radius: var(--r-lg); }

/* blog list */
.pg-blogs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap-float); margin-bottom: var(--s-3); }
.pg-blog { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); color: inherit; text-decoration: none; min-width: 0; }
.pg-blog-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pg-blog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pg-blog-head b { font: 700 var(--fs-lg, 1.15rem)/1.2 var(--font-display); letter-spacing: var(--track-tight); overflow-wrap: anywhere; min-width: 0; }
.pg-blog-head .chip, .pg-card-chips .chip { flex: none; white-space: nowrap; }
.pg-blog-tag { line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }
.pg-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.pg-blog-meta > span { min-width: 0; overflow-wrap: anywhere; }
.pg-faces { display: inline-flex; flex: none; }
.pg-faces .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--surface); }
.pg-faces:empty { display: none; }
.pg-chip-site { background: color-mix(in oklab, var(--pg-accent, var(--accent)) 18%, transparent); color: var(--text); }
.pg-chip-draft { background: color-mix(in oklab, var(--warn, #d97706) 22%, transparent); color: var(--text); }

/* post cards */
.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--gap-float); margin-bottom: var(--s-3); }
.pg-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; min-width: 0; overflow: hidden; padding: 0; }
.pg-card-cover { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; flex: none; }
.pg-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-card-blank { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in oklab, var(--pg-accent) 34%, var(--surface)),
  color-mix(in oklab, var(--pg-accent) 10%, var(--surface))); }
.pg-card-blank span { font: 800 2.4rem/1 var(--font-display); color: color-mix(in oklab, var(--pg-accent) 70%, var(--text)); opacity: .55; }
.pg-card-main { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-5) var(--s-5); min-width: 0; flex: 1; }
.pg-card-blog { color: var(--pg-accent); font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.pg-card-title { font: 700 var(--fs-lg, 1.15rem)/1.25 var(--font-display); letter-spacing: var(--track-tight); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 3; }
.pg-card-text { line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 3; }
.pg-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; padding-top: 4px; min-width: 0; }
.pg-card-meta > span { min-width: 0; overflow-wrap: anywhere; }
.pg-card-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pg-card-chips:empty { display: none; }

/* the article page */
.pg-ahead { align-items: flex-end; }
.pg-ahead-text { min-width: 0; flex: 1 1 320px; }
.pg-ahead-text h1 { margin: var(--s-3) 0; overflow-wrap: anywhere; }
.pg-ameta { flex-wrap: wrap; }
.pg-ameta span { overflow-wrap: anywhere; min-width: 0; }
.pg-by { display: inline-flex; align-items: center; gap: 8px; }
.pg-by .av { flex: none; }
.pg-ahead .thead-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-ahead .thead-tools form { display: contents; }
.pg-blog-chip { max-width: 100%; min-width: 0; overflow-wrap: anywhere; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2;
  color: var(--pg-accent); }
.pg-body .post-body { font-size: 1.06rem; line-height: 1.75; overflow-wrap: anywhere; }
.pg-body .post-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* comments */
.pg-comments { list-style: none; margin: 0; padding: var(--s-2, 8px) var(--s-5) 0; }
.pg-comment { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); min-width: 0; }
.pg-comment .av { flex: none; }
.pg-comment-main { flex: 1; min-width: 0; }
.pg-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.pg-comment-who { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.pg-comment-head form { margin-left: auto; }
.pg-comment-body { overflow-wrap: anywhere; margin-top: 4px; }
.pg-comment-form textarea { width: 100%; min-width: 0; }

/* writers */
.pg-writers { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.pg-writer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: var(--s-2, 8px) 0; border-bottom: 1px solid var(--border); min-width: 0; }
.pg-writer-who { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pg-writer-who .uname { overflow-wrap: anywhere; min-width: 0; }
.pg-writer-who .chip { flex: none; white-space: nowrap; }
.pg-add-writer, .pg-add-block { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: var(--s-3); }
.pg-add-in { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.pg-add-in input, .pg-add-in select { width: 100%; min-width: 0; }
.pg-kind, .pg-opts, .pg-groups { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pg-kind legend, .pg-opts legend, .pg-groups legend { padding: 0; margin-bottom: 6px; }
.pg-accent-in input[type="color"] { width: 64px; height: 36px; padding: 2px; }
.pg-form .editor textarea { min-height: 360px; }

/* front page */
.pg-front { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pg-hero { padding: clamp(24px, 5vw, 56px) clamp(18px, 4vw, 48px); position: relative; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, var(--surface)), var(--surface) 70%); }
.pg-hero-text { min-width: 0; }
.pg-hero h1 { font: 800 clamp(1.8rem, 4.5vw, 3rem)/1.08 var(--font-display); letter-spacing: var(--track-tight); margin: 0 0 var(--s-3); overflow-wrap: anywhere; }
.pg-hero-body { font-size: 1.08rem; line-height: 1.6; color: var(--text-muted); overflow-wrap: anywhere; }
.pg-hero-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }
.pg-hero-btns .btn { max-width: 100%; }
.pg-sec { min-width: 0; }
.pg-sec-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.pg-sec-more { flex: none; white-space: nowrap; padding: 0 6px; }
.pg-threads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap-float); }
.pg-thread { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-5); color: inherit; text-decoration: none; min-width: 0; }
.pg-thread-forum { color: var(--accent); font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.pg-thread-title { font: 650 var(--fs-md, 1rem)/1.3 var(--font-display); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 3; }
.pg-thread-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; min-width: 0; }
.pg-thread-meta span { min-width: 0; overflow-wrap: anywhere; }
.pg-text h2 { margin: 0 0 var(--s-3); overflow-wrap: anywhere; }
.pg-text .post-body { overflow-wrap: anywhere; }

/* Latest from the blogs card (forum index) and the Blogs box on profiles */
.pg-late ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pg-late, .pg-late ol, .pg-late li { min-width: 0; }
.pg-late a { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: var(--r-sm, 8px); color: inherit; text-decoration: none; min-width: 0; }
.pg-prof a { flex-direction: row; align-items: center; gap: 10px; }
@media (hover: hover) { .pg-late a:hover { background: var(--surface-2); } }
.pg-late-t { flex: 1; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.pg-late-b { overflow-wrap: anywhere; min-width: 0; }
.pg-prof .faint { flex: none; white-space: nowrap; }
.pg-more { margin-top: var(--s-3); }

/* Admin › Pages */
.pg-block { padding: var(--s-4); margin-bottom: var(--s-3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--border); background: var(--surface-2); min-width: 0; }
.pg-block-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pg-block-head b { overflow-wrap: anywhere; min-width: 0; }
.pg-block-btns { display: flex; gap: 6px; flex-wrap: nowrap; flex: none; }
.pg-block-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px 12px; margin: var(--s-3) 0; }
.pg-block-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.pg-block-fields input, .pg-block-fields textarea { width: 100%; min-width: 0; }
.pg-block-fields .pg-wide { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .pg-bhead { flex-wrap: wrap; }
  .pg-blog { padding: var(--s-4); }
  .pg-card-main { padding: var(--s-4); }
  .pg-comments { padding-inline: var(--s-4); }
}

/* page head: the buttons and tabs sit on the title's centre line and the subtitle runs under the title;
   on phones the tools take their own row under the subtitle */
.pg-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); row-gap: 6px; }
.pg-head > div:first-child { display: contents; }
.pg-head h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
.pg-head > div:first-child > :not(h1) { order: 2; flex-basis: 100%; min-width: 0; }
.pg-head > .greet-tools { order: 1; margin-left: auto; width: auto; min-width: 0; }
.pg-head > .greet-tools > * { max-width: 100%; }
@media (max-width: 600px) { .pg-head > .greet-tools { order: 3; flex-basis: 100%; margin-left: 0; margin-top: var(--s-2); } }
/* a blog's head: the buttons share the title's row (the icon and the about text sit beside and below) */
.pg-bhead { align-items: flex-start; }
.pg-btitle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.pg-btitle h1 { flex: 1 1 auto; }
.pg-btitle > .greet-tools { margin-left: auto; width: auto; min-width: 0; }
.pg-bhead .pg-head-text { flex: 1 1 0; }