/* [Ad slots] (owner, 2026-10-20) — every ad place of the theme, printed by one renderer: {ng_ad_slot} /
   ng_ad_body (includes/niguro/ads/slot.php) with __ng_ad_slot.tpl. Loaded on every page (_head.tpl): the
   header / footer places and the sidebars can be anywhere.
   Two kinds, the same "Sponsored" / "Advertisement" kicker top-left, the theme's card (12px radius, tokens):
   - .ng-adcard   an Ads Manager campaign as a native card: image, advertiser, title, short text, a pill CTA.
                  Looks: --feed (between posts), --side (a right column), --article (in / under a story).
   - .ng-adslot   an admin's script ad (AdSense…) as pasted, centred at its own size, never wider than the
                  screen; on white by day (creatives expect white), a slightly lighter card surface at night.
   The space around an ad is the space around the cards it sits with (.card in the main / side columns:
   12px / 16px from 768px, 16px in a side column); in a story 24px above and below. An empty pool prints
   nothing, so there is never an empty box or gap. */

:root {
  --ng-ad-paper: hsl(0 0% 100%);       /* the script ads' surface by day */
  --ng-ad-paper-ink: hsl(220 14% 20%);
  --ng-ad-gap: 24px;                   /* above / below an ad inside a story */
}
body.night-mode {
  --ng-ad-paper: color-mix(in srgb, var(--ng-card) 90%, hsl(0 0% 100%));
  --ng-ad-paper-ink: var(--ng-ink);
}

/* the feed's list item, like the strips' */
.ng-ad-li { list-style: none; }


/* ---------- the kicker (both kinds) ---------- */
.ng-adcard__label,
.ng-adslot .ng-adslot__label { display: block; min-width: 0; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; color: var(--ng-faint); }
.ng-adcard__label .ng-adwhy { font-size: inherit; color: inherit; }
.ng-adcard__label a, .ng-adslot .ng-adslot__label a { color: inherit; text-decoration: none; }
.ng-adcard__label a:hover, .ng-adslot .ng-adslot__label a:hover { color: var(--ng-brand); text-decoration: underline; }


/* ---------- script ads ---------- */
.ng-adslot.card { display: block; min-width: 0; max-width: 100%; padding: 10px 12px 12px; overflow: hidden; background: var(--ng-ad-paper); color: var(--ng-ad-paper-ink); text-align: center; font-size: 14px; line-height: 1.5; }
.ng-adslot.card .ng-adslot__label { margin-bottom: 8px; }
.ng-adslot .ng-adslot__unit { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; min-width: 0; overflow: hidden; }
.ng-adslot .ng-adslot__unit > * { max-width: 100%; }
.ng-adslot .ng-adslot__unit :is(ins, iframe, img, video, object, embed) { max-width: 100%; }
.ng-adslot .ng-adslot__unit ins.adsbygoogle { display: block; min-width: min(250px, 100%); }


/* ---------- in-house cards ---------- */
.ng-adcard.card { --ng-ad-pad: 12px; display: block; min-width: 0; max-width: 100%; padding: 0; overflow: hidden; container-type: inline-size; color: var(--ng-ink); text-align: left; }
.ng-adcard--feed.card { --ng-ad-pad: 16px; }
@media (min-width: 768px) { .ng-adcard--feed.card { --ng-ad-pad: 20px; } }   /* the post card's own padding (.post --ng-pg) */
.ng-adcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px var(--ng-ad-pad); }
.ng-adcard__report { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ng-sub); cursor: pointer; }
.ng-adcard__report:hover { background: var(--ng-fill); }
.ng-adcard__report .main-icon { fill: currentColor; }

.ng-adcard__media { display: block; aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--ng-fill); }
.ng-adcard .ng-adcard__media :is(img, video) { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; }

