/**
 * Blog Pages Styles
 * 
 * 🇹🇷 TR: Blog sayfaları için minimal CSS - hover efektleri ve responsive
 * 🇬🇧 EN: Minimal CSS for blog pages - hover effects and responsive
 * 🎯 PURPOSE: Single post and archive pages styling
 * 
 * @package GRPCMedia
 */

/* =====================================================
   LAYOUT - 2 COLUMN (CRITICAL!)
   ===================================================== */

/* Archive Content Wrapper */
.archive-content-wrapper {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 20px;
	background: #ffffff;
}

/* Archive Flex Container (Main + Sidebar) */
.archive-flex-container {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

/* Main Content (68% desktop) */
.archive-main-content {
	flex: 0 0 68%;
	max-width: 68%;
}

/* Sidebar (28% desktop) */
.archive-sidebar,
aside#secondary {
	flex: 0 0 28%;
	max-width: 28%;
}

/* Posts List */
.posts-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Blog Card */
.grpc-blog-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: all 0.3s;
	display: flex;
	height: 280px;
	width: 100%;
}

/* Posts List - Default: CENTER on desktop ONLY (>992px) */
@media (min-width: 993px) {
	.posts-list {
		align-items: center !important; /* Desktop: centered cards */
	}
}

.single-content-wrapper > div {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 40px !important;
	align-items: flex-start !important;
}

.single-content-wrapper main#main {
	flex: 0 0 68% !important;
	max-width: 68% !important;
}

.single-content-wrapper aside#secondary,
.archive-content-wrapper aside#secondary {
	flex: 0 0 28% !important;
	max-width: 28% !important;
}

.archive-content-wrapper > div {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 40px !important;
	align-items: flex-start !important;
}

.archive-content-wrapper main#main {
	flex: 0 0 68% !important;
	max-width: 68% !important;
}

/* =====================================================
   HOVER EFFECTS
   ===================================================== */

/* Archive cards hover */
.archive-content-wrapper article:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important;
}

.archive-content-wrapper article:hover img {
	transform: scale(1.08);
}

.archive-content-wrapper article h2 a:hover {
	color: #077ad8 !important;
}

.archive-content-wrapper .posts-list a[style*="background: #077ad8"]:hover {
	background: #0069ba !important;
	box-shadow: 0 4px 15px rgba(0, 105, 186, 0.4) !important;
	gap: 12px !important;
}

/* Search widget */
.single-content-wrapper input[type="search"]:focus,
.archive-content-wrapper input[type="search"]:focus {
	border-color: #077ad8 !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(7, 122, 216, 0.1);
}

.single-content-wrapper button[type="submit"]:hover {
	background: #0069ba !important;
	transform: scale(1.05);
}

/* Sidebar links */
.single-content-wrapper aside a:hover {
	color: #077ad8 !important;
	padding-left: 15px !important;
}

/* Category badges */
.single-content-wrapper aside a:hover span {
	background: #0069ba !important;
}

/* =====================================================
   RESPONSIVE (MOBILE & TABLET)
   ===================================================== */

