/* Niguro page CSS: blogs pages (built on the page kit in niguro.css; see dev/niguro-kit.md)
   blogs.tpl + __ng_blogs_card.tpl + __ng_blogs_row.tpl + __ng_blogs_side.tpl. Structure from the references,
   look from niguroapp: tokens only, 18px cards, 14px inner boxes, 10px buttons, pills. Hue 200. */

/* the sidebar runs taller than a screen here, so it scrolls with the page; from 1024px its last card
   (Story Creators, or a category's Popular) stays in view: the column stretches to the main column's
   height and the card sticks under the header — or, when it is taller than the room left, with its
   bottom 16px above the screen's (blogs.tpl's script sets --ng-bside-top), so it is never cut off */
.ng-blogs .ng-hub__side { position: static; }
@media (min-width: 1024px) {
  .ng-blogs .ng-hub__side { align-self: stretch; }
  .ng-blogs .ng-hub__side > .ng-bside__stick:last-child { position: sticky; top: var(--ng-bside-top, calc(var(--ng-top, 56px) + 20px)); }
}

/* hero: the category's crumbs above its name */
.ng-blogs .ng-bhero__crumbs { margin-bottom: 8px; }
.ng-blogs--category .ng-hero__sub { max-width: 62ch; }

/* =============================== */
/* home / category: filters and the article card (the category's newest; Read More) */
/* =============================== */

.ng-blogs .ng-bfilters { display: flex; align-items: center; gap: 10px; }
.ng-blogs .ng-bfilters__cats { flex: 1; min-width: 0; }
.ng-blogs .ng-bfilters__country { flex: none; }
.ng-blogs .ng-bfilters__country .ng-pbtn { height: 38px; padding: 0 14px; background: var(--ng-card); box-shadow: inset 0 0 0 1px var(--ng-line); }
.ng-blogs .ng-bfilters__country .ng-pbtn:hover { background: var(--ng-fill); }
.ng-blogs .ng-bfilters__country .countries-dropdown { border: 0; border-radius: 14px; background: var(--ng-card); box-shadow: var(--ng-shadow-lg); }

/* the card: cover, category tag, title (its link covers the card), excerpt, author + time */
:is(.ng-blogs, .ng-bgrid) .ng-bcard {
  position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden;
  border-radius: var(--ng-r); background: var(--ng-card); color: var(--ng-ink);
}
:is(.ng-blogs, .ng-bgrid) .ng-bcard:has(.ng-bcard__title a:focus-visible) { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__img { position: relative; flex: none; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ng-fill); }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .3s ease; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard:hover .ng-bcard__img img { scale: 1.04; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 14px 16px 16px; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__cat { position: relative; z-index: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ng-ink-strong);
}
:is(.ng-blogs, .ng-bgrid) .ng-bcard__title a { color: inherit; text-decoration: none; outline: 0; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard:hover .ng-bcard__title a { color: var(--ng-ink-strong); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--ng-sub);
}
:is(.ng-blogs, .ng-bgrid) .ng-bcard__meta { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--ng-sub); white-space: nowrap; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__ava { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__by { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ng-ink-strong); }
:is(.ng-blogs, .ng-bgrid) .ng-bcard__views { margin-left: auto; padding-left: 8px; }
:is(.ng-blogs, .ng-bgrid) .ng-bcard.is-locked .ng-bcard__lock { width: 100%; }

/* the Blogs tab of a profile, page, group or event (__ng_ptab_blogs.tpl): the same card, two up (one on
   phones) inside the tabs' list card, so each card gets the inner boxes' line and 14px corners */
.ng-bgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .ng-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ng-bgrid > li { display: flex; min-width: 0; }
.ng-bgrid .ng-bcard { flex: 1; border: 1px solid var(--ng-line); border-radius: var(--ng-r); /* [Card radius] */ }

