/**
 * Editorial Text Pattern Styles
 *
 * Styling für das Editorial Text Pattern basierend auf Figma Design.
 *
 * @package Hundeschule_TT5_Child
 * @since 1.0.0
 */

/* Editorial Text Section - py-12 md:py-16 lg:py-20 bg-white relative overflow-hidden */
.wp-block-group.hs-editorial-text,
.wp-block-group.alignfull.hs-editorial-text,
.hs-editorial-text {
	position: relative !important;
	overflow: hidden !important;
	background-color: #ffffff !important; /* bg-white */
	padding-top: 6rem !important; /* py-12 */
	padding-bottom: 6rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 768px) {
	.wp-block-group.hs-editorial-text,
	.hs-editorial-text {
		padding-top: 6rem !important; /* md:py-16 */
		padding-bottom: 6rem !important;
	}
}

@media (min-width: 1024px) {
	.wp-block-group.hs-editorial-text,
	.hs-editorial-text {
		padding-top: 5rem !important; /* lg:py-20 */
		padding-bottom: 5rem !important;
	}
}

/* Editorial Text Container - max-w-6xl mx-auto px-4 sm:px-6 relative z-10 */
.hs-editorial-text-container {
	max-width: 72rem; /* max-w-6xl = 1152px */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem; /* px-4 */
	padding-right: 1rem;
	position: relative;
	z-index: 10;
}

@media (min-width: 640px) {
	.hs-editorial-text-container {
		padding-left: 1.5rem; /* sm:px-6 */
		padding-right: 1.5rem;
	}
}

