/*
 * Editorial layer additions (journal, portfolio, reviews, masters, services,
 * search). Only glue for server-rendered states the frozen design system did
 * not need in the JS prototype; component rules stay in index.bundle.css.
 */

/* /raboty/: the page container is the prototype's old real-grid; its hub child spans it. */
.portfolio-real-grid:has(> .portfolio-hub) { display: block; padding-bottom: 0; }
.portfolio-real-grid > .portfolio-hub img { aspect-ratio: auto; }
.portfolio-real-grid > .portfolio-hub .portfolio-tile img { height: 100%; }
/*
 * The broad rule above lets imported case covers keep their native ratio.
 * In the yearly archive it also won the component's `height: 100%`, leaving
 * most of the intended collage frame empty. Give these three preview slots
 * explicit grid areas and let the cover crop fill each slot instead.
 */
.portfolio-real-grid > .portfolio-hub .portfolio-archive__collage {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
.portfolio-real-grid > .portfolio-hub .portfolio-archive__collage > img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: none;
	aspect-ratio: unset;
	object-fit: cover;
}
.portfolio-real-grid > .portfolio-hub .portfolio-archive__collage > img:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.portfolio-real-grid > .portfolio-hub .portfolio-archive__collage > img:nth-child(2) { grid-area: 1 / 2; }
.portfolio-real-grid > .portfolio-hub .portfolio-archive__collage > img:nth-child(3) { grid-area: 2 / 2; }
.portfolio-bento > [hidden], .journal-posts > [hidden], .reviews-grid > [hidden] { display: none !important; }
.journal-sort { display: flex; align-items: end; gap: .75rem; margin: 0 0 1.25rem; }
.journal-sort label { display: grid; gap: .25rem; color: var(--muted); font-size: .8125rem; }
.journal-sort select { min-width: 13rem; }
.journal-sort .button { min-height: 48px; }
@media (max-width: 560px) { .journal-sort { flex-wrap: wrap; } .journal-sort label,.journal-sort select { width: 100%; } }

/* Imported journal covers retain their source dimensions (including square
 * originals), which made otherwise identical cards jump from 500px to 768px
 * tall on a phone. The list is an editorial preview: crop its covers to one
 * calm frame and limit the summary while the article keeps its original media.
 */
/* Ширина — как у .content-card>img (на всю карточку поверх её отступов): width:100% с той же отрицательной маржой оставлял пустую полосу справа. */
.journal-post-card > img { width: calc(100% + var(--s8)); max-width: none; height: clamp(13rem, 32vw, 16rem); object-fit: cover; }
.journal-post-card > p:not(.material-meta) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Demo portraits (MASTERS-DEMO.md): same frame as the prototype image. */
.master-photo { position: relative; display: block; overflow: hidden; background: var(--surface-2); }
.master-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.master-card > .master-photo { flex: none; width: 150px; height: 180px; border-radius: var(--r-sm); }
.master-profile__grid > .master-photo { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; max-height: 420px; border-radius: var(--r-lg); }
.master-card__initial,.master-profile__initial{display:grid;place-items:center;background:var(--surface-2);color:var(--accent-text);font:400 clamp(2.5rem,5vw,4rem)/1 var(--display)}
.master-card__initial{width:150px;height:180px;border-radius:var(--r-sm)}
.master-profile__initial{width:100%;max-width:360px;aspect-ratio:4/5;border-radius:var(--r-lg)}
@media(max-width:700px){.master-card__initial{width:110px;height:132px}}
@media (max-width: 720px) {
	.master-card > .master-photo { width: 110px; height: 132px; }
}

/* Byline / team avatar without a confirmed photo: initial, as content-person. */
.portfolio-case__master > .content-person__avatar, .master-other > .content-person__avatar {
	display: inline-grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--surface-2); color: var(--accent-text); font-weight: 600; font-size: 1.125rem;
}

/* Case text under the gallery: full width of the content area. A section's H2 sits in
 * the narrow left column, its paragraphs, lists and tables in the wide right one
 * (flat markup, no wrappers: `h2` takes column 1, everything else column 2). */