/* the category's newest story, large (beside its cover when there is room; .ng-hub__main is the container) */
.ng-blogs .ng-bcard--feature .ng-bcard__title { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; -webkit-line-clamp: 3; }
.ng-blogs .ng-bcard--feature .ng-bcard__text { font-size: 15px; -webkit-line-clamp: 3; }
@container (min-width: 540px) {
  .ng-blogs .ng-bcard--feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: 300px; }
  .ng-blogs .ng-bcard--feature .ng-bcard__img { aspect-ratio: auto; min-height: 100%; }
  .ng-blogs .ng-bcard--feature .ng-bcard__img img { position: absolute; inset: 0; }
  .ng-blogs .ng-bcard--feature .ng-bcard__body { justify-content: center; gap: 10px; padding: 22px 22px 22px 24px; }
  .ng-blogs .ng-bcard--feature .ng-bcard__meta { margin-top: 6px; }
}
@container (min-width: 720px) {
  .ng-blogs .ng-bcard--feature .ng-bcard__body { padding: 28px 30px; }
  .ng-blogs .ng-bcard--feature .ng-bcard__title { font-size: 26px; }
}

/* =============================== */
/* sidebar (__ng_blogs_side.tpl) */
/* =============================== */

.ng-blogs .ng-bside__search { padding: 10px; }
.ng-blogs .ng-bsearch { position: relative; display: flex; align-items: center; margin: 0; }
.ng-blogs .ng-bsearch__ico { position: absolute; left: 14px; z-index: 1; display: grid; color: var(--ng-sub); pointer-events: none; }
.ng-blogs .ng-bsearch__ico .ng-ico { width: 18px; height: 18px; }
.ng-blogs .ng-bsearch .form-control { width: 100%; padding-left: 42px; padding-right: 48px; }
.ng-blogs .ng-bsearch__go {
  position: absolute; right: 4px; z-index: 1; display: grid; place-items: center; width: calc(var(--ng-field-h, 40px) - 8px); height: calc(var(--ng-field-h, 40px) - 8px); padding: 0; border: 0; border-radius: 8px;
  background: var(--ng-brand); color: #fff; cursor: pointer;
}
.ng-blogs .ng-bsearch__go:hover { filter: brightness(1.06); }
.ng-blogs .ng-bsearch__go .ng-ico { width: 18px; height: 18px; }
.ng-blogs .ng-bside__pills { flex-wrap: wrap; overflow: visible; gap: 8px; padding: 14px 16px 16px; }

/* Read More: cards stacked in one card, a line between them */
.ng-blogs .ng-bside__more .ng-bcard--side { height: auto; gap: 10px; padding: 14px 16px 16px; border-radius: 0; background: transparent; }
.ng-blogs .ng-bside__more .ng-bcard--side + .ng-bcard--side { border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-bcard--side .ng-bcard__img { aspect-ratio: 16 / 9; border-radius: 14px; }
.ng-blogs .ng-bcard--side .ng-bcard__body { gap: 6px; padding: 0; }
.ng-blogs .ng-bcard--side .ng-bcard__title { font-size: 15px; }
.ng-blogs .ng-bcard--side .ng-bcard__text { font-size: 13px; }
.ng-blogs .ng-bcard--side .ng-bcard__meta { padding-top: 2px; }
.ng-blogs .ng-bcard--side:has(.ng-bcard__title a:focus-visible) { outline-offset: -2px; }

/* =============================== */
/* the article */
/* =============================== */

.ng-blogs .ng-blog { position: relative; display: flex; flex-direction: column; gap: 16px; border-radius: 0; }
.ng-blogs .ng-blog.pending { border: 0; }
.ng-blogs .ng-blog.pending .ng-blog__card { --h: 38; outline: 1.5px dashed hsl(var(--h) 70% 50%); outline-offset: -1.5px; }
.ng-blogs .ng-blog .pending-icon { position: static; width: auto; font-size: 12px; color: hsl(var(--h) 65% 34%); }
body.night-mode .ng-blogs .ng-blog .pending-icon { color: hsl(var(--h) 75% 68%); }

/* the cover, and the card pulled up over its bottom, centred */
.ng-blogs .ng-blog__cover { overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--ng-r); background: var(--ng-fill); }
.ng-blogs .ng-blog__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ng-blogs .ng-blog__card {
  position: relative; z-index: 1; min-width: 0; margin: -56px 10px 0; padding: 20px 18px 6px;
  border-radius: var(--ng-r); background: var(--ng-card); color: var(--ng-ink);
}
.ng-blogs .ng-blog.is-nocover .ng-blog__card, .ng-blogs .ng-blog.is-nocover .ng-blog__talk { margin: 0; }
.ng-blogs .ng-blog.is-nocover ~ .ng-bkeep, .ng-blogs .ng-blog__gate ~ .ng-bkeep { margin: 0; }
.ng-blogs .ng-blog__talk, .ng-blogs .ng-bkeep { margin: 0 10px; }
@media (min-width: 768px) {
  .ng-blogs .ng-blog__cover { aspect-ratio: 21 / 9; border-radius: 22px; }
  .ng-blogs .ng-blog__card { margin: -88px 20px 0; padding: 28px 28px 8px; }
  .ng-blogs .ng-blog__talk, .ng-blogs .ng-bkeep { margin: 0 20px; }
}
@media (min-width: 1280px) {
  .ng-blogs .ng-blog__card { margin: -104px 24px 0; padding: 36px 32px 10px; }
  .ng-blogs .ng-blog__talk, .ng-blogs .ng-bkeep { margin: 0 24px; }
}

