/* ==========================================================================
   AV-Security — «Аналитика» section index (/analitika/)

   Loaded only on that page (inc/analytics.php), after sections.css. Scoped
   to .av-an-page. Site grid: 1180 container, 24px gutters (≥72px fields
   above 768px); the palette and Onest typeface of the section's studies.
   ========================================================================== */

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/onest-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/onest-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.av-an-page {
	--an-gut: 24px;
	background: #fff;
	color: #0e1d3a;
	font-family: "Onest", "Segoe UI", Roboto, Arial, sans-serif;
}

@media (min-width: 769px) {
	.av-an-page {
		--an-gut: max(72px, calc((100% - var(--av-container, 1180px)) / 2 + 24px));
	}
}

.av-an-page.is-layout-flow > *,
.av-an-page .is-layout-flow > * {
	margin-block-start: 0;
}

.av-an-page .av-an-wrap {
	padding-inline: var(--an-gut);
}

/* Hero: full-width photo (assets/images/analytics-hero.webp, 2048 × 682,
   two people on the right) under a soft WHITE CSS gradient — near-opaque
   behind the text on the left, fully clear on the right (the photo itself
   is untouched). The stops follow the content edge (side field + text
   column), not the viewport, so the text sits on the light part at every
   width. Height follows the photo's 3:1 ratio within 360–520px; the photo
   is anchored to its TOP edge, so when the hero is shorter than the scaled
   photo (wide screens) only the desk at the bottom is cropped — the heads
   keep their natural margin. Light grey under the photo = no flash while
   it loads (preloaded in inc/analytics.php). */
.av-an-page .av-an-hero {
	display: flex;
	align-items: center;
	min-height: clamp(360px, 33.33vw, 520px);
	padding-block: 56px;
	background-color: #f3f6fa;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) calc(var(--an-gut) + 380px), rgba(255, 255, 255, 0.62) calc(var(--an-gut) + 560px), rgba(255, 255, 255, 0.12) calc(var(--an-gut) + 720px), rgba(255, 255, 255, 0) calc(var(--an-gut) + 860px)),
		url("../images/analytics-hero.webp");
	background-size: auto, cover;
	background-position: center, center top;
	background-repeat: no-repeat;
	color: var(--av-ink);
}

.av-an-page .av-an-hero .av-an-wrap {
	display: grid;
	gap: 20px;
	width: 100%;
}

/* Phones / tablets: the text spans the width, so the whole photo gets a
   white veil (lighter on the right, where the people are); the frame is
   shifted to keep both of them. */
@media (max-width: 768px) {
	.av-an-page .av-an-hero {
		min-height: 0;
		padding-block: 48px 56px;
		background-image:
			linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.8) 100%),
			url("../images/analytics-hero.webp");
		background-position: center, 85% top;
	}
}

.av-an-page .av-an-hero .av-breadcrumbs {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	margin-bottom: 12px;
}

/* H1 and lead = the homepage hero (main.css .av-hero__title + theme.json
   xx-large preset, .av-hero__text): site font; H1 700 / 1.06 / −0.02em,
   lead 1.05rem / 1.65, 48ch; ≤768px the homepage's own overrides. Colours
   for the light hero: --av-ink (H1), --av-ink-muted (lead, sections.css). */
.av-an-page .av-an-h1 {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--wp--preset--font-size--xx-large, clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 2.273), 3.75rem));
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--av-ink, #0b1f33);
}

.av-an-page .av-an-lead {
	margin: 0;
	max-width: 48ch;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: normal;
	color: var(--av-ink-muted, rgba(11, 31, 51, 0.72));
}

@media (max-width: 768px) {
	.av-an-page .av-an-h1 {
		font-size: min(calc((100vw - 3rem) / 10.2), 3.125rem);
		overflow-wrap: break-word;
	}

	.av-an-page .av-an-lead {
		max-width: none;
	}
}

@media (max-width: 390px) {
	.av-an-page .av-an-lead {
		font-size: 1rem;
	}
}

/* Hero intro — the homepage's: `av-hero-in` on <html> (inc/analytics.php,
   skipped on reduced motion) + keyframes av-hero-rise (sections.css),
   0.7s, delays 100 / 250 / 400ms as on the homepage. The photo itself does
   not move. */
.av-hero-in .av-an-page .av-an-hero .av-breadcrumbs,
.av-hero-in .av-an-page .av-an-h1,
.av-hero-in .av-an-page .av-an-lead {
	animation: av-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 100ms backwards;
}

.av-hero-in .av-an-page .av-an-h1 {
	animation-delay: 250ms;
}