.portfolio-case__story { margin-block: clamp(2rem, 5vw, 3.5rem); }
.portfolio-case__story .prose {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	row-gap: 0;
	padding-top: var(--s5);
	border-top: 1px solid var(--line);
}
.portfolio-case__story .prose > * { grid-column: 2; min-width: 0; margin-block: 0 var(--s4); }
.portfolio-case__story .prose > h2 {
	grid-column: 1;
	margin-block: 0 var(--s4);
	font: 400 clamp(1.35rem, 2vw, 1.75rem)/1.2 var(--display);
}
.portfolio-case__story .prose > h2:not(:first-child) { margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); }
.portfolio-case__story .prose > h2:not(:first-child) + * { margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); }
.portfolio-case__story .prose > h3 { margin-block: var(--s3) var(--s2); font: 600 1.0625rem/1.35 var(--sans); }
.portfolio-case__story .prose > .lead { grid-column: 1 / -1; max-width: 60rem; margin-bottom: var(--s6); font: 1.35rem/1.45 var(--display); color: var(--ink); }
.portfolio-case__story .prose p { max-width: 62rem; line-height: 1.65; }
.portfolio-case__story .prose ul,
.portfolio-case__story .prose ol { display: grid; gap: .5rem; padding: 0; list-style: none; max-width: 62rem; }
.portfolio-case__story .prose ul > li { position: relative; padding-left: 1.375rem; line-height: 1.55; }
.portfolio-case__story .prose ul > li::before { content: ""; position: absolute; left: .125rem; top: .68em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--primary); }
.portfolio-case__story .prose ol { counter-reset: case-step; }
.portfolio-case__story .prose ol > li { position: relative; padding-left: 1.75rem; counter-increment: case-step; }
.portfolio-case__story .prose ol > li::before { content: counter(case-step) "."; position: absolute; left: 0; color: var(--muted); font-weight: 600; }
.portfolio-case__story .prose a { text-decoration: underline; text-decoration-color: var(--outline); text-underline-offset: 3px; }
.portfolio-case__story .prose a:hover { color: var(--primary); }
.portfolio-case__story .content-table-wrap { border-radius: var(--r-sm); }
.portfolio-case__story .prose > h2:not(:first-child) + .content-table-wrap { padding-top: 0; margin-top: calc(var(--s4) + var(--s5)); }
.portfolio-case__story .content-table-wrap table { min-width: 34rem; font-size: .9375rem; }
.portfolio-case__story .content-table-wrap th { white-space: nowrap; }
.portfolio-case__story .content-table-wrap tbody th { background: transparent; color: var(--ink); font-weight: 600; white-space: normal; }
.portfolio-case__story .content-table-wrap tr:last-child > * { border-bottom: 0; }
@media (max-width: 900px) {
	.portfolio-case__story .prose { grid-template-columns: minmax(0, 1fr); }
	.portfolio-case__story .prose > *,
	.portfolio-case__story .prose > h2 { grid-column: 1; }
	.portfolio-case__story .prose > h2:not(:first-child) + * { margin-top: 0; padding-top: 0; border-top: 0; }
	.portfolio-case__story .prose > h2 { margin-bottom: var(--s3); }
	.portfolio-case__story .content-table-wrap table { min-width: 30rem; }
}

/* Case cover: 4:3 frame capped so H1 + cover + sidebar end inside the first screen
 * (1440x900, 1366x768): the photo gets what is left under the header, breadcrumbs
 * and H1. `object-fit: cover` with the per-image focus (`--case-focus-*`) keeps the
 * piece in view. */
