/**
 * Sticky History Timeline Component Styles
 *
 * Scrollytelling component with sticky navigation and parallax effects.
 * Follows v7.0 architecture standards: Mobile-first, GPU-accelerated, 60FPS.
 *
 * @package Paradis_Theme
 * @since 1.0.0
 */

/* ============================================
   PARENT CONTAINER
   ============================================ */

   .paradis-history-timeline {
	margin-top: 140px;
	position: relative;
	width: 100%;
}

/* ============================================
   STICKY NAVIGATION BAR
   ============================================ */

.history-sticky-bar {
	position: relative;
    z-index: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 58px;
    row-gap: 14px;
    padding: 10px 10px; 
    margin: auto;
	flex-wrap: wrap;
	transition: all 0.8s ease;

	/* Visual Styles*/
	background-color: transparent;
	border-radius: 0;
}

/* STATE 2: DOCKED (Sticky at Bottom via Portal) */
.history-sticky-bar.is-docked {
    position: fixed !important;
    top: auto !important; 
	bottom: 20px !important;
    z-index: 900 !important;
    margin: auto !important;

	/* Visual Styles*/
	background-color: var(--history-nav-bg);
	border-radius: 50px;
}

/* STATE 3: PINNED (Absolute at Bottom of Container) 
*/
.history-sticky-bar.is-pinned {
	position: absolute !important;
	top: auto !important;
	bottom: 0 !important;
	left: Calc(50% - (88% / 2))!important;

    /* Maintain Visuals */
    background-color: #fbf3de;
	border-radius: 50px;
    width: 88%;
	max-width: 1620px;
	box-shadow: none;
}

/* ============================================
   DIRECTIONAL ANIMATIONS (Toggled by JS)
   ============================================ */