/* SVG Bottom-Right Decoration via ::before pseudo-element - absolute -bottom-25 -right-45 w-84 h-84 text-orange-50 -z-10 hidden lg:block */
.hs-editorial-text-container::before,
.wp-block-group.hs-editorial-text-container::before,
.wp-block-group.hs-editorial-text-container.has-global-padding::before,
.wp-block-group.hs-editorial-text-container.is-layout-constrained::before {
	content: '';
	position: absolute;
	bottom: -6.25rem; /* -bottom-25 */
	right: -11.25rem; /* -right-45 */
	width: 21rem; /* w-84 */
	height: 21rem; /* h-84 */
	z-index: -10;
	pointer-events: none;
	display: block; /* Show on all screen sizes including mobile */
	color: #ffedd5; /* text-orange-50 */
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="%23ffedd5" d="M41.3,-71.3C53.7,-63.5,64.3,-52.2,71.1,-38.9C77.9,-25.6,80.9,-10.3,80.3,5.1C79.7,20.5,75.5,36,67.4,48.9C59.3,61.8,47.3,72.1,33.5,77.8C19.7,83.5,4.1,84.6,-11.3,83.5C-26.7,82.4,-41.9,79.1,-54.9,71.4C-67.9,63.7,-78.7,51.6,-84.4,37.2C-90.1,22.8,-90.7,6.1,-87.5,-9.4C-84.3,-24.9,-77.3,-39.2,-66.8,-49.8C-56.3,-60.4,-42.3,-67.3,-28.1,-74.2C-13.9,-81.1,0.5,-88,15.6,-87.9C30.7,-87.8,28.9,-79.1,41.3,-71.3Z" transform="translate(100 100)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Adjust size and position for mobile */
@media (max-width: 767px) {
	.hs-editorial-text-container::before,
	.wp-block-group.hs-editorial-text-container::before,
	.wp-block-group.hs-editorial-text-container.has-global-padding::before,
	.wp-block-group.hs-editorial-text-container.is-layout-constrained::before {
		width: 12rem; /* Smaller on mobile */
		height: 12rem;
		bottom: -3rem;
		right: -4rem;
	}
}

/* SVG Top-Left Decoration via ::after pseudo-element - absolute top-10 -left-30 w-56 h-56 text-yellow-50 -z-10 hidden lg:block */
.hs-editorial-text-container::after,
.wp-block-group.hs-editorial-text-container::after,
.wp-block-group.hs-editorial-text-container.has-global-padding::after,
.wp-block-group.hs-editorial-text-container.is-layout-constrained::after {
	content: '';
	position: absolute;
	top: 2.5rem; /* top-10 */
	left: -7.5rem; /* -left-30 */
	width: 14rem; /* w-56 */
	height: 14rem; /* h-56 */
	z-index: -10;
	pointer-events: none;
	display: block; /* Show on all screen sizes including mobile */
	color: #fefce8; /* text-yellow-50 */
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="%23fefce8" d="M47.3,-78.9C60.9,-71.1,71.3,-57.3,77.8,-42.1C84.3,-26.9,87,-10.3,85.5,5.8C84,21.9,78.3,37.5,68.9,49.8C59.5,62.1,46.4,71.1,32.1,76.4C17.8,81.7,2.3,83.3,-13.5,82.5C-29.3,81.7,-45.4,78.5,-58.7,70.8C-72,63.1,-82.5,50.9,-87.8,36.5C-93.1,22.1,-93.2,5.5,-89.3,-9.8C-85.4,-25.1,-77.5,-39.1,-66.3,-49.9C-55.1,-60.7,-40.6,-68.3,-25.8,-75.3C-11,-82.3,4.2,-88.7,19.5,-87.5C34.8,-86.3,33.7,-86.7,47.3,-78.9Z" transform="translate(100 100)"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Adjust size and position for mobile */
@media (max-width: 767px) {
	.hs-editorial-text-container::after,
	.wp-block-group.hs-editorial-text-container::after,
	.wp-block-group.hs-editorial-text-container.has-global-padding::after,
	.wp-block-group.hs-editorial-text-container.is-layout-constrained::after {
		width: 8rem; /* Smaller on mobile */
		height: 8rem;
		top: 1rem;
		left: -3rem;
	}
}

/* Editorial Text Header - text-center mb-8 md:mb-10 */
.hs-editorial-text-header {
	text-align: center;
	margin-bottom: 2rem; /* mb-8 */
	margin-top: 0;
}

@media (min-width: 768px) {
	.hs-editorial-text-header {
		margin-bottom: 2.5rem; /* md:mb-10 */
	}
}

/* Badge - inline-block px-4 py-1.5 bg-orange-100 text-orange-600 rounded-full text-sm mb-4 */
.hs-editorial-text-badge,
.wp-block-paragraph.hs-editorial-text-badge {
	display: inline-block !important;
	padding: 0.375rem 1rem !important; /* px-4 py-1.5 */
	background-color: #ffedd5 !important; /* bg-orange-100 */
	color: #ea580c !important; /* text-orange-600 */
	border-radius: 9999px !important; /* rounded-full */
	font-size: 0.85rem !important; /* text-sm */
	margin-bottom: 1rem !important; /* mb-4 */
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	font-weight: 400;
	text-align: center;
}

/* Heading - text-2xl md:text-3xl lg:text-4xl */
.hs-editorial-text-heading {
	font-size: 1.5rem; /* text-2xl */
	line-height: 1.5;
	font-weight: var(--font-weight-medium, 500);
	color: var(--foreground, oklch(0.145 0 0));
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.hs-editorial-text-heading {
		font-size: 1.875rem; /* md:text-3xl */
	}
}

@media (min-width: 1024px) {
	.hs-editorial-text-heading {
		font-size: 2.25rem; /* lg:text-4xl */
	}
}

/* Editorial Text Content Box - bg-gradient-to-br from-gray-50 to-orange-50/30 rounded-[24px] md:rounded-[32px] lg:rounded-[40px] p-6 md:p-8 lg:p-12 shadow-sm border-2 border-gray-100/50 */
.hs-editorial-text-content {
	background: linear-gradient(to bottom right, #f9fafb, rgba(255, 237, 213, 0.3)); /* from-gray-50 to-orange-50/30 */
	border-radius: 24px; /* rounded-[24px] */
	padding: 1.5rem; /* p-6 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
	border: 2px solid rgba(243, 244, 246, 0.5); /* border-2 border-gray-100/50 */
	margin: 0;
}

@media (min-width: 768px) {
	.hs-editorial-text-content {
		border-radius: 32px; /* md:rounded-[32px] */
		padding: 2rem; /* md:p-8 */
	}
}

@media (min-width: 1024px) {
	.hs-editorial-text-content {
		border-radius: 40px; /* lg:rounded-[40px] */
		padding: 3rem; /* lg:p-12 */
	}
}

/* Standardized editorial content flow */
.hs-editorial-text-content :where(p, li, dd, dt) {
	font-size: 0.85rem;
	line-height: 1.625;
	font-weight: 400;
	color: #374151;
}

.hs-editorial-text-content > :where(p, ul, ol, dl, blockquote, .wp-block-list, .wp-block-quote) {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.hs-editorial-text-content > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.hs-editorial-text-content > :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):first-child {
	margin-top: 0;
}

.hs-editorial-text-content > :where(p, ul, ol, dl, blockquote, .wp-block-list, .wp-block-quote):last-child {
	margin-bottom: 0;
}

/* Editorial lists */
.hs-editorial-text-content :where(ul, ol, .wp-block-list) {
	padding-left: 1.5rem;
}

.hs-editorial-text-content :where(ul, .wp-block-list:not(ol)) {
	list-style-type: disc;
}

.hs-editorial-text-content :where(ol) {
	list-style-type: decimal;
}

.hs-editorial-text-content :where(li) {
	padding-left: 0.25rem;
	color: #374151;
	line-height: 1.625;
}

.hs-editorial-text-content :where(li + li) {
	margin-top: 0.5rem;
}

.hs-editorial-text-content :where(li)::marker {
	color: #f97316;
	font-weight: 600;
}

.hs-editorial-text-content :where(li) > :where(ul, ol, .wp-block-list) {
	margin-top: 0.5rem;
	margin-bottom: 0;
	padding-left: 1.25rem;
}

@media (min-width: 768px) {
	.hs-editorial-text-content :where(p, li, dd, dt) {
		font-size: 1rem;
	}
}


.hs-editorial-text strong{
	font-weight: 600 !important;
}