/* Телефоны на сайте: последние цифры растворяются в градиенте, клик проявляет номер.
 * Маска вдвое шире номера: в исходном положении видна её половина с затуханием,
 * после клика маска сдвигается на полностью непрозрачную половину — номер проявляется плавно.
 */

.yb-header-phone {
	align-self: center;
	align-items: center;
	margin-left: 40px;
	padding-left: 40px;
	border-left: 1px solid var(--yb-line);
}

/* Номер и сноска под ним — одной колонкой, выровнены по левому краю. */
.yb-phone-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--yb-white);
}

.yb-phone-wrap .yb-callnote {
	margin-top: -2px;
	font-size: var(--yb-fs-micro);
	opacity: 0.5;
	white-space: nowrap;
}

.yb-phone {
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
	color: var(--yb-white);
	font-family: var(--yb-font-body);
	font-size: var(--yb-fs-md);
	font-weight: 600;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

/* Общий для всех номеров на сайте ([data-yb-phone]): шапка, меню, подвал, блоки контактов, шторка.
 * Видны «+351 910», дальше цифры уходят в градиент почти до нуля — без клика номер не прочитать. */
.yb-phone__number {
	display: inline-block;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 75%, rgba(0, 0, 0, 0.3) 84%, rgba(0, 0, 0, 0.04) 93%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 0%, #000 75%, rgba(0, 0, 0, 0.3) 84%, rgba(0, 0, 0, 0.04) 93%, transparent 100%);
	-webkit-mask-size: 200% 100%;
	mask-size: 200% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	transition: -webkit-mask-position 0.6s var(--yb-ease), mask-position 0.6s var(--yb-ease), color var(--yb-duration) ease;
}

.yb-phone:hover .yb-phone__number {
	color: var(--yb-marsala-text);
}

[data-yb-phone].is-revealed .yb-phone__number {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.yb-phone:focus-visible {
	outline: 1px solid var(--yb-marsala-text);
	outline-offset: 4px;
}

/* На планшете и телефоне меню уходит в «бургер» — номер встаёт перед ним. */
@media (max-width: 1023px) {
	.yb-header-phone {
		order: 1;
		padding-left: 0;
		margin-left: auto;
		border-left: 0;
		padding-right: 16px;
	}

	/* Колонка с «бургером» — после телефона, у правого края. */
	.style-local-2163-h8-outer {
		order: 2;
	}

	.yb-phone {
		font-size: var(--yb-fs-ui);
	}

	.yb-phone-wrap .yb-callnote {
		font-size: 8.5px;
	}
}

@media (max-width: 480px) {
	.yb-phone {
		font-size: var(--yb-fs-sm);
		letter-spacing: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yb-phone__number {
		transition: none;
	}
}

/* Узкий телефон: в шапке не помещаются логотип с надписью, поиск, номер и меню.
 * Оставляем от картинки-логотипа только круглую монограмму слева (имя есть в меню и подвале). */
@media (max-width: 560px) {
	#colibri .h-navigation_outer .h-logo__image {
		width: 59px;
		max-width: none;
		height: 59px;
		object-fit: cover;
		object-position: left center;
	}
}