/*
 * HClinic design system - 5/7 doctors
 * Doctor catalog rows (/doctors-consultations/, /likari/), homepage doctor cards and the hero
 * of individual doctor pages. No credentials, titles or text are changed here, only presentation.
 *
 * A catalog entry is one WPBakery row: a .vc_col-sm-3 portrait next to a .vc_col-sm-9 text
 * column (Ultimate Addons heading = name, sub-heading = role, then experience, a hairline and a
 * "Детальніше" link). The row is a full-width row that WPBakery's script stretches with inline
 * left/width/padding; the card rule below resets those inline values so the card stays the
 * width of the container.
 */

/* ---- Empty rows: permanently hidden duplicates (all columns .vc_hidden-lg) ---------------- */

#content .vc_row:has(> .vc_column_container.vc_hidden-lg):not(:has(> .vc_column_container:not(.vc_hidden-lg))) {
	display: none;
}

/* ==========================================================================================
   Catalog card
   ========================================================================================== */

#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9:not(.vc_hidden-lg) .uvc-main-heading) {
	display: grid;
	grid-template-columns: minmax(0, 13.75rem) minmax(0, 1fr);
	align-items: center;
	gap: var(--hc-space-4) var(--hc-space-6);
	box-sizing: border-box;
	width: auto !important;
	max-width: 100%;
	margin: 0 0 var(--hc-space-5) !important;
	left: 0 !important;
	padding: var(--hc-space-5) !important;
	border: 1px solid var(--hc-border-subtle);
	border-radius: var(--hc-radius-lg);
	background: var(--hc-card-bg);
	box-shadow: var(--hc-shadow-card);
	transition: transform var(--hc-duration-normal) var(--hc-ease-standard),
		box-shadow var(--hc-duration-normal) var(--hc-ease-standard),
		border-color var(--hc-duration-fast) var(--hc-ease-standard);
}

#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9:not(.vc_hidden-lg) .uvc-main-heading):hover {
	border-color: rgba(2, 132, 199, .35);
	box-shadow: var(--hc-shadow-hover);
	transform: translateY(-2px);
}

/* Clearfix pseudo-elements would become empty grid items. */
#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9 .uvc-main-heading)::before,
#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9 .uvc-main-heading)::after {
	display: none;
}

/* Columns lose their float/percentage widths and paddings: the grid owns the layout. */
#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9 .uvc-main-heading) > .vc_column_container {
	float: none;
	width: auto;
	padding: 0;
}

#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9 .uvc-main-heading) .vc_column-inner {
	padding: 0 !important;
}

#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9 .uvc-main-heading) .vc_empty_space {
	display: none;
}

/* ---- Portrait: one proportion for every doctor ---------------------------------------- */

#content .vc_col-sm-3 .shortcode-single-image-wrap {
	width: 100% !important;
	max-width: 13.75rem;
	margin: 0 auto !important;
}

/* The7's lazy loader swaps the image src. While it loads the image has no intrinsic width, and
   .fancy-media-wrap is inline-block (shrink-to-fit), so wrapper and image both collapsed to 0x0
   and jumped back when loaded: every portrait moved the whole page (CLS 0.8-1.5 on mobile).
   A block wrapper with a definite width and a fixed aspect ratio never depends on the image. */
#content .vc_col-sm-3 .shortcode-single-image,
#content .vc_col-sm-3 .shortcode-single-image .fancy-media-wrap {
	display: block;
	width: 100%;
}

#content .vc_col-sm-3 .shortcode-single-image .fancy-media-wrap {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--hc-radius-md);
	background: var(--hc-blue-surface);
}

#content .vc_col-sm-3 .shortcode-single-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--hc-radius-md);
}

/* ---- Text: name, role, experience ------------------------------------------------------ */

#content .vc_col-sm-9 .uvc-heading,
#content .vc_col-sm-9 .uvc-main-heading,
#content .vc_col-sm-9 .uvc-main-heading h2,
#content .vc_col-sm-9 .uvc-sub-heading,
#content .vc_col-sm-9 .uvc-sub-heading + div {
	text-align: left !important;
}

#content .vc_col-sm-9 .uvc-main-heading h2 {
	margin: 0 0 .25rem;
	color: var(--hc-navy-deep);
	font-size: var(--hc-h3);
	font-weight: 700;
	line-height: 1.25;
}

#content .vc_col-sm-9 .uvc-main-heading h2 [style],
#content .vc_col-sm-9 .uvc-sub-heading [style] {
	font-family: var(--hc-font) !important;
	font-size: inherit !important;
}

