/* cho theme additions on top of the template's style.css */

.min-w-0 { min-width: 0; }
.h-200px { height: 200px; }
.object-fit-cover { object-fit: cover; }
.btn-vote.active { color: var(--bs-primary); }
.cho-card .card-title a, .entry-content { word-wrap: break-word; }
.entry-content img, .entry-content video { max-width: 100%; height: auto; border-radius: .5rem; }
.entry-content iframe { max-width: 100%; border: 0; border-radius: .5rem; }
.entry-content figure { margin: 1rem 0; }
.entry-content blockquote { border-left: 3px solid var(--bs-primary); padding-left: 1rem; margin: 1rem 0; }
.cho-figure-wide img { width: 100%; }

/* Pikabu-like clamp with fade */
.cho-clamp { position: relative; max-height: 560px; overflow: hidden; transition: max-height .3s ease; }
.cho-clamp.cho-clamp-sm { max-height: 4.8em; }
.cho-clamp.is-open { max-height: none; }
.cho-clamp-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; display: none;
	background: linear-gradient(to bottom, rgba(var(--bs-body-bg-rgb), 0), var(--bs-card-bg, var(--bs-body-bg)) 95%); }
.cho-clamp-sm .cho-clamp-fade { height: 2.4em; }
.cho-clamp.is-clamped:not(.is-open) .cho-clamp-fade { display: block; }
.cho-expand { font-weight: 500; }

/* vc.ru-like cards */
.cho-card .entry-content { color: var(--bs-heading-color); }
.cho-card .entry-content figure { margin: 1rem 0; }
.cho-card-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; object-fit: cover; }
.cho-pill { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--bs-border-color); border-radius: 50rem; padding: .2rem .7rem; font-size: .875rem; color: var(--bs-heading-color); }
.cho-vote-pill { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: 50rem; overflow: hidden; }
.cho-vote-pill .btn { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .65rem; font-size: .875rem; border: 0; border-radius: 0; }
.cho-vote-pill .cho-vote-up { color: var(--bs-success); }
.cho-vote-pill .cho-vote-down { color: var(--bs-danger); border-left: 1px solid var(--bs-border-color); }
.cho-vote-pill .cho-vote-up.active { background: rgba(var(--bs-success-rgb), .1); }
.cho-vote-pill .cho-vote-down.active { background: rgba(var(--bs-danger-rgb), .1); }

/* 18+ rubric: blurred until "Показать" */
.cho-nsfw:not(.is-shown) > :not(.cho-nsfw-cover):not(.cho-clamp-fade) { filter: blur(28px); pointer-events: none; user-select: none; }
.cho-nsfw .cho-nsfw-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 5rem; gap: .5rem; text-align: center; background: rgba(var(--bs-body-bg-rgb), .35); color: var(--bs-heading-color); }
.cho-nsfw.is-shown .cho-nsfw-cover { display: none; }

/* Best answer */
.cho-best-answer > .d-flex { background: rgba(var(--bs-success-rgb), .06); border-radius: .5rem; padding: .75rem; }

/* Notifications */
.badge-unread { background: rgba(var(--bs-primary-rgb), .06); }

/* Feed tabs scroll on mobile */
[data-cho-tabs] { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
[data-cho-tabs]::-webkit-scrollbar { display: none; }
[data-cho-tabs] .nav-link { white-space: nowrap; }

/* Slider: 4:3 cards like the template */
.cho-slide .card-img { aspect-ratio: 4 / 3; object-fit: cover; }
.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }

/* Space for the mobile "Меню" bar */
@media (max-width: 1399.98px) { main { padding-bottom: 3rem; } }

