/**
 * Recognition — author bio card (https://www.footholdamerica.com/author/joanne-farquharson-bio.html).
 *
 * Root: Elementor container class **recognition** (or ID **recognition**).
 *
 * Markup (either):
 * 1) Full: `.s-card` > `.s-title` + `.award-badge` (`.red` / `.gold`) > `.award-name`, `.award-body`
 * 2) Elementor HTML/Text: same classes **without** outer `.s-card` — content sits inside the **container** card
 *    (no second frame on the first widget).
 *
 * Outer **e-con** with class `recognition` (or ID `recognition`) uses the same white box + thin border as **credentials**.
 *
 * @package Personal_Team_Elementor
 * @since 1.2.2
 * @since 1.2.3 — Scoped card content; sticky align-self.
 * @since 1.2.4 — Fallback card shell + `.s-title` / `.award-*` without `.s-card` (matches static HTML classes).
 * @since 1.2.5 — Outer container card (match credentials); inner `.s-card` / first widget no longer double-border.
 */

.recognition,
#recognition {
	--pte-rec-navy-border: rgba(10, 49, 97, 0.12);
	--pte-rec-muted: #5a6a7a;
	--pte-rec-red: #b31942;
	--pte-rec-gold: #b58c35;

	background: #fff !important;
	border: 0.5px solid var(--pte-rec-navy-border);
	border-radius: 10px;
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-sizing: border-box;
}

.recognition *,
.recognition *::before,
.recognition *::after,
#recognition *,
#recognition *::before,
#recognition *::after {
	box-sizing: border-box;
}

.elementor-element.recognition.e-con,
.elementor-element#recognition.e-con {
	align-self: flex-start;
	background: #fff !important;
	border: 0.5px solid var(--pte-rec-navy-border) !important;
	border-radius: 10px !important;
	padding: 1.25rem !important;
	margin-bottom: 1rem !important;
	box-sizing: border-box !important;
}

.recognition.e-con,
#recognition.e-con {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
}

.recognition.e-con > .e-con-inner,
#recognition.e-con > .e-con-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	align-items: stretch !important;
	align-content: flex-start !important;
	width: 100%;
}

.recognition .elementor-widget,
#recognition .elementor-widget {
	align-self: stretch;
	width: 100%;
	max-width: 100%;
}

/* --- Inner .s-card: spacing only (outer .recognition / .e-con is the card, like credentials) --- */
.recognition .s-card,
#recognition .s-card {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0 0 1rem;
	box-sizing: border-box;
}

.recognition .s-card:last-child,
#recognition .s-card:last-child {
	margin-bottom: 0;
}

/*
 * No .s-card: first widget sits inside the padded container (no inner white frame).
 */
.recognition.e-con:not(:has(.s-card)) > .e-con-inner > .elementor-widget:first-child .elementor-widget-container,
#recognition.e-con:not(:has(.s-card)) > .e-con-inner > .elementor-widget:first-child .elementor-widget-container {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* --- Title + badges: under .s-card OR direct in column (class names from static HTML) --- */
.recognition .s-card .s-title,
.recognition .s-title,
#recognition .s-card .s-title,
#recognition .s-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pte-rec-muted);
	margin: 0 0 0.85rem;
	line-height: 1.3;
}

.recognition .s-card .award-badge,
.recognition .award-badge,
#recognition .s-card .award-badge,
#recognition .award-badge {
	border-radius: 7px;
	padding: 0.7rem 0.85rem;
	margin: 0 0 0.6rem;
}

.recognition .s-card .award-badge:last-child,
.recognition .award-badge:last-child,
#recognition .s-card .award-badge:last-child,
#recognition .award-badge:last-child {
	margin-bottom: 0;
}

.recognition .s-card .award-badge.red,
.recognition .award-badge.red,
#recognition .s-card .award-badge.red,
#recognition .award-badge.red {
	background: #fbeaed;
	border: 1px solid rgba(179, 25, 66, 0.18);
}

.recognition .s-card .award-badge.gold,
.recognition .award-badge.gold,
#recognition .s-card .award-badge.gold,
#recognition .award-badge.gold {
	background: rgba(181, 140, 53, 0.08);
	border: 1px solid rgba(181, 140, 53, 0.25);
}

.recognition .s-card .award-name,
.recognition .award-name,
#recognition .s-card .award-name,
#recognition .award-name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.recognition .s-card .award-badge.red .award-name,
.recognition .award-badge.red .award-name,
#recognition .s-card .award-badge.red .award-name,
#recognition .award-badge.red .award-name {
	color: var(--pte-rec-red);
}

.recognition .s-card .award-badge.gold .award-name,
.recognition .award-badge.gold .award-name,
#recognition .s-card .award-badge.gold .award-name,
#recognition .award-badge.gold .award-name {
	color: var(--pte-rec-gold);
}

.recognition .s-card .award-body,
.recognition .award-body,
#recognition .s-card .award-body,
#recognition .award-body {
	font-size: 11.5px;
	margin: 3px 0 0;
	line-height: 1.45;
}

.recognition .s-card .award-badge.red .award-body,
.recognition .award-badge.red .award-body,
#recognition .s-card .award-badge.red .award-body,
#recognition .award-badge.red .award-body {
	color: #a0505d;
}

.recognition .s-card .award-badge.gold .award-body,
.recognition .award-badge.gold .award-body,
#recognition .s-card .award-badge.gold .award-body,
#recognition .award-badge.gold .award-body {
	color: #9a7a30;
}

/* Elementor / kit — inner shells stay flat; container keeps the card */
.elementor-element.recognition .s-card,
.elementor-element#recognition .s-card {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 1rem !important;
	box-shadow: none !important;
}

.elementor-element.recognition .s-card:last-child,
.elementor-element#recognition .s-card:last-child {
	margin-bottom: 0 !important;
}

.elementor-element.recognition.e-con:not(:has(.s-card)) > .e-con-inner > .elementor-widget:first-child .elementor-widget-container,
.elementor-element#recognition.e-con:not(:has(.s-card)) > .e-con-inner > .elementor-widget:first-child .elementor-widget-container {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.elementor-element.recognition .s-card .s-title,
.elementor-element.recognition .s-title,
.elementor-element#recognition .s-card .s-title,
.elementor-element#recognition .s-title {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--pte-rec-muted) !important;
	margin: 0 0 0.85rem !important;
	line-height: 1.3 !important;
}