/**
 * GenerateBlocks Global Styles - Sections
 * ============================================================================
 *
 * This file contains section styles designed for GenerateBlocks Global Styles.
 * These classes can be applied via GenerateBlocks → Settings → Global Styles
 * or directly as CSS classes in GenerateBlocks patterns.
 *
 * BEM Structure:
 * - Block: .gbp-section
 * - Elements: __inner, __header, __headline, __tagline, __text
 * - Modifiers: --alt, __text--lg, __text--sm
 *
 * Global Classes Available:
 * - gbp-section          → Base section wrapper
 * - gbp-section--alt     → Alternate background section
 * - gbp-section__inner   → Container inside section
 * - gbp-section__header  → Section header group
 * - gbp-section__headline → Section H2/H3 titles
 * - gbp-section__tagline → Section subtitles
 * - gbp-section__text    → Section body text
 *
 * @package Medici
 * @version 3.0.0
 * @since 2.0.0 Original BEM structure
 * @since 3.0.0 Moved to global-styles directory for GenerateBlocks integration
 */

/* ========================================
   1. SECTION WRAPPER (Block)
   Global Style: gbp-section
   ======================================== */

.gbp-section {
	position: relative;
	width: 100%;

	/* Stacked Transitions */
	transition:
		padding 0.3s ease,
		min-height 0.3s ease;

	/* Box Model */
	min-height: 200px;
}

/* Section Alternate Background (Modifier) */
.gbp-section--alt {
	transition:
		background-color 0.3s ease,
		border-radius 0.3s ease;
	background-color: transparent;
}

[data-theme='dark'] .gbp-section--alt {
	border-radius: var(--border-radius-lg);

	/* background-color: var(--bg-secondary); */
}

/* Section Inner Container (Element) */
.gbp-section__inner {
	margin: 0 auto;
	max-width: var(--gb-container-width);
	padding-left: 2rem;
	padding-right: 2rem;
}

/* ========================================
   2. SECTION TYPOGRAPHY (Elements)
   ======================================== */

/* Section Header Group */
.gbp-section__header {
	display: flex;
	flex-direction: column;
	text-align: center;
	row-gap: 1rem;
}

/* Section Headline (H2/H3) */
.gbp-section__headline {
	color: var(--text-primary);
	transition:
		color 0.2s ease,
		font-size 0.3s ease;
	margin-bottom: 1rem;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
}

/* Section Tagline (Subtitle) */
.gbp-section__tagline {
	color: var(--text-secondary);
	transition:
		color 0.2s ease,
		font-size 0.3s ease;
	margin-bottom: 1.5rem;
	font-size: 1.25rem;
	font-weight: var(--font-medium);
	line-height: var(--leading-medium);
}

/* Section Text (Body) */
.gbp-section__text {
	color: var(--text-primary);
	transition: color 0.2s ease;
	margin-bottom: 1.5rem;
	line-height: var(--leading-normal);
}

/* Section Text Large (Modifier) */
.gbp-section__text--lg {
	color: var(--text-secondary);
	transition:
		color 0.2s ease,
		font-size 0.3s ease;
	font-size: 1.125rem;
	line-height: 1.7;
}

/* Section Text Small (Modifier) */
.gbp-section__text--sm {
	color: var(--text-secondary);
	transition:
		color 0.2s ease,
		font-size 0.3s ease;
	font-size: 0.875rem;
	line-height: var(--leading-medium);
}

/* ========================================
   3. BACKWARDS COMPATIBILITY
   Legacy class names - Remove in v4.0.0
   ======================================== */

.gbp-section-header {
	display: flex;
	flex-direction: column;
	text-align: center;
	row-gap: 1rem;
}

/* ========================================
   4. RESPONSIVE - TABLET
   ======================================== */

@media (width <= 1024px) {
	.gbp-section {
		padding: 3rem 1.5rem;
	}
}

/* ========================================
   5. RESPONSIVE - MOBILE
   ======================================== */

@media (width <= 767px) {
	.gbp-section {
		padding: 2rem 1rem;
	}

	/* Remove border-radius on mobile for full-width sections */
	[data-theme='dark'] .gbp-section--alt {
		border-radius: 0;
	}
}