/*
 * Phase 8 of the redesign (2026-10-30), one change for every page: the
 * tablet column and 44px breadcrumbs. Loaded last, on every page, while
 * wikigrowth_v3('tablet') is on (body class wg-v3t). Source: the blocks
 * marked "Планшет 768–1279" at the end of each prototype and
 * design/projects/chrome/chrome.css.
 */

/* ---------- breadcrumbs: links 44px high ----------
   The text stays where it was: the block starts 12px higher and its last
   12px slide under the heading's own top space, the crumbs above it in the
   stacking order so the heading does not cover their tap area. */
.wg-v2.wg-v3t .breadcrumbs {position: relative; z-index: 1; padding: 0 16px; margin-bottom: -12px;}
.wg-v2.wg-v3t .breadcrumbs_box {display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px;}
.wg-v2.wg-v3t .breadcrumbs a {display: inline-flex; align-items: center; min-height: 44px;}

/* ---------- tablet 768-1279: the phone layout in a 720px column ----------
   Not a stretched phone (a 977px button at 1024, 130-character lines): the
   column is 720 wide in the middle, 752 with its 16px sides, and the logo,
   the crumbs and the heading share its left edge. The 1280 grid and the
   phone do not change. */
@media (min-width: 768px) and (max-width: 1279px) {
	.wg-v3t .ch-wrap {width: 100%; max-width: 752px; margin: 0 auto;}
	/* 752 including the 16px sides, so border-box: the wrappers' own box-sizing
	   is content-box, and 752 + 32 put the heading 16px off the logo's line. */
	.wg-v2.wg-v3t .breadcrumbs {box-sizing: border-box; max-width: 752px; margin-left: auto; margin-right: auto;}
	.wg-v3t .ar-shell, .wg-v3t .ar-more, .wg-v3t .tp-shell, .wg-v3t .ax, .wg-v3t .hm, .wg-v3t .pg {box-sizing: border-box; max-width: 752px; margin-left: auto; margin-right: auto;}

	/* Article: the CoreTypes bar spans the screen, its content the column. */
	.wg-v3t .ct-bar {padding-left: max(16px, calc(50% - 360px)); padding-right: max(16px, calc(50% - 360px));}

	/* Test: the sticky sheet cannot reach the screen's edges any more - it
	   becomes a floating panel in the column. */
	.wg-v3t .tp-sheet {margin: 8px 0 0; top: 8px; border: 1px solid var(--rule); border-radius: 12px;}
	/* The result header: a block of the result's colour with 16px corners,
	   as on desktop. */
	.wg-v3t .tp-hero {margin: 16px 0 0; border-radius: 16px;}
	.wg-v3t .tp-hero .tp-res-img img {border-radius: 16px 16px 0 0;}
	.wg-v3t .tp-hero .tp-res-img::after {border-radius: 0;}
	/* The share panel spans the screen, its content the column. */
	.wg-v3t .tp-shell .quiz-engine-share {padding-left: max(16px, calc(50% - 360px)); padding-right: max(16px, calc(50% - 360px));}
}

@media (min-width: 1280px) {
	.wg-v2.wg-v3t .breadcrumbs {padding: 10px 0 0; margin-bottom: -12px;}
}