/**
 * Speaking & Media list — author bio pattern
 * (https://www.footholdamerica.com/author/joanne-farquharson-bio.html).
 *
 * Add CSS class **speaking-media** (or ID **speaking-media**) on the Elementor container.
 * Inner: `.section-block` > `.sec-label` + `ul.appear-list` > `li` > `.appear-icon` + text column.
 *
 * Optional “Upcoming” tag: `<span class="appear-badge">Upcoming</span>` inside `.appear-title`.
 *
 * @package Personal_Team_Elementor
 * @since 1.1.13
 * @since 1.2.12 — `.section-block` margin 0 when stacked with other bio utilities (avoid doubled gaps).
 */

.speaking-media,
#speaking-media {
	--pte-sm-navy: #0a3161;
	--pte-sm-red: #b31942;
	--pte-sm-teal: #28c1df;
	--pte-sm-muted: #5a6a7a;
	--pte-sm-navy-bg: rgba(10, 49, 97, 0.07);
	--pte-sm-navy-border: rgba(10, 49, 97, 0.12);

	box-sizing: border-box;
}

.speaking-media *,
#speaking-media * {
	box-sizing: border-box;
}

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

.speaking-media.e-con > .e-con-inner,
#speaking-media.e-con > .e-con-inner {
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	align-items: stretch !important;
	align-content: flex-start !important;
	width: 100%;
}

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

.speaking-media .section-block,
#speaking-media .section-block {
	margin: 0;
}

.speaking-media .sec-label,
#speaking-media .sec-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pte-sm-red);
	margin: 0 0 0.65rem;
	line-height: 1.3;
}

.speaking-media ul.appear-list:not(.elementor-editor-element-settings):not(.elementor-icon-list-items),
#speaking-media ul.appear-list:not(.elementor-editor-element-settings):not(.elementor-icon-list-items) {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.speaking-media ul.appear-list:not(.elementor-icon-list-items) li,
#speaking-media ul.appear-list:not(.elementor-icon-list-items) li {
	display: flex;
	gap: 13px;
	padding: 0.85rem 0;
	border-bottom: 0.5px solid var(--pte-sm-navy-border);
	align-items: flex-start;
	margin: 0;
}

.speaking-media ul.appear-list:not(.elementor-icon-list-items) li:last-child,
#speaking-media ul.appear-list:not(.elementor-icon-list-items) li:last-child {
	border-bottom: none;
}

.speaking-media .appear-icon,
#speaking-media .appear-icon {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: var(--pte-sm-navy-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.speaking-media ul.appear-list li > div:last-child,
#speaking-media ul.appear-list li > div:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

.speaking-media .appear-title,
#speaking-media .appear-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pte-sm-navy);
	line-height: 1.35;
}

.speaking-media .appear-title a,
#speaking-media .appear-title a {
	color: var(--pte-sm-navy) !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

.speaking-media .appear-title a:hover,
#speaking-media .appear-title a:hover {
	text-decoration: underline !important;
}

/* Cyan “Upcoming” (replaces inline span in static bio) */
.speaking-media .appear-badge,
#speaking-media .appear-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pte-sm-teal);
	margin-left: 6px;
	white-space: nowrap;
}

.speaking-media .appear-sub,
#speaking-media .appear-sub {
	font-size: 13px;
	color: var(--pte-sm-muted);
	margin-top: 3px;
	line-height: 1.5;
}

.speaking-media .appear-sub a,
#speaking-media .appear-sub a {
	color: var(--pte-sm-navy) !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(10, 49, 97, 0.3) !important;
	font-size: inherit !important;
	font-weight: 400 !important;
}

.speaking-media .appear-sub a:hover,
#speaking-media .appear-sub a:hover {
	text-decoration-color: var(--pte-sm-navy) !important;
}