/* head: crumbs, title, author, collaborators, then a thin line */
.ng-blogs .ng-blog__head { padding-bottom: 18px; border-bottom: 1px solid var(--ng-line); }
.ng-blogs .ng-blog__crumbrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ng-blogs .ng-blog__crumbs li:last-child, .ng-blogs .ng-blog__crumbs li:last-child a { font-weight: 700; color: var(--ng-brand); }
.ng-blogs .ng-blog__crumbs li:last-child a:hover { color: var(--ng-brand); text-decoration: underline; }
.ng-blogs .ng-blog__title {
  margin: 12px 0 0; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em;
  color: var(--ng-ink-strong); overflow-wrap: anywhere;
}
@media (min-width: 768px) { .ng-blogs .ng-blog__title { margin-top: 14px; font-size: 34px; } }
@media (min-width: 1280px) { .ng-blogs .ng-blog__title { font-size: 38px; } }
.ng-blogs .ng-blog__author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ng-blogs .ng-blog__ava { flex: none; display: block; }
.ng-blogs .ng-blog__ava img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ng-blogs .ng-blog__who { min-width: 0; }
.ng-blogs .ng-blog__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ng-blogs .ng-blog__name a { color: var(--ng-ink-strong); text-decoration: none; }
.ng-blogs .ng-blog__name a:hover { text-decoration: underline; }
.ng-blogs .ng-blog__name .verified-badge, .ng-blogs .ng-blog__name .pro-badge { display: inline-flex; }
.ng-blogs .ng-blog__when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; font-size: 13.5px; color: var(--ng-sub); }
.ng-blogs .ng-blog__collab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; font-size: 13.5px; color: var(--ng-sub); }
.ng-blogs .ng-blog__collab-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ng-blogs .ng-blog__chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 4px; border-radius: 999px;
  background: var(--ng-fill); color: var(--ng-ink-strong); font-size: 13px; font-weight: 600; text-decoration: none;
}
.ng-blogs .ng-blog__chip:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-blogs .ng-blog__chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

