/**
 * Travel Blog Grid Styles
 * 
 * Travel-magazine style layout for blog page with hero post, grid, and sidebar
 * 
 * NOTE: Uses .container class from parent theme (genesis-block-theme/style.css line 3191)
 * Container provides: max-width: 1600px, margin: 0 auto, padding: 0 8%
 * 
 * @package Genesis Block Theme Child
 */

/* ============================================
   Blog Container Layout
   ============================================ */

/* .container class is provided by parent theme - no need to redefine */
/* Container CSS: themes/genesis-block-theme/style.css lines 3191-3208 */

/* Override parent theme's #primary max-width constraint for blog pages */
/* Parent theme: themes/genesis-block-theme/style.css line 3253-3258 */
.blog #primary,
.archive #primary {
	width: 100% !important;
	max-width: 100% !important;
}

.tt-blog-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	/* Remove max-width/margin/padding - .container handles this */
}

@media (max-width: 1000px) {
	.tt-blog-wrap {
		/* Padding handled by .container (0 4%) */
		gap: 30px;
	}
}

@media (max-width: 600px) {
	.tt-blog-wrap {
		/* Padding handled by .container (0 15px) */
		gap: 20px;
	}
}

/* Main content area */
.tt-blog-main {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
}

/* Sidebar */
.tt-blog-sidebar {
	flex: 0 0 300px;
	min-width: 0;
}

@media (max-width: 1000px) {
	.tt-blog-sidebar {
		flex: 1 1 100%;
		order: 2;
	}
}

/* ============================================
   Hero Post
   ============================================ */

.tt-hero {
	margin-bottom: 60px;
}

.tt-hero-post {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease;
}

.tt-hero-post:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.tt-hero-image {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.tt-hero-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}

.tt-hero-post:hover .tt-hero-image img {
	transform: scale(1.05);
}

.tt-hero-content {
	padding: 40px;
}

@media (max-width: 600px) {
	.tt-hero-content {
		padding: 25px 20px;
	}
}

.tt-hero-header {
	margin-bottom: 20px;
}

.tt-hero-title {
	font-size: 42px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 15px 0;
}

@media (max-width: 1000px) {
	.tt-hero-title {
		font-size: 36px;
	}
}

@media (max-width: 600px) {
	.tt-hero-title {
		font-size: 28px;
	}
}

.tt-hero-title a {
	color: #272c30;
	text-decoration: none;
	transition: color 0.2s ease;
}

.tt-hero-title a:hover {
	color: #0072e5;
}

.tt-hero-meta {
	font-size: 15px;
	color: #62707c;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.tt-hero-separator {
	color: #d4dde5;
}

.tt-hero-author a,
.tt-hero-date,
.tt-hero-reading-time {
	color: #62707c;
	text-decoration: none;
}

.tt-hero-author a:hover {
	color: #0072e5;
}

.tt-hero-excerpt {
	font-size: 18px;
	line-height: 1.7;
	color: #272c30;
	margin-bottom: 25px;
}

@media (max-width: 600px) {
	.tt-hero-excerpt {
		font-size: 16px;
	}
}

.tt-hero-read-more {
	margin-top: 20px;
}

/* ============================================
   Grid Layout
   ============================================ */

.tt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 50px;
	width: 100%;
	max-width: 100%;
}

@media (max-width: 1000px) {
	.tt-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
}

@media (max-width: 600px) {
	.tt-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ============================================
   Card Styles
   ============================================ */

.tt-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tt-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
}

.tt-card-image {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.tt-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.tt-card:hover .tt-card-image img {
	transform: scale(1.08);
}

.tt-card-content {
	padding: 25px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

@media (max-width: 600px) {
	.tt-card-content {
		padding: 20px;
	}
}

.tt-card-header {
	margin-bottom: 15px;
}

.tt-card-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 12px 0;
}

@media (max-width: 600px) {
	.tt-card-title {
		font-size: 20px;
	}
}

.tt-card-title a {
	color: #272c30;
	text-decoration: none;
	transition: color 0.2s ease;
}

.tt-card-title a:hover {
	color: #0072e5;
}

.tt-card-meta {
	font-size: 14px;
	color: #62707c;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.tt-card-separator {
	color: #d4dde5;
}

.tt-card-author a,
.tt-card-date,
.tt-card-reading-time {
	color: #62707c;
	text-decoration: none;
}

.tt-card-author a:hover {
	color: #0072e5;
}

.tt-card-excerpt {
	font-size: 16px;
	line-height: 1.6;
	color: #272c30;
	margin-bottom: 15px;
	flex: 1;
}

@media (max-width: 600px) {
	.tt-card-excerpt {
		font-size: 15px;
	}
}

.tt-card-read-more {
	margin-top: auto;
}

/* ============================================
   Category Badge
   ============================================ */

.tt-category-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 10;
}

.tt-category-badge a {
	display: inline-block;
	background-color: #0072e5;
	color: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tt-category-badge a:hover {
	background-color: #0056b3;
	transform: translateY(-1px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Category badge when no featured image */
.tt-hero-content .tt-category-badge,
.tt-card-content .tt-category-badge {
	position: static;
	margin-bottom: 12px;
}

/* ============================================
   Read More Link
   ============================================ */

.tt-read-more-link {
	display: inline-block;
	color: #0072e5;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.2s ease;
	position: relative;
	padding-right: 20px;
}

.tt-read-more-link::after {
	content: '→';
	position: absolute;
	right: 0;
	transition: transform 0.2s ease;
}

.tt-read-more-link:hover {
	color: #0056b3;
}

.tt-read-more-link:hover::after {
	transform: translateX(4px);
}

/* ============================================
   Sidebar Styles
   ============================================ */

.tt-blog-sidebar .widget {
	background: #fff;
	padding: 25px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-bottom: 30px;
}

.tt-blog-sidebar .widget:last-child {
	margin-bottom: 0;
}

.tt-blog-sidebar .widget-title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 20px 0;
	color: #272c30;
	padding-bottom: 15px;
	border-bottom: 2px solid #f2f2f2;
}

.tt-blog-sidebar .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tt-blog-sidebar .widget li {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f2f2f2;
}

.tt-blog-sidebar .widget li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.tt-blog-sidebar .widget a {
	color: #62707c;
	text-decoration: none;
	transition: color 0.2s ease;
}

.tt-blog-sidebar .widget a:hover {
	color: #0072e5;
}

/* ============================================
   Pagination
   ============================================ */

.pagination {
	margin-top: 50px;
	text-align: center;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Ensure hero doesn't break on mobile */
@media (max-width: 600px) {
	.tt-hero-image {
		max-height: 300px;
	}
	
	.tt-hero-image img {
		object-fit: cover;
		height: 100%;
	}
}

/* Fix for cards without images */
.tt-card:not(:has(.tt-card-image)) .tt-card-content {
	padding-top: 25px;
}

/* Ensure proper spacing on archive pages */
.archive .tt-blog-wrap,
.blog .tt-blog-wrap {
	margin-top: 40px;
}

@media (max-width: 600px) {
	.archive .tt-blog-wrap,
	.blog .tt-blog-wrap {
		margin-top: 20px;
	}
}