/**
 * Podcast host block — author bio “Podcast host” card
 * (https://www.footholdamerica.com/author/joanne-farquharson-bio.html).
 *
 * Add CSS class **podcast-host** (or ID **podcast-host**) on the Elementor container.
 *
 * Inner markup (pick one):
 * - **Featured card:** `.section-block` > `.sec-label` + `.pod-card` > `.pod-icon` + text column (Joanne-style).
 * - **Compact row:** `.sec-label` + `.pod-row` > `.pod-icon-sm` + column > `.pod-title` / `.pod-sub`
 *   (matches static bio HTML, e.g. Geanice). In Elementor, omit outer `.section-block` if the container is
 *   already `podcast-host`. **Do not** add block margin on `.podcast-host.e-con` when it’s stacked with
 *   `career-highlights` / `media-content` — flex siblings’ margins sum (no collapse), which doubles gaps.
 *
 * @package Personal_Team_Elementor
 * @since 1.1.12
 * @since 1.2.8 — Compact `.pod-row` / `.pod-icon-sm` / `.pod-title` / `.pod-sub`; Elementor heading as label.
 * @since 1.2.11 — No vertical margin on `.podcast-host.e-con` (avoid stacking with adjacent utility sections).
 * @since 1.2.12 — `.section-block` margin 0 (same stacking rule as other utilities).
 */

.podcast-host,
#podcast-host {
	--pte-pod-navy: #0a3161;
	--pte-pod-red: #b31942;
	--pte-pod-teal: #28c1df;
	--pte-pod-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--pte-pod-navy-border: rgba(10, 49, 97, 0.12);
	--pte-pod-muted: #5a6a7a;

	box-sizing: border-box;
}

.podcast-host *,
#podcast-host * {
	box-sizing: border-box;
}

/* Elementor flex containers */
.podcast-host.e-con,
#podcast-host.e-con {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	margin: 0;
}

.podcast-host.e-con > .e-con-inner,
#podcast-host.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%;
}

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

.podcast-host .section-block,
#podcast-host .section-block {
	margin: 0;
}

/* Red caps label — only inside podcast-host */
.podcast-host .sec-label,
#podcast-host .sec-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pte-pod-red);
	margin: 0 0 0.65rem;
	line-height: 1.3;
}

.podcast-host .elementor-widget-heading .elementor-heading-title,
#podcast-host .elementor-widget-heading .elementor-heading-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pte-pod-red);
	line-height: 1.3;
	margin: 0 0 0.65rem;
}

.podcast-host .pod-card,
#podcast-host .pod-card {
	background: var(--pte-pod-navy);
	border-radius: 10px;
	padding: 1.5rem;
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin-top: 0.5rem;
}

.podcast-host .pod-icon,
#podcast-host .pod-icon {
	width: 54px;
	height: 54px;
	background: var(--pte-pod-red);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-size: 24px;
	line-height: 1;
}

.podcast-host .pod-role,
#podcast-host .pod-role {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pte-pod-teal);
	margin-bottom: 0.5rem;
}

.podcast-host .pod-name,
#podcast-host .pod-name {
	font-family: var(--pte-pod-serif);
	font-size: 20px;
	color: #fff;
	line-height: 1.2;
	margin-bottom: 5px;
}

.podcast-host .pod-name a,
#podcast-host .pod-name a {
	color: #fff !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-family: inherit !important;
}

.podcast-host .pod-name a:hover,
#podcast-host .pod-name a:hover {
	text-decoration: underline !important;
}

.podcast-host .pod-desc,
#podcast-host .pod-desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 0.9rem;
	line-height: 1.5;
}

.podcast-host .pod-links,
#podcast-host .pod-links {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.podcast-host a.pod-link,
.podcast-host .pod-link,
#podcast-host a.pod-link,
#podcast-host .pod-link {
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	padding: 5px 12px;
	border-radius: 20px;
	text-decoration: none !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.82) !important;
	background: rgba(255, 255, 255, 0.07);
	transition: background 0.2s;
	display: inline-flex;
	align-items: center;
}

