/* ==========================================================================
   Author Profile (Dynamic)

   Specificity ladder, so that the widget's controls always win:
     base             .arena-ap .arena-ap__x                 (0,2,0)
     skins / states   .arena-ap.arena-ap--dark .arena-ap__x  (0,3,0)
     controls         {{WRAPPER}} .arena-ap .arena-ap__x     (0,5,0)
   and (0,2,0) still clears Elementor's Global Kit (a, h3: 0,1,1).

   Spacing comes only from each part's own margin-block-end - its "Space
   Below" control. Nothing else adds space between the lines.
   Logical properties throughout, so it mirrors for right-to-left.
   ========================================================================== */

.arena-ap {
	--arena-ap-avatar: 108px;
	--arena-ap-align: left;
	--arena-ap-justify: flex-start;
	--arena-ap-rule-inline: 0 auto;
	--arena-ap-ink: var(--arena-ink, #14181f);
	--arena-ap-soft: var(--arena-ink-soft, #5b6472);
	--arena-ap-line: var(--arena-line, #e3e7ec);
	--arena-ap-sep: var(--arena-ap-line);
	--arena-ap-sep-width: 1px;
	--arena-ap-detail-gap: 10px;
	--arena-ap-btn-line: var(--arena-ap-line);
	--arena-ap-accent: var(--arena-accent, #c8102e);

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 32px;
	box-sizing: border-box;
	color: var(--arena-ap-ink);
	font-family: var(--arena-font, system-ui, sans-serif);
	text-align: var(--arena-ap-align);
}

.arena-ap *,
.arena-ap *::before,
.arena-ap *::after {
	box-sizing: border-box;
}

/* ── Skins ──────────────────────────────────────────────────────────── */

.arena-ap.arena-ap--light {
	padding: 32px;
	border: 1px solid var(--arena-line, #e3e7ec);
	border-radius: 10px;
	background: var(--arena-bg-soft, #f6f8fa);
}

/* The card the design was drawn from. */
.arena-ap.arena-ap--dark {
	--arena-ap-ink: #ffffff;
	--arena-ap-soft: rgba(255, 255, 255, .78);
	--arena-ap-line: rgba(255, 255, 255, .4);
	--arena-ap-btn-line: rgba(255, 255, 255, .85);
	--arena-ap-accent: #8d0000;
	padding: 36px 40px;
	border-radius: 4px;
	background: #170406;
}

/* ── Picture ────────────────────────────────────────────────────────── */

.arena-ap .arena-ap__media {
	flex: 0 0 auto;
	line-height: 0;
}

/* Photo or initial, the same circle. The initial's own size and letter
   come in as inline custom properties for the byline; here the card's
   Size control decides both. */
.arena-ap .arena-ap__media > * {
	display: block;
	width: var(--arena-ap-avatar);
	height: var(--arena-ap-avatar);
	border-radius: 50%;
	object-fit: cover;
}

.arena-ap .arena-ap__media .arena-author-box__initial {
	display: inline-flex;
	font-size: calc(var(--arena-ap-avatar) * .5);
}

.arena-ap.arena-ap--dark .arena-ap__media .arena-author-box__initial {
	background-color: var(--arena-ap-accent);
	color: #ffffff;
}

/* ── Text ───────────────────────────────────────────────────────────── */

.arena-ap .arena-ap__body {
	flex: 1 1 auto;
	min-width: 0;
}

.arena-ap .arena-ap__name {
	margin: 0 0 10px;
	padding: 0;
	color: var(--arena-ap-ink);
	font-family: var(--arena-font-head, Georgia, serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
}

.arena-ap .arena-ap__name a {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.arena-ap .arena-ap__name a:is(:hover, :focus-visible) {
	color: var(--arena-ap-accent);
}

.arena-ap.arena-ap--dark .arena-ap__name a:is(:hover, :focus-visible) {
	color: var(--arena-ap-soft);
}

.arena-ap .arena-ap__role {
	margin: 0 0 10px;
	color: var(--arena-ap-ink);
	font-size: 16px;
	line-height: 1.4;
}

/* "Ottawa, Canada | Author since 2015 | 1.7m article views" */
.arena-ap .arena-ap__details {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--arena-ap-justify);
	row-gap: 4px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	color: var(--arena-ap-soft);
	font-size: 15px;
	line-height: 1.3;
}

.arena-ap .arena-ap__detail {
	margin: 0;
	padding: 0;
}

.arena-ap .arena-ap__detail + .arena-ap__detail {
	margin-inline-start: var(--arena-ap-detail-gap);
	padding-inline-start: var(--arena-ap-detail-gap);
	border-inline-start: var(--arena-ap-sep-width) solid var(--arena-ap-sep);
}

.arena-ap .arena-ap__divider {
	width: 100%;
	height: 0;
	margin: 0 0 22px;
	margin-inline: var(--arena-ap-rule-inline);
	border: 0;
	border-block-start: 1px solid var(--arena-ap-line);
}

.arena-ap .arena-ap__bio {
	margin: 0 0 24px;
	color: var(--arena-ap-soft);
	font-family: var(--arena-font-head, Georgia, serif);
	font-size: 19px;
	font-style: italic;
	line-height: 1.6;
}

/* The last line closes the card - no space hanging under it. */
.arena-ap .arena-ap__body > :last-child {
	margin-block-end: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.arena-ap .arena-ap__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--arena-ap-justify);
	gap: 10px;
}

.arena-ap .arena-ap__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 9px 14px;
	border: 1px solid var(--arena-ap-btn-line);
	border-radius: 0;
	background: transparent;
	color: var(--arena-ap-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.arena-ap .arena-ap__btn:is(:hover, :focus-visible) {
	border-color: var(--arena-ap-ink);
	background: var(--arena-ap-ink);
	color: var(--arena-bg, #ffffff);
}

.arena-ap.arena-ap--dark .arena-ap__btn:is(:hover, :focus-visible) {
	border-color: #ffffff;
	background: rgba(255, 255, 255, .12);
	color: #ffffff;
}

.arena-ap .arena-ap__btn:focus-visible {
	outline: 2px solid var(--arena-ap-accent);
	outline-offset: 2px;
}

/* Get in touch leads. */
.arena-ap .arena-ap__btn--contact {
	border-color: var(--arena-ap-accent);
	background: var(--arena-ap-accent);
	color: #ffffff;
}

.arena-ap .arena-ap__btn--contact:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--arena-ap-accent) 82%, #000);
	background: color-mix(in srgb, var(--arena-ap-accent) 82%, #000);
	color: #ffffff;
}

.arena-ap.arena-ap--dark .arena-ap__btn--contact {
	border-color: rgba(255, 255, 255, .85);
}

.arena-ap .arena-ap__btn-icon {
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 1;
}

.arena-ap .arena-ap__btn-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* Icons Only: the label stays for screen readers. */
.arena-ap .arena-ap__btn-label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Narrow screens: stacked by default, every control can undo it ──── */

@media (max-width: 600px) {
	.arena-ap {
		flex-direction: column;
		gap: 20px;
	}

	.arena-ap.arena-ap--light,
	.arena-ap.arena-ap--dark {
		padding: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arena-ap .arena-ap__btn,
	.arena-ap .arena-ap__name a {
		transition: none;
	}
}