/**
 * Novo "About Me" — luxury black & gold redesign + fit-one-screen.
 *
 * PURE STYLING. Scoped to the row that contains the statistics (`.num-box-items`,
 * which lives inside the About Me section) via :has(), so NO other section is
 * touched. Does NOT change markup or JS — the existing count-up animation
 * (theme's pt-scripts.js on `.num-box .num span`) keeps working.
 *
 * Sizing uses clamp()/vh so the whole section fits ~85–95vh on 1366×768,
 * 1440×900 and 1920×1080 without fixed heights.
 *
 * NOTE: the stats markup (.num-box-items > col > .num-box > .num/.title) is
 * confirmed from the plugin. The image/heading/paragraph selectors below cover
 * the standard Novo + WPBakery classes; tell me the exact markup if any part
 * of the image/heading doesn't pick up the styling.
 */

/* Scope everything to the About Me row (the one holding the stats). */
.vc_row:has(.num-box-items),
section:has(.num-box-items),
.elementor-section:has(.num-box-items),
.e-con:has(.num-box-items) {
	--abt-gold-1: #f9edc0;
	--abt-gold-2: #e9cd7d;
	--abt-gold-3: #caa14a;
	--abt-gold-line: rgba(212, 175, 55, 0.28);
	--abt-text: #d9d3c7;

	/* 1) Trim the section's own vertical padding (biggest space saver). */
	padding-top: clamp(20px, 3.4vh, 54px) !important;
	padding-bottom: clamp(20px, 3.4vh, 54px) !important;
}

/* Vertically centre the two columns for a balanced layout. */
.vc_row:has(.num-box-items)>.vc_column_container,
.vc_row:has(.num-box-items)>.wpb_column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * 2) Portrait image — premium rounded frame, gold border, soft shadow
 * ---------------------------------------------------------------------- */
.vc_row:has(.num-box-items) .wpb_single_image img,
.vc_row:has(.num-box-items) .vc_single_image-img,
.vc_row:has(.num-box-items) .banner-about .image {
	border-radius: 18px;
	border: 1px solid var(--abt-gold-line);
	box-shadow:
		0 26px 60px rgba(0, 0, 0, 0.5),
		0 0 0 6px rgba(212, 175, 55, 0.06);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
	max-height: 72vh;
	/* keep the image from making the section tall */
	object-fit: cover;
	width: 100%;
}

.vc_row:has(.num-box-items) .wpb_single_image img:hover,
.vc_row:has(.num-box-items) .vc_single_image-img:hover {
	transform: translateY(-4px);
	box-shadow:
		0 32px 70px rgba(0, 0, 0, 0.55),
		0 0 0 6px rgba(212, 175, 55, 0.12);
}

/* -------------------------------------------------------------------------
 * 3) Typography — subtitle, heading, paragraph
 * ---------------------------------------------------------------------- */

/* "ABOUT ME" subtitle (gold, spaced). */
.vc_row:has(.num-box-items) .sub-h,
.vc_row:has(.num-box-items) .heading-block .sub-h {
	color: var(--abt-gold-3) !important;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-size: clamp(0.7rem, 0.4vw + 0.6rem, 0.82rem);
	margin-bottom: clamp(8px, 1.2vh, 16px);
}

/* Main heading — tighter margins, premium weight. */
.vc_row:has(.num-box-items) .heading-block,
.vc_row:has(.num-box-items) .wpb_custom_heading,
.vc_row:has(.num-box-items) .vc_custom_heading {
	margin: 0 0 clamp(10px, 1.6vh, 20px) !important;
	line-height: 1.15;
}

.vc_row:has(.num-box-items) .heading-block .h,
.vc_row:has(.num-box-items) .vc_custom_heading {
	font-size: clamp(1.5rem, 2.2vw, 2.6rem) !important;
	line-height: 1.15 !important;
}

/* Highlighted words (Photographer / Founder) — gold gradient. */
.vc_row:has(.num-box-items) .heading-block .h span,
.vc_row:has(.num-box-items) .vc_custom_heading span,
.vc_row:has(.num-box-items) .heading-block .h em {
	background: linear-gradient(135deg, var(--abt-gold-1), var(--abt-gold-3));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--abt-gold-3);
	/* fallback */
}

/* Gold divider under the heading (decorative). */
.vc_row:has(.num-box-items) .heading-block.with-line:after,
.vc_row:has(.num-box-items) .heading-decor:after {
	background: linear-gradient(90deg, var(--abt-gold-1), var(--abt-gold-3), transparent) !important;
}

/* Paragraph — readable width + comfortable line height, tighter margin. */
.vc_row:has(.num-box-items) .wpb_text_column,
.vc_row:has(.num-box-items) .text-p {
	color: var(--abt-text);
	font-size: clamp(0.9rem, 0.4vw + 0.78rem, 1rem);
	line-height: 1.7;
	max-width: 60ch;
	margin: 0 0 clamp(14px, 2vh, 26px) !important;
}

/* -------------------------------------------------------------------------
 * 4) Statistics — premium gold figures, elegant dividers, hover
 * ---------------------------------------------------------------------- */
.num-box-items {
	margin-top: clamp(6px, 1.4vh, 18px) !important;
	align-items: stretch;
}

.num-box {
	position: relative;
	text-align: center;
	padding: clamp(6px, 1vh, 14px) 6px;
	transition: transform 0.3s ease;
}

.num-box:hover {
	transform: translateY(-3px);
}

/* Elegant gold divider line between stats (desktop). */
.num-box-items [class*="col-"]:not(:last-child) .num-box::after {
	content: "";
	position: absolute;
	top: 18%;
	right: 0;
	height: 64%;
	width: 1px;
	background: linear-gradient(180deg,
			transparent,
			rgba(212, 175, 55, 0.45),
			transparent);
}

/* The big number — gold gradient, bold, fluid. */
.num-box .num {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	font-weight: 700;
	line-height: 1;
	font-size: clamp(1.9rem, 2.6vw, 3rem);
	background: linear-gradient(135deg, var(--abt-gold-1) 0%, var(--abt-gold-3) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #caa14a;
	/* fallback */
	text-shadow: 0 0 18px rgba(212, 175, 55, 0.15);
}

.num-box .num em {
	font-style: normal;
}

/* Stat label — refined, uppercase, spaced. */
.num-box .title {
	margin-top: 8px;
	color: #cfc8ba;
	font-size: clamp(0.66rem, 0.4vw + 0.55rem, 0.78rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

/* -------------------------------------------------------------------------
 * 5) Responsive
 * ---------------------------------------------------------------------- */
@media screen and (max-width: 991px) {

	/* Stack cleanly; drop the vertical dividers between stacked stats. */
	.num-box-items [class*="col-"]:not(:last-child) .num-box::after {
		display: none;
	}

	.vc_row:has(.num-box-items) .wpb_single_image img,
	.vc_row:has(.num-box-items) .vc_single_image-img {
		max-height: 46vh;
	}

	.vc_row:has(.num-box-items) .wpb_text_column,
	.vc_row:has(.num-box-items) .text-p {
		max-width: 100%;
	}

	.vc_custom_1624273836975 {
		margin-top: 36px !important;
		text-align: center !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.num-box,
	.vc_row:has(.num-box-items) .wpb_single_image img {
		transition: none;
	}
}