#content .vc_col-sm-9 .uvc-sub-heading {
	margin: 0 0 .25rem;
	color: var(--hc-blue-primary-dark);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.4;
}

#content .vc_col-sm-9 .uvc-sub-heading + div {
	color: var(--hc-slate-muted);
	font-size: .9375rem;
	line-height: 1.5;
}

#content .vc_col-sm-9 .uvc-sub-heading + div [style] {
	font-family: var(--hc-font) !important;
	font-size: inherit !important;
}

#content .vc_col-sm-9 .vc_separator {
	width: 100% !important;
	margin: .75rem 0;
}

/* ---- "Детальніше": an intentional secondary action, not a stray blue link --------------- */

#content .vc_btn3-container {
	text-align: left !important;
}

#content .vc_btn3-container a.vc_btn3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.25rem;
	padding: 6px 18px;
	border: 1px solid #bae6fd;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-blue-surface);
	box-shadow: none;
	color: var(--hc-blue-primary-dark);
	font-family: var(--hc-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	transition: all var(--hc-duration-fast) var(--hc-ease-standard);
}

#content .vc_btn3-container a.vc_btn3:hover {
	border-color: var(--hc-blue-primary);
	background: var(--hc-blue-primary);
	box-shadow: 0 4px 12px rgba(2, 132, 199, .25);
	color: #fff;
	transform: translateY(-1px);
}

#content .vc_btn3-container a.vc_btn3:active {
	box-shadow: none;
	transform: translateY(0) scale(.98);
}

@media (pointer: coarse) {
	#content .vc_btn3-container a.vc_btn3 {
		min-height: var(--hc-tap);
		padding-inline: 1.375rem;
	}
}

/* ---- Phones: portrait on top, centred card --------------------------------------------- */

@media (max-width: 767px) {
	#content .vc_row:has(> .vc_col-sm-3 .shortcode-single-image):has(> .vc_col-sm-9:not(.vc_hidden-lg) .uvc-main-heading) {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--hc-space-4) !important;
		text-align: center;
	}

	#content .vc_col-sm-3 .shortcode-single-image-wrap {
		max-width: 11rem;
	}

	#content .vc_col-sm-9 .uvc-heading,
	#content .vc_col-sm-9 .uvc-main-heading,
	#content .vc_col-sm-9 .uvc-main-heading h2,
	#content .vc_col-sm-9 .uvc-sub-heading,
	#content .vc_col-sm-9 .uvc-sub-heading + div {
		text-align: center !important;
	}

	#content .vc_btn3-container {
		text-align: center !important;
	}
}

/* ==========================================================================================
   Homepage / carousel doctor cards (Ultimate Addons carousel of inner rows)
   ========================================================================================== */

.dt-owl-carousel-call .vc_inner.vc_row-fluid {
	box-sizing: border-box;
	padding: var(--hc-space-5) var(--hc-space-4);
	border: 1px solid var(--hc-border-subtle);
	border-radius: var(--hc-radius-md);
	background: var(--hc-card-bg);
	box-shadow: var(--hc-shadow-card);
	transition: transform var(--hc-duration-normal) var(--hc-ease-standard),
		box-shadow var(--hc-duration-normal) var(--hc-ease-standard),
		border-color var(--hc-duration-fast) var(--hc-ease-standard);
}

.dt-owl-carousel-call .vc_inner.vc_row-fluid:hover {
	border-color: rgba(2, 132, 199, .35);
	box-shadow: var(--hc-shadow-hover);
	transform: translateY(-2px);
}

.dt-owl-carousel-call .vc_inner img {
	border-radius: var(--hc-radius-md);
}

/* ==========================================================================================
   Individual doctor page: hero (portrait, name, role, booking button)
   ========================================================================================== */

/* Same lazy-load collapse as the catalog portraits: give the circle a definite size. */
#content .vc_row.vc_row-o-equal-height .shortcode-single-image {
	display: block;
}

#content .vc_row.vc_row-o-equal-height .shortcode-single-image .fancy-media-wrap {
	display: block;
	width: min(100%, 18.75rem);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

#content .vc_row.vc_row-o-equal-height .shortcode-single-image .fancy-media-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
}

#content .vc_row.vc_row-o-equal-height .uvc-main-heading h2 {
	margin-bottom: .5rem;
}

#content .vc_row.vc_row-o-equal-height .uvc-sub-heading {
	color: var(--hc-blue-primary-dark);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
}

#content .vc_row.vc_row-o-equal-height .uvc-sub-heading [style] {
	font-family: var(--hc-font) !important;
}