/* News list and TOP strip (D-115, chunk C4): [nuruma_news_list] (.nrl) and [nuruma_news_top] (.nrt), Nuruma_News_List.
 * Visuals follow the approved sample (_runs/20261110-news/v8/index.html): date headings, 4:3 thumbnail rows, category chip, NEW badge, relative time, a teaser line and a hero first row on a wide
 * column, the ranking module (C7, .nrk) in a right rail on a wide column and after the 2nd row on a narrow one. The layout answers to the WIDTH OF THE BLOCK (container queries), not the window:
 * the theme's content column may be narrower than the window. Without container-query support the block stays one column. Scoped under .nrl / .nrt so the theme's rules stay untouched. No dark mode. */
.nrl, .nrl *, .nrl *::before, .nrl *::after, .nrt, .nrt *, .nrt *::before, .nrt *::after { box-sizing: border-box; }
.nrl { container: nrl / inline-size; margin: 0 0 32px; color: #222; font-size: 16px; line-height: 1.6; }
.nrt { container: nrt / inline-size; margin: 0 0 28px; color: #222; font-size: 16px; line-height: 1.6; }
.nrl img, .nrt img { max-width: none; margin: 0; }

/* ---- shared row pieces */
:is(.nrl, .nrt) .nrl__th { display: block; position: relative; overflow: hidden; background: #e9e9e6; border-radius: 4px; aspect-ratio: 4 / 3; flex: 0 0 108px; width: 108px; }
:is(.nrl, .nrt) .nrl__th img { display: block; position: relative; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
:is(.nrl, .nrt) .nrl__th--none { background: #4a5863; } /* the generated title card (.nrc, nuruma-news-card.css) fills it */
:is(.nrl, .nrt) .nrl__th--fill::before { content: ""; position: absolute; inset: -20px; background: var(--nrl-src) center / cover; filter: blur(14px) brightness(.92); }
:is(.nrl, .nrt) .nrl__th--fill img { object-fit: contain; object-position: center; }
:is(.nrl, .nrt) .nrl__bd { flex: 1; min-width: 0; }
:is(.nrl, .nrt) .nrl__mt { display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; margin: 0 0 3px; font-size: 12px; line-height: 1.7; }
:is(.nrl, .nrt) .nrl__cat { display: inline-block; background: #3a6f8f; color: #fff; font-size: 11px; line-height: 1.7; padding: 0 7px; border-radius: 2px; text-decoration: none; }
:is(.nrl, .nrt) a.nrl__cat:hover { background: #2d5f7c; color: #fff; }
:is(.nrl, .nrt) .nrl__new { display: inline-block; background: #e8590c; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.7; padding: 0 6px; border-radius: 3px; letter-spacing: .06em; }
:is(.nrl, .nrt) .nrl__tm { color: #888; }
:is(.nrl, .nrt) .nrl__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.55; font-weight: 700; color: #1a1a1a; text-decoration: none; overflow-wrap: anywhere; }
:is(.nrl, .nrt) .nrl__t:hover { color: #1a5a8a; }
:is(.nrl, .nrt) .nrl__d { display: none; margin: 0; }
:is(.nrl, .nrt) .nrl__it { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 0; border-bottom: 1px solid #eee; }

/* ---- the list */
.nrl .nrl__flt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 12px; font-size: 14px; }
.nrl .nrl__fl { font-weight: 700; color: #2d5f7c; }
.nrl .nrl__flt a { color: #1a5a8a; }
.nrl .nrl__g { display: grid; grid-template-columns: minmax(0, 1fr); }
.nrl .nrl__dh { margin: 0; padding: 4px 0 4px 10px; border: 0; border-left: 4px solid #3a6f8f; border-radius: 0; background: #f3f7f9; font-size: 14px; line-height: 1.6; font-weight: 700; color: #2d5f7c; letter-spacing: normal; text-transform: none; }
.nrl .nrl__dh::before, .nrl .nrl__dh::after { content: none; }
.nrl .nrl__rail { margin: 14px 0 6px; }
.nrl .nrl__rail .nrk { margin: 0; }

/* paging */
.nrl .nrl__pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 0; }
.nrl .nrl__pn { display: inline-block; min-width: 40px; padding: 8px 12px; border: 1px solid #d5dde2; border-radius: 4px; background: #fff; color: #1a5a8a; font-size: 14px; line-height: 1.2; text-align: center; text-decoration: none; }
.nrl a.nrl__pn:hover { background: #f0f5f8; }
.nrl .nrl__pn--cur { background: #3a6f8f; border-color: #3a6f8f; color: #fff; font-weight: 700; }
.nrl .nrl__pn--off { color: #aab4ba; background: #f6f7f7; }
.nrl .nrl__gap { color: #888; }

/* empty state */
.nrl .nrl__empty { border: 1px solid #e6e9ea; border-radius: 8px; background: #f7f8f8; padding: 28px 18px; text-align: center; }
.nrl .nrl__et { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #2d5f7c; }
.nrl .nrl__ed { margin: 0; font-size: 14px; color: #666; }
.nrl .nrl__ea { margin: 10px 0 0; font-size: 14px; }
.nrl .nrl__ea a { color: #1a5a8a; }

@container nrl (max-width: 380px) { .nrl .nrl__th { flex-basis: 96px; width: 96px; } }

/* a roomy column: wider thumbnails, the teaser line, a hero first row */
@container nrl (min-width: 640px) {
	.nrl .nrl__it { gap: 18px; padding: 18px 0; }
	.nrl .nrl__th { flex-basis: 176px; width: 176px; }
	.nrl .nrl__t { font-size: 17px; }
	.nrl .nrl__d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 13px; line-height: 1.7; color: #555; }
	.nrl .nrl__mt { font-size: 12.5px; }
	.nrl .nrl__it--hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center; padding: 20px 0 22px; }
	.nrl .nrl__it--hero .nrl__th { flex: none; width: auto; aspect-ratio: 800 / 566; }
	.nrl .nrl__it--hero .nrl__t { font-size: 21px; line-height: 1.55; -webkit-line-clamp: 5; }
	.nrl .nrl__it--hero .nrl__d { font-size: 14px; -webkit-line-clamp: 4; margin-top: 10px; }
}

/* a wide column: the ranking moves into a right rail beside the rows */
@container nrl (min-width: 1040px) {
	.nrl .nrl__g { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; grid-auto-rows: max-content; }
	.nrl .nrl__g > * { grid-column: 1; }
	.nrl .nrl__g > .nrl__rail { grid-column: 2; grid-row: 1 / span 120; align-self: start; position: sticky; top: 16px; margin: 0; }
}

/* ---- the TOP strip: a swipe row of cards on a narrow block (the next card peeks), a hero plus compact rows on a wide one */
.nrt .nrt__h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 10px; }
.nrt .nrt__ht { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1.5; font-weight: 700; color: #1a1a1a; letter-spacing: normal; }
.nrt .nrt__ht::before { content: ""; width: 5px; height: 18px; background: #3a6f8f; border-radius: 2px; }
.nrt .nrt__ht::after { content: none; }
.nrt .nrt__all { margin: 0 0 0 auto; font-size: 13px; line-height: 1.5; font-weight: 700; color: #1a5a8a; text-decoration: none; white-space: nowrap; }
.nrt .nrt__all:hover { text-decoration: underline; }
.nrt .nrt__g { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 0 8px; -webkit-overflow-scrolling: touch; }
.nrt .nrt__it { flex: 0 0 min(78%, 320px); flex-direction: column; gap: 8px; padding: 0; border: 0; scroll-snap-align: start; }
.nrt .nrt__it .nrl__th { flex: none; width: 100%; }
.nrt .nrt__it .nrl__t { font-size: 14px; -webkit-line-clamp: 3; }

@container nrt (min-width: 640px) {
	.nrt .nrt__g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); gap: 0 28px; overflow: visible; padding: 0; }
	.nrt .nrt__it { flex-direction: row; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #eee; grid-column: 2; }
	.nrt .nrt__it .nrl__th { flex: 0 0 120px; width: 120px; }
	.nrt .nrt__it .nrl__t { font-size: 14.5px; -webkit-line-clamp: 2; }
	.nrt .nrt__it .nrl__mt { margin: 0 0 4px; }
	.nrt .nrt__it--hero { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 6px; border: 0; align-self: start; }
	.nrt .nrt__it--hero .nrl__th { flex: none; width: 100%; aspect-ratio: 16 / 9; }
	.nrt .nrt__it--hero .nrl__t { font-size: 19px; line-height: 1.55; -webkit-line-clamp: 3; }
	.nrt .nrt__it--hero .nrl__d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 13px; line-height: 1.7; color: #555; }
	.nrt .nrt__it:nth-child(2) { padding-top: 0; }
	.nrt .nrt__it:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---- private preview mark (a valid token: the block may show unpublished articles) */
.nrl__pv { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border: 1px solid #c9a227; border-radius: 999px; background: #fff8dc; color: #6b5300; font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; }

/* ---- inside the portal (2026-11-12: the strip sits between the 感想 block and the sales): the heading IS the portal's section heading (.nu-head / .nu-head__t carry its size, weight and colour: no accent bar), the link right-aligned on the heading line */
.nrm-portal .nrt .nrt__h { margin: 0 0 14px; }
.nrm-portal .nrt .nrt__ht { display: block; font-size: var(--nu-fs-h2, 22px); font-weight: 800; line-height: 1.35; }
.nrm-portal .nrt .nrt__ht::before { content: none; }
.nrm-portal .nrt .nrt__all { font-size: var(--nu-fs-s, 13px); }