/**
 * EB Global Theme - Layout Utilities
 *
 * Responsive layout system with section spacing, full-width utilities,
 * asymmetric image layouts, and no-horizontal-scroll enforcement.
 *
 * Breakpoints:
 *   - Mobile (base): < 768px
 *   - Tablet: >= 768px
 *   - Desktop: >= 1024px
 *
 * @package EB_Global_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   No Horizontal Scroll - Global Enforcement (320px to 2560px)
   ========================================================================== */

html,
body {
	overflow-x: hidden;
	max-width: 100vw;
}

/* ==========================================================================
   Layout Custom Properties
   ========================================================================== */

:root {
	--eb-asymmetric-offset: 40px;
	--eb-section-gap: clamp(24px, 4vw, 48px);
}

/* ==========================================================================
   Full-Width Section Utility
   ========================================================================== */

.eb-section-full {
	max-width: 100vw;
	width: 100%;
	overflow-x: hidden;
}

/* ==========================================================================
   Asymmetric Image-Text Layout
   ========================================================================== */

.eb-asymmetric {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--eb-section-gap);
}

.eb-asymmetric-image {
	position: relative;
	width: calc(100% + var(--eb-asymmetric-offset));
	max-width: calc(100% + var(--eb-asymmetric-offset));
}

.eb-asymmetric-image--left {
	margin-left: calc(-1 * var(--eb-asymmetric-offset));
}

.eb-asymmetric-image--right {
	margin-right: calc(-1 * var(--eb-asymmetric-offset));
	margin-left: auto;
}

.eb-asymmetric-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.eb-asymmetric-content {
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

/* ==========================================================================
   Responsive Section Spacing
   ========================================================================== */

/*
 * The base .eb-site-section class (in main.css) uses:
 *   padding-top/bottom: var(--section-padding) = clamp(48px, 8vw, 100px)
 *
 * This already satisfies:
 *   - Mobile (<=768px): min 48px
 *   - Desktop (>1024px): 80-100px range
 *
 * Below we add explicit overrides for clarity and edge-case coverage.
 */

/* ==========================================================================
   Tablet Layout (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {
	.eb-asymmetric {
		flex-direction: row;
		align-items: center;
	}

	.eb-asymmetric-image {
		flex: 0 0 55%;
		width: calc(55% + var(--eb-asymmetric-offset));
		max-width: calc(55% + var(--eb-asymmetric-offset));
	}

	.eb-asymmetric-content {
		flex: 1;
		padding-left: clamp(24px, 4vw, 48px);
		padding-right: clamp(24px, 4vw, 48px);
	}

	.eb-asymmetric--reversed {
		flex-direction: row-reverse;
	}
}

/* ==========================================================================
   Desktop Layout (>= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
	.eb-site-section {
		padding-top: clamp(80px, 8vw, 100px);
		padding-bottom: clamp(80px, 8vw, 100px);
	}

	.eb-asymmetric-image {
		flex: 0 0 50%;
		width: calc(50% + var(--eb-asymmetric-offset));
		max-width: calc(50% + var(--eb-asymmetric-offset));
	}
}