.av-hero-in .av-an-page .av-an-lead {
	animation-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
	.av-hero-in .av-an-page .av-an-hero .av-breadcrumbs,
	.av-hero-in .av-an-page .av-an-h1,
	.av-hero-in .av-an-page .av-an-lead {
		animation: none;
	}
}

/* ==========================================================================
   «Исследования» — section head + wide study card. Approved mock-up
   /home/aleks/analytics-research-mockup/analytics-research-reference.png
   (1487 px wide, content 106–1386 = 1280 px); geometry scaled to the site
   grid 1132 px (× 0.884), then made compact (2026-11-05): type = the
   homepage system (sections.css section title, featured-tile title, tile
   text, eyebrow; process CTA button), card height −21%. The card stays inside the grid (the mock-up
   lets it run 26 px past the content edges). Colours: brand blue
   --av-primary (hover --av-primary-hover), ink --av-ink, mock-up greys.
   ========================================================================== */
.av-an-page .av-an-research {
	padding-block: 40px 72px;
	background: #fff;
}

/* Head: red line + «Исследования» on the left, the aside on the right. */
.av-an-page .av-an-research__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
}

.av-an-page .av-an-research__title {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(1.75rem, 1.15rem + 2vw, 2.625rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--av-ink, #0b1f33);
}

.av-an-page .av-an-research__title::before {
	content: "";
	flex: 0 0 auto;
	width: 47px;
	height: 2px;
	background: var(--av-accent, #c8102e);
}

.av-an-page .av-an-research__aside {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	color: #3a4868;
}

/* Card: photo | info | divider + button. */
/* The page has no global border-box reset: sizes below are border-box. */
.av-an-page .av-an-research *,
.av-an-page .av-an-research *::before {
	box-sizing: border-box;
}

.av-an-page .av-an-study {
	display: grid;
	grid-template-columns: 135px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 32px;
	margin: 0;
	padding: 18px 28px 18px 31px;
	border-left: 4px solid var(--av-primary, #1a5fb4);
	background: #f2f5fd;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.av-an-page .av-an-study__photo {
	display: block;
	width: 135px;
	height: 128px;
	object-fit: cover;
	object-position: 45% 30%;
}

.av-an-page .av-an-study__info {
	display: grid;
	gap: 0;
	min-width: 0;
}

.av-an-page .av-an-study__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0 0 8px;
}

.av-an-page .av-an-study__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 0;
	background: #d6e6fc;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--av-primary, #1a5fb4);
}

.av-an-page .av-an-study__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #6b7a96;
}

.av-an-page .av-an-study__date {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #4a5873;
}

.av-an-page .av-an-study__title {
	margin: 0 0 4px;
	font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--av-ink, #0b1f33);
}

.av-an-page .av-an-study__text {
	max-width: 470px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: #1e2d4d;
}

/* Thin vertical divider before the button. */
.av-an-page .av-an-study__action {
	display: flex;
	align-items: center;
	align-self: center;
	min-height: 104px;
	padding-left: 32px;
	border-left: 1px solid #c8d0ea;
}

.av-an-page .av-an-study__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 0.9rem 1.75rem;
	border-radius: 2px;
	background: var(--av-primary, #1a5fb4);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #fff;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.av-an-page .av-an-study__btn:hover {
	background: var(--av-primary-hover, #12488c);
	color: #fff;
	text-decoration: none;
}

.av-an-page .av-an-study__btn:focus-visible {
	outline: 2px solid var(--av-primary, #1a5fb4);
	outline-offset: 3px;
}

.av-an-page .av-an-study__btn svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* Tablets: photo | info, the button row below the info (divider turns
   horizontal). */
@media (max-width: 1100px) {
	.av-an-page .av-an-study {
		grid-template-columns: 135px minmax(0, 1fr);
		row-gap: 16px;
	}

	.av-an-page .av-an-study__action {
		grid-column: 2;
		min-height: 0;
		padding: 16px 0 0;
		border-left: 0;
		border-top: 1px solid #c8d0ea;
	}
}

/* Phones: photo on top, info, then the full-width button. */
@media (max-width: 600px) {
	.av-an-page .av-an-research {
		padding-block: 32px 56px;
	}

	.av-an-page .av-an-research__head {
		margin-bottom: 20px;
	}

	.av-an-page .av-an-study {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px 16px 18px;
	}

	.av-an-page .av-an-study__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-position: 45% 25%;
	}

	.av-an-page .av-an-study__action {
		grid-column: 1;
	}

	.av-an-page .av-an-study__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.av-an-page .av-an-study__btn {
		transition: none;
	}
}

.av-an-page :focus-visible {
	outline: 2px solid #2455c3;
	outline-offset: 3px;
}