/**
 * Block Patterns CSS - Ernesto Theme
 * Utility classes and styling for native WordPress block patterns
 *
 * @package Ernesto
 * @since 1.0.0
 */

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

/* Container widths */
.ernesto-container {
	max-width: var(--content-width, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md, 1.5rem);
	padding-right: var(--space-md, 1.5rem);
}

/* ==========================================================================
   Card Components
   ========================================================================== */

.ernesto-card {
	background-color: var(--bg-surface);
	padding: var(--space-lg, 2rem);
	border-radius: var(--image-border-radius, 8px);
	border: var(--image-border-width, 0) solid var(--color-border);
	transition: all 0.3s ease;
}

.ernesto-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ernesto-card-image {
	width: 100%;
	height: auto;
	border-radius: var(--image-border-radius, 8px);
	margin-bottom: var(--space-md, 1.5rem);
}

.ernesto-card-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: var(--space-sm, 1rem);
	color: var(--text-heading);
}

.ernesto-card-content {
	color: var(--text-main);
	line-height: 1.6;
	margin-bottom: var(--space-md, 1.5rem);
}

/* ==========================================================================
   Block Pattern Specific Styles
   ========================================================================== */

/* Hero Slider Section */
.ernesto-hero-slider-section {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Slider container: don't force aspect-ratio on the wrapper.
   At mid-widths (e.g. 1280px) the 32:9 height (~360px) is shorter than
   the title+description+button stack, so content is clipped by overflow:hidden.
   The slide's own min-height (60vh from hero-slider.css) drives the height instead.
   The background image fills via position:absolute regardless of container height. */
.ernesto-hero-slider-section .ernesto-hero-slider,
.ernesto-hero-slider-section .slider-viewport {
	width: 100%;
}

/* Ensure images fill container */
.ernesto-hero-slider-section .slide-image img,
.ernesto-hero-slider-section .slide-image picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Half Layout (50/50 Text/Image) */
.ernesto-half-layout {
	padding: var(--space-lg, 2rem) 0;
	gap: var(--space-lg, 2rem);
}

/* Remove extra margin from empty paragraphs that inflate column height */
.wp-block-columns.ernesto-half-layout .wp-block-column > p:empty {
	display: none;
}

/* Right pattern: text left, image right (desktop) → image first on mobile */
@media (max-width: 767px) {
	.ernesto-half-layout.right {
		display: flex;
		flex-direction: column;
	}

	.ernesto-half-layout.right .wp-block-column:first-child {
		order: 2; /* Text second */
	}

	.ernesto-half-layout.right .wp-block-column:last-child {
		order: 1; /* Image first */
	}
}

/* Left pattern: image left, text right (desktop) → already correct on mobile */
@media (max-width: 767px) {
	.ernesto-half-layout.left {
		/* No reordering needed - naturally stacks image first, text second */
	}
}

/* Text Flow Layout (Magazine Style) */
.ernesto-text-image-flow {
	position: relative;
	padding: var(--space-lg, 2rem);
}

/* Desktop: Float image and let text wrap */
@media (min-width: 768px) {
	.ernesto-image-flow-right {
		float: right;
		margin-left: var(--space-lg, 2rem);
		margin-bottom: var(--space-md, 1.5rem);
	}

	.ernesto-image-flow-left {
		float: left;
		margin-right: var(--space-lg, 2rem);
		margin-bottom: var(--space-md, 1.5rem);
	}

	.ernesto-text-flow-col {
		width: 100%;
	}

	/* Clear float after text section */
	.ernesto-text-image-flow::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Mobile: Stack images on top */
@media (max-width: 767px) {
	/* Right pattern: image on right (desktop) → moves to top on mobile */
	.ernesto-text-image-flow.right {
		display: flex;
		flex-direction: column;
	}

	.ernesto-text-image-flow.right .wp-block-column:last-child {
		order: -1; /* Image first */
	}

	.ernesto-text-image-flow.right .wp-block-column:first-child {
		order: 1; /* Text second */
	}

	/* Left pattern: image on left (desktop) → moves to top on mobile */
	.ernesto-text-image-flow.left {
		display: flex;
		flex-direction: column;
	}

	.ernesto-text-image-flow.left .wp-block-column:first-child {
		order: -1; /* Image first */
	}

	.ernesto-text-image-flow.left .wp-block-column:last-child {
		order: 1; /* Text second */
	}

	/* Remove floats and margins on mobile for both variants */
	.ernesto-text-image-flow.right .ernesto-image-flow-right,
	.ernesto-text-image-flow.left .ernesto-image-flow-left {
		float: none;
		margin: 0 0 var(--space-md, 1.5rem) 0;
	}
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	/* Background handled by light-dark() via --bg-surface from customizer */
	.ernesto-card {
		background-color: var(--bg-surface);
		border-color: var(--border-color, #334155);
	}

	.ernesto-card-title {
		color: var(--text-heading, #f8fafc);
	}

	.ernesto-card-content {
		color: var(--text-main, #e2e8f0);
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus states */
.ernesto-card:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.ernesto-card {
		break-inside: avoid;
		margin-bottom: 1rem;
	}
}

/* ==========================================================================
   Visual Hero with Image — Button overrides
   Match slider button: same font-size, font-weight, border-radius (from customizer)
   ========================================================================== */

/* Style the actual button link — not the wrapper div */
.ernesto-hero-visual .wp-block-button__link,
.ernesto-hero-visual .wp-block-button__link.wp-element-button {
	border-radius: var(--button-border-radius, 9999px) !important;
	font-size: var(--font-size-lg, 1.125rem) !important;
	font-weight: var(--font-weight-semibold, 600) !important;
	padding: var(--space-md, 1rem) var(--space-2xl, 2.5rem) !important;
	background-color: var(--color-primary) !important;
	color: var(--text-on-brand, #ffffff) !important;
	border-color: var(--color-primary) !important;
	box-shadow: var(--shadow-md) !important;
	transition: all var(--transition-fast) !important;
	text-decoration: none !important;
}

.ernesto-hero-visual .wp-block-button__link:hover,
.ernesto-hero-visual .wp-block-button__link.wp-element-button:hover {
	background-color: var(--color-primary-hover) !important;
	border-color: var(--color-primary-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-lg) !important;
}

/* Strip button appearance from the wrapper div (was causing double-button look) */
.ernesto-hero-visual .wp-block-button {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
}