.comment-wrap .children { list-style: none; padding-left: 1.5rem; }
.cho-pagination .nav-links { display: flex; gap: .25rem; justify-content: center; }
.cho-pagination .page-numbers { padding: .375rem .75rem; border-radius: .375rem; background: var(--bs-card-bg, #fff); }
.cho-pagination .page-numbers.current { background: var(--bs-primary); color: #fff; }

/* Telegram login widget: some browsers paint the iframe corners black. */
iframe[id^="telegram-login"] { border-radius: 8px; color-scheme: normal; }

/* Brand colours, changed in Customizer → Настройки cho → Цвета и колонки (variables printed by inc/setup.php). */
:root {
	--cho-write: #ea580c; --cho-write-text: #fff;
	--cho-follow: #1286ff; --cho-follow-text: #fff;
	--cho-link: #1286ff;
	--cho-poll: #0cbc87; --cho-poll-text: #fff;
}
.btn-write {
	--bs-btn-color: var(--cho-write-text);
	--bs-btn-bg: var(--cho-write);
	--bs-btn-border-color: var(--cho-write);
	--bs-btn-hover-color: var(--cho-write-text);
	--bs-btn-hover-bg: color-mix(in srgb, var(--cho-write) 85%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--cho-write) 85%, #000);
	--bs-btn-active-color: var(--cho-write-text);
	--bs-btn-active-bg: color-mix(in srgb, var(--cho-write) 85%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--cho-write) 85%, #000);
}
[data-cho-follow-cat].btn-success, [data-cho-follow-user].btn-success {
	--bs-btn-color: var(--cho-follow-text);
	--bs-btn-bg: var(--cho-follow);
	--bs-btn-border-color: var(--cho-follow);
	--bs-btn-hover-color: var(--cho-follow-text);
	--bs-btn-hover-bg: color-mix(in srgb, var(--cho-follow) 85%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--cho-follow) 85%, #000);
	--bs-btn-active-color: var(--cho-follow-text);
	--bs-btn-active-bg: color-mix(in srgb, var(--cho-follow) 85%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--cho-follow) 85%, #000);
}
[data-cho-follow-cat].btn-success-soft, [data-cho-follow-cat].btn-success-soft:hover,
[data-cho-follow-user].btn-success-soft, [data-cho-follow-user].btn-success-soft:hover {
	color: var(--bs-body-color);
	background-color: color-mix(in srgb, var(--cho-follow) 14%, transparent);
	border-color: transparent;
}
/* Smaller buttons like on vc.ru: "Подписаться", edit pencil, tags. */
.btn.cho-btn-xs { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .75rem; --bs-btn-border-radius: 50rem; }
/* Polls. */
[data-cho-poll] .progress-bar.bg-success { background-color: var(--cho-poll) !important; color: var(--cho-poll-text); }
[data-cho-poll] .bi-check-circle-fill.text-success { color: var(--cho-poll) !important; }
[data-cho-poll-option].btn-outline-success {
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-border-color: var(--cho-poll);
	--bs-btn-hover-color: var(--cho-poll-text);
	--bs-btn-hover-bg: var(--cho-poll);
	--bs-btn-hover-border-color: var(--cho-poll);
	--bs-btn-active-color: var(--cho-poll-text);
	--bs-btn-active-bg: var(--cho-poll);
	--bs-btn-active-border-color: var(--cho-poll);
}

/* Rubric icons in the left menu, "Ресурсы" block, lower images in feed cards. */
.cho-cat-ico { width: 22px; height: 22px; object-fit: cover; flex-shrink: 0; font-size: .7rem !important; }
.cho-resources .nav-link { display: flex; align-items: center; padding: .35rem 0; color: var(--bs-heading-color); }
.cho-card .entry-content img, .cho-card figure img, .single .entry-content img, .single .cho-zoomable img { max-height: 340px; object-fit: cover; }
/* Rubric list: icons under the menu icons, not indented. */
.nav-link-sidebar #choCats .nav-item { padding-left: 0; }
#choCats .cho-cat-ico { margin: 0 5px; }

/* Post text a bit larger (like vc.ru), quotes about the same size; photo captions ("Источник: …"). */
.entry-content { font-size: 1.0625rem; line-height: 1.6; }
.entry-content .blockquote, .entry-content blockquote { font-size: 1.125rem; }
.entry-content .blockquote > :last-child { margin-bottom: 0; }
.blockquote-footer:empty { display: none; }
.entry-content figcaption, .cho-caption { font-size: .8125rem; line-height: 1.4; color: var(--bs-secondary-color); margin-top: .5rem; text-align: left !important; }

/* Links in posts and "Читать далее" in the same blue as "Подписаться". */
.entry-content a:not(.btn), .cho-source a { color: var(--cho-link); }
.entry-content a:not(.btn):hover, .cho-source a:hover { color: color-mix(in srgb, var(--cho-link) 82%, #000); }
.btn.cho-expand { --bs-btn-color: var(--cho-link); --bs-btn-hover-color: color-mix(in srgb, var(--cho-link) 82%, #000); --bs-btn-active-color: color-mix(in srgb, var(--cho-link) 82%, #000); }

/* Dark theme like vc.ru: page #161616, blocks #232323, grey buttons #333. */
[data-bs-theme=dark] { --bs-body-bg: #161616; --bs-body-bg-rgb: 22, 22, 22; --bs-mode: #232323; --bs-light: #333333; }

/* Side columns follow the feed on scroll, like vc.ru (top is set in cho.js for tall columns). */
@media (min-width: 992px) { .cho-sticky:not(.cho-sticky-xl) { position: sticky; top: 80px; } }
@media (min-width: 1200px) { .cho-sticky-xl { position: sticky; top: 80px; } }

/* Gallery block: several photos in a grid. */
/* Gallery like the block editor's: two photos in a row (three when there are 5+), a photo left alone fills the row. */
.cho-gallery { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.cho-gallery a { flex: 1 1 calc(50% - .25rem); min-width: 0; }
.cho-gallery a:first-child:nth-last-child(n+5), .cho-gallery a:first-child:nth-last-child(n+5) ~ a { flex-basis: calc(33.333% - .34rem); }
.cho-gallery img { display: block; width: 100%; height: clamp(140px, 28vw, 200px); object-fit: cover; border-radius: .5rem; }
.cho-gallery a:last-child:nth-child(odd):not(:nth-child(n+5)) img { height: clamp(200px, 50vw, 340px); }

/* Photo zoom on the same page. */
.entry-content img, .cho-zoomable img, .cho-gallery a img { cursor: zoom-in; }
.entry-content a:not(.cho-gallery a) img { cursor: pointer; }
.cho-zoom { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .9); cursor: zoom-out; }
.cho-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .5rem; }

/* Logo: keep proportions (the <img> has width/height attributes from the media library). */
.navbar-brand .navbar-brand-item { width: auto; }

/* Columns like on vc.ru; widths come from the Customizer (--cho-col-*). */
:root { --cho-col-left: 220px; --cho-col-main: 680px; --cho-col-right: 300px; }
@media (min-width: 1200px) {
	.cho-container { max-width: calc(var(--cho-col-left) + var(--cho-col-main) + var(--cho-col-right) + 4.5rem); }
	.cho-col-left { width: var(--cho-col-left); }
	.cho-col-main { max-width: var(--cho-col-main); min-width: 0; }
	.cho-col-right { width: var(--cho-col-right); }
}

/* Reactions (pikabu-like). */
.cho-reactions { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.cho-react { display: inline-flex; align-items: center; gap: .3rem; height: 2rem; padding: 0 .65rem; border: 1px solid transparent; border-radius: 1rem; background: var(--bs-light); color: var(--bs-body-color); font-size: .875rem; line-height: 1; }
.cho-react:hover { border-color: var(--bs-border-color); }
.cho-react.active { border-color: var(--cho-follow); background: color-mix(in srgb, var(--cho-follow) 12%, transparent); }
.cho-react span { font-size: .8125rem; }
.cho-react-add { color: var(--bs-secondary-color); gap: 0; }
.cho-react-picker { min-width: 0; width: 13.5rem; }
.cho-react-picker .btn { width: 2.25rem; height: 2.25rem; font-size: 1.15rem; line-height: 1; margin: .1rem; }
.cho-react-picker .btn.active { background: color-mix(in srgb, var(--cho-follow) 18%, transparent); }

/* Popular comments: three lines of text. */
.cho-line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Profile tabs on one line; scroll sideways on phones. */
.cho-profile-tabs { overflow-x: auto; scrollbar-width: none; }
.nav.cho-profile-tabs .nav-link { padding-left: .5rem; padding-right: .5rem; font-size: .9375rem; }

/* Instagram, Telegram, Threads posts: own width and height. */
.cho-embed-social { margin: 1rem 0; }
/* color-scheme like Telegram's own widget: otherwise a dark OS with the light site paints the iframe black. */
.cho-embed-social iframe { display: block; width: 100%; max-width: 540px; margin: 0 auto; border: 0; border-radius: .5rem; background: transparent; color-scheme: light dark; }
/* A card with .card-body in the main column must not stretch when the feed below is short. */
.cho-col-main > .card-body { flex-grow: 0; }

/* Left menu like vc.ru: plain icons, soft background on hover and on the current item. */
.cho-side-nav { gap: 2px; }
.cho-side-nav .nav-link { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: .75rem; font-size: 1rem; background: none; color: var(--bs-heading-color); font-weight: 400; text-align: left; }
.cho-side-nav .nav-link i { font-size: 1.35rem; width: 1.6rem; text-align: center; flex-shrink: 0; }
.cho-side-nav .nav-link:hover, .cho-side-nav .nav-link.active { background-color: rgba(var(--bs-emphasis-color-rgb), .06); color: var(--bs-heading-color); }
.cho-side-nav .cho-cat-ico { width: 1.6rem; height: 1.6rem; margin: 0; }
.cho-side-title { padding: 0 .75rem; margin: 1.5rem 0 .4rem; font-size: .875rem; color: var(--bs-secondary-color); }
.cho-side-title a { font-size: .8rem; }
.cho-resources .nav-link { padding: .6rem .75rem; }

/* Rounder cards like vc.ru. */
.card { --bs-card-border-radius: 14px; --bs-card-inner-border-radius: 13px; }
.cho-col-main > .bg-mode.rounded, .cho-col-right .bg-mode.rounded { border-radius: 14px !important; }

/* "Новости дня" block above the feed. */
.cho-news-item { line-height: 1.35; }
.cho-news-item a.heading-color { font-weight: 400; }
.cho-news-comments { margin-left: .35rem; white-space: nowrap; font-size: .85rem; color: var(--bs-secondary-color); }
.cho-news-comments i { margin-right: .25rem; }
.cho-news-period { font-weight: 400; font-size: .9375rem; }
.cho-rates { column-gap: .75rem; font-size: .8rem; }
.cho-rate { white-space: nowrap; }
/* Phones, like vc.ru: all rates in one row (label above the value), the period list below. */
@media (max-width: 575.98px) {
	.cho-news-head { flex-wrap: wrap; row-gap: .5rem; }
	.cho-rates { order: -1; width: 100%; margin-left: 0 !important; flex-wrap: nowrap !important; justify-content: space-between !important; overflow-x: auto; column-gap: .5rem; font-size: .8rem; }
	.cho-rate { display: flex; flex-direction: column; line-height: 1.25; }
	.cho-rate-label { font-size: .68rem; letter-spacing: .06em; }
}

/* Highlighted post (admin, for N days): colour from the Customizer. */
/* Through --bs-card-bg, so the "Показать полностью" fade ends in the same colour. */
.cho-card.cho-highlight { --bs-card-bg: var(--cho-highlight); background-color: var(--bs-card-bg); }
[data-bs-theme=dark] .cho-card.cho-highlight { --bs-card-bg: color-mix(in srgb, var(--cho-highlight) 18%, #232323); }
@supports (color: hsl(from red h s l)) {
	[data-bs-theme=dark] .cho-card.cho-highlight { --bs-card-bg: hsl(from var(--cho-highlight) h calc(s * .5) 16%); }
}

/* Comments and side blocks like vc.ru: regular weights, 15px text, small reactions. */
.cho-card-author, .cho-comment-author { color: var(--bs-heading-color); font-weight: 500; font-size: .9375rem; }
.cho-comment-text { font-size: .9375rem; line-height: 1.5; }
.cho-comment-text p { margin-bottom: .4rem; }
.cho-comment-reply a { color: var(--bs-secondary-color); }
.cho-comment-reply a:hover { color: var(--bs-heading-color); }
.cho-reactions-sm { gap: .25rem; }
.cho-reactions-sm .cho-react { height: 1.6rem; padding: 0 .5rem; font-size: .8125rem; }
.cho-side-block-title { font-size: 1.0625rem; font-weight: 600; margin: .25rem .25rem .75rem; }
.cho-side-item { padding: .5rem .25rem; font-size: .9375rem; line-height: 1.4; }
.cho-side-item + .cho-side-item { border-top: 1px solid var(--bs-border-color); padding-top: .75rem; }
.cho-react-sum { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .8125rem; color: var(--bs-secondary-color); }
.cho-react-sum > span { letter-spacing: -.15em; }
/* vc.ru weights: titles medium, bold text in posts (the lead) medium too. */
.cho-card .card-title, .cho-side-title-link { font-weight: 500; }
.entry-content b, .entry-content strong { font-weight: 500; }
.cho-side-item .cho-line-clamp { margin-bottom: .15rem; }
.cho-side-item .cho-react-sum { display: flex; margin-top: .4rem; }