/* 1. Slide Down (Triggered when scrolling DOWN from Top -> Docked) */
.history-sticky-bar.anim-slide-down {
    animation: navSlideDown 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 2. Slide Up (Triggered when scrolling UP from Docked -> Top) */
.history-sticky-bar.anim-slide-up {
    animation: navSlideUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes navSlideDown {
	/* Start above viewport (-100vh) */
	from { transform: translate3d(0, -100vh, 0); opacity: 0; }
    /* End at natural position (bottom: 40px) */
	to { transform: translate3d(-0, 0, 0); opacity: 1; }
}

@keyframes navSlideUp {
    /* Start at the bottom of viewport (simulating where it was in Docked state) 
       Math: 100vh (Viewport) - 100% (Nav Height) - 40px (Offset) */
	from { transform: translate3d(0, calc(100vh - 100% - 40px), 0); }
    /* End at top (natural absolute position) */
	to { transform: translate3d(0, 0, 0); }
}

/* Empty nav bar (before JS populates) */
.history-sticky-bar:empty {
	display: none;
}

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */

.history-nav-btn {
	/* Reset */
	position: relative;
    background: transparent;
    border: none;
    font-size: clamp(12px, 2.3448px + 1.7241vw, 20px);
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--font-body);
    opacity: 0.4;
    padding: 0 0 8px 0;
    transition: all 0.3s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	user-select: none;
	color: var(--body-color);
}

.history-nav-btn::before {
    content: attr(data-label);
    font-weight: 700; /* Target hover weight */
    grid-row: 1;
    grid-column: 1;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    height: 0; 
    color: transparent;
    font-family: var(--font-body);
    font-size: clamp(12px, 2.3448px + 1.7241vw, 20px);
    width: 105%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.history-nav-btn::after {
    content:'';
    position: absolute;
    bottom: 0;
    left: 20%; 
    width: 60%; 
    height: 2px; 
    background-color: #000;
    opacity: 0;
    transform: translateZ(0) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.history-nav-btn:hover, 
.history-nav-btn.is-active,
.history-nav-btn:focus-visible {
	font-weight: 700;
    opacity: 1;
}

.history-nav-btn:hover::after, 
.history-nav-btn.is-active::after,
.history-nav-btn:focus-visible::after {
    opacity: 1;
    transform: translateZ(0) scaleX(1);
}

/* ============================================
   ROWS CONTAINER
   ============================================ */

.history-rows-container {
	position: relative;
	width: 100%;
	display: flex;
    flex-direction: column;
    gap: 140px;
	margin-top: 150px;
}

/* ============================================
   INDIVIDUAL ROW (Desktop Base Styles)
   ============================================ */

.paradis-history-row {
	/* Variables for Gap Logic (Responsive Math) */
	--history-gap: 60px;

	/* Layout (Flexbox with Gap) */
	display: flex;
	gap: var(--history-gap);
	margin-bottom: 60px;

	/* Alignment */
	align-items: stretch;

	/* Performance */
	will-change: scroll-position;
}

/* Last row - reduce bottom margin */
.paradis-history-row:last-child {
	margin-bottom: 120px;
}

/* ============================================
   LAYOUT UTILITIES (Moved from PHP)
   ============================================ */

/* 1. Column Ordering (Desktop) */
.paradis-history-row.layout-image-left .history-image-container { order: 1; }
.paradis-history-row.layout-image-left .history-text-container { order: 2; }

.paradis-history-row.layout-image-right .history-text-container { order: 1; }
.paradis-history-row.layout-image-right .history-image-container { order: 2; }


/* 2. Text Column Widths (Matches PHP Logic) */
.ph-w-10 { flex: 0 0 calc(10% - (var(--history-gap) / 2)); max-width: calc(10% - (var(--history-gap) / 2)); }
.ph-w-20 { flex: 0 0 calc(20% - (var(--history-gap) / 2)); max-width: calc(20% - (var(--history-gap) / 2)); }
.ph-w-30 { flex: 0 0 calc(30% - (var(--history-gap) / 2)); max-width: calc(30% - (var(--history-gap) / 2)); }
.ph-w-40 { flex: 0 0 calc(40% - (var(--history-gap) / 2)); max-width: calc(40% - (var(--history-gap) / 2)); }
.ph-w-50 { flex: 0 0 calc(50% - (var(--history-gap) / 2)); max-width: calc(50% - (var(--history-gap) / 2)); }
.ph-w-60 { flex: 0 0 calc(60% - (var(--history-gap) / 2)); max-width: calc(60% - (var(--history-gap) / 2)); }
.ph-w-70 { flex: 0 0 calc(70% - (var(--history-gap) / 2)); max-width: calc(70% - (var(--history-gap) / 2)); }
.ph-w-80 { flex: 0 0 calc(80% - (var(--history-gap) / 2)); max-width: calc(80% - (var(--history-gap) / 2)); }
.ph-w-90 { flex: 0 0 calc(90% - (var(--history-gap) / 2)); max-width: calc(90% - (var(--history-gap) / 2)); }

/* ============================================
   TEXT CONTAINER
   ============================================ */

.history-text-container {
	flex: 1; /* CRITICAL: Default to filling space */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ============================================
   YEAR LABEL (Moved from PHP)
   ============================================ */

.history-year-label {
	/* Typography (h6 equivalent) */
	font-family: var(--font-ui); 
	font-size: clamp(16px, 1.5172px + 2.5862vw, 28px);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

/* ============================================
   TITLE (Header)
   ============================================ */

.history-title {
	/* Base styles (overridden by PHP dynamic CSS) */
	margin: 0 0 20px 0;
}

/* ============================================
   BODY CONTENT
   ============================================ */

.history-body {
	/* Typography */
	margin: 0;
}

.history-body p:last-child {
	margin-bottom: 0;
}

/* ============================================
   IMAGE CONTAINER
   ============================================ */

.history-image-container {
	flex: 1; /* CRITICAL: Default to filling space */
	position: relative;
	min-height: 400px;
}

/* ============================================
   MAIN IMAGE (Background)
   ============================================ */

.history-main-image {
	/* Fill container */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;

	/* Performance */
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* ============================================
   OVERLAY IMAGE (Parallax Element)
   ============================================ */

.history-overlay-img {
	/* Positioning */
	position: absolute;
	z-index: 10;
	max-width: 420px;
	width: 60%;
	min-width: 180px;
	height: auto;

	/* CENTER ORIGIN LOGIC (Crucial for Resize Stability) */
	transform: translate(-50%, -50%); 

	/* Performance */
	will-change: transform;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	
	/* Smooths out jitter on high-refresh screens */
	transition: transform 0.1s linear;
}

/* ============================================
   MOBILE OVERRIDES (767px breakpoint)
   ============================================ */

@media (max-width: 767px) {
	
	/* Parent Container - reduce top margin */
	.paradis-history-timeline {
		margin-top: 30px;
	}

	/* Rows Container - reduce gap and top margin */
	.history-rows-container {
		gap: 60px;
		margin-top: 80px;
	}

	/* Sticky Nav - Reduce padding */
	.history-sticky-bar, .history-sticky-bar.is-docked, .history-sticky-bar.is-pinned {
		padding: 16px 20px;
		column-gap: 8px;
		row-gap: 11px; /* Allow wrapping on small screens */
	}

	/* Nav Buttons - Smaller */
	.history-nav-btn {
		padding: 6px 4px;
	}

	/* Row - Stack vertically */
	.paradis-history-row {
		flex-direction: column;
		gap: 40px;
		min-height: 50dvh; /* Dynamic viewport height */
		min-height: 50vh; /* Fallback */
		margin-bottom: 50px;
	}

	/* RESET: Order Layouts */
	.paradis-history-row.layout-image-left .history-image-container,
	.paradis-history-row.layout-image-left .history-text-container,
	.paradis-history-row.layout-image-right .history-image-container,
	.paradis-history-row.layout-image-right .history-text-container {
		order: unset;
	}

	/* RESET: Column Widths */
	.ph-w-10, .ph-w-20, .ph-w-30, .ph-w-40, .ph-w-50, 
	.ph-w-60, .ph-w-70, .ph-w-80, .ph-w-90 {
		flex: 1 1 auto;
		max-width: 100%;
	}

	/* Text Container - Force center alignment */
	.history-text-container {
		order: 1 !important; /* Always first */
		text-align: center !important;
		flex: 1 1 auto;
	}

	/* Image Container - Always second */
	.history-image-container {
		order: 2 !important;
		flex: none;
		height: auto;
		min-height:0;
		width: 100%;
	}

	.history-main-image {
        height: auto !important;
        position: relative !important;
        object-fit: contain !important;
    }

	/* Force center alignment for all text elements */
	.history-year-label,
	.history-title,
	.history-body {
		text-align: center !important;
	}

	/* Overlay Image - Constrain to prevent overflow */
	.history-overlay-img {
		transform: translate(-50%, -50%);
	}

	/* Last row - adjust margin */
	.paradis-history-row:last-child {
		margin-bottom: 100px;
	}
}

/* ============================================
   ACCESSIBILITY & MOTION PREFERENCES
   ============================================ */

/* Disable parallax for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.history-overlay-img {
		transform: none !important;
		will-change: auto;
		transition: none;
	}
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
	.history-nav-btn {
		border: 2px solid currentColor;
	}

	.history-nav-btn.is-active {
		border-color: var(--color-primary);
	}
}

/* ============================================
   RESPONSIVE BREAKPOINTS (Tablet)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
	/* Update Gap Variable (Autoscales column widths via calc) */
	.paradis-history-row {
		--history-gap: 40px;
	}

	/* Sticky Nav - Adjust spacing */
	.history-sticky-bar {
		padding: 18px 30px;
		gap: 16px;
	}

	/* Text Container - Adjust gap */
	.history-text-container {
		gap: 12px;
	}
}