/**
 * iPad Orientation Fixes
 * Fixes layout issues when iPad rotates between portrait and landscape
 *
 * @package Eryvium
 * @since Eryvium 1.0.0
 */

/* ============================================
   IPAD PORTRAIT (768px width)
   ============================================ */

@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (orientation: portrait) {
	
	/* Ensure containers have proper padding */
	.container {
		padding-left: clamp(1.5rem, 4vw, 2rem);
		padding-right: clamp(1.5rem, 4vw, 2rem);
	}
	
	/* Hero section adjustments */
	.hero-section.hero-partial {
		height: 70vh;
		min-height: 500px;
	}
	
	.hero-content-wrapper {
		padding-top: 110px;
		padding-bottom: 80px;
	}
	
	/* Glass card adjustments */
	.glass-card {
		max-width: 90%;
		padding: clamp(24px, 4vw, 32px);
	}
	
	/* Section titles */
	.section-title {
		padding: 0 clamp(1rem, 5vw, 2rem);
		font-size: clamp(1.75rem, 3vw, 2.5rem);
		line-height: clamp(2.25rem, 4vw, 3.25rem);
	}
	
	/* Prevent horizontal overflow */
	body {
		overflow-x: hidden;
	}
	
	/* Grid adjustments */
	.regions-cards,
	.chrome-regions-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	
	.hpmsm-platform-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

/* ============================================
   IPAD LANDSCAPE (1024px width)
   ============================================ */

@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (orientation: landscape) {
	
	/* Ensure containers have proper padding */
	.container {
		padding-left: clamp(1.5rem, 3vw, 2rem);
		padding-right: clamp(1.5rem, 3vw, 2rem);
	}
	
	/* Hero section adjustments */
	.hero-section.hero-partial {
		height: 70vh;
		min-height: 450px;
	}
	
	.hero-content-wrapper {
		padding-top: 100px;
		padding-bottom: 80px;
	}
	
	/* Glass card adjustments */
	.glass-card {
		max-width: 85%;
		padding: clamp(24px, 3vw, 32px);
	}
	
	/* Section titles */
	.section-title {
		padding: 0 clamp(1.5rem, 6vw, 200px);
		font-size: clamp(1.875rem, 3.5vw, 2.75rem);
		line-height: clamp(2.5rem, 4.5vw, 3.5rem);
	}
	
	/* Grid adjustments for landscape */
	.regions-cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
	
	.chrome-regions-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
	
	.hpmsm-platform-cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
	
	/* Compliance ethics cards */
	.compliance-ethics-cards {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

/* ============================================
   IPAD PRO (1024px+ width)
   ============================================ */

@media only screen 
	and (min-device-width: 1024px) 
	and (max-device-width: 1366px) {
	
	/* Ensure proper padding */
	.container {
		padding-left: clamp(1.5rem, 3vw, 2rem);
		padding-right: clamp(1.5rem, 3vw, 2rem);
	}
	
	/* Hero adjustments */
	.hero-content-wrapper {
		padding-top: 120px;
	}
	
	/* Section titles */
	.section-title {
		padding: 0 clamp(2rem, 8vw, 260px);
	}
}

/* ============================================
   GENERAL IPAD FIXES (any orientation)
   ============================================ */

@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) {
	
	/* Prevent layout shifts on rotation */
	* {
		-webkit-tap-highlight-color: transparent;
	}
	
	/* Smooth transitions for orientation changes */
	.hero-section,
	.hero-content-wrapper,
	.glass-card,
	.section-title {
		transition: padding 0.3s ease, font-size 0.3s ease, height 0.3s ease;
	}
	
	/* Fix for fixed header on iPad */
	.site-header {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	
	/* Ensure no horizontal scroll */
	html, body {
		overflow-x: hidden;
		width: 100%;
		max-width: 100%;
	}
	
	/* Fix for video elements */
	.hero-video {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
}