@import url("https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap");

/*
 * Mamer Age Hub v1
 * First production instance: "Ребёнок в 3 месяца".
 * Uses the approved Mamer homepage visual language: PT Serif + Manrope,
 * deep navy, sage accents, quiet borders and restrained motion.
 */

.age-hub {
	--age-ease: cubic-bezier(.22, 1, .36, 1);
	padding: 0 0 72px;
	background: var(--mamer-page);
}

.age-hub h1,
.age-hub h2,
.age-hub h3,
.age-hub strong {
	font-kerning: normal;
}

.age-hub h1,
.age-hub h2,
.age-hub h3 {
	font-family: "PT Serif", Georgia, "Times New Roman", serif;
	font-weight: 700;
}

.age-hub__breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px 0 18px;
	color: var(--mamer-text-muted);
	font-size: 13px;
	line-height: 20px;
}

.age-hub__breadcrumbs a {
	color: var(--mamer-text-secondary);
	text-decoration: none;
}

.age-hub__breadcrumbs a:hover {
	color: var(--mamer-primary);
}

.age-hub__breadcrumbs span[aria-hidden="true"] {
	color: #9AA4A8;
}

.age-hub__intro {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
	align-items: center;
	gap: 42px;
	padding: 26px 0 30px;
}

.age-hub__intro-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 620px;
	padding: 10px 0;
}

.age-hub__eyebrow,
.age-hub__kicker {
	margin: 0 0 10px;
	color: var(--mamer-primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.age-hub__eyebrow span {
	display: inline-block;
	margin: 0 5px;
	color: var(--mamer-sage);
}

.age-hub__intro h1 {
	max-width: 620px;
	margin: 0 0 16px;
	font-size: clamp(44px, 4vw, 58px);
	line-height: 1.07;
	letter-spacing: -.018em;
}

.age-hub__lead {
	max-width: 590px;
	margin: 0 0 12px;
	color: #4F5E65;
	font-size: 18px;
	line-height: 30px;
}

.age-hub__note {
	margin: 0;
	color: var(--mamer-text-muted);
	font-size: 14px;
	line-height: 22px;
}

.age-hub__hero-media {
	position: relative;
	height: 360px;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(201,194,184,.72);
	border-radius: 22px;
	background: var(--mamer-surface-secondary);
	box-shadow: 0 12px 34px rgba(31,51,59,.055);
}

.age-hub__hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 44%;
}

.age-hub__months {
	margin: 0 0 54px;
}

.age-hub__months-track {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 9px;
}

.age-hub__month-chip {
	display: flex;
	min-height: 66px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 5px;
	border: 1px solid var(--mamer-border);
	border-radius: 12px;
	background: rgba(255,255,255,.82);
	color: var(--mamer-text);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(31,51,59,.025);
	transition: transform 200ms var(--age-ease), border-color 200ms var(--age-ease), background-color 200ms var(--age-ease), box-shadow 200ms var(--age-ease);
}

.age-hub__month-chip strong {
	font-family: var(--mamer-font-ui);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
}

.age-hub__month-chip span {
	color: var(--mamer-text-muted);
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
}

.age-hub__month-chip.is-selected,
.age-hub__month-chip.is-selected:hover {
	border-color: var(--mamer-primary);
	background: var(--mamer-primary);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 18px rgba(46,106,97,.16);
}

.age-hub__month-chip.is-selected span {
	color: rgba(255,255,255,.8);
}

.age-hub__section-heading {
	margin: 0 0 22px;
}

.age-hub__section-heading h2 {
	margin: 0 0 4px;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -.008em;
}

.age-hub__section-heading p {
	margin: 0;
	color: var(--mamer-text-muted);
	font-size: 14px;
	line-height: 22px;
}

.age-hub__topics {
	margin-bottom: 58px;
	padding: 30px;
	border: 1px solid rgba(142,169,155,.16);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(230,239,235,.58), rgba(250,248,244,0) 92%);
}

