/**
 * Erweiterte Autorenbox - Horizontal Card Layout
 * Modernes Card-Design mit Bild links
 */

/* Überschreibt Material Skin Styles für Horizontal Card */
body.material #author-bio.foxromeo-horizontal {
	background: #fff !important;
	padding: 0 !important;
	border-radius: 12px !important;
	margin: 40px 0 !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
	overflow: hidden !important;
	position: relative !important;
}

body.material #author-bio.foxromeo-horizontal .span_12 {
	display: flex !important;
	align-items: stretch !important;
	flex-wrap: wrap !important;
}

body.material #author-bio.foxromeo-horizontal .author-avatar-container {
	flex: 0 0 320px !important;
	min-height: 280px !important;
	background-size: cover !important;
	background-position: center !important;
}

body.material #author-bio.foxromeo-horizontal #author-info {
	flex: 1 !important;
	padding: 30px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	min-width: 300px !important;
	width: auto !important;
	max-width: none !important;
	text-align: left !important;
	position: relative !important;
}

body.material #author-bio.foxromeo-horizontal #author-info p {
	opacity: 1 !important;
	text-align: left !important;
	margin: 0 !important;
}

/* Social Media Icons - Rechts oben */
body.material #author-bio.foxromeo-horizontal .author-social-links {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	display: flex !important;
	gap: 10px !important;
}

/* Hover-Effekte */
.author-social-link:hover {
	opacity: 0.9 !important;
	transform: translateY(-2px) !important;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
	body.material #author-bio.foxromeo-horizontal .span_12 {
		flex-direction: column !important;
	}
	
	body.material #author-bio.foxromeo-horizontal .author-avatar-container {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-height: 200px !important;
	}
	
	body.material #author-bio.foxromeo-horizontal #author-info {
		padding: 20px !important;
	}
	
	body.material #author-bio.foxromeo-horizontal .author-social-links {
		position: static !important;
		justify-content: flex-start !important;
		margin-top: 15px !important;
		margin-bottom: 10px !important;
	}
}