.portfolio-case__head { padding-block: var(--s4) var(--s3); }
.portfolio-case__head .crumbs { margin-bottom: var(--s3); }
.portfolio-case__head h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.portfolio-case__overview { padding-block: var(--s3) var(--s10); }
@media (min-width: 901px) { .portfolio-case__overview { grid-template-columns: minmax(0, 2.15fr) minmax(280px, 1fr); } }
.portfolio-case__cover {
	overflow: hidden;
	display: block;
	aspect-ratio: 4 / 3;
	height: auto;
	min-height: 0;
	max-height: clamp(20rem, calc(100svh - 21rem), 42rem);
	background: var(--surface-2);
	border-radius: var(--r);
}
.portfolio-case__cover img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	aspect-ratio: auto;
	object-fit: cover;
}
@media (min-width: 901px) {
	.portfolio-case__cover { height: auto; min-height: 0; }
}
@media (max-width: 900px) {
	.portfolio-case__overview { grid-template-columns: minmax(0, 1fr); }
	.portfolio-case__cover { aspect-ratio: 4 / 3; max-height: none; }
}

/* Credits in the sidebar (below the project details): one bordered card per person. */
.portfolio-case__aside { gap: var(--s5); }
.portfolio-case__aside .portfolio-case__description { gap: var(--s4); }
.portfolio-case__aside .portfolio-case__team { padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.portfolio-case__aside .portfolio-case__team h2 { margin: 0 0 var(--s1); font-size: 1.15rem; }
.portfolio-case__aside .portfolio-case__master {
	margin: 0; gap: 12px; padding: .625rem .875rem;
	border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
	transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.portfolio-case__aside .portfolio-case__master:hover { border-color: var(--outline); background: var(--surface-2); }
.portfolio-case__aside .portfolio-case__master img,
.portfolio-case__aside .portfolio-case__master > .content-person__avatar { width: 44px; height: 44px; flex: none; }
.portfolio-case__aside .portfolio-case__master b { font-weight: 600; line-height: 1.25; }
.portfolio-case__aside .portfolio-case__master small { font-size: .8125rem; line-height: 1.3; }

/* Service request block that replaces the prototype's inline order form. */
.service-form {
	margin-block: clamp(2rem, 5vw, 4rem); padding: clamp(1.25rem, 4vw, 2.5rem);
	border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.service-form h2 { margin-top: .25rem; }
.service-form > p:not(.eyebrow) { max-width: 40rem; margin-top: .75rem; color: var(--muted); }
.service-form .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* Search: results region never widens the page. */
.search-groups .search-result { overflow-wrap: anywhere; }
.search-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 3rem; }
.search-pagination a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; }
.search-pagination a:hover, .search-pagination a[aria-current="page"] { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }

/* WP adds body.page on every page view; the prototype's router rule `.page{display:none}` then hides the whole document. */
body.page { display: block; animation: none; }


/* The contents and verified editorial roles form one sidebar context. Keeping
 * the cards compact preserves the same reading start as the article column. */
.sidebar-context { display: grid; gap: var(--s4); }
.sidebar-related { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sidebar-related h2 { margin: 0 0 var(--s2); font: 600 .875rem/1.3 var(--sans); }
.sidebar-related ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sidebar-related li { border-bottom: 1px solid var(--line); }
.sidebar-related a { display: flex; align-items: center; min-height: 44px; padding: .5rem .25rem; color: var(--ink); font-size: .875rem; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.sidebar-related a:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--outline); text-underline-offset: 3px; }
.editorial-summary { max-width: none; }

@media (max-width: 900px) {
	}

/* WP image width/height attributes must yield to the 4:3 portfolio card crop. */
.portfolio-case__other img { height: auto; }

/* /raboty/: bento. A 6-tile block repeats: one large 2x2 tile, one wide, four small.
 * Sizes are set per visible tile (`data-size`: l | w | s) by the server and re-dealt by
 * editorial.js after a kind filter, so `dense` flow leaves no holes. Large cells go first
 * in the feed (the cases with the most photos). */
.portfolio-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 15vw, 13.5rem); gap: 1rem; grid-auto-flow: dense; }
.portfolio-bento > .portfolio-tile { grid-column: span 1; grid-row: span 1; aspect-ratio: auto; }
.portfolio-bento > .portfolio-tile[data-size="l"] { grid-column: span 2; grid-row: span 2; }
.portfolio-bento > .portfolio-tile[data-size="w"] { grid-column: span 2; grid-row: span 1; }
.portfolio-bento > .portfolio-tile b { font-size: 1.15rem; }
.portfolio-bento > .portfolio-tile[data-size="l"] b { font-size: 1.75rem; }
.portfolio-bento > .portfolio-tile[data-size="w"] b { font-size: 1.35rem; }
.portfolio-bento > .portfolio-tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1000px) { .portfolio-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 26vw, 12rem); } }
/* Phone: one large tile, then two small in a row; no tiny cells. */
@media (max-width: 600px) {
	.portfolio-bento { gap: .625rem; grid-auto-rows: 10.5rem; }
	.portfolio-bento > .portfolio-tile[data-size="l"],
	.portfolio-bento > .portfolio-tile[data-size="w"] { grid-column: span 2; grid-row: span 1; }
	.portfolio-bento > .portfolio-tile[data-size="l"] { grid-row: span 2; }
	.portfolio-bento > .portfolio-tile b { font-size: 1rem; }
	.portfolio-bento > .portfolio-tile[data-size="l"] b, .portfolio-bento > .portfolio-tile[data-size="w"] b { font-size: 1.25rem; }
}