.age-hub__topic-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}

.age-hub__topic-card {
	display: flex;
	min-height: 166px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;
	padding: 18px 12px;
	border: 1px solid var(--mamer-border);
	border-radius: 15px;
	background: rgba(255,255,255,.9);
	color: var(--mamer-text);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(31,51,59,.03);
	transition: transform 230ms var(--age-ease), border-color 230ms var(--age-ease), box-shadow 230ms var(--age-ease), background-color 230ms var(--age-ease);
}

.age-hub__topic-card strong {
	max-width: 140px;
	font-family: var(--mamer-font-ui);
	font-size: 14px;
	font-weight: 700;
	line-height: 19px;
}

.age-hub__growth-icon {
	display: grid;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	place-items: center;
	border-radius: 50%;
	background: var(--mamer-sage-subtle);
	color: var(--mamer-primary);
}

.age-hub__growth-icon svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 230ms var(--age-ease);
}

.age-hub__icon-well {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex: 0 0 72px;
	background: transparent;
}

.age-hub__icon-well svg {
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
}

.age-hub__topic-card:focus-visible {
	outline: 3px solid var(--mamer-primary);
	outline-offset: 4px;
}

.age-hub__topic-card:active { background: var(--mamer-sage-subtle); }

.age-hub__editorial {
	margin-bottom: 58px;
	scroll-margin-top: 20px;
}

.age-hub__editorial-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
	gap: 18px;
}

.age-hub__content-card,
.age-hub__growth-card {
	position: relative;
	grid-column: span 6;
	min-width: 0;
	padding: 28px;
	border: 1px solid var(--mamer-border);
	border-radius: 17px;
	background: rgba(255,255,255,.82);
	box-shadow: 0 7px 22px rgba(31,51,59,.025);
	scroll-margin-top: 24px;
	transition: transform 230ms var(--age-ease), border-color 230ms var(--age-ease), box-shadow 230ms var(--age-ease), background-color 230ms var(--age-ease);
}

.age-hub__content-card h2,
.age-hub__growth-card h2 {
	margin: 0 0 10px;
	font-size: 27px;
	line-height: 34px;
	letter-spacing: -.006em;
}

.age-hub__content-card p,
.age-hub__growth-card p {
	margin: 0 0 16px;
	color: #526169;
	font-size: 15px;
	line-height: 25px;
}

.age-hub__content-card--feature {
	grid-column: span 8;
	display: block;
	padding: 30px;
}

.age-hub__content-card--feature .age-hub__content-copy {
	padding: 0;
}

.age-hub__content-card--feature .age-hub__text-link {
	display: flex;
	width: fit-content;
	margin-top: 9px;
}

.age-hub__growth-card {
	grid-column: span 4;
	display: block;
	background: linear-gradient(145deg, #EEF5F1 0%, #F7F5EF 100%);
	border-color: rgba(142,169,155,.24);
}

.age-hub__growth-card .age-hub__growth-icon {
	float: left;
	width: 32px;
	height: 32px;
	margin: 0 10px 8px 0;
}

.age-hub__growth-card h2 {
	clear: both;
	font-size: 23px;
	line-height: 29px;
}

.age-hub__growth-card p:not(.age-hub__kicker):not(.age-hub__source-note) {
	font-size: 14.5px;
	line-height: 23px;
}

.age-hub__content-card .age-hub__kicker,
.age-hub__growth-card .age-hub__kicker {
	font-size: 11px;
	line-height: 17px;
}

.age-hub__source-note {
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(255,255,255,.72);
	color: #68767C !important;
	font-size: 12.5px !important;
	line-height: 19px !important;
}

.age-hub__content-card--with-thumb { display: block; }

.age-hub__section-photo {
	position: relative;
	display: block;
	margin: -28px -28px 22px;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
	background: var(--mamer-surface-secondary);
}

.age-hub__section-photo img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
	object-position: 50% 40%;
}