/* the action rail: a row on phones, a sticky column beside the body from 768px */
.ng-blogs .ng-blog__layout { padding-top: 16px; }
.ng-blogs .ng-blog__rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.ng-blogs .ng-blog__acts { display: flex; gap: 8px; }
.ng-blogs .ng-blog__savewrap.post { display: contents; }
.ng-blogs .ng-blog__act {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px;
  background: var(--ng-fill); color: var(--ng-ink-strong); cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.ng-blogs .ng-blog__act:hover { background: var(--ng-fill-2); color: var(--ng-brand); }
.ng-blogs .ng-blog__act:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-blogs .ng-blog__act .ng-ico { width: 20px; height: 20px; }
.ng-blogs .ng-blog__act.js_unsave-post { background: var(--ng-tint); color: var(--ng-brand); }
.ng-blogs .ng-blog__act.js_unsave-post .ng-ico { fill: currentColor; }
.ng-blogs .ng-blog__stat {
  display: inline-flex; align-items: baseline; gap: 4px; height: 40px; padding: 0 6px; border-radius: 10px;
  line-height: 40px; color: var(--ng-sub); text-decoration: none; white-space: nowrap;
}
.ng-blogs .ng-blog__acts + .ng-blog__stat { margin-left: auto; }
.ng-blogs .ng-blog__stat b { font-size: 14.5px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-blogs .ng-blog__stat small { font-size: 12.5px; }
.ng-blogs a.ng-blog__stat:hover { background: var(--ng-fill); color: var(--ng-sub); }
@media (min-width: 768px) {
  .ng-blogs .ng-blog__layout { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 24px; padding-top: 26px; }
  .ng-blogs .ng-blog__rail {
    position: sticky; top: calc(var(--ng-top, 56px) + 20px); z-index: 2; align-self: start;
    flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 0;
  }
  .ng-blogs .ng-blog__acts { flex-direction: column; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ng-line); }
  .ng-blogs .ng-blog__acts + .ng-blog__stat { margin-left: 0; }
  .ng-blogs .ng-blog__stat { flex-direction: column; align-items: center; gap: 1px; width: 52px; height: auto; padding: 8px 0; background: transparent; line-height: 1.15; text-align: center; }
  .ng-blogs .ng-blog__stat b { font-size: 16px; }
  .ng-blogs .ng-blog__stat small { font-size: 11.5px; }
  .ng-blogs a.ng-blog__stat:hover { background: var(--ng-fill); }
}

/* the body: reading typography */
.ng-blogs .ng-blog__main { min-width: 0; }
.ng-blogs .ng-blog .ng-blog__prose { font-size: 17px; line-height: 1.7; color: var(--ng-ink); overflow-wrap: break-word; word-break: normal; }
@media (min-width: 768px) { .ng-blogs .ng-blog .ng-blog__prose { font-size: 18px; } }
.ng-blogs .ng-blog__prose > :first-child { margin-top: 0; }
.ng-blogs .ng-blog__prose > :last-child { margin-bottom: 0; }
.ng-blogs .ng-blog__prose p { margin: 0 0 1.15em; }
.ng-blogs .ng-blog__prose h1, .ng-blogs .ng-blog__prose h2 { margin: 1.7em 0 .55em; font-size: 1.45em; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--ng-ink-strong); }
.ng-blogs .ng-blog__prose h3 { margin: 1.5em 0 .5em; font-size: 1.22em; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--ng-ink-strong); }
.ng-blogs .ng-blog__prose h4, .ng-blogs .ng-blog__prose h5, .ng-blogs .ng-blog__prose h6 { margin: 1.4em 0 .45em; font-size: 1.05em; font-weight: 700; line-height: 1.35; color: var(--ng-ink-strong); }
.ng-blogs .ng-blog__prose a { color: var(--ng-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ng-blogs .ng-blog__prose strong, .ng-blogs .ng-blog__prose b { font-weight: 700; color: var(--ng-ink-strong); }
.ng-blogs .ng-blog__prose blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ng-brand);
  font-size: 1.06em; line-height: 1.6; color: var(--ng-ink-strong);
}
body.night-mode .ng-blogs .ng-blog__prose blockquote { border-left-color: var(--ng-brand); }
.ng-blogs .ng-blog__prose blockquote p:last-child { margin-bottom: 0; }
.ng-blogs .ng-blog__prose ul, .ng-blogs .ng-blog__prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.ng-blogs .ng-blog__prose ul { list-style: disc; }
.ng-blogs .ng-blog__prose ol { list-style: decimal; }
.ng-blogs .ng-blog__prose li { margin: .35em 0; padding-left: .2em; }
.ng-blogs .ng-blog__prose li::marker { color: var(--ng-brand); }
.ng-blogs .ng-blog__prose img { max-width: 100% !important; height: auto !important; border-radius: 14px; }
.ng-blogs .ng-blog__prose figure { margin: 1.5em 0; }
.ng-blogs .ng-blog__prose figcaption { margin-top: 8px; font-size: 14px; color: var(--ng-sub); text-align: center; }
.ng-blogs .ng-blog__prose iframe { width: 100% !important; border: 0; border-radius: 14px; }
.ng-blogs .ng-blog__prose code { padding: .12em .38em; border-radius: 6px; background: var(--ng-fill); font-size: .88em; color: var(--ng-ink-strong); }
.ng-blogs .ng-blog__prose pre { margin: 0 0 1.15em; padding: 14px 16px; overflow: auto; border-radius: 14px; background: var(--ng-fill); font-size: .88em; line-height: 1.55; }
.ng-blogs .ng-blog__prose pre code { padding: 0; background: none; }
.ng-blogs .ng-blog__prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ng-line); opacity: 1; }
/* tables: the shared [Tables] look (niguro.css; wrapped in a .ng-table scroller by niguro.js "[Tables]") */

