/**
 * 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);
}

/* ==========================================================================
   Responsive Visibility
   ========================================================================== */

/* Add "hide-on-mobile" or "hide-on-desktop" as an Additional CSS Class to
   any block in the editor to hide it below / above the theme's mobile
   breakpoint (max-width: 767px matches assets/css/menu.css's own
   min-width: 768px switch from the mobile nav to the desktop layout).
   Neither Gutenberg core nor (until now) Ernesto shipped a responsive-
   visibility toggle — that's normally a page-builder feature. !important
   because a utility class needs to reliably override whatever display
   value the block itself carries. */
@media (max-width: 767px) {
	.hide-on-mobile {
		display: none !important;
	}
}
@media (min-width: 768px) {
	.hide-on-desktop {
		display: none !important;
	}
}

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

.ernesto-card {
	display: flex;
	flex-direction: column;
	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;
}

/* Pins the card's button to the bottom so buttons line up across a row
   even when neighbouring cards have a different amount of text */
.ernesto-card .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--space-sm, 1rem);
}

.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.
   :not(.hero-slider--fullwidth) on the outer wrapper only: this selector's two
   classes (0,2,0) otherwise beat both the base .ernesto-hero-slider rule and
   .hero-slider--fullwidth (each 0,1,0) in hero-slider.css, silently forcing the
   slider back to boxed width whenever [hero_slider fullwidth="true"] is wrapped
   in this pattern's .ernesto-hero-slider-section group — which it always is via
   the "Ernesto Hero with Slider" pattern. .slider-viewport is unaffected either
   way since its 100% is always relative to its own (already-correct-width)
   parent, not to .ernesto-hero-slider-section. */
.ernesto-hero-slider-section .ernesto-hero-slider:not(.hero-slider--fullwidth),
.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;
}

/* ============================================================
   CALLOUT BOXES — info / success / alert / note / downloads
   Inserted via the "Ernesto Boxen" block patterns.
   Each box carries a single class: ernesto-box-{info|success|alert|note|downloads}.
   ============================================================ */

.ernesto-box-info,
.ernesto-box-success,
.ernesto-box-alert,
.ernesto-box-note,
.ernesto-box-downloads {
	padding:       24px;
	margin-bottom: 32px;
}

.ernesto-box-info > *:last-child,
.ernesto-box-success > *:last-child,
.ernesto-box-alert > *:last-child,
.ernesto-box-note > *:last-child,
.ernesto-box-downloads > *:last-child {
	margin-bottom: 0;
}

.ernesto-box-info h4,
.ernesto-box-success h4,
.ernesto-box-alert h4,
.ernesto-box-note h4,
.ernesto-box-downloads h4 {
	margin-top: 0;
}

/* Info: Primary color */
.ernesto-box-info {
	background-color: color-mix( in srgb, var(--color-primary, #0066FF) 10%, transparent );
	border:            none;
}

.ernesto-box-info h4 {
	color: var(--color-primary, #0066FF);
}

/* Success: Success color */
.ernesto-box-success {
	background-color: color-mix( in srgb, var(--color-success, #28A745) 10%, transparent );
	border:            4px solid var(--color-success, #28A745);
}

.ernesto-box-success h4 {
	color: var(--color-success, #28A745);
}

/* Alert: Error color */
.ernesto-box-alert {
	background-color: color-mix( in srgb, var(--color-error, #DC3545) 10%, transparent );
	border:            4px solid var(--color-error, #DC3545);
}

.ernesto-box-alert h4 {
	color: var(--color-error, #DC3545);
}

/* Note: Body Text color */
.ernesto-box-note {
	background-color: color-mix( in srgb, var(--text-main, #1A1A1B) 10%, transparent );
	border:            none;
}

.ernesto-box-note h4 {
	color: var(--text-main, #1A1A1B);
}

/* Downloads: Notice color (customizer "Notice" = --color-info) */
.ernesto-box-downloads {
	background-color: color-mix( in srgb, var(--color-info, #17A2B8) 10%, transparent );
	border:            4px solid var(--color-info, #17A2B8);
}

.ernesto-box-downloads h4 {
	color: var(--color-info, #17A2B8);
}

.ernesto-box-downloads ul {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ernesto-box-downloads li {
	margin-bottom: 8px;
}

.ernesto-box-downloads li:last-child {
	margin-bottom: 0;
}

.ernesto-box-downloads a {
	color:           var(--color-primary, #0066FF);
	font-weight:     600;
	text-decoration: none;
}

.ernesto-box-downloads a::before {
	content:      "⬇";
	margin-right: 0.4em;
}

.ernesto-box-downloads a:hover,
.ernesto-box-downloads a:focus {
	text-decoration: underline;
}