/* Byline block: author + reviewer in the article sidebar (journal, terms, materials).
 * One person per row so a full name fits on one or two lines (two columns wrapped it into three);
 * the whole row opens the profile through the stretched name link. */
.byline-cards { display: grid; gap: var(--s2); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.byline-cards__title { margin: 0; font: 600 .75rem/1.3 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.byline-cards__grid { display: grid; gap: 0; }
.byline-card { position: relative; display: flex; align-items: center; gap: var(--s4); min-width: 0; padding-block: var(--s3); }
.byline-card + .byline-card { border-top: 1px solid var(--line); }
.byline-card > img, .byline-card__initial { flex: none; width: 72px; height: 72px; border-radius: 50%; }
.byline-card > img { object-fit: cover; background: var(--surface-2); }
.byline-card__initial { display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text); font: 400 1.75rem/1 var(--display); }
.byline-card__text { display: grid; gap: .25rem; min-width: 0; }
.byline-card__name { font: 600 1rem/1.3 var(--sans); color: inherit; overflow-wrap: break-word; text-wrap: balance; text-decoration: none; }
a.byline-card__name::after { content: ""; position: absolute; inset: 0; }
.byline-card:hover a.byline-card__name { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.byline-card__meta { display: flex; align-items: center; gap: .3rem; color: var(--accent-text); font: 600 .75rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.byline-card__icon { flex: none; color: var(--accent-text); }
.byline-card__role { color: var(--muted); font-size: .8125rem; line-height: 1.35; }

/* Term sidebar: no inner scrollbar. It stays sticky only while it fits the viewport;
 * editorial.js sets .is-tall otherwise and the sidebar scrolls with the page. */
@media (min-width: 901px) {
	[data-page="term"] .article-layout > .sticky-sidebar { max-height: none; overflow: visible; }
	[data-page="term"] .article-layout > .sticky-sidebar.is-tall { position: static; }
}

/* Mobile contents: floating button stacked above the contact launcher + centred dialog (<1024px). */
.toc-fab, .toc-sheet { display: none; }
@media (max-width: 1023px) {
	.sidebar-nav.has-sheet { display: none; }
	.toc-fab {
		position: fixed;
		right: max(1rem, env(safe-area-inset-right));
		bottom: calc(max(1rem, env(safe-area-inset-bottom), var(--contact-cookie-offset, 0px)) + 4rem);
		z-index: 34;
		display: grid;
		place-items: center;
		width: 3.25rem;
		height: 3.25rem;
		padding: 0;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--surface);
		color: var(--ink);
		box-shadow: var(--shadow-warm, 0 .625rem 1.75rem rgb(38 28 19 / .24));
		transition: bottom var(--motion-fast) var(--ease, ease);
	}
	.toc-fab:hover, .toc-fab:focus-visible { border-color: var(--primary); color: var(--primary); }
	.toc-fab:focus-visible, .toc-sheet__close:focus-visible, .toc-sheet__body a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
	.toc-fab__icon, .toc-sheet__close span { display: block; width: 1.5rem; height: 1.5rem; background: currentColor; mask: center / contain no-repeat; }
	.toc-fab__icon { mask-image: url("design-system/assets/icons/format_list_bulleted.svg"); }
	.toc-sheet__close span { mask-image: url("design-system/assets/icons/close.svg"); }
	.toc-sheet[open] {
		display: flex;
		flex-direction: column;
		width: 90%;
		max-width: 32rem;
		max-height: 70vh;
		max-height: 70dvh;
		margin: auto;
		padding: 0;
		overflow: hidden;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--surface);
		color: var(--ink);
		box-shadow: var(--shadow-warm, 0 1.25rem 3.5rem rgb(20 20 19 / .2));
	}
	.toc-sheet::backdrop { background: rgb(28 18 12 / .62); backdrop-filter: blur(2px); }
	.toc-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .5rem .5rem 1.25rem; border-bottom: 1px solid var(--line); }
	.toc-sheet__title { font: 400 1.35rem/1.2 var(--display); }
	.toc-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
	.toc-sheet__body { display: grid; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0; }
	.toc-sheet__body a { display: flex; align-items: center; min-height: 44px; padding: .5rem 1.25rem; border-left: 3px solid transparent; color: var(--muted); font-size: .9375rem; line-height: 1.35; text-decoration: none; }
	.toc-sheet__body a.is-current { border-left-color: var(--accent); background: var(--surface-2); color: var(--ink); font-weight: 600; }
}

