/*
 * CaryTamura single Agent (CT Single Agent, template 5530, /agent/{agent}/)
 * — 2026 redesign.
 *
 * Loaded on every rb_agent singular request (functions.php). The hero is the
 * shared split title band ("About {name}"). Below it:
 *
 *   .ct-agent-meet         a side column — the agent's portrait (featured
 *                          image) above a details card (email, mobile,
 *                          address, license, social; every value a
 *                          post-custom-field tag on the agent) — beside
 *                          "Meet {first name}" and the agent's biography
 *   .ct-agent-properties   section head, then the agent's listings in a
 *                          three-column grid of the shared listing card
 *   contact band           shared template
 *
 * Empty fields still hide themselves (rules kept from the original): a
 * details row whose value resolves empty, a social icon without a link, a
 * biography that is empty, a listings section with no listings.
 */

.ct-page-body.e-con:has(.ct-agent-meet) {
	--gap: 0px;
	--row-gap: 0px;
	padding-block: 0;
}

/* ------------------------------------------------------------ agent meet */
.ct-agent-meet.e-con {
	--padding-top: var(--ct-space-section);
	--padding-bottom: var(--ct-space-section);
	--padding-left: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--padding-right: max(var(--ct-gutter), calc((100% - var(--ct-max)) / 2));
	--kit-widget-spacing: 0px;
	display: grid;
	grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
	gap: 48px clamp(40px, 6vw, 104px);
	align-items: start;
	color: var(--ct-ink);
}

/* The side column: portrait, then the details card. */
.ct-agent-row.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	flex-direction: column;
	align-items: stretch;
}

.ct-agent-row__portrait.elementor-widget {
	width: 100%;
}

.ct-agent-row__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}

.ct-agent-details.e-con {
	--padding-top: 28px;
	--padding-bottom: 28px;
	--padding-left: 28px;
	--padding-right: 28px;
	--gap: 0px;
	--row-gap: 0px;
	--kit-widget-spacing: 0px;
	background-color: var(--ct-paper);
	border-top: 3px solid var(--ct-accent);
}

.ct-agent-details__title .elementor-heading-title {
	margin: 0 0 12px;
	font-family: var(--ct-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ct-ink);
}

.ct-agent-details .ct-agent-details__row.e-con {
	--padding-top: 12px;
	--padding-bottom: 12px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 2px;
	--row-gap: 2px;
	border-top: 1px solid var(--ct-border);
}

/* A field with nothing to show (post-custom-field resolves empty): Elementor
 * drops the value heading's own title element entirely rather than rendering
 * it empty, so the row is hidden by the ABSENCE of that element. */
.ct-agent-details__row:not(:has(.ct-agent-details__value .elementor-heading-title)) {
	display: none;
}

.ct-agent-details__label .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--ct-label);
}

.ct-agent-details__value .elementor-heading-title {
	margin: 0;
	font-family: var(--ct-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--ct-ink);
	overflow-wrap: anywhere;
}

/* Out-ranks Elementor's own `.elementor-heading-title[class*=elementor-size-]
 * > a { color: inherit }`. */
.ct-agent-details .ct-agent-details__value .elementor-heading-title[class*="elementor-size-"] > a {
	color: var(--ct-ink);
	text-decoration: underline;
	text-decoration-color: var(--ct-accent);
	text-underline-offset: 4px;
}

.ct-agent-details .ct-agent-details__social.elementor-widget {
	margin: 16px 0 0;
	letter-spacing: normal;
}

.ct-agent-details__social .elementor-social-icons-wrapper {
	text-align: left;
}

/* An individual social field left empty: the icon has no href; its grid item
 * goes. No social link at all: the widget goes. */
.ct-agent-details__social .elementor-grid-item:not(:has(.elementor-social-icon[href])) {
	display: none;
}

.ct-agent-details .ct-agent-details__social.elementor-widget:not(:has(.elementor-social-icon[href])) {
	display: none;
}

/* ------------------------------------------------------ meet first name */
.ct-meet.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--kit-widget-spacing: 0px;
	--gap: 0px;
	--row-gap: 0px;
	min-width: 0;
}

.ct-meet__title .elementor-heading-title {
	margin: 0 0 32px;
	font-family: var(--ct-font-display);
	font-size: var(--ct-type-h2);
	font-weight: 400;
	line-height: var(--ct-leading-heading);
	letter-spacing: var(--ct-track-heading);
	text-transform: none;
	color: var(--ct-ink);
}

.ct-meet__bio,
.ct-meet__bio p,
.ct-meet__bio li {
	max-width: var(--ct-measure);
	font-family: var(--ct-font-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ct-ink-body);
}

.ct-meet__bio p {
	margin: 0 0 1.2em;
}

.ct-meet__bio p:first-child {
	font-family: var(--ct-font-display);
	font-size: clamp(20px, 1.7vw, 24px);
	line-height: 1.55;
	color: var(--ct-ink);
}

.ct-meet__bio p:last-child {
	margin-bottom: 0;
}

.ct-meet__bio ul {
	margin: 0 0 1.2em;
	padding-left: 1.2em;
	list-style: disc outside;
}

.ct-meet__bio li::marker {
	color: var(--ct-accent);
}

/* An agent with no biography: the empty block is dropped. */
.ct-meet__bio:empty {
	display: none;
}

/* -------------------------------------------------- browse my properties */
.ct-agent-properties.e-con {
	--padding-top: var(--ct-space-section);
	--padding-bottom: var(--ct-space-section);
	background-color: var(--ct-paper);
}

.ct-agent-properties:not(:has(.ct-prop-card)) {
	display: none;
}

.ct-agent-properties .ct-section-title .elementor-heading-title {
	margin-bottom: var(--ct-space-block);
}

.ct-agent-properties__grid .elementor-loop-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
}

@media (max-width: 1024px) {
	.ct-agent-properties__grid .elementor-loop-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ct-agent-meet.e-con {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-agent-row.e-con {
		max-width: 440px;
	}
}

@media (max-width: 767px) {
	.ct-agent-properties__grid .elementor-loop-container {
		grid-template-columns: minmax(0, 1fr);
	}
}