/*
 * Information page template (page-info.php).
 *
 * The sticky table of contents, the text column and the content blocks — used
 * by this template alone, so they stay out of the global main.css, the same
 * split as category.css and single-product.css.
 *
 * Colours, .wrap, .crumbs and .page-head come from main.css; nothing is
 * redefined here.
 *
 * Ported from the turinys-2.html layout. Two deliberate departures from it are
 * marked "not in the layout" below.
 */

/* -------------------------------------------------------------------------
 * Frame: 1106px container, table of contents beside a text column of 836px.
 * ---------------------------------------------------------------------- */

.doc-wrap {
	max-width: 1106px;
	margin: 0 auto;
}

.doc {
	display: grid;
	grid-template-columns: 230px minmax(0, 836px);
	gap: 40px;
	align-items: start;
	padding: 4px 0 50px;
}

/* Table of contents switched off for the page: the text keeps its own width
   rather than stretching over the freed column. */
.doc-notoc {
	grid-template-columns: minmax(0, 836px);
}

/* -------------------------------------------------------------------------
 * Table of contents.
 * ---------------------------------------------------------------------- */

.toc {
	position: sticky;
	/* Clears the sticky site header, which is 96px at its tallest. */
	top: 96px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	padding: 16px 18px;
	/* A page with many sections must not grow a sticky column taller than the
	   screen: the last entries would be unreachable. */
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.toc b {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--mut);
	margin-bottom: 10px;
}

.toc a {
	display: block;
	font-size: 14px;
	padding: 6px 0;
	color: var(--mut);
}

.toc a.on,
.toc a:hover {
	color: var(--ink);
}

/* -------------------------------------------------------------------------
 * Text column.
 * ---------------------------------------------------------------------- */

.doc-body {
	max-width: none;
	/* Lets the column shrink below the width of a wide table inside it, so the
	   table scrolls in its own container instead of widening the page. */
	min-width: 0;
	/* Long unbroken words (part numbers, URLs) must not widen the column. */
	overflow-wrap: break-word;
}

.doc-body h2 {
	font-size: clamp(20px, 2.2vw, 26px);
	margin: 30px 0 12px;
	/* Keeps an anchored heading clear of the sticky header after a jump. */
	scroll-margin-top: 110px;
}

.doc-body h2:first-child {
	margin-top: 0;
}

.doc-body h3 {
	font-size: 17px;
	margin: 20px 0 8px;
}

.doc-body p {
	margin: 10px 0;
	color: #3d4136;
}

.doc-body ul,
.doc-body ol {
	margin: 12px 0;
	padding-left: 20px;
}

.doc-body li {
	margin: 6px 0;
	color: #3d4136;
}

/* -------------------------------------------------------------------------
 * Table of technical data.
 * ---------------------------------------------------------------------- */

/* Not in the layout: its own scroll container. The layout's table has two
   columns and fits; real technical data runs to five or six and would push the
   page sideways on a phone. */
.doc-table {
	overflow-x: auto;
	margin: 16px 0;
}

.doc-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}

.doc-table table {
	/* The wrapper owns the spacing; the table scrolls inside it. */
	margin: 0;
	/* Below this the columns of a technical table squash into unreadable
	   slivers; past it the wrapper scrolls instead. */
	min-width: 520px;
}

.doc-body th {
	text-align: left;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mut);
	padding: 9px 10px;
	border-bottom: 1.5px solid var(--line);
	white-space: nowrap;
}

.doc-body td {
	padding: 11px 10px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}

.doc-body td:first-child {
	color: var(--mut);
}

/* -------------------------------------------------------------------------
 * Safety net: nothing inside the text column may push the page sideways.
 * ---------------------------------------------------------------------- */

.doc-body img,
.doc-body iframe,
.doc-body video {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Content blocks.
 * ---------------------------------------------------------------------- */

.doc-fig {
	margin: 20px 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.doc-fig img {
	width: 100%;
	display: block;
	/* Not in the layout, which only ever shows a wide photo here. A square or
	   portrait upload would otherwise fill most of the screen; capping the
	   height and cropping to the centre keeps the figure in proportion with the
	   text around it — roughly the 2:1 band the design shows. */
	max-height: 380px;
	object-fit: cover;
	object-position: center;
}

.doc-fig figcaption {
	font-size: 12.5px;
	color: var(--mut);
	padding: 10px 14px;
	background: var(--soft);
}

.callout {
	display: flex;
	gap: 12px;
	background: var(--soft);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 20px 0;
}

.callout svg {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	color: var(--brand-d);
	margin-top: 2px;
}

.callout b {
	display: block;
	margin-bottom: 4px;
}

.callout p {
	margin: 0;
	font-size: 14px;
}

.doc-gal {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 18px 0 8px;
}

.doc-gal figure {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.doc-gal img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.doc-gal figcaption {
	font-size: 12.5px;
	color: var(--mut);
	padding: 8px 11px;
}

/* Video: the poster and the play button; doc.js swaps in the iframe on click. */
.doc-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--soft);
	margin: 16px 0 8px;
	cursor: pointer;
}

.doc-video .dv-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.doc-video .dv-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 22px rgba(20, 30, 15, .28);
	transition: .18s;
}

.doc-video .dv-play svg {
	width: 26px;
	height: 26px;
	color: var(--ink);
	margin-left: 3px;
}