.podcast-host a.pod-link:hover,
.podcast-host .pod-link:hover,
#podcast-host a.pod-link:hover,
#podcast-host .pod-link:hover {
	background: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.9) !important;
}

.podcast-host .pod-link.spotify,
#podcast-host .pod-link.spotify {
	border-color: rgba(30, 215, 96, 0.4);
	color: #1ed760 !important;
	background: rgba(30, 215, 96, 0.06);
}

.podcast-host .pod-link.yt,
#podcast-host .pod-link.yt {
	border-color: rgba(255, 80, 80, 0.4);
	color: #ff9090 !important;
	background: rgba(255, 0, 0, 0.07);
}

.podcast-host .pod-link.amazon,
#podcast-host .pod-link.amazon {
	border-color: rgba(255, 165, 0, 0.4);
	color: #ffb84d !important;
	background: rgba(255, 165, 0, 0.07);
}

.podcast-host .pod-link.apple,
#podcast-host .pod-link.apple {
	border-color: rgba(250, 130, 255, 0.4);
	color: #f580ff !important;
	background: rgba(200, 0, 255, 0.06);
}

/* Text column grows; icon stays fixed */
.podcast-host .pod-card > div:last-child,
#podcast-host .pod-card > div:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Compact row (on-page, light background — static author HTML) --- */
.podcast-host .pod-row,
#podcast-host .pod-row {
	display: flex;
	gap: 13px;
	padding: 0.85rem 0;
	border-bottom: 0.5px solid var(--pte-pod-navy-border);
	align-items: flex-start;
}

.podcast-host .pod-row:last-child,
#podcast-host .pod-row:last-child {
	border-bottom: none;
}

.podcast-host .pod-icon-sm,
#podcast-host .pod-icon-sm {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: var(--pte-pod-red);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	flex-shrink: 0;
	color: #fff;
}

.podcast-host .pod-row > div:last-child,
#podcast-host .pod-row > div:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

.podcast-host .pod-row .pod-title,
#podcast-host .pod-row .pod-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pte-pod-navy);
	line-height: 1.35;
}

.podcast-host .pod-row .pod-title a,
#podcast-host .pod-row .pod-title a {
	color: var(--pte-pod-navy);
	text-decoration: none;
}

.podcast-host .pod-row .pod-title a:hover,
#podcast-host .pod-row .pod-title a:hover {
	text-decoration: underline;
}

.podcast-host .pod-row .pod-sub,
#podcast-host .pod-row .pod-sub {
	font-size: 13px;
	color: var(--pte-pod-muted);
	margin-top: 3px;
	line-height: 1.5;
}

/* Elementor / kit — compact row + label */
.elementor-element.podcast-host .elementor-widget-heading .elementor-heading-title,
.elementor-element#podcast-host .elementor-widget-heading .elementor-heading-title {
	font-family: inherit !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--pte-pod-red) !important;
	line-height: 1.3 !important;
	margin: 0 0 0.65rem !important;
}

.elementor-element.podcast-host .sec-label,
.elementor-element#podcast-host .sec-label {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--pte-pod-red) !important;
	margin: 0 0 0.65rem !important;
	line-height: 1.3 !important;
}

.elementor-element.podcast-host .pod-row .pod-title,
.elementor-element#podcast-host .pod-row .pod-title {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--pte-pod-navy) !important;
	line-height: 1.35 !important;
}

.elementor-element.podcast-host .pod-row .pod-title a,
.elementor-element#podcast-host .pod-row .pod-title a {
	color: var(--pte-pod-navy) !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

.elementor-element.podcast-host .pod-row .pod-sub,
.elementor-element#podcast-host .pod-row .pod-sub {
	font-size: 13px !important;
	color: var(--pte-pod-muted) !important;
	line-height: 1.5 !important;
}

@media (max-width: 680px) {
	.podcast-host .pod-card,
	#podcast-host .pod-card {
		flex-direction: column;
	}
}