.ng-adcard__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-width: 0; padding: 12px var(--ng-ad-pad) 14px; }
.ng-adcard__by { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ng-sub); }
.ng-adcard .ng-adcard__avatar { flex: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; object-fit: cover; background: var(--ng-fill); }
.ng-adcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-adcard .ng-adcard__title { margin: 4px 0 0; font-family: var(--ng-font); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ng-ink-strong); overflow-wrap: anywhere; }
.ng-adcard .ng-adcard__title a { color: inherit; text-decoration: none; }
.ng-adcard .ng-adcard__title a:hover { text-decoration: underline; }
.ng-adcard .ng-adcard__text { display: -webkit-box; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.45; color: var(--ng-sub); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.ng-adcard__act { display: flex; margin-top: 8px; }
.ng-adcard .ng-adcard__cta { flex: none; padding-left: 16px; padding-right: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* feed: on a wide card the CTA sits at the right of the text, as on the feed's own cards */
@container (min-width: 440px) {
  .ng-adcard--feed .ng-adcard__body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .ng-adcard--feed .ng-adcard__body > :not(.ng-adcard__act) { grid-column: 1; }
  .ng-adcard--feed .ng-adcard__act { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}

/* side: compact, the CTA across the card */
.ng-adcard--side .ng-adcard__title { font-size: 15px; }
.ng-adcard--side .ng-adcard__text { font-size: 13.5px; }
.ng-adcard--side .ng-adcard__cta { flex: 1 1 auto; }

/* article: a framed card in the story; image beside the text when there is room */
.ng-adcard--article.card { border: 1px solid var(--ng-line); }
@container (min-width: 520px) {
  .ng-adcard--article .ng-adcard__in { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .ng-adcard--article .ng-adcard__media { position: relative; aspect-ratio: auto; min-height: 168px; margin-left: var(--ng-ad-pad); margin-bottom: var(--ng-ad-pad); border-radius: var(--ng-r-sm); }
  .ng-adcard.ng-adcard--article .ng-adcard__media :is(img, video) { position: absolute; inset: 0; }
  .ng-adcard--article .ng-adcard__body { align-content: center; padding-top: 0; padding-bottom: var(--ng-ad-pad); }
}


/* [Ad wide] (owner, 2026-10-20): on larger screens an in-house ad in the feed or in a story is a wide card: the
   picture on the left (rectangular), the details on the right, no Learn more button (the picture and the title
   are the links) */
@media (min-width: 1024px) {
  .ng-adcard:is(.ng-adcard--feed, .ng-adcard--article) .ng-adcard__in:has(> .ng-adcard__media) { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); column-gap: 18px; align-items: stretch; padding: 0 var(--ng-ad-pad) var(--ng-ad-pad); }
  .ng-adcard:is(.ng-adcard--feed, .ng-adcard--article) .ng-adcard__in:has(> .ng-adcard__media) .ng-adcard__media { position: relative; aspect-ratio: 1.91 / 1; min-height: 0; margin: 0; border-radius: var(--ng-r); }
  .ng-adcard.ng-adcard:is(.ng-adcard--feed, .ng-adcard--article) .ng-adcard__media :is(img, video) { position: absolute; inset: 0; }
  .ng-adcard:is(.ng-adcard--feed, .ng-adcard--article) .ng-adcard__in:has(> .ng-adcard__media) .ng-adcard__body { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0; }
  .ng-adcard:is(.ng-adcard--feed, .ng-adcard--article) .ng-adcard__in:has(> .ng-adcard__media) .ng-adcard__title { margin: 0; font-size: 18px; }
  .ng-adcard:is(.ng-adcard--feed, .ng-adcard--article) .ng-adcard__in:has(> .ng-adcard__media) .ng-adcard__text { -webkit-line-clamp: 3; }
  .ng-adcard:is(.ng-adcard--feed, .ng-adcard--article) .ng-adcard__act { display: none; }
}

/* ---------- where they sit ---------- */
/* a story's body (news .nwa-content, a blog's .ng-blog__prose): the prose styles stay out of the ad */
:is(.nwa-content, .ng-blog__prose) :is(.ng-adcard, .ng-adslot).card { margin: var(--ng-ad-gap) 0; font-size: 14px; line-height: 1.5; }
.ng-news .nwa-content .ng-adslot.card { margin: var(--ng-ad-gap) 0; }
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card :is(p, h3) { margin-left: 0; margin-right: 0; }
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card .ng-adcard__title { margin: 4px 0 0; font-size: 16px; line-height: 1.3; }
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card .ng-adcard__text { margin: 0; font-size: 14px; line-height: 1.45; }
:is(.nwa-content, .ng-blog__prose) :is(.ng-adcard, .ng-adslot).card a { text-decoration: none; }
:is(.nwa-content, .ng-blog__prose) :is(.ng-adcard, .ng-adslot).card :is(.ng-adcard__label, .ng-adslot__label) a,
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card .ng-adcard__title a { color: inherit; }
:is(.nwa-content, .ng-blog__prose) :is(.ng-adcard, .ng-adslot).card :is(.ng-adcard__label, .ng-adslot__label) a:hover { color: var(--ng-brand); text-decoration: underline; }
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card .ng-adcard__title a:hover { text-decoration: underline; }
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card a.ng-adcard__cta { color: var(--bs-btn-color); }
/* the blog prose forces every image to height: auto !important (blogs.css): the card's image and avatar keep their box */
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card .ng-adcard__media :is(img, video) { height: 100% !important; max-width: none !important; border-radius: 0; }
:is(.nwa-content, .ng-blog__prose) .ng-adcard.card .ng-adcard__avatar { height: 24px !important; border-radius: 50%; }
/* the end-of-story slot, under the body */
.nwa-content + .ng-adcard.card, .nwa-content ~ :is(.ng-adcard, .ng-adslot).card,
.ng-blog__main > :is(.ng-adcard, .ng-adslot).card { margin: var(--ng-ad-gap) 0; }

/* the top of the market / jobs / offers / courses / movies lists (their column spaces its own items) */
.ng-hub__main > :is(.ng-adcard, .ng-adslot).card { margin: 0; }

/* a single post below 1280px: its right column shows under the post with only the ad in it (niguro.css) */
@media (max-width: 1279.98px) {
  .ng-frame--post .ng-col-side.has-adslot { padding-top: 12px; }   /* the cards' gap below the post */
  .ng-frame--post .ng-col-side.has-adslot > .ng-adcard { display: block; }
}
@media (min-width: 768px) and (max-width: 1279.98px) { .ng-frame--post .ng-col-side.has-adslot { padding-top: 16px; } }

/* the header / footer places (the core's site-wide ads) */
.ng-adbanner { margin-top: 16px; margin-bottom: 16px; }
.ng-adbanner > .card { margin: 0; }


/* [Spotlight carousel] niguro [v5 port: Ads] (owner, 2026-10-23): up to 5 boosted posts as ONE card at the top of the
   home feed (__ng_spotlight_carousel.tpl; v5's "Promoted Posts" carousel in our look). A feed strip
   (niguro.css "Feed strips": scroll-snap, the [Scroll arrows] on hover with a mouse): one post per view with the next
   one peeking, more of it on wider columns. Each slide is a compact post preview in the theme's card tokens. */
.ng-spot .ng-spot__track { --ng-strip-n: 1.12; grid-auto-columns: calc((100% - var(--ng-strip-gap)) / var(--ng-strip-n)); --ng-strip-gap: 10px; }
@media (min-width: 480px) { .ng-spot .ng-spot__track { --ng-strip-n: 1.35; } }
@media (min-width: 768px) { .ng-spot .ng-spot__track { --ng-strip-n: 1.6; } }
.ng-spot__count { flex: none; font-size: 12.5px; font-weight: 500; color: var(--ng-sub); }
.ng-spot__card {
  display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden;
  border: 1px solid var(--ng-line); border-radius: var(--ng-r); background: var(--ng-card); color: var(--ng-ink);
}
.ng-spot__by { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; }
.ng-spot__av {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ng-fill) center / cover no-repeat; color: var(--ng-sub);
}
.ng-spot__av .ng-ico { width: 18px; height: 18px; }
.ng-spot__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ng-ink-strong) !important; text-decoration: none;
}
.ng-spot__name:hover { text-decoration: underline; }
.ng-spot__by .verified-badge { flex: none; display: inline-flex; }
.ng-spot .ng-spot__flag { flex: none; margin-left: auto; height: 20px; padding: 0 7px 0 6px; gap: 4px; font-size: 11.5px; line-height: 1; }
.ng-spot__flag .ni { width: 12px; height: 12px; }
.ng-spot__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ng-fill); }
.ng-spot .ng-spot__media img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; transition: scale .3s ease; }
.ng-spot__media:hover img { scale: 1.03; }
.ng-spot__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 0; color: inherit; text-decoration: none; }
.ng-spot__body:hover .ng-spot__title { text-decoration: underline; }
.ng-spot__title {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ng-ink-strong); overflow-wrap: anywhere;
}
.ng-spot__text {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font-size: 14px; line-height: 1.45; color: var(--ng-sub); overflow-wrap: anywhere;
}
/* a post without a picture: its text is the slide */
.ng-spot__body--text { flex: 1 1 auto; padding-top: 4px; }
.ng-spot__body--text .ng-spot__text { -webkit-line-clamp: 8; font-size: 15px; color: var(--ng-ink); }
.ng-spot__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 10px 12px 12px; }
.ng-spot__stats { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 12.5px; color: var(--ng-sub); }
.ng-spot__stats > span { display: inline-flex; align-items: center; gap: 4px; }
.ng-spot__stats .ng-ico { width: 15px; height: 15px; }
.ng-spot__time { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.ng-spot__cta { flex: none; font-size: 13px; font-weight: 600; color: var(--ng-brand); text-decoration: none; }
.ng-spot__cta:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ng-spot .ng-spot__media img { transition: none; } }