/* tags and references */
.ng-blogs .ng-blog__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.ng-blogs .ng-blog__tags .ng-tag { height: 30px; padding: 0 12px; font-size: 13px; }
.ng-blogs .ng-blog__tags .ng-tag:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); filter: none; }
.ng-blogs .ng-blog .ng-blog__refs { margin-top: 24px; padding: 16px 18px; border: 0; border-radius: 14px; background: var(--ng-fill); }
.ng-blogs .ng-blog__refs .blog-references-heading {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ng-line);
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ng-sub);
}
.ng-blogs .ng-blog__refs .blog-references-heading .ng-ico { width: 16px; height: 16px; color: var(--ng-brand); }
.ng-blogs .ng-blog__refs .blog-references-list { margin: 0; padding-left: 1.3em; list-style: decimal; }
.ng-blogs .ng-blog__refs .blog-references-item { margin-bottom: 8px; font-size: 14.5px; color: var(--ng-ink); }
.ng-blogs .ng-blog__refs .blog-references-item::marker { color: var(--ng-sub); }
.ng-blogs .ng-blog__refs .blog-references-link { border: 0; color: var(--ng-ink-strong); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ng-line); text-underline-offset: 3px; }
.ng-blogs .ng-blog__refs .blog-references-link:hover { color: var(--ng-brand); text-decoration-color: currentColor; }
.ng-blogs .ng-blog__refs .blog-references-external { opacity: 1; vertical-align: -1px; color: var(--ng-sub); }
.ng-blogs .ng-blog__refs .blog-references-external .ng-ico { width: 13px; height: 13px; }

/* the post bar (the feed's) at the foot of the card */
.ng-blogs .ng-blog .ng-blog__bar.post-actions { margin: 24px 0 0; padding: 6px 0; }
.ng-blogs .ng-blog__bar a.ng-pbar__n { text-decoration: none; }
.ng-blogs .ng-blog__bar a.ng-pbar__n:hover { color: var(--ng-ink); }

/* comments: their own card under the article */
.ng-blogs .ng-blog__talkn {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 2px; padding: 0 7px; border-radius: 999px;
  background: var(--ng-fill); font-size: 12px; font-weight: 700; color: var(--ng-sub);
}
.ng-blogs .ng-blog__talk .post-footer { display: block !important; padding: 4px 18px 16px; border: 0; border-radius: 0; background: transparent; }
.ng-blogs .ng-blog__gate { padding: 20px; }

/* =============================== */
/* new / edit: page head and the form card */
/* =============================== */