@media (max-width: 992px) {
	/* ARCHIVE CONTENT WRAPPER - ZERO LEFT/RIGHT PADDING on mobile! */
	.archive-content-wrapper {
		padding: 60px 0 !important; /* Top/Bottom only */
	}
	
	/* FLEX CONTAINER - Change to COLUMN layout (main + sidebar stacked!) */
	.archive-flex-container {
		flex-direction: column !important; /* VERTICAL layout on mobile! */
		padding: 0 5px !important; /* 5px minimal padding (92% width için!) */
		gap: 40px !important;
	}
	
	/* MAIN CONTENT - FULL WIDTH on mobile - ULTRA HIGH SPECIFICITY! */
	.archive-content-wrapper main.archive-main-content,
	.archive-content-wrapper main#main,
	main.archive-main-content,
	main#main {
		flex: 1 1 100% !important; /* 100% width */
		max-width: 100% !important;
		width: 100% !important;
	}
	
	/* SIDEBAR - Below main content on mobile - ULTRA HIGH SPECIFICITY! */
	.archive-content-wrapper aside.archive-sidebar,
	.archive-content-wrapper aside#secondary,
	aside.archive-sidebar,
	aside#secondary {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	
	/* BLOG CARDS - Become vertical on mobile */
	.grpc-blog-card {
		flex-direction: column !important;
		height: auto !important;
	}
	
	/* Posts List - FULL WIDTH on mobile (NOT centered!) */
	.archive-content-wrapper .posts-list,
	.posts-list {
		align-items: stretch !important; /* STRETCH = Full width cards */
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Blog cards - FULL WIDTH on mobile - ULTRA HIGH SPECIFICITY! */
	.archive-content-wrapper article,
	.archive-content-wrapper .posts-list article,
	.posts-list article,
	article.post,
	article.grpc-blog-card,
	.posts-list > article {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		flex: 1 1 100% !important; /* Force 100% width in flex container */
		margin-left: 0 !important;
		margin-right: 0 !important;
		align-self: stretch !important; /* Force full width */
	}
	
	/* Hero sections - OVERRIDE INLINE STYLES! */
	.single-hero,
	.archive-hero {
		padding: 60px 20px !important;
	}
	
	.single-hero h1,
	.archive-hero h1 {
		font-size: 36px !important;
	}
	
	.single-hero p,
	.archive-hero p {
		font-size: 16px !important;
	}
	
	/* Content wrapper padding */
	.single-content-wrapper,
	.archive-content-wrapper {
		padding: 60px 20px !important;
	}
	
	/* 2-column becomes 1-column - OVERRIDE INLINE STYLES! */
	.single-content-wrapper > div,
	.archive-content-wrapper > div {
		flex-direction: column !important;
		gap: 30px !important;
	}
	
	.single-content-wrapper main,
	.single-content-wrapper aside,
	.archive-content-wrapper main,
	.archive-content-wrapper aside {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	
	/* Article padding */
	.single-content-wrapper article {
		padding: 30px !important;
	}
	
	.single-content-wrapper article > div[style*="margin: 0 -50px"] {
		margin: 0 -30px 30px -30px !important;
	}
	
	/* Archive cards become vertical - OVERRIDE INLINE STYLES! */
	.archive-content-wrapper article {
		flex-direction: column !important;
		height: auto !important;
	}
	
	/* IMAGE CONTAINER - CRITICAL FIX! 350px → 100% on mobile */
	.archive-content-wrapper article > div[style*="flex: 0 0 350px"],
	.archive-content-wrapper article > div[style*="max-width: 350px"],
	.posts-list article > div[style*="flex: 0 0 350px"],
	.posts-list article > div[style*="max-width: 350px"] {
		flex: 0 0 auto !important; /* AUTO flex (not 350px!) */
		max-width: 100% !important; /* 100% max-width (not 350px!) */
		width: 100% !important; /* FORCE 100% width */
		height: 250px !important; /* Fixed height OK */
		min-width: 100% !important; /* MIN WIDTH = 100% */
	}
	
	.archive-content-wrapper article > div[style*="padding: 30px"] {
		padding: 25px !important;
	}
}

@media (max-width: 768px) {
	/* Tablet specific adjustments */
	.archive-content-wrapper article > div[style*="flex: 0 0 350px"] {
		height: 220px !important;
	}
}

@media (max-width: 576px) {
	/* Mobile specific - FULL OVERRIDE! */
	.single-content-wrapper {
		padding: 40px 15px !important;
	}
	
	/* ARCHIVE: 0 LEFT/RIGHT padding (full width cards!) */
	.archive-content-wrapper {
		padding: 40px 0 !important;
	}
	
	.single-hero,
	.archive-hero {
		padding: 50px 15px !important;
	}
	
	.single-hero h1,
	.archive-hero h1 {
		font-size: 28px !important;
		line-height: 1.2 !important;
	}
	
	.single-hero p,
	.archive-hero p {
		font-size: 15px !important;
		line-height: 1.6 !important;
	}
	
	.single-content-wrapper article {
		padding: 20px !important;
	}
	
	.single-content-wrapper article > div[style*="margin: 0 -50px"] {
		margin: 0 -20px 20px -20px !important;
	}
	
	.archive-content-wrapper article > div[style*="padding: 30px"],
	.archive-content-wrapper article > div[style*="padding: 25px"] {
		padding: 20px !important;
	}
	
	.archive-content-wrapper article > div[style*="flex: 0 0 350px"] {
		height: 200px !important;
	}
	
	/* Sidebar widgets - Tighter spacing on mobile */
	.archive-content-wrapper aside > div,
	.single-content-wrapper aside > div {
		padding: 20px !important;
		margin-bottom: 20px !important;
	}
	
	.archive-content-wrapper aside h3,
	.single-content-wrapper aside h3 {
		font-size: 16px !important;
		margin-bottom: 15px !important;
	}
	
	/* Button text size on mobile */
	.archive-content-wrapper a[style*="padding: 10px 25px"] {
		padding: 8px 20px !important;
		font-size: 13px !important;
	}
	
	/* Post meta on mobile */
	.archive-content-wrapper article div[style*="gap: 20px"] {
		gap: 15px !important;
		flex-wrap: wrap !important;
	}
}

/* =====================================================
   COMMENTS SECTION STYLING
   ===================================================== */

#comments {
	margin-top: 40px;
	padding: 40px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

#comments h2 {
	color: #27243b;
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 30px 0;
	padding-bottom: 20px;
	border-bottom: 2px solid #077ad8;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 40px 0;
}

.comment-list .comment {
	padding: 25px;
	background: #f9f9f9;
	border-radius: 12px;
	margin-bottom: 20px;
}

.comment-list .comment-author {
	font-weight: 700;
	color: #27243b;
	margin-bottom: 10px;
}

.comment-list .comment-meta {
	font-size: 13px;
	color: #999;
	margin-bottom: 15px;
}

.comment-list .comment-content {
	color: #666;
	line-height: 1.8;
}

.comment-reply-link {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 20px;
	background: #077ad8;
	color: #fff !important;
	text-decoration: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.3s;
}

.comment-reply-link:hover {
	background: #0069ba;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(7, 122, 216, 0.3);
}

/* Comment Form */
#respond {
	padding: 30px;
	background: #f9f9f9;
	border-radius: 12px;
	margin-top: 30px;
}

#respond h3 {
	color: #27243b;
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 25px 0;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	transition: all 0.3s;
	margin-bottom: 15px;
}

#respond input:focus,
#respond textarea:focus {
	border-color: #077ad8;
	outline: none;
	box-shadow: 0 0 0 3px rgba(7, 122, 216, 0.1);
}

#respond .form-submit input[type="submit"] {
	background: linear-gradient(135deg, #077ad8 0%, #0069ba 100%);
	color: #fff;
	padding: 15px 40px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 4px 15px rgba(7, 122, 216, 0.3);
}

#respond .form-submit input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(7, 122, 216, 0.4);
}