/*!
 * Speakers section - a modern pass.
 * ---------------------------------------------------------------------------
 * The cards were a plain block inside a horizontal marquee. This restyles only
 * what is on the card: the panel, the portrait, and the type hierarchy. The
 * marquee item, the click handler and the speaker modal are untouched, and the
 * markup is unchanged - every rule targets the classes already in the partial.
 *
 * Loaded after the built bundle, so it applies without a front-end build. The same
 * rules belong in resources/css/pages/backend-homeSections-partials-speakers-section.css
 * for the next build.
 * ---------------------------------------------------------------------------
 */

.speakers-section.pg-backend-homesections-partials-speakers-section {
	padding: 64px 0 44px;
}

/* The card: a panel that lifts. */
.speakers-section .speaker-marquee-item {
	padding: 12px 10px;
}

.speakers-section .speaker-card-compact {
	position: relative;
	background: #fff;
	border: 1px solid #edf3ee;
	border-radius: 22px;
	padding: 26px 20px 22px;
	height: 100%;
	text-align: center;
	box-shadow: 0 8px 24px rgba(10, 47, 31, .07);
	transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
	overflow: hidden;
}

/* A quiet gold hairline along the top edge, revealed on hover. */
.speakers-section .speaker-card-compact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 4px;
	background: linear-gradient(90deg, #FCD116, #0b6b3f);
	border-radius: 0 0 4px 4px;
	transition: width .3s ease;
}

.speakers-section .speaker-card-compact:hover {
	transform: translateY(-8px);
	border-color: rgba(11, 107, 63, .22);
	box-shadow: 0 24px 48px rgba(10, 47, 31, .16);
}

.speakers-section .speaker-card-compact:hover::before {
	width: 68%;
}

/* The portrait: circular, with a gold ring that separates it from the panel. */
.speakers-section .speaker-image-compact {
	width: 134px;
	height: 134px;
	margin: 0 auto 18px;
	border-radius: 50%;
	overflow: hidden;
	background: #eef3ee;
	box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(252, 209, 22, .5);
	transition: box-shadow .26s ease;
}

.speakers-section .speaker-card-compact:hover .speaker-image-compact {
	box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(11, 107, 63, .55);
}

.speakers-section .speaker-image-compact img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	display: block;
	transition: transform .4s ease;
}

.speakers-section .speaker-card-compact:hover .speaker-image-compact img {
	transform: scale(1.06);
}

/* Type: one clear hierarchy - name, role, organisation, then the bio. */
.speakers-section .speaker-name-compact {
	margin: 0 0 3px;
	font-size: 1.03rem;
	font-weight: 700;
	line-height: 1.25;
	color: #0f2b1e;
}

.speakers-section .speaker-title-compact {
	margin: 0 0 10px;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #0b6b3f;
}

.speakers-section .speaker-company-compact {
	margin: 0 0 10px;
	font-size: .77rem;
	color: #6b7f72;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.speakers-section .speaker-bio-compact {
	margin: 0;
	font-size: .79rem;
	line-height: 1.55;
	color: #6b7f72;
}

/* On a phone the portrait and padding step down so the card stays balanced. */
@media (max-width: 700px) {
	.speakers-section .speaker-card-compact { padding: 20px 16px 18px; border-radius: 18px; }
	.speakers-section .speaker-image-compact { width: 108px; height: 108px; margin-bottom: 14px; }
	.speakers-section .speaker-name-compact { font-size: .95rem; }
}