/**
 * ============================================================================
 * MEDICI.AGENCY - SHAPE DIVIDERS
 * File: css/components/shape-dividers.css
 * ============================================================================
 *
 * Decorative shape dividers for section transitions using SVG.
 * Compatible with GenerateBlocks Pro sections and Two-Level Section Pattern.
 *
 * Usage:
 * 1. Add .gbp-section--with-divider to section
 * 2. Add divider element with .gbp-section__divider and position modifier
 * 3. Insert SVG with viewBox and preserveAspectRatio="none"
 *
 * @version 1.0.0
 * @since 2.1.0
 */

/* ==========================================================================
   BASE DIVIDER STYLES
   ========================================================================== */

/**
 * Section with divider needs relative positioning
 * Overflow visible to allow divider to extend beyond section
 */
.gbp-section--with-divider {
	position: relative;
	z-index: 1;
	overflow: visible;
}

/**
 * Base divider element styles
 * Absolutely positioned, full width, no pointer events
 */
.gbp-section__divider {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 100%;
	height: auto;
	line-height: 0;
	pointer-events: none;
	overflow: hidden;
}

/**
 * SVG inside divider
 * Full width, height auto-calculated from viewBox
 */
.gbp-section__divider svg {
	display: block;
	width: 100%;
	height: auto;
	min-height: 30px;
}

/* ==========================================================================
   DIVIDER POSITIONS
   ========================================================================== */

/**
 * Top divider - placed above section
 * Translated up to overlap with previous section
 */
.gbp-section__divider--top {
	top: 0;
	transform: translateY(-99%);
}

/**
 * Bottom divider - placed below section
 * Translated down to overlap with next section
 */
.gbp-section__divider--bottom {
	bottom: 0;
	transform: translateY(99%);
}

/**
 * Flipped dividers (horizontal flip)
 * Use for mirrored shapes
 */
.gbp-section__divider--flip {
	transform: scaleX(-1);
}

.gbp-section__divider--top.gbp-section__divider--flip {
	transform: translateY(-99%) scaleX(-1);
}

.gbp-section__divider--bottom.gbp-section__divider--flip {
	transform: translateY(99%) scaleX(-1);
}

/* ==========================================================================
   DIVIDER COLORS
   ========================================================================== */

/**
 * Divider color utilities
 * SVG fill uses currentColor for easy theming
 */
.gbp-section__divider--primary {
	color: var(--color-primary, #2563eb);
}

.gbp-section__divider--secondary {
	color: var(--color-secondary, #0f172a);
}

.gbp-section__divider--white {
	color: var(--color-white, #fff);
}

.gbp-section__divider--light {
	color: var(--color-bg-light, #f8fafc);
}

.gbp-section__divider--dark {
	color: var(--color-bg-dark, #0f172a);
}

.gbp-section__divider--accent {
	color: var(--color-accent, #22c55e);
}

/* ==========================================================================
   DIVIDER HEIGHT MODIFIERS
   ========================================================================== */

/**
 * Control divider height
 * Useful for different visual impact levels
 */
.gbp-section__divider--sm svg {
	max-height: 40px;
}

.gbp-section__divider--md svg {
	max-height: 80px;
}

.gbp-section__divider--lg svg {
	max-height: 120px;
}

.gbp-section__divider--xl svg {
	max-height: 160px;
}

/* Responsive height adjustments */
@media (width <= 767px) {
	.gbp-section__divider--lg svg,
	.gbp-section__divider--xl svg {
		max-height: 60px;
	}
}

/* ==========================================================================
   Z-INDEX MANAGEMENT
   ========================================================================== */

/**
 * Ensure proper stacking with adjacent sections
 */
.gbp-section--with-divider + .gbp-section--with-divider {
	z-index: 0;
}

/**
 * Divider behind content
 */
.gbp-section__divider--behind {
	z-index: -1;
}

/**
 * Divider above content (for overlay effects)
 */
.gbp-section__divider--front {
	z-index: 10;
}

/* ==========================================================================
   ANIMATION SUPPORT
   ========================================================================== */

/**
 * Animated divider with wave motion
 * Use with SVG that has animated path
 */
.gbp-section__divider--animated svg {
	animation: divider-wave 8s ease-in-out infinite alternate;
}

@keyframes divider-wave {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-5%);
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.gbp-section__divider--animated svg {
		animation: none;
	}
}

/* ==========================================================================
   COMMON SHAPE PATTERNS (SVG path references)
   ========================================================================== */

/**
 * Shape pattern utility classes
 * Use with inline SVG containing appropriate path data
 *
 * Wave:
 * <svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="currentColor">
 *   <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"></path>
 * </svg>
 *
 * Triangle:
 * <svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="currentColor">
 *   <polygon points="0,0 1200,120 0,120"></polygon>
 * </svg>
 *
 * Curve:
 * <svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="currentColor">
 *   <path d="M0,0V6c0,21.6,291,111.46,741,110.26,445.39,3.6,459-88.3,459-110.26V0Z"></path>
 * </svg>
 *
 * Tilt:
 * <svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="currentColor">
 *   <polygon points="1200,0 0,0 0,120"></polygon>
 * </svg>
 */

/* ==========================================================================
   DARK THEME SUPPORT
   ========================================================================== */

[data-theme='dark'] .gbp-section__divider--white {
	color: var(--color-bg-dark, #0f172a);
}

[data-theme='dark'] .gbp-section__divider--light {
	color: var(--color-bg-dark-alt, #1e293b);
}

[data-theme='dark'] .gbp-section__divider--dark {
	color: var(--color-bg-light, #f8fafc);
}