/* wave7: карточка специалиста — мобильная и планшет */

/* ============================================================
   Первый экран карточки специалиста (фото/имя/описание/контакты)
   к макету Figma (узел 1039:65686, "Сайт мастера Tab / Mob"):
   Mobile 400 (1044:87504), Tablet 800 (1044:87932).
   Десктоп (>=1025px, gw6-pro.css) не трогаем.
   ============================================================ */

/* ---------- Мобильная <=480px ----------
   Figma 1039:65686 / master-site Mob 390:
   side-by-side hero (title+bio left, ~120px avatar right), single-line
   crumbs, phone row, then [WA green pill | social | share] one row. */
@media (max-width:480px){

	.pro_page_top{
		background:#eef1f6 none;
		color:#5b6d9c;
		padding-top:18px;
		padding-bottom:0;
	}
	.pro_page_top:after{ display:none; }

	/* Single compact crumb line (Figma); long path scrolls horizontally. */
	.pro_page_top .breadcrumb{
		margin-bottom:8px;
		flex-wrap:nowrap;
		overflow-x:auto;
		white-space:nowrap;
		padding-right:24px;
		font-size:12px;
		-webkit-overflow-scrolling:touch;
	}
	.pro_page_top .breadcrumb li,
	.pro_page_top .breadcrumb li a{ color:#5b6d9c; font-size:12px; }

	/* CSS grid: crumb full-width; left text col + right avatar.
	   .bottom_flex → display:contents so .img_wrap / .address_wrap
	   become direct grid children (DOM has photo after text). */
	.pro_page_top .container{
		display:grid;
		grid-template-columns:1fr 120px;
		column-gap:12px;
		align-items:start;
	}
	.pro_page_top .breadcrumb{ grid-column:1 / -1; }
	.pro_page_top .bottom_flex{
		display:contents;
	}
	.pro_page_top .bottom_flex .img_wrap,
	.pro_page_top .img_wrap{
		/* Kill additional_102024 grid-area:grid-a (≤1023) which leaks
		   through display:contents into .container and mis-places photo. */
		order:unset;
		grid-area:unset;
		grid-column:2;
		grid-row:2 / span 4;
		width:120px;
		margin:0;
		text-align:center;
	}
	.pro_page_top .name_before{
		grid-column:1;
		order:unset;
		color:#5b6d9c;
		font-size:1em;
		font-weight:500;
		margin:0 0 8px;
		text-align:left;
	}
	.pro_page .img_wrap .img,
	.pro_page_top .img_wrap .img{
		width:120px;
		height:120px;
		border-radius:50%;
		border:2px solid #0066b2;
		background:#fff;
		margin:0;
		overflow:hidden;
		box-sizing:border-box;
	}
	.pro_page .img_wrap .img img,
	.pro_page_top .img_wrap .img img{
		width:100%;
		height:100%;
		object-fit:contain;
		object-position:center center;
		transform:none;
		border:0;
		border-radius:50%;
		box-sizing:border-box;
	}
	/* Счётчик отзывов/сердечко/звёзды под фото — нет в мобильном макете. */
	.pro_page_top .bottom_flex .img_wrap .reviews_stat{ display:none; }

	.pro_page_top h1{
		grid-column:1;
		order:unset;
		color:#0066b2;
		font-weight:600;
		font-size:1.25em;
		line-height:1.25;
		padding:0;
		margin:0 0 10px;
		text-align:left !important;
		max-width:none;
	}
	.pro_page_top h1:before{ display:none; }

	/* Teaser: first lines only + mask, then «Развернуть». */
	.pro_page_top .preview_text{
		grid-column:1;
		order:unset;
		padding:0;
		margin:0 0 8px;
		color:#5b6d9c;
		max-width:none;
		max-height:120px;
		overflow:hidden;
		text-align:left;
		font-size:13px;
		line-height:1.45;
		-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
		mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
	}
	.pro_page_top .preview_text:before{ display:none; }

	.pro_page_top .description_link{
		grid-column:1;
		order:unset;
		padding:0;
		text-align:left;
		margin:0 0 14px;
	}
	.pro_page_top .description_link a{ color:#0066b2 !important; }

	.pro_page_top .bottom_flex .address_wrap,
	.pro_page_top .address_wrap{
		/* Kill additional_102024 grid-area:grid-b + margin-left:30.
		   Longhands so grid-column is not wiped by grid-area shorthand. */
		order:unset;
		grid-row-start:auto;
		grid-column-start:1;
		grid-row-end:auto;
		grid-column-end:-1;
		width:100%;
		max-width:none;
		margin:0;
		margin-left:0;
	}

	/* Row1 phone+copy full width; row2 WA pill + icons + share. */
	.pro_page_top .pro_contacts_row{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		align-items:center;
		gap:10px 12px;
		padding:0 0 16px;
	}
	.pro_page_top .address_wrap-contacts{
		flex:0 0 100%;
		max-width:100%;
		margin:0;
	}
	.pro_page_top .address_wrap-contacts .offer_contacts_item{
		margin:0;
		max-width:none;
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:10px;
		flex-wrap:wrap;
	}
	.pro_page_top .address_wrap-contacts .offer_contacts_item a.icon-wa{
		display:flex;
		align-items:center;
		gap:8px;
		color:#5b6d9c;
	}
	.pro_page_top .address_wrap-contacts .icon-wa svg{ fill:#25D366; width:18px; height:18px; }

	.pro_page_top .pro_copy_btn{
		color:#0066b2 !important;
		font-size:13px;
		display:flex;
		align-items:center;
		gap:6px;
	}
	.pro_page_top .pro_copy_btn svg{ stroke:#0066b2; }

	/* Brand-blue WA pill (Figma frame has #0066B2, not green) + social + share. */
	.pro_page_top .pro_whatsapp_cta{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		background:#0066b2;
		color:#fff !important;
		font-weight:500;
		font-size:12px;
		border-radius:8px;
		padding:10px 12px;
		box-sizing:border-box;
		min-height:40px;
		min-width:0;
		width:auto;
		flex:0 1 auto;
		text-decoration:none;
		white-space:nowrap;
	}

	.pro_page_top .pro_social_icons{
		display:flex;
		align-items:center;
		justify-content:flex-start;
		gap:6px;
		padding:0;
		flex:0 0 auto;
	}
	.pro_page_top .pro_social_icon{
		width:28px;height:28px;border-radius:50%;
		display:flex;align-items:center;justify-content:center;
		background:transparent;
	}
	.pro_page_top .pro_social_icon svg{ width:22px;height:22px; }

	.pro_page_top .pro_share_link{
		display:flex;
		align-items:center;
		justify-content:flex-start;
		gap:4px;
		color:#5b6d9c !important;
		text-decoration:none;
		font-size:11px;
		margin:0;
		flex:0 1 auto;
		white-space:nowrap;
	}

	/* Строка QR/адреса/категорий/доп.кнопок — нет в мобильном макете. */
	.pro_page_top .pro_extra_row{ display:none; }

	/* 5 tabs fit 390 without horizontal scroll. */
	.pro_tabs{
		flex-wrap:nowrap;
		overflow-x:visible;
		gap:2px;
		padding:4px;
		border-radius:14px;
	}
	.pro_tabs .pro_tab{
		flex:1 1 0;
		display:flex;
		align-items:center;
		justify-content:center;
		box-sizing:border-box;
		min-height:44px;
		font-size:10px;
		padding:8px 2px;
		white-space:nowrap;
	}

	/* Услуги: 3 circular tiles / row (Figma services tab). */
	#services .pro_page_gallery .items,	#tab-services .pro_page_gallery .items,
	.pro_page_gallery .items,
	.pro_tabpanel .items{
		display:grid;
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:12px 8px;
	}
	#services .pro_page_gallery .items .item,	#tab-services .pro_page_gallery .items .item,
	.pro_tabpanel .item{
		width:auto;
		max-width:none;
		margin:0;
	}
	#services .pro_page_gallery .items .item > a.magnificPopup,	#tab-services .pro_page_gallery .items .item > a.magnificPopup,
	.pro_tabpanel .item > a.magnificPopup{
		width:100%;
		max-width:100%;
		height:auto;
		aspect-ratio:1;
		border-radius:12px;
		background:#eef3f9;
	}
	.pro_tabpanel .item > a.magnificPopup img{
		width:100%;
		aspect-ratio:1;
		object-fit:contain;
		object-position:center;
		border-radius:12px;
	}

	/* Галерея Видео: 2×2 (Figma), not 1-col. */
	#gallery .pro_video_gallery__grid,	#tab-gallery .pro_video_gallery__grid,
	.fg-pro-gallery__videos-grid.pro_video_gallery__grid,
	.pro_video_gallery__grid{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
		gap:10px;
	}
	#gallery .pro_video_card,	#tab-gallery .pro_video_card{
		max-width:none;
		height:auto;
		aspect-ratio:16 / 10;
	}
}

/* ---------- Планшет 481-1024px ---------- */
@media (min-width:481px) and (max-width:1024px){

	.pro_page_top{
		background:#eef1f6 none;
		color:#5b6d9c;
		padding-top:24px;
		padding-bottom:0;
	}
	.pro_page_top:after{ display:none; }

	.pro_page_top .container{ position:relative; }

	.pro_page_top .breadcrumb{ position:relative; z-index:2; }
	.pro_page_top .breadcrumb li,
	.pro_page_top .breadcrumb li a{ color:#5b6d9c; font-size:13px; }

	.pro_page_top .name_before{
		color:#5b6d9c;
		font-size:1.05em;
		font-weight:500;
		margin:8px 0 10px;
	}

	.pro_page_top h1{
		color:#0066b2;
		font-weight:600;
		font-size:1.6em;
		line-height:1.3;
		padding:0 190px 0 0; /* место под фото справа, как на десктопе */
		margin:0 0 16px;
	}
	.pro_page_top h1:before{ display:none; }

	.pro_page_top .preview_text{
		padding:0 190px 0 0; /* первые строки описания уходят под фото, если не резервировать место */
		margin:0 0 14px;
		color:#5b6d9c;
		max-width:none;
	}
	.pro_page_top .preview_text:before{ display:none; }

	.pro_page_top .description_link{
		padding:0;
		text-align:left;
		margin:0 0 20px;
	}
	.pro_page_top .description_link a{ color:#0066b2 !important; }

	.pro_page_top .bottom_flex{
		display:flex;
		flex-wrap:wrap;
		align-items:flex-start;
		position:static;
	}
	.pro_page_top .bottom_flex .img_wrap{
		order:1;
		position:absolute;
		top:56px;
		right:0;
		width:150px;
	}
	.pro_page .img_wrap .img{
		width:150px;
		height:150px;
		border:2px solid #0066b2;
		background:#fff;
		border-radius:50%;
		overflow:hidden;
	}
	.pro_page .img_wrap .img img{
		width:100%;
		height:100%;
		object-fit:cover;
		border:4px solid #fff;
		border-radius:50%;
	}
	.pro_page_top .bottom_flex .img_wrap .reviews_stat{ display:none; }

	.pro_page_top .bottom_flex .address_wrap{
		order:2;
		width:100%;
		margin-left:0;
		margin-top:6px;
	}

	.pro_page_top .pro_contacts_row{
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		gap:18px;
		padding:10px 0 18px;
	}
	.pro_page_top .address_wrap-contacts .offer_contacts_item{
		margin:0;
		max-width:none;
		display:flex;
		align-items:center;
		gap:8px;
	}
	.pro_page_top .address_wrap-contacts .icon-wa svg{ fill:#25D366; width:18px; height:18px; }

	.pro_page_top .pro_copy_btn{ color:#0066b2 !important; font-size:13px; }
	.pro_page_top .pro_copy_btn svg{ stroke:#0066b2; }

	.pro_page_top .pro_whatsapp_cta{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		background:#0066b2;
		color:#fff !important;
		font-weight:500;
		border-radius:10px;
		padding:12px 20px;
		text-decoration:none;
		white-space:nowrap;
	}

	.pro_page_top .pro_social_icons{ display:flex; align-items:center; gap:10px; }
	.pro_page_top .pro_social_icon{
		width:36px;height:36px;border-radius:50%;
		display:flex;align-items:center;justify-content:center;
		background:#eef1f6;
	}
	.pro_page_top .pro_social_icon svg{ width:18px;height:18px; }

	.pro_page_top .pro_share_link{
		margin-left:0; /* Figma: after socials */
		display:flex;align-items:center;gap:6px;
		color:#5b6d9c !important;
		text-decoration:none;
		font-size:13px;
	}

	/* Строка QR/адреса/категорий/доп.кнопок целиком отсутствует в планшетном
	   макете первого экрана (см. GAPS.md). */
	.pro_page_top .pro_extra_row{ display:none; }
}