@media (max-width:900px) {
 .portfolio-case__story .prose > h2:not(:first-child) + .content-table-wrap { margin-top:0; padding-top:0; }
}

/*
 * Новость, статья журнала, термин справочника на телефоне и планшете (≤768):
 * без белой карточки — текст на всю ширину с обычным отступом .wrap (16px).
 * Шапка материала (крошки, надзаголовок, H1, дата/автор) — белая зона на всю
 * ширину экрана (--surface), тело — на фоне страницы (--bg), граница — --line.
 * Белая зона рисуется border-image с выносом по горизонтали: не влияет на
 * раскладку и не даёт горизонтального скролла. Десктоп (>768) не меняется.
 */
@media (max-width: 768px) {
	.page .article-layout:has(> article.prose) { padding-top: 0; }
	.page .article-layout > article.prose { margin-inline: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.page .article-layout > article.prose > :is(.crumbs, .eyebrow, h1, .material-meta) {
		margin-block: 0;
		border-image: linear-gradient(var(--surface) 0 0) fill 0 / / 0 100vmax;
	}
	.page .article-layout > article.prose > .crumbs { padding-block: 1rem .75rem; }
	.page .article-layout > article.prose > .eyebrow { display: flex; padding-bottom: 1rem; }
	.page .article-layout > article.prose > h1 { padding-bottom: .75rem; }
	.page .article-layout > article.prose > .material-meta {
		padding-bottom: 1.25rem;
		border-image: linear-gradient(to top, var(--line) 1px, var(--surface) 1px) fill 0 / / 0 100vmax;
	}
	/*
	 * Дата · автор: перенос целыми пунктами. Разделитель стоит перед пунктом
	 * и вынесен влево на свою ширину; у пункта в начале строки он уходит за
	 * левый край и обрезается — висящей точки нет, текст ровно по краю H1.
	 */
	.page .article-layout > article.prose > .material-meta { column-gap: 1.5rem; overflow: clip; overflow-clip-margin: .25rem; }
	.page .article-layout > article.prose > .material-meta > span + span { margin-left: -1.5rem; }
	.page .article-layout > article.prose > .material-meta > span + span::before { display: inline-block; width: 1.5rem; margin-right: 0; text-align: center; }

}

/* Профиль сотрудника: телефон и мессенджеры под текстом (данные — «Настройки сайта → Телефоны/Соцсети»). */
.master-profile__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.25rem 0 0; }
.master-profile__contacts .social-links { margin: 0; }