/**
 * Responsive Styles
 * Mobile-first approach with breakpoints
 */

/* ============================================
   Base Mobile Styles
   ============================================ */

.site-header .wp-block-group {
	flex-wrap: wrap;
	gap: 16px;
}

.hero-section {
	padding: 60px 20px;
	min-height: 80vh;
}

.hero-section h1 {
	font-size: clamp(2rem, 8vw, 4.5rem);
	line-height: 1.1;
}

.hero-section .hero-subtitle {
	font-size: clamp(1rem, 3vw, 1.25rem);
}

/* Grid Defaults */
.projects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.blog-grid {
	display: block;
}

/* Blog Grid - WordPress Post Template Override */
.blog-grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.blog-grid .wp-block-post-template > li {
	margin: 0;
}

/* ============================================
   Small Tablets (min-width: 480px)
   ============================================ */

@media (min-width: 480px) {
	.skills-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================
   Tablets (min-width: 768px)
   ============================================ */

@media (min-width: 768px) {
	.hero-section {
		padding: 100px 40px;
		min-height: 90vh;
	}
	
	.projects-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	
	.skills-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
	
	.blog-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	
	.about-split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
	}
	
	.contact-section {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}
}

/* ============================================
   Desktop (min-width: 1024px)
   ============================================ */

@media (min-width: 1024px) {
	.site-header {
		padding: 16px 48px;
	}
	
	.hero-section {
		padding: 120px 60px;
	}
	
	.projects-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	/* Bento Grid Layout */
	.projects-grid.bento {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: auto;
	}
	
	.projects-grid.bento .project-card:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
	}
	
	.projects-grid.bento .project-card:nth-child(4) {
		grid-column: span 2;
	}
	
	.skills-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 24px;
	}
	
	.blog-grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.about-split {
		gap: 80px;
	}
}

/* ============================================
   Large Desktop (min-width: 1280px)
   ============================================ */

@media (min-width: 1280px) {
	.hero-section {
		padding: 140px 80px;
	}
	
	.content-wrapper {
		max-width: 1200px;
		margin: 0 auto;
	}
}

/* ============================================
   Mobile Navigation
   ============================================ */

@media (max-width: 767px) {
	/* Mobile Header */
	.site-header {
		padding: 12px 16px !important;
	}
	
	.site-header .wp-block-group {
		gap: 12px;
	}
	
	/* Navigation Overlay */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: rgba(13, 13, 18, 0.98);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		animation: slideIn 0.3s ease-out;
	}
	
	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateX(100%);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 24px;
		padding: 80px 24px 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		font-size: 1.5rem;
		font-weight: 600;
		color: #E8E8ED;
		transition: color 0.3s ease;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
		color: var(--wp--preset--color--primary-light);
	}
	
	/* Hamburger Menu Button */
	.wp-block-navigation__responsive-container-open {
		padding: 8px;
		border-radius: 8px;
		transition: background-color 0.3s ease;
	}
	
	.wp-block-navigation__responsive-container-open:hover {
		background-color: rgba(139, 92, 246, 0.1);
	}
	
	/* Close Button */
	.wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 20px;
		right: 20px;
		padding: 12px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		transition: background-color 0.3s ease;
	}
	
	.wp-block-navigation__responsive-container-close:hover {
		background: rgba(255, 255, 255, 0.2);
	}
	
	/* Mobile Footer */
	.site-footer .wp-block-columns {
		flex-direction: column;
	}
	
	.site-footer .wp-block-column {
		flex-basis: 100% !important;
		margin-bottom: 32px;
	}
	
	/* Mobile Hero */
	.hero-section h1 {
		font-size: clamp(2rem, 10vw, 3rem) !important;
	}
	
	/* Mobile Cards */
	.glass-card,
	.glass-card-subtle {
		border-radius: 16px;
	}
	
	/* Mobile Buttons */
	.wp-block-buttons {
		flex-direction: column;
		width: 100%;
	}
	
	.wp-block-button {
		width: 100%;
	}
	
	.wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) and (pointer: coarse) {
	/* Disable hover animations on touch devices */
	.hover-lift:hover,
	.hover-scale:hover {
		transform: none;
	}
	
	.glass-card:hover {
		transform: none;
	}
	
	/* Larger touch targets */
	.theme-toggle {
		width: 48px;
		height: 48px;
	}
	
	.wp-block-navigation-item a {
		padding: 12px 16px;
	}
	
	.wp-block-button__link {
		padding: 14px 28px;
	}
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
	.site-header,
	.site-footer,
	.theme-toggle,
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}
	
	body {
		background: white !important;
		color: black !important;
	}
	
	.glass-card {
		background: white !important;
		box-shadow: none !important;
		border: 1px solid #ccc !important;
	}
	
	a {
		color: black !important;
		text-decoration: underline !important;
	}
	
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}