.age-hub__content-card--feature .age-hub__section-photo { margin: -30px -30px 24px; }
.age-hub__content-card--feature .age-hub__section-photo img { height: 280px; }
.age-hub__section-photo > span {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fffefa;
	color: var(--mamer-primary);
	font-size: 21px;
}
.age-hub__section-photo:focus-visible { outline: 3px solid var(--mamer-primary); outline-offset: 4px; }
.age-hub__content-card--health { display: flow-root; }
.age-hub__content-card--health .age-hub__section-photo {
	float: right;
	width: 32%;
	margin: 0 0 0 24px;
	border-radius: 12px;
}
.age-hub__content-card--health .age-hub__section-photo img { height: 180px; }

.age-hub__card-arrow {
	display: none;
}

.age-hub__text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mamer-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
}

.age-hub__text-link span {
	display: inline-block;
	transition: transform 200ms var(--age-ease);
}

.age-hub__link-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.age-hub__health-anchor {
	position: absolute;
}

.age-hub__discovery {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	margin-bottom: 42px;
	padding-top: 2px;
}

.age-hub__section-heading--compact {
	margin-bottom: 14px;
}

.age-hub__section-heading--compact h2 {
	font-size: 29px;
	line-height: 36px;
}

.age-hub__article-list,
.age-hub__faq-list {
	display: grid;
	gap: 8px;
}

.age-hub__article-row {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) 24px;
	align-items: center;
	min-height: 84px;
	overflow: hidden;
	border: 1px solid var(--mamer-border);
	border-radius: 13px;
	background: rgba(255,255,255,.82);
	color: var(--mamer-text);
	text-decoration: none;
	transition: transform 220ms var(--age-ease), border-color 220ms var(--age-ease), box-shadow 220ms var(--age-ease);
}

.age-hub__article-row > img {
	width: 112px;
	height: 84px;
	object-fit: cover;
}

.age-hub__article-copy {
	display: grid;
	gap: 5px;
	padding: 12px 16px;
}