.doc-video:hover .dv-play {
	transform: translate(-50%, -50%) scale(1.06);
}

.doc-video:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.doc-video .dv-hint {
	position: absolute;
	left: 14px;
	bottom: 12px;
	background: rgba(16, 22, 12, .72);
	color: #fff;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12.5px;
}

.doc-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.doc-vcap {
	font-size: 12.5px;
	color: var(--mut);
	margin: 0 0 6px;
}

.doc-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 6px;
}

.doc-cats a {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 7px 14px 7px 7px;
	background: #fff;
	font-size: 14px;
}

.doc-cats a img {
	width: 42px;
	height: 32px;
	object-fit: cover;
	border-radius: 6px;
}

.doc-cats a:hover {
	border-color: var(--brand);
}

.doc-prod {
	display: grid;
	gap: 10px;
	margin: 16px 0 6px;
}

.doc-prod a {
	display: flex;
	align-items: center;
	gap: 13px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: #fff;
	padding: 11px 15px;
}

.doc-prod a:hover {
	border-color: var(--brand);
}

.doc-prod .im {
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.doc-prod .im img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
}

.doc-prod .tx b {
	display: block;
	font-size: 15px;
}

.doc-prod .tx span {
	display: block;
	font-size: 12.5px;
	color: var(--mut);
	margin-top: 2px;
}

.doc-prod .pr {
	margin-left: auto;
	font-weight: 600;
	white-space: nowrap;
}

.doc-cta {
	margin-top: 30px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	padding: 22px;
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
}

.doc-cta b {
	font-size: 17px;
}

.doc-cta p {
	font-size: 14px;
	color: var(--mut);
	margin-top: 4px;
}

.doc-cta .btn {
	margin-left: auto;
}

.doc-contact {
	margin-top: 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--soft);
	padding: 20px 22px;
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
}

.doc-contact b {
	font-size: 16.5px;
}

.doc-contact p {
	font-size: 14px;
	color: var(--mut);
	margin-top: 4px;
}

.doc-contact .ph {
	margin-left: auto;
	font-family: "Anybody", sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--brand-d);
}

/* -------------------------------------------------------------------------
 * Narrow screens.
 *
 * 1000px: one column, the table of contents sits above the text.
 * 760px:  it becomes a fixed button at the bottom that opens upwards.
 * ---------------------------------------------------------------------- */

@media (max-width: 1000px) {

	/* minmax(0,836px), not 1fr: a grid item defaults to min-width:auto and a
	   wide table would push the column past the screen instead of scrolling,
	   while a plain 1fr would stretch the prose past the 836px the task fixes
	   as the maximum line length. */
	.doc,
	.doc-notoc {
		grid-template-columns: minmax(0, 836px);
		justify-content: center;
	}

	.toc {
		position: static;
	}
}

@media (max-width: 760px) {

	.doc,
	.doc-notoc {
		grid-template-columns: minmax(0, 836px);
		gap: 20px;
	}

	/* Gallery becomes a snap-scrolling strip that bleeds past the text margins,
	   so a photo is large enough to read on a phone. */
	.doc-gal {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 16px -18px 6px;
		padding: 0 18px 6px;
	}

	.doc-gal figure {
		flex: 0 0 78%;
		scroll-snap-align: center;
	}

	/* The call-to-action button drops onto its own line rather than squeezing
	   the text beside it. */
	.doc-cta .btn,
	.doc-contact .ph {
		margin-left: 0;
	}

	.toc {
		position: fixed;
		left: 16px;
		right: 16px;
		/* Sits above the cookie bar while that is on screen: the bar owns the
		   bottom of the viewport at a higher z-index, so a panel placed under it
		   cannot be tapped at all. doc.js measures the bar and sets the
		   variable; 16px is the resting value once it is dismissed. */
		bottom: calc(16px + var(--sm-bottom-inset, 0px));
		top: auto;
		z-index: 140;
		padding: 0;
		border-radius: 12px;
		box-shadow: 0 8px 28px rgba(20, 30, 15, .16);
		overflow: hidden;
		max-height: none;
	}

	.toc b {
		margin: 0;
		padding: 14px 16px;
		display: flex;
		align-items: center;
		gap: 9px;
		cursor: pointer;
		font-size: 12.5px;
		background: #fff;
	}

	.toc b::after {
		content: "";
		margin-left: auto;
		width: 9px;
		height: 9px;
		border-right: 1.6px solid var(--mut);
		border-bottom: 1.6px solid var(--mut);
		transform: rotate(-135deg);
		transition: .2s;
	}

	.toc.open b::after {
		transform: rotate(45deg);
	}

	.toc nav {
		display: none;
		/* The open panel must not run past the top of the screen on a long page. */
		max-height: 60vh;
		overflow-y: auto;
	}

	.toc.open nav {
		display: block;
	}

	.toc a {
		padding: 11px 16px;
		border-top: 1px solid var(--line);
	}
}

/* -------------------------------------------------------------------------
 * Blog post (single-post.php): the date line under the heading. The style
 * itself is .nw-date in main.css, shared with the list card; here only the
 * spacing, so the lead paragraph keeps its own distance from it.
 * ---------------------------------------------------------------------- */

.page-head .nw-date {
	margin-top: 10px;
}