/*
Theme Name: G&H Home Services Theme
Description: G&H Home Services Theme
Author: Smoking Gun Creative Agency
Author URI: https://nosmokenofire.com
Author Email: jaeden@nosmokenofire.com
Version: 1.0.0
Text Domain: hello-elementor-child
Template: hello-elementor
*/

/*
Add your custom styles here
*/

/* ----------------------------------------
   Author Bio Box
   ---------------------------------------- */
.gh-author-box {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 2rem;
	background: #f9f9f9;
	border-left: 4px solid #333;
	margin-top: 3rem;
}

.gh-author-photo img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
}

.gh-author-name {
	margin: 0 0 0.25rem;
	font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.5rem);
}

.gh-author-title {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
}

.gh-author-bio {
	font-size: 0.95rem;
	line-height: 1.6;
}

.gh-author-social {
	display: flex;
	gap: 1rem;
	margin-top: 0.75rem;
}

.gh-author-social a {
	font-size: 0.85rem;
	text-decoration: none;
	font-weight: 600;
}

@media (max-width: 600px) {
	.gh-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ----------------------------------------
   Team Member Bio Truncation (card preview)
   Targets a specific Elementor Text widget by its data-id / class.
   If the widget ID changes, update the selectors below.
   ---------------------------------------- */
.elementor-element-1215bc1 .elementor-widget-container {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 3 !important;
	line-clamp: 3 !important;
	overflow: hidden !important;
	max-height: 5em !important;
}
.elementor-element-1215bc1 .elementor-widget-container p {
	display: inline !important;
	margin: 0 !important;
}
/* ─────────────────────────────────────────────────────────────────────
   Team-card image w/ overlaid job-title pill
   Setup in Elementor Loop Builder:
     1. Wrap the team headshot Image widget in a Container.
        Apply class "mms-team-img-pill" to that Container (NOT the image).
        That class makes the container position:relative so the overlay anchors.
     2. Inside the same container, add a Heading widget BELOW the image.
        Set its content via Dynamic Tags → ACF Field → job_title.
        Apply class "mms-team-job-pill" to that Heading widget.
        It will float absolutely over the bottom-center of the image.
   Pill styling matches the Employee Spotlight pill (v1.3.0+).
───────────────────────────────────────────────────────────────────── */
.mms-team-img-pill {
	position: relative;
}

.mms-team-img-pill img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Position the entire heading widget absolutely over the image. */
.mms-team-job-pill {
	position: absolute !important;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0 !important;
	width: auto !important;
	/* Wrap to a 2nd line around ~25 chars (1ch ≈ width of "0"). Cap at the
	   image width minus side padding so it never overflows the photo. */
	max-width: min(95ch, calc(100% - 4px));
	pointer-events: none;
}

/* The pill chrome lives on the actual heading text. Covers Elementor's
   Heading widget (.elementor-heading-title) and any raw h1-h6 fallback. */
.mms-team-job-pill .elementor-heading-title,
.mms-team-job-pill h1,
.mms-team-job-pill h2,
.mms-team-job-pill h3,
.mms-team-job-pill h4,
.mms-team-job-pill h5,
.mms-team-job-pill h6 {
	display: inline-block;
	margin: 0 !important;
	padding: 6px 12px !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--e-global-color-f278435, #1e3295) 0%, var(--e-global-color-00b1381, #171e3b) 100%) !important;
	color: #FFFFFF !important;
	font-family: var(--e-global-typography-secondary-font-family, "DM Sans"), sans-serif !important;
	font-weight: 700 !important;
	font-size: 0.65rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	text-align: center;
	/* Allow long titles to wrap onto up to 3 lines (covers cases like
	   "Executive Success Coordinator"); cap via -webkit-line-clamp. The
	   wrapping kicks in via the parent's max-width (95ch) above.
	   !important on these because Elementor's defaults otherwise win and
	   a 4th line would bleed past the clamp.
	   NOTE: no max-height — Elementor uses box-sizing:border-box, so a
	   max-height includes padding and would clip the actual text. The
	   line-clamp itself is sufficient. */
	white-space: normal !important;
	overflow-wrap: break-word !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}