.age-hub__article-copy strong {
	font-family: var(--mamer-font-ui);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.age-hub__article-copy small {
	color: var(--mamer-text-muted);
	font-size: 12px;
	line-height: 17px;
}

.age-hub__row-arrow {
	color: var(--mamer-primary);
	font-size: 18px;
	transition: transform 200ms var(--age-ease);
}

.age-hub__faq-list a {
	display: flex;
	min-height: 56px;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 17px;
	border: 1px solid var(--mamer-border);
	border-radius: 12px;
	background: rgba(255,255,255,.82);
	color: var(--mamer-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	transition: transform 200ms var(--age-ease), border-color 200ms var(--age-ease), background-color 200ms var(--age-ease);
}

.age-hub__faq-list a span {
	color: var(--mamer-primary);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
}

.age-hub__faq-more {
	margin-top: 14px;
}

.age-hub__bottom-nav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	min-height: 64px;
	overflow: hidden;
	border: 1px solid rgba(142,169,155,.22);
	border-radius: 16px;
	background: linear-gradient(90deg, rgba(230,239,235,.82), rgba(244,241,236,.88), rgba(230,239,235,.82));
}

.age-hub__bottom-nav a {
	display: flex;
	min-height: 62px;
	align-items: center;
	gap: 8px;
	padding: 0 22px;
	color: var(--mamer-primary);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.age-hub__bottom-nav a:nth-child(2) {
	justify-content: center;
	border-inline: 1px solid rgba(142,169,155,.18);
}

.age-hub__bottom-nav a:last-child {
	justify-content: flex-end;
}

@media (hover: hover) and (pointer: fine) {
	.age-hub__month-chip:hover,
	.age-hub__topic-card:hover,
	.age-hub__content-card:hover,
	.age-hub__growth-card:hover,
	.age-hub__article-row:hover {
		transform: translateY(-3px);
		border-color: rgba(46,106,97,.24);
		box-shadow: 0 12px 28px rgba(31,51,59,.07);
	}

	.age-hub__topic-card:hover {
		background: #fff;
	}

	.age-hub__topic-card:hover .age-hub__icon-well svg {
		transform: translateY(-1px) scale(1.06);
	}

	.age-hub__topic-card:hover strong {
		color: var(--mamer-primary);
	}

	.age-hub__faq-list a:hover {
		transform: translateX(2px);
		border-color: rgba(46,106,97,.22);
		background: rgba(230,239,235,.34);
	}

	.age-hub__article-row:hover .age-hub__row-arrow,
	.age-hub__text-link:hover span {
		transform: translateX(3px);
	}
}

@media (max-width: 1023px) {
	.age-hub__content-card--feature .age-hub__section-photo img { height: 210px; }
	.age-hub__intro {
		grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
		gap: 28px;
	}

	.age-hub__intro h1 {
		font-size: 46px;
		line-height: 52px;
	}

	.age-hub__lead {
		font-size: 16px;
		line-height: 27px;
	}

	.age-hub__months-track {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.age-hub__topic-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.age-hub__content-card--feature,
	.age-hub__growth-card {
		grid-column: span 6;
	}


	.age-hub__discovery {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.age-hub {
		padding-bottom: 44px;
	}

	.age-hub__breadcrumbs {
		padding: 14px 0 10px;
		gap: 6px;
		font-size: 11px;
		line-height: 18px;
	}

	.age-hub__intro {
		display: flex;
		flex-direction: column;
		gap: 17px;
		padding: 12px 0 18px;
	}

	.age-hub__intro-copy {
		max-width: none;
		padding: 0;
	}

	.age-hub__eyebrow {
		margin-bottom: 8px;
		font-size: 11px;
		line-height: 17px;
	}

	.age-hub__intro h1 {
		margin-bottom: 12px;
		font-size: 36px;
		line-height: 41px;
		letter-spacing: -.01em;
		text-wrap: balance;
	}

	.age-hub__lead {
		margin-bottom: 9px;
		font-size: 15px;
		line-height: 24px;
	}

	.age-hub__note {
		font-size: 13px;
		line-height: 20px;
	}

	.age-hub__hero-media {
		order: 2;
		height: auto;
		max-height: 320px;
		min-height: 0;
		aspect-ratio: 4 / 3;
		border-radius: 16px;
		box-shadow: none;
	}

	.age-hub__hero-media img {
		object-position: 50% 45%;
	}

	.age-hub__months {
		margin: 0 -16px 38px;
		overflow: hidden;
	}

	.age-hub__months-track {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding: 3px 16px 8px;
		scroll-padding-inline: 16px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
	}

	.age-hub__months-track::-webkit-scrollbar {
		display: none;
	}

	.age-hub__month-chip {
		min-width: 62px;
		min-height: 60px;
		flex: 0 0 62px;
		scroll-snap-align: start;
		border-radius: 11px;
	}

	.age-hub__month-chip strong {
		font-size: 15px;
	}

	.age-hub__topics {
		margin-bottom: 40px;
		padding: 0;
		border: 0;
		background: none;
	}

	.age-hub__section-heading {
		margin-bottom: 15px;
	}

	.age-hub__section-heading h2,
	.age-hub__section-heading--compact h2 {
		font-size: 27px;
		line-height: 33px;
	}

	.age-hub__section-heading p {
		font-size: 12.5px;
		line-height: 19px;
	}

	.age-hub__topic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}

	.age-hub__topic-card {
		min-height: 148px;
		gap: 9px;
		padding: 14px 8px;
		border-radius: 13px;
	}

	.age-hub__topic-card strong {
		font-size: 13px;
		line-height: 18px;
	}

	.age-hub__icon-well, .age-hub__icon-well svg {
		width: 64px;
		height: 64px;
		flex-basis: 64px;
	}

	.age-hub__editorial {
		margin-bottom: 40px;
	}

	.age-hub__editorial-grid {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.age-hub__content-card,
	.age-hub__growth-card {
		width: 100%;
		padding: 21px;
		border-radius: 15px;
		box-shadow: none;
	}

	.age-hub__content-card h2,
	.age-hub__growth-card h2 {
		margin-bottom: 8px;
		font-size: 24px;
		line-height: 30px;
	}

	.age-hub__content-card p,
	.age-hub__growth-card p {
		margin-bottom: 13px;
		font-size: 14px;
		line-height: 23px;
	}

	.age-hub__content-card--feature {
		padding: 21px;
	}

	.age-hub__content-card--feature .age-hub__content-copy {
		padding: 0;
	}

	.age-hub__content-card--feature .age-hub__kicker {
		display: none;
	}

	.age-hub__content-card--feature h2 {
		font-size: 23px;
		line-height: 29px;
	}

	.age-hub__growth-card {
		order: 6;
		padding: 22px;
	}

	.age-hub__growth-icon {
		width: 42px;
		height: 42px;
		flex-basis: 42px;
	}

	.age-hub__growth-icon svg {
		width: 22px;
		height: 22px;
	}

	.age-hub__content-card--has-arrow {
		padding-bottom: 58px;
	}

	.age-hub__card-arrow {
		display: flex;
		position: absolute;
		top: auto;
		bottom: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		color: var(--mamer-primary);
		font-size: 28px;
		line-height: 30px;
		text-decoration: none;
		touch-action: manipulation;
	}

	.age-hub__card-arrow:focus-visible {
		border-radius: 9px;
		outline: 2px solid var(--mamer-primary);
		outline-offset: 1px;
	}


	.age-hub__link-stack {
		display: grid;
		gap: 7px;
	}

	.age-hub__text-link {
		font-size: 13px;
		line-height: 19px;
	}

	.age-hub__discovery {
		display: flex;
		flex-direction: column;
		gap: 32px;
		margin-bottom: 32px;
	}

	.age-hub__article-row {
		grid-template-columns: 84px minmax(0, 1fr) 18px;
		min-height: 70px;
	}

	.age-hub__article-row > img {
		width: 84px;
		height: 70px;
	}

	.age-hub__article-copy {
		gap: 3px;
		padding: 9px 10px;
	}

	.age-hub__article-copy strong {
		font-size: 13px;
		line-height: 18px;
	}

	.age-hub__article-copy small {
		font-size: 11px;
		line-height: 16px;
	}

	.age-hub__row-arrow {
		font-size: 15px;
	}

	.age-hub__faq-list a {
		min-height: 50px;
		padding: 12px 14px;
		font-size: 13px;
		line-height: 18px;
	}

	.age-hub__bottom-nav {
		grid-template-columns: 1fr auto 1fr;
		min-height: 58px;
		border-radius: 14px;
	}

	.age-hub__bottom-nav a {
		min-height: 56px;
		padding: 0 12px;
		font-size: 12px;
		line-height: 17px;
	}

	.age-hub__bottom-all {
		padding-inline: 14px !important;
	}

	.age-hub__section-photo,
	.age-hub__content-card--feature .age-hub__section-photo { margin: -21px -21px 18px; border-radius: 14px 14px 0 0; }
	.age-hub__section-photo img,
	.age-hub__content-card--feature .age-hub__section-photo img { height: 190px; }
	.age-hub__content-card--health .age-hub__section-photo { float: none; width: auto; margin: -21px -21px 18px; border-radius: 14px 14px 0 0; }
	.age-hub__content-card--health .age-hub__section-photo img { height: 190px; }
	.age-hub__growth-card .age-hub__growth-icon { width: 32px; height: 32px; }
}

@media (max-width: 374px) {
	.age-hub__intro h1 {
		font-size: 34px;
		line-height: 39px;
	}


	.age-hub__bottom-nav a {
		padding-inline: 9px;
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.age-hub *,
	.age-hub *::before,
	.age-hub *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


.age-hub__article-row.has-no-image { grid-template-columns: minmax(0, 1fr) 24px; }