/**
 * Media & content samples — author bio `.articles` / `.article-row` pattern
 * (https://www.footholdamerica.com/author/joanne-farquharson-bio.html).
 *
 * Add CSS class **media-content** (or ID **media-content**) on the Elementor container.
 * Inner (either):
 * - `.articles` > `.sec-label` + `a.article-row` … (matches static HTML), **or**
 * - Same markup **without** the outer `.articles` div inside an HTML/Text widget — `.sec-label` + rows still style when the Elementor container has **`media-content`**.
 * - **Editor mistake (still supported):** `.articles` > `.sec-label` wrapping only alternating `.art-num` + `div` (no links). Uses a grid; reset so `.topics .sec-label` label caps don’t shrink the whole list. Prefer `a.article-row` + real heading.
 *
 * @package Personal_Team_Elementor
 * @since 1.1.14
 * @since 1.2.10 — `.sec-label` / heading without `.articles`; section margin on `.e-con`; kit heading label.
 * @since 1.2.12 — No `.e-con` / `.articles` block margins (stacked bio utilities; flex sibling margins summed).
 * @since 1.2.14 — Mis-nested `.sec-label` article grid; optional `div.article-row` (non-link row).
 */

.media-content,
#media-content {
	--pte-mc-navy: #0a3161;
	--pte-mc-red: #b31942;
	--pte-mc-muted: #5a6a7a;
	--pte-mc-navy-border: rgba(10, 49, 97, 0.12);
	--pte-mc-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;

	box-sizing: border-box;
}

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

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

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

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

.media-content .articles,
#media-content .articles {
	margin: 0;
}

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

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

.media-content a.article-row,
#media-content a.article-row {
	display: flex;
	gap: 14px;
	padding: 1rem 0;
	border-bottom: 0.5px solid var(--pte-mc-navy-border);
	align-items: flex-start;
	text-decoration: none !important;
	color: inherit !important;
	transition: background 0.15s ease;
}

.media-content a.article-row:last-child,
#media-content a.article-row:last-child {
	border-bottom: none;
}

.media-content a.article-row:hover .art-title,
.media-content a.article-row:focus-visible .art-title,
#media-content a.article-row:hover .art-title,
#media-content a.article-row:focus-visible .art-title {
	text-decoration-color: var(--pte-mc-navy) !important;
}

.media-content a.article-row:focus-visible,
#media-content a.article-row:focus-visible {
	outline: 2px solid var(--pte-mc-navy);
	outline-offset: 2px;
}

.media-content .art-num,
#media-content .art-num {
	font-family: var(--pte-mc-serif);
	font-size: 26px;
	color: rgba(10, 49, 97, 0.18);
	line-height: 1;
	flex-shrink: 0;
	width: 32px;
	text-align: left;
}

.media-content a.article-row > div:last-child,
#media-content a.article-row > div:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

.media-content .art-title,
#media-content .art-title {
	font-size: 14.5px;
	color: var(--pte-mc-navy) !important;
	font-weight: 500;
	line-height: 1.45;
	text-decoration: underline;
	text-decoration-color: rgba(10, 49, 97, 0.2);
	transition: text-decoration-color 0.2s;
}

.media-content .art-tag,
#media-content .art-tag {
	font-size: 11.5px;
	color: var(--pte-mc-muted);
	margin-top: 4px;
	line-height: 1.4;
}

/*
 * Mis-nested markup: `.articles` > `.sec-label` > `.art-num` + `div` pairs (sec-label must not get label-only caps on children).
 * When Topics wraps the page, `.topics .sec-label` must lose here — higher specificity below.
 */
.media-content .sec-label:has(> .art-num),
#media-content .sec-label:has(> .art-num) {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	align-items: start;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	line-height: normal;
	margin: 0;
}

.topics .media-content .sec-label:has(> .art-num),
.topics #media-content .sec-label:has(> .art-num),
.topics .elementor-element.media-content .sec-label:has(> .art-num),
.topics .elementor-element#media-content .sec-label:has(> .art-num) {
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit !important;
	line-height: normal !important;
	margin: 0 !important;
}

.media-content .sec-label:has(> .art-num) > .art-num,
#media-content .sec-label:has(> .art-num) > .art-num {
	margin: 0;
}

.media-content .sec-label:has(> .art-num) > .art-num,
#media-content .sec-label:has(> .art-num) > .art-num,
.media-content .sec-label:has(> .art-num) > div:not(.art-num),
#media-content .sec-label:has(> .art-num) > div:not(.art-num) {
	padding: 1rem 0;
}

