/* LightSite blog (SPEC §19): post cards, list pages, post head, related posts, pagination, "Зображення" block.
   Loaded only on pages that use them (Ctx::$memo['blog_css'] → layout), so other pages keep exactly their assets.
   Brand colours only from theme tokens; section scheme vars (--_fg, --_muted, --_line, --_card, --_ink) as in theme.css. */

/* list pages */
.ls-blog-head{max-width:820px;margin-bottom:clamp(20px,3vw,32px)}
.ls-blog-head__title{font-size:var(--ls-fs-h1,clamp(2rem,1.5rem + 2vw,3rem));line-height:1.12}
.ls-blog-head__intro{margin-top:12px;color:var(--_muted);font-size:var(--ls-fs-lead,1.15rem)}
.ls-blog-nav{margin-bottom:clamp(20px,3vw,32px)}
.ls-blog-nav ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.ls-blog-nav__link{display:inline-block;padding:6px 14px;border:1px solid var(--_line);border-radius:999px;text-decoration:none;font-size:var(--ls-fs-sm,.92rem);color:var(--_fg);transition:border-color .2s,background .2s}
.ls-blog-nav__link:hover{border-color:var(--ls-accent)}
.ls-blog-nav__link.is-on{background:var(--ls-primary);border-color:var(--ls-primary);color:var(--ls-on-primary)}
.ls-blog-empty{color:var(--_muted)}
.ls-blog-rss{margin-top:24px;font-size:var(--ls-fs-sm,.92rem)}
.ls-blog-rss a{color:var(--_muted)}
.ls-blog-more{margin-top:clamp(20px,3vw,32px);text-align:center}

/* cards */
.ls-posts{list-style:none;display:grid;gap:clamp(16px,2.4vw,28px)}
.ls-posts--cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.ls-posts--c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ls-posts--c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ls-posts--c6{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
@media (max-width:959px){.ls-posts--cards.ls-posts--c3,.ls-posts--cards.ls-posts--c4{grid-template-columns:repeat(2,minmax(0,1fr))}.ls-posts--cards.ls-posts--c6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){.ls-posts--cards{grid-template-columns:minmax(0,1fr) !important}.ls-posts--cards.ls-posts--c6{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
.ls-post-card__in{height:100%;display:flex;flex-direction:column;background:var(--_card,var(--ls-bg));border:1px solid var(--_card-line,var(--_line));border-radius:var(--ls-r-lg,var(--ls-radius));overflow:hidden;position:relative}
.ls-post-card__img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ls-surface)}
.ls-post-card__photo{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ls-ease,ease)}
.ls-post-card__img--empty{display:grid;place-items:center;color:color-mix(in srgb,var(--_muted) 55%,#0000)}
.ls-post-card__img--empty .ls-icon{width:clamp(32px,4vw,48px);height:clamp(32px,4vw,48px);stroke-width:1.4}
.ls-posts--c6 .ls-post-card__body{padding:14px}
.ls-posts--c6 .ls-post-card__title{font-size:clamp(.95rem,.9rem + .2vw,1.05rem)}
.ls-post-card:hover .ls-post-card__photo{transform:scale(1.03)}
.ls-post-card__body{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,2vw,22px);flex:1}
.ls-post-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:var(--ls-fs-xs,.82rem);color:var(--_muted)}
.ls-post-card__cat{color:var(--_ink,var(--ls-accent-ink));font-weight:600;text-decoration:none;position:relative;z-index:1}
.ls-post-card__cat:hover{text-decoration:underline}
.ls-post-card__title{font-size:clamp(1.08rem,1rem + .35vw,1.3rem);line-height:1.3}
.ls-post-card__title a{text-decoration:none;color:inherit}
.ls-post-card__title a::after{content:"";position:absolute;inset:0}
.ls-post-card__title a:hover{text-decoration:underline}
.ls-post-card__title a:focus-visible{outline:none}
.ls-post-card__in:focus-within{outline:2px solid var(--_ink);outline-offset:3px}
.ls-post-card__excerpt{color:var(--_muted);font-size:var(--ls-fs-sm,.95rem);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* list style: rows with a small photo */
.ls-posts--list{grid-template-columns:minmax(0,1fr);gap:0}
.ls-posts--list .ls-post-card{border-top:1px solid var(--_line)}
.ls-posts--list .ls-post-card:last-child{border-bottom:1px solid var(--_line)}
.ls-posts--list .ls-post-card__in{flex-direction:row;gap:clamp(14px,2.4vw,28px);background:none;border:0;border-radius:0;padding-block:clamp(16px,2vw,24px)}
.ls-posts--list .ls-post-card__img{flex:0 0 clamp(110px,24vw,240px);border-radius:var(--ls-r,var(--ls-radius));align-self:flex-start}
.ls-posts--list .ls-post-card__body{padding:0}
@media (max-width:479px){.ls-posts--list .ls-post-card__in{flex-direction:column}.ls-posts--list .ls-post-card__img{flex-basis:auto;width:100%}}

/* pagination */
.ls-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:clamp(28px,4vw,44px)}
.ls-pager__num,.ls-pager__step{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding-inline:10px;border:1px solid var(--_line);border-radius:var(--ls-r-sm,8px);text-decoration:none;color:var(--_fg);font-weight:600}
.ls-pager a:hover{border-color:var(--ls-accent)}
.ls-pager__num.is-current{background:var(--ls-primary);border-color:var(--ls-primary);color:var(--ls-on-primary)}
.ls-pager__gap{padding-inline:4px;color:var(--_muted)}

