/* ==== CTA-баннеры NoNarko ==== */
/* Цветовые переменные — в palette.css. Настройки положения фото — здесь. */

/* ---- Баннер «Убедим…» / «Готовы принять помощь?» ---- */
.nn-a .nn-cta{
	/* ==== Настройки положения фото — меняй эти значения ==== */
	--photo-h:325px;      /* высота фото (НЕ влияет на высоту баннера) */
	--photo-space:250px;  /* место справа под фото, чтобы текст не залезал */
	--photo-right:50px;   /* отступ фото от правого края: + внутрь, − за край */
	--photo-bottom:0px;   /* отступ фото от низа: + вверх, − ниже края */
	/* ====================================================== */
	position:relative;display:flex;gap:28px;align-items:center;margin:0 0 34px;
	min-height:290px;overflow:hidden;border-radius:20px;padding:52px 56px;color:#fff;
	background:
		linear-gradient(90deg,rgba(58,188,202,.96) 0%,rgba(58,188,202,.86) 40%,rgba(58,188,202,.55) 70%,rgba(58,188,202,.35) 100%),
		linear-gradient(135deg,#2ba7b5,#3abcca);}
.nn-a .nn-cta__content{flex:1;min-width:0;padding-right:var(--photo-space);}
.nn-a .nn-cta__title{font-size:28px;font-weight:800;line-height:1.2;margin:0 0 12px;color:#565454;}
.nn-a .nn-cta__text{font-size:16px;line-height:1.6;color:#fff;margin:0 0 18px;}
/* Телефон. Селектор с a, чтобы победить общее «.nn-cta a — белые». */
.nn-a .nn-cta a.nn-cta__phone{display:inline-block;font-size:26px;font-weight:800;color:#565454;
	text-decoration:none;margin:0 0 16px;}
.nn-a .nn-cta a.nn-cta__phone:hover{text-decoration:underline;color:#565454;}
.nn-a .nn-cta a.nn-cta__button{display:inline-block;background:var(--red);color:#fff;
	font-size:16px;font-weight:800;text-decoration:none;padding:14px 28px;border-radius:999px;
	margin:0 0 18px;}
.nn-a .nn-cta a.nn-cta__button:hover{background:var(--red-dark);color:#fff;}
.nn-a .nn-cta__messengers{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
.nn-a .nn-cta__msg-label{font-size:14px;color:#fff;}
/* Любые ссылки в баннере — белые. */
.nn-a .nn-cta a{color:#fff;}
.nn-a .nn-cta a:hover{color:#fff;}
.nn-a .nn-cta__msg{display:inline-flex;width:40px;height:40px;border-radius:8px;overflow:hidden;
	background:#fff;padding:0;}
.nn-a .nn-cta__msg img{width:100%;height:100%;object-fit:contain;display:block;}
/* Фото вынуто из потока — его высота не растягивает баннер. */
.nn-a .nn-cta__photo{position:absolute;right:var(--photo-right);bottom:var(--photo-bottom);
	z-index:1;pointer-events:none;}
.nn-a .nn-cta__photo img{height:var(--photo-h);width:auto;display:block;
	filter:drop-shadow(-12px 0 24px rgba(0,0,0,.35));}
@media (max-width:1024px){
	/* На планшете и мобилке фото убираем полностью — текст получает всю ширину. */
	.nn-a .nn-cta{padding:40px;}
	.nn-a .nn-cta__content{padding-right:0;}
	.nn-a .nn-cta__photo{display:none;}
	.nn-a .nn-cta__title{font-size:22px;}
}
@media (max-width:640px){
	.nn-a .nn-cta{flex-direction:column;align-items:flex-start;text-align:left;padding:24px;}
	.nn-a .nn-cta__title{font-size:20px;}
	.nn-a .nn-cta__text{font-size:15px;}
	.nn-a .nn-cta__phone{font-size:22px;}
}
@media (max-width:400px){
	.nn-a .nn-cta{padding:20px 16px;}
	.nn-a .nn-cta__phone{font-size:19px;}
}

/* ---- Баннер «Инструкция» — светлый фон, иллюстрация слева ----
 * flex-wrap вместо media-запросов по ширине экрана: баннер сидит внутри
 * колонки статьи, у которой рядом сайдбар («Читайте также») — реальная
 * доступная ширина меньше ширины окна браузера, поэтому переключаться
 * должен по факту нехватки места в самом контейнере, а не по viewport. */
.nn-a .nn-instr{display:flex;flex-wrap:wrap;align-items:center;gap:24px;background:var(--bg-soft);
	border-radius:20px;padding:32px 40px;margin:0 0 34px;}
.nn-a .nn-instr__photo{flex:1 1 160px;max-width:240px;min-width:130px;}
.nn-a .nn-instr__photo img{width:100%;height:auto;display:block;}
.nn-a .nn-instr__content{flex:3 1 260px;min-width:260px;}
.nn-a .nn-instr__title{font-size:28px;font-weight:800;line-height:1.2;margin:0 0 14px;color:var(--text);}
.nn-a .nn-instr__text{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 22px;}
.nn-a .nn-instr a.nn-instr__button{display:inline-block;background:var(--red);color:#fff;
	font-size:16px;font-weight:800;text-decoration:none;padding:16px 32px;border-radius:10px;}
.nn-a .nn-instr a.nn-instr__button:hover{background:var(--red-dark);}
/* Размеры заголовка/текста — синхронизированы с остальными баннерами по тем же брейкпоинтам. */
@media (max-width:1024px){
	.nn-a .nn-instr__title{font-size:22px;}
}
@media (max-width:640px){
	.nn-a .nn-instr__title{font-size:20px;}
	.nn-a .nn-instr__text{font-size:15px;}
}
/* Когда контейнеру не хватает места даже под min-width текста (260px) —
 * фото и текст переносятся друг под друга сами, без привязки к экрану. */
@media (max-width:400px){
	.nn-a .nn-instr{padding:20px 16px;gap:16px;}
	.nn-a .nn-instr__photo{max-width:200px;margin:0 auto;flex-basis:100%;}
	.nn-a .nn-instr__content{min-width:0;flex-basis:100%;text-align:left;}
	.nn-a .nn-instr a.nn-instr__button{width:100%;text-align:center;padding:15px 24px;box-sizing:border-box;}
}

/* ---- Баннер «Бесплатный трансфер» ---- */
.nn-a .nn-transfer{
	/* ==== Настройки положения фото ==== */
	--tr-photo-h:420px;     /* высота фото такси */
	--tr-photo-space:300px; /* место справа под фото */
	--tr-photo-right:24px;  /* отступ от правого края */
	--tr-photo-bottom:-100px; /* отступ от низа */
	/* ================================== */
	position:relative;display:flex;align-items:center;margin:0 0 34px;
	min-height:230px;overflow:hidden;border-radius:20px;padding:40px 48px;color:#fff;
	background:
		linear-gradient(90deg,rgba(58,188,202,.96) 0%,rgba(58,188,202,.86) 40%,rgba(58,188,202,.55) 70%,rgba(58,188,202,.35) 100%),
		linear-gradient(135deg,#2ba7b5,#3abcca);}
.nn-a .nn-transfer__content{flex:1;min-width:0;padding-right:var(--tr-photo-space);}
.nn-a .nn-transfer__title{font-size:28px;font-weight:800;line-height:1.2;margin:0 0 16px;color:#565454;}
.nn-a .nn-transfer__discount{display:inline-block;background:var(--red);color:#fff;
	font-weight:800;font-size:15px;padding:8px 16px;border-radius:8px;margin:0 0 18px;}
.nn-a .nn-transfer__messengers{display:flex;align-items:center;flex-wrap:wrap;gap:12px;}
.nn-a .nn-transfer__msg-label{font-size:14px;color:#fff;}
.nn-a .nn-transfer__msg{display:inline-flex;width:40px;height:40px;border-radius:8px;
	overflow:hidden;background:#fff;padding:0;}
.nn-a .nn-transfer__msg img{width:100%;height:100%;object-fit:contain;display:block;}
/* Фото вынуто из потока — не растягивает баннер. */
.nn-a .nn-transfer__photo{position:absolute;right:var(--tr-photo-right);bottom:var(--tr-photo-bottom);
	z-index:1;pointer-events:none;}
.nn-a .nn-transfer__photo img{height:var(--tr-photo-h);width:auto;display:block;
	filter:drop-shadow(-12px 6px 22px rgba(0,0,0,.3));}
@media (max-width:1024px){
	/* На планшете и мобилке фото такси убираем полностью. */
	.nn-a .nn-transfer{padding:32px 36px;}
	.nn-a .nn-transfer__content{padding-right:0;}
	.nn-a .nn-transfer__photo{display:none;}
	.nn-a .nn-transfer__title{font-size:22px;}
}
@media (max-width:640px){
	.nn-a .nn-transfer{flex-direction:column;align-items:flex-start;padding:24px;}
	.nn-a .nn-transfer__title{font-size:20px;}
}