.media-content .sec-label:has(> .art-num) > div:not(.art-num),
#media-content .sec-label:has(> .art-num) > div:not(.art-num) {
	border-bottom: 0.5px solid var(--pte-mc-navy-border);
	min-width: 0;
}

.media-content .sec-label:has(> .art-num) > div:not(.art-num):last-of-type,
#media-content .sec-label:has(> .art-num) > div:not(.art-num):last-of-type {
	border-bottom: none;
}

/* Non-link row (optional); same chrome as <a.article-row> without pointer/href semantics. */
.media-content div.article-row,
#media-content div.article-row {
	display: flex;
	gap: 14px;
	padding: 1rem 0;
	border-bottom: 0.5px solid var(--pte-mc-navy-border);
	align-items: flex-start;
	color: inherit;
}

.media-content div.article-row:last-child,
#media-content div.article-row:last-child {
	border-bottom: none;
}

.media-content div.article-row > div:last-child,
#media-content div.article-row > div:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Elementor: higher specificity so page/kit CSS doesn’t flatten rows or recolor labels.
 */
.elementor-element.media-content .articles .sec-label:not(:has(> .art-num)),
.elementor-element#media-content .articles .sec-label:not(:has(> .art-num)),
.elementor-element.media-content .sec-label:not(:has(> .art-num)),
.elementor-element#media-content .sec-label:not(:has(> .art-num)) {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--pte-mc-red) !important;
	margin: 0 0 0.65rem !important;
	line-height: 1.3 !important;
}

.elementor-element.media-content .sec-label:has(> .art-num),
.elementor-element#media-content .sec-label:has(> .art-num) {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	column-gap: 14px !important;
	align-items: start !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit !important;
	line-height: normal !important;
	margin: 0 !important;
}

.elementor-element.media-content .sec-label:has(> .art-num) > .art-num,
.elementor-element#media-content .sec-label:has(> .art-num) > .art-num,
.elementor-element.media-content .sec-label:has(> .art-num) > div:not(.art-num),
.elementor-element#media-content .sec-label:has(> .art-num) > div:not(.art-num) {
	padding: 1rem 0 !important;
}

.elementor-element.media-content .sec-label:has(> .art-num) > div:not(.art-num),
.elementor-element#media-content .sec-label:has(> .art-num) > div:not(.art-num) {
	border-bottom: 0.5px solid var(--pte-mc-navy-border) !important;
	min-width: 0 !important;
}

.elementor-element.media-content .sec-label:has(> .art-num) > div:not(.art-num):last-of-type,
.elementor-element#media-content .sec-label:has(> .art-num) > div:not(.art-num):last-of-type {
	border-bottom: none !important;
}

.elementor-element.media-content .elementor-widget-heading .elementor-heading-title,
.elementor-element#media-content .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-mc-red) !important;
	line-height: 1.3 !important;
	margin: 0 0 0.65rem !important;
}

.elementor-element.media-content a.article-row,
.elementor-element#media-content a.article-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 14px !important;
	padding: 1rem 0 !important;
	border-bottom: 0.5px solid var(--pte-mc-navy-border) !important;
	align-items: flex-start !important;
	text-decoration: none !important;
	color: inherit !important;
}

.elementor-element.media-content a.article-row:last-child,
.elementor-element#media-content a.article-row:last-child {
	border-bottom: none !important;
}

.elementor-element.media-content div.article-row,
.elementor-element#media-content div.article-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 14px !important;
	padding: 1rem 0 !important;
	border-bottom: 0.5px solid var(--pte-mc-navy-border) !important;
	align-items: flex-start !important;
	color: inherit !important;
}

.elementor-element.media-content div.article-row:last-child,
.elementor-element#media-content div.article-row:last-child {
	border-bottom: none !important;
}

.elementor-element.media-content .art-title,
.elementor-element#media-content .art-title {
	font-size: 14.5px !important;
	color: var(--pte-mc-navy) !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(10, 49, 97, 0.2) !important;
}

.elementor-element.media-content .art-num,
.elementor-element#media-content .art-num {
	font-family: var(--pte-mc-serif) !important;
	font-size: 26px !important;
	color: rgba(10, 49, 97, 0.18) !important;
}

.elementor-element.media-content .art-tag,
.elementor-element#media-content .art-tag {
	font-size: 11.5px !important;
	color: var(--pte-mc-muted) !important;
}