/* post page */
.ls-post-head-block{padding-bottom:0 !important}
.ls-post-head{max-width:820px;margin-inline:auto}
.ls-post-head__cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ls-post-head__cat{font-size:var(--ls-fs-xs,.82rem);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--_ink,var(--ls-accent-ink));text-decoration:none}
.ls-post-head__cat:hover{text-decoration:underline}
.ls-post-head__title{font-size:var(--ls-fs-h1,clamp(2rem,1.5rem + 2vw,3rem));line-height:1.14}
.ls-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:16px;color:var(--_muted);font-size:var(--ls-fs-sm,.92rem)}
.ls-post-head__lead{margin-top:18px;font-size:var(--ls-fs-lead,1.15rem);color:var(--_fg)}
.ls-post-cover{max-width:1040px;margin:clamp(24px,3vw,36px) auto 0;border-radius:var(--ls-r-lg,var(--ls-radius));overflow:hidden;background:var(--ls-surface)}
.ls-post-cover__img{width:100%;max-height:640px;object-fit:cover}
.ls-post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:820px;margin:0 auto clamp(28px,4vw,48px)}
.ls-post-tags ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.ls-post-tags__label{color:var(--_muted);font-size:var(--ls-fs-sm,.92rem)}
.ls-post-tag{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--ls-surface);color:var(--_fg);text-decoration:none;font-size:var(--ls-fs-sm,.92rem)}
.ls-post-tag:hover{text-decoration:underline}
.ls-related__title{font-size:var(--ls-fs-h3,clamp(1.35rem,1.15rem + .8vw,1.75rem));margin-bottom:clamp(16px,2.4vw,24px)}
/* body blocks of a post read in one column (post layout "wide" / "bare": the content width) */
.ls-main:has(.ls-post-head:not(.ls-post-head--wide)) > .ls-block--text .ls-text,
.ls-main:has(.ls-post-head:not(.ls-post-head--wide)) > .ls-block--html .ls-container{max-width:860px;margin-inline:auto}
.ls-post-head-block--bare{padding:0 !important}
.ls-post-head-block--bare + .ls-block{padding-top:0}
/* "bare": the article brings its own banner and containers – its code blocks span the viewport */
.ls-main:has(.ls-post-head-block--bare) > .ls-block--html > .ls-container{max-width:none;padding-inline:0}

/* "Зображення" block */
.ls-figure{margin:0 auto;max-width:960px}
.ls-figure--wide{max-width:none}
.ls-figure img{width:100%;border-radius:var(--ls-r-lg,var(--ls-radius))}
.ls-figure figcaption{margin-top:10px;color:var(--_muted);font-size:var(--ls-fs-sm,.92rem);text-align:center}