.ng-blogs .ng-phead { flex-wrap: wrap; }
.ng-blogs .ng-phead__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ng-blogs .ng-beditor .form-group { margin-bottom: 18px; }
.ng-blogs .ng-beditor fieldset.form-group { margin-top: 0; padding: 0; border: 0; }
.ng-blogs .ng-beditor legend.form-label { float: none; width: auto; margin-bottom: 8px; padding: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ng-ink-strong); }
.ng-blogs .ng-beditor__to { display: flex; flex-wrap: wrap; gap: 8px; }
.ng-blogs .ng-beditor__to .button-label { margin: 0; }
.ng-blogs .ng-beditor__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 768px) { .ng-blogs .ng-beditor__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ng-blogs .ng-beditor .x-image { width: 100%; max-width: 440px; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background-color: var(--ng-fill); }
.ng-blogs .ng-beditor .x-image .js_x-uploader { color: var(--ng-sub); }
.ng-blogs .ng-beditor .tox-tinymce { border: 1px solid var(--ng-line); border-radius: 14px; }
/* references (Sngine's template adds them as label | field columns; here they stack like the rest) */
.ng-blogs .ng-beditor .auto-connect-node { margin: 0 0 14px; padding: 14px 16px 2px; border: 1px solid var(--ng-line); border-radius: 14px; }
.ng-blogs .ng-beditor .auto-connect-node .form-group { margin-bottom: 12px; }
.ng-blogs #blog-references-list .auto-connect-node .row.form-group { display: block; margin: 0 0 12px; }
.ng-blogs #blog-references-list .auto-connect-node .row.form-group > [class*="col-md-"] { width: 100%; max-width: none; flex: none; padding: 0; }
.ng-blogs #blog-references-list .auto-connect-node .form-label::first-letter { text-transform: uppercase; }
.ng-blogs .ng-beditor__addref { margin-bottom: 4px; }
.ng-blogs .ng-beditor .divider { margin: 20px 0 8px; border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-beditor .form-table-row { align-items: center; gap: 12px; margin: 0 !important; padding: 12px 0; }
.ng-blogs .ng-beditor .form-table-row + .form-table-row, .ng-blogs .ng-beditor #js_tips-enabled + .form-table-row { border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-beditor .form-table-row .form-label { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-blogs .ng-beditor .alert-warning { border: 0; border-radius: 14px; }
.ng-blogs .ng-beditor .ng-fcard__foot { flex-wrap: wrap; }
.ng-blogs .ng-pbtn--danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.ng-blogs .ng-pbtn--danger:hover { background: hsl(var(--destructive) / .16); color: hsl(var(--destructive)); }
.ng-blogs .ng-beditor .ng-fcard__foot .js_delete-blog { margin-right: auto; }

/* =============================== */
/* the hub: carousel, the most read; the story lists (hub and category) */
/* =============================== */

/* the featured carousel: one big card at a time, the title over a dark fade, dots below */
.ng-blogs .ng-bfeat { min-width: 0; }
.ng-blogs .ng-bfeat__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--ng-r);
}
.ng-blogs .ng-bfeat__track::-webkit-scrollbar { display: none; }
.ng-blogs .ng-bfeat__slide {
  position: relative; display: flex; align-items: flex-end; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate;
  border-radius: var(--ng-r); background: var(--ng-fill); color: #fff; scroll-snap-align: start;
}
@media (min-width: 576px) { .ng-blogs .ng-bfeat__slide { aspect-ratio: 16 / 9; } }
.ng-blogs .ng-bfeat__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.ng-blogs .ng-bfeat__slide:hover .ng-bfeat__img { scale: 1.03; }
.ng-blogs .ng-bfeat__slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsl(0 0% 0% / 0) 30%, hsl(0 0% 0% / .35) 55%, hsl(0 0% 0% / .78)); }
.ng-blogs .ng-bfeat__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 18px 18px 20px; }
@media (min-width: 768px) { .ng-blogs .ng-bfeat__text { gap: 10px; padding: 28px 30px; } }
.ng-blogs .ng-bfeat__kicker {
  position: relative; z-index: 2; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: hsl(0 0% 100% / .2); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; backdrop-filter: blur(6px);
}
.ng-blogs .ng-bfeat__kicker:hover { background: hsl(0 0% 100% / .3); color: #fff; }
.ng-blogs .ng-bfeat__title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 34ch;
  margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 12px hsl(0 0% 0% / .25);
}
@media (min-width: 768px) { .ng-blogs .ng-bfeat__title { font-size: 30px; } }
.ng-blogs .ng-bfeat__title a { color: inherit; text-decoration: none; outline: 0; }
.ng-blogs .ng-bfeat__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ng-blogs .ng-bfeat__slide:has(.ng-bfeat__title a:focus-visible) { outline: 2px solid var(--ng-brand); outline-offset: -2px; }
.ng-blogs .ng-bfeat__by { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 13px; color: hsl(0 0% 100% / .86); white-space: nowrap; }
.ng-blogs .ng-bfeat__by img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px hsl(0 0% 100% / .7); }
.ng-blogs .ng-bfeat__name { overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #fff; }
.ng-blogs .ng-bfeat__wrap .ng-strip__nav { z-index: 3; }
.ng-blogs .ng-bfeat__dots { display: flex; justify-content: center; gap: 6px; padding-top: 12px; }
.ng-blogs .ng-bfeat__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--ng-line); cursor: pointer; transition: width .2s, background .2s; }
.ng-blogs .ng-bfeat__dot.active { width: 22px; background: var(--ng-brand); }
.ng-blogs .ng-bfeat__dot:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }

/* the most read: a big light rank, a kicker, the title on one line, a square thumbnail */
.ng-blogs .ng-btop__list { margin: 0; padding: 2px 18px 6px; list-style: none; }
.ng-blogs .ng-btop__item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; }
.ng-blogs .ng-btop__item + .ng-btop__item { border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-btop__rank { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-align: center; color: hsl(var(--muted-foreground) / .38); }
.ng-blogs .ng-btop__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ng-blogs .ng-btop__kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ng-brand); }
.ng-blogs .ng-btop__title { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ng-ink-strong); }
.ng-blogs .ng-btop__title a { color: inherit; text-decoration: none; }
.ng-blogs .ng-btop__title a::after { content: ""; position: absolute; inset: 0; }
.ng-blogs .ng-btop__item:hover .ng-btop__title { color: var(--ng-brand); }
.ng-blogs .ng-btop__thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--ng-fill); }
@media (min-width: 640px) { .ng-blogs .ng-btop__thumb { width: 64px; height: 64px; } }

/* the story lists (the hub's Latest stories, a category's list): two cards (hub), then rows; Load more */
.ng-blogs .ng-blatest__body { padding: 16px 18px 18px; }
.ng-blogs .ng-bpair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 576px) { .ng-blogs .ng-bpair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.ng-blogs .ng-bpair__card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ng-blogs .ng-bpair__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--ng-fill); }
.ng-blogs .ng-bpair__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .3s ease; }
.ng-blogs .ng-bpair__card:hover .ng-bpair__img img { scale: 1.04; }
.ng-blogs .ng-bpair__chip {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: var(--ng-card); color: var(--ng-ink-strong); font-size: 11.5px; font-weight: 700;
}
.ng-blogs .ng-bpair__title, .ng-blogs .ng-brow__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--ng-ink-strong);
}
@media (min-width: 768px) { .ng-blogs .ng-bpair__title, .ng-blogs .ng-brow__title { font-size: 17px; } }
.ng-blogs .ng-bpair__title a, .ng-blogs .ng-brow__title a { color: inherit; text-decoration: none; }
.ng-blogs .ng-bpair__title a::after, .ng-blogs .ng-brow__title a::after { content: ""; position: absolute; inset: 0; }
.ng-blogs .ng-bpair__card:hover .ng-bpair__title, .ng-blogs .ng-brow:hover .ng-brow__title { color: var(--ng-brand); }
.ng-blogs .ng-bpair__card:has(a:focus-visible), .ng-blogs .ng-brow:has(.ng-brow__title a:focus-visible) { outline: 2px solid var(--ng-brand); outline-offset: 4px; border-radius: 6px; }
.ng-blogs .ng-bpair__title a:focus-visible, .ng-blogs .ng-brow__title a:focus-visible { outline: 0; }
.ng-blogs .ng-bpair__text, .ng-blogs .ng-brow__text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--ng-sub);
}
.ng-blogs .ng-bpair .ng-bstats { margin-top: auto; padding-top: 2px; }
.ng-blogs .ng-bstats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--ng-sub); }
.ng-blogs .ng-bstats > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ng-blogs .ng-bstats .ng-ico { width: 14px; height: 14px; }
.ng-blogs .ng-blatest__rows { margin: 0; padding: 0; list-style: none; }
.ng-blogs .ng-bpair + .ng-blatest__rows { margin-top: 18px; }
.ng-blogs .ng-brow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-blatest__body > .ng-blatest__rows:first-child > .ng-brow:first-child { padding-top: 2px; border-top: 0; }
.ng-blogs .ng-brow[hidden] { display: none; }
.ng-blogs .ng-brow__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ng-blogs .ng-brow__by { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ng-sub); }
.ng-blogs .ng-brow__by img { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.ng-blogs .ng-brow__thumb { width: 104px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--ng-fill); }
@media (min-width: 576px) { .ng-blogs .ng-brow__thumb { width: 152px; height: 100px; } }
@media (min-width: 768px) { .ng-blogs .ng-brow { gap: 24px; } .ng-blogs .ng-brow__thumb { width: 200px; height: 132px; } }
.ng-blogs .ng-blatest__more { margin-top: 14px; background: var(--ng-fill); }
.ng-blogs .ng-blatest__more:hover { background: var(--ng-fill-2); }
.ng-blogs .ng-blatest__more[disabled] { opacity: .6; cursor: progress; }
.ng-blogs .ng-blatest__more .ng-ico { width: 16px; height: 16px; }
.ng-blogs .ng-blatest .js_see-more[hidden] { display: none; }
/* the category's newest story, large, above the list (beside its cover when there is room) */
.ng-blogs--category .ng-hub__main { container-type: inline-size; }

