/**
 * Inoforest Author Box
 *
 * Contents
 * 1. Variables and box (layout from the Layout control: --ino-ab-dir, --ino-ab-items, --ino-ab-align)
 * 2. Photo
 * 3. Label, name, biography
 * 4. Social links
 * 5. Editor hint
 * 6. Responsive and reduced motion
 *
 * Colours read the Design System (--inoforest-color-*) with the Travel26 design as fallback; the panel's Style controls
 * set the --ino-ab-* variables or style the parts with one class more, so they win without !important.
 */

/* 1. Variables and box ---------------------------------------------------------------------------------------------- */
.inoforest-author-box {
	--ino-ab-primary: var(--inoforest-color-primary, #0b7a75);
	--ino-ab-accent: var(--inoforest-color-accent, #ff6a3d);
	--ino-ab-heading: var(--inoforest-color-heading, #0d1b2a);
	--ino-ab-text: var(--inoforest-color-text, #5a6a79);
	--ino-ab-bg: #fdf6ef;
	--ino-ab-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	display: flex;
	flex-direction: var(--ino-ab-dir, row);
	align-items: var(--ino-ab-items, flex-start);
	gap: 28px;
	padding: 36px;
	color: var(--ino-ab-text);
	text-align: var(--ino-ab-align, start);
	background: var(--ino-ab-bg);
	border-radius: 24px;
}

.inoforest-author-box__body {
	min-width: 0;
}

/* 2. Photo ------------------------------------------------------------------------------------------------------------ */
.inoforest-author-box__media {
	flex: none;
	line-height: 0;
}

/* Two classes and the element out-rank Elementor's ".elementor img" reset (height, border, radius, shadow). */
.inoforest-author-box img.inoforest-author-box__avatar {
	display: block;
	width: var(--ino-ab-avatar, 110px);
	max-width: none;
	height: var(--ino-ab-avatar, 110px);
	object-fit: cover;
	border: var(--ino-ab-ring, 4px) solid var(--ino-ab-ring-color, #fff);
	border-radius: var(--ino-ab-avatar-radius, 50%);
	box-shadow: 0 6px 20px rgba(13, 27, 42, 0.07);
}

/* 3. Label, name, biography ---------------------------------------------------------------------------------------------- */
.inoforest-author-box .inoforest-author-box__label {
	display: block;
	margin-bottom: 4px;
	font-family: "Caveat", cursive;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ino-ab-accent);
}

.inoforest-author-box .inoforest-author-box__name {
	margin: 0 0 10px;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ino-ab-heading);
}

.inoforest-author-box__name a {
	color: inherit;
	text-decoration: none;
	transition: color 0.35s var(--ino-ab-ease);
}

.inoforest-author-box__name a:hover,
.inoforest-author-box__name a:focus-visible {
	color: var(--ino-ab-primary);
}

.inoforest-author-box .inoforest-author-box__bio {
	margin: 0;
	color: var(--ino-ab-text);
}

.inoforest-author-box__bio p {
	margin: 0 0 0.6em;
}

.inoforest-author-box__bio p:last-child {
	margin-bottom: 0;
}

/* 4. Social links ------------------------------------------------------------------------------------------------------ */
.inoforest-author-box__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--ino-ab-justify, flex-start);
	gap: var(--ino-ab-social-gap, 10px);
	margin: var(--ino-ab-social-space, 16px) 0 0;
	padding: 0;
	list-style: none;
}

.inoforest-author-box__social li {
	margin: 0;
	padding: 0;
}

.inoforest-author-box__social a {
	display: grid;
	place-items: center;
	width: var(--ino-ab-social-size, 38px);
	height: var(--ino-ab-social-size, 38px);
	font-size: var(--ino-ab-social-icon, 16px);
	line-height: 1;
	color: var(--ino-ab-heading);
	text-decoration: none;
	background: #fff;
	border: 0 solid transparent;
	border-radius: 50%;
	transition: color 0.35s var(--ino-ab-ease), background-color 0.35s var(--ino-ab-ease), border-color 0.35s var(--ino-ab-ease), transform 0.35s var(--ino-ab-ease);
}

.inoforest-author-box__social a svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.inoforest-author-box__social a:hover,
.inoforest-author-box__social a:focus-visible {
	color: #fff;
	background: var(--ino-ab-accent);
	transform: translateY(var(--ino-ab-social-lift, -3px));
}

.inoforest-author-box__social a:focus-visible,
.inoforest-author-box__name a:focus-visible {
	outline: 2px solid var(--ino-ab-primary);
	outline-offset: 2px;
}

/* 5. Editor hint --------------------------------------------------------------------------------------------------------- */
.inoforest-author-box__hint {
	margin: 0 0 16px;
	padding: 12px 16px;
	font-size: 0.875rem;
	text-align: center;
	border: 1px dashed var(--inoforest-color-border, #e5ebef);
	border-radius: 12px;
}

/* 6. Responsive and reduced motion ------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
	/* The design's 15 px base font on phones. */
	.inoforest-author-box {
		--ino-ab-avatar: 84px;
		font-size: 15px;
		gap: 18px;
		padding: 28px 24px;
	}

	.inoforest-author-box[data-stack="yes"] {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inoforest-author-box__social a,
	.inoforest-author-box__name a {
		transition: none;
	}

	.inoforest-author-box__social a:hover,
	.inoforest-author-box__social a:focus-visible {
		transform: none;
	}
}