/* =============================== */
/* sidebar: order on phones, Story Creators */
/* =============================== */

@media (max-width: 1023.98px) { .ng-blogs .ng-bside__cats { order: -1; } }
.ng-blogs .ng-bside__country .ng-pbtn { justify-content: flex-start; background: var(--ng-card); }
.ng-blogs .ng-bcreator { padding: 14px 16px 6px; }
.ng-blogs .ng-bcreator + .ng-bcreator { border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-bcreator__row { display: flex; align-items: center; gap: 10px; }
.ng-blogs .ng-bcreator__ava { flex: none; }
.ng-blogs .ng-bcreator__ava img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ng-blogs .ng-bcreator__who { flex: 1; min-width: 0; }
.ng-blogs .ng-bcreator__line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ng-blogs .ng-bcreator__line > .js_user-popover { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-blogs .ng-bcreator__name { font-size: 14.5px; font-weight: 700; color: var(--ng-ink-strong); text-decoration: none; }
.ng-blogs .ng-bcreator__name:hover { text-decoration: underline; color: var(--ng-ink-strong); }
.ng-blogs .ng-bcreator__who small { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ng-sub); }
.ng-blogs .ng-bcreator__row .btn { flex: none; }
.ng-blogs .ng-bcreator__posts { margin: 8px 0 0; padding: 0; list-style: none; }
.ng-blogs .ng-bmini { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }
.ng-blogs .ng-bmini + .ng-bmini { border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-bmini__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ng-blogs .ng-bmini__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.38; color: var(--ng-ink-strong);
}
.ng-blogs .ng-bmini__title a { color: inherit; text-decoration: none; }
.ng-blogs .ng-bmini__title a::after { content: ""; position: absolute; inset: 0; }
.ng-blogs .ng-bmini:hover .ng-bmini__title { color: var(--ng-brand); }
.ng-blogs .ng-bmini .ng-bstats { font-size: 12px; gap: 4px 10px; }
.ng-blogs .ng-bmini__thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: var(--ng-fill); }

/* =============================== */
/* the article: Keep Reading (niguroapp's single "keep reading") */
/* =============================== */

.ng-blogs .ng-bkeep { padding: 16px; }
@media (min-width: 640px) { .ng-blogs .ng-bkeep { padding: 20px 24px; } }
.ng-blogs .ng-bkeep__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ng-blogs .ng-bkeep__head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-blogs .ng-bkeep__head a { flex: none; font-size: 13px; font-weight: 600; color: var(--ng-brand); text-decoration: none; }
.ng-blogs .ng-bkeep__head a:hover { text-decoration: underline; }
.ng-blogs .ng-bkeep__list { margin: 0; padding: 0; list-style: none; }
.ng-blogs .ng-bkeep__item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.ng-blogs .ng-bkeep__item + .ng-bkeep__item { border-top: 1px solid var(--ng-line); }
.ng-blogs .ng-bkeep__thumb { flex: none; display: block; width: 88px; height: 88px; overflow: hidden; border-radius: 12px; background: var(--ng-fill); }
@media (min-width: 640px) { .ng-blogs .ng-bkeep__thumb { width: 132px; height: 92px; } }
.ng-blogs .ng-bkeep__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ng-blogs .ng-bkeep__main { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.ng-blogs .ng-bkeep__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.38; color: var(--ng-ink);
}
.ng-blogs .ng-bkeep__title a { color: inherit; text-decoration: none; }
.ng-blogs .ng-bkeep__title a:hover { color: var(--ng-brand); }
.ng-blogs .ng-bkeep__text { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ng-sub); }
.ng-blogs .ng-bkeep__by { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: 12.5px; color: var(--ng-sub); white-space: nowrap; }
.ng-blogs .ng-bkeep__by img { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.ng-blogs .ng-bkeep__name { overflow: hidden; text-overflow: ellipsis; }