/* ==========================================
   Tutorial Hub Responsive Styles
   ========================================== */

/* Tablet (768px) */
@media (max-width: 1024px) {
	.th-header-content {
		gap: var(--spacing-md);
	}

	.th-header-search {
		max-width: 250px;
	}

	.th-hero-title {
		font-size: 2.25rem;
	}

	.th-hero-subtitle {
		font-size: 1.125rem;
	}

	.th-hero-search-input {
		min-width: 250px;
	}

	.th-carousel-item {
		flex: 0 0 calc(33.333% - var(--spacing-lg) * 0.66);
	}

	.th-categories-grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.th-tutorials-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}

	.th-archive-content {
		grid-template-columns: 200px 1fr;
	}

	.th-single-content {
		grid-template-columns: 1fr 280px;
		gap: var(--spacing-lg);
	}

	.th-featured-section h2,
	.th-recent-section h2,
	.th-categories-section h2,
	.th-cta-section h2 {
		font-size: 1.75rem;
	}
}

/* Mobile Large (640px) */
@media (max-width: 768px) {
	:root {
		--spacing-xl: 2rem;
		--spacing-2xl: 3rem;
	}

	.th-header-content {
		gap: var(--spacing-md);
	}

	.th-logo {
		flex-shrink: 0;
	}

	.th-logo a,
	.th-site-title {
		font-size: 1.25rem;
	}

	.th-header-search {
		display: none;
	}

	.th-nav {
		display: none;
	}

	.th-menu-toggle {
		display: flex;
		margin-left: auto;
	}

	.th-hero {
		padding: 4rem var(--spacing-md) 3rem;
	}

	.th-hero-title {
		font-size: 1.875rem;
	}

	.th-hero-subtitle {
		font-size: 1rem;
	}

	.th-hero-search {
		flex-direction: column;
	}

	.th-hero-search-input {
		min-width: 100%;
		width: 100%;
	}

	.th-carousel-item {
		flex: 0 0 calc(50% - var(--spacing-lg) * 0.5);
	}

	.th-carousel-prev,
	.th-carousel-next {
		width: 40px;
		height: 40px;
		font-size: 1.25rem;
	}

	.th-carousel-prev {
		left: -20px;
	}

	.th-carousel-next {
		right: -20px;
	}

	.th-categories-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
	}

	.th-category-card {
		padding: var(--spacing-lg);
	}

	.th-category-icon {
		width: 60px;
		height: 60px;
	}

	.th-category-card h3 {
		font-size: 1.025rem;
	}

	.th-featured-section,
	.th-recent-section,
	.th-categories-section,
	.th-cta-section {
		padding: var(--spacing-xl) var(--spacing-md);
	}

	.th-featured-section h2,
	.th-recent-section h2,
	.th-categories-section h2,
	.th-cta-section h2 {
		font-size: 1.5rem;
		margin-bottom: var(--spacing-lg);
	}

	.th-cta-section p {
		font-size: 1rem;
	}

	.th-tutorials-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: var(--spacing-md);
	}

	.th-archive-header {
		padding: var(--spacing-lg) 0;
	}

	.th-archive-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.th-filters-sidebar {
		position: relative;
		top: 0;
		background: var(--color-white);
		border: 1px solid var(--color-light-border);
		padding: var(--spacing-md);
	}

	.th-single-content {
		grid-template-columns: 1fr;
	}

	.th-tutorial-meta-top {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	.th-meta-info {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	.th-footer-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}
}

/* Mobile Medium (480px) */
@media (max-width: 640px) {
	:root {
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 1.75rem;
		--spacing-2xl: 2.5rem;
	}

	body {
		font-size: 0.95rem;
	}

	h1 { font-size: 1.75rem; }
	h2 { font-size: 1.375rem; }
	h3 { font-size: 1.125rem; }
	h4 { font-size: 1rem; }

	.container {
		padding: 0 var(--spacing-sm);
	}

	.th-header-top {
		padding: var(--spacing-sm) 0;
	}

	.th-header-content {
		gap: var(--spacing-sm);
	}

	.th-logo a,
	.th-site-title {
		font-size: 1.125rem;
	}

	.th-search-btn {
		padding: var(--spacing-sm);
	}

	.th-hero {
		padding: 3rem var(--spacing-sm) 2rem;
	}

	.th-hero-title {
		font-size: 1.5rem;
	}

	.th-hero-subtitle {
		font-size: 0.95rem;
		margin-bottom: var(--spacing-md);
	}

	.th-hero-search-input {
		padding: var(--spacing-sm);
		font-size: 0.95rem;
	}

	.th-carousel-item {
		flex: 0 0 calc(100% - 0);
	}

	.th-carousel-prev,
	.th-carousel-next {
		display: none;
	}

	.th-categories-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.th-category-card {
		padding: var(--spacing-lg);
		flex-direction: row;
		text-align: left;
	}

	.th-category-icon {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
	}

	.th-tutorials-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: var(--spacing-sm);
	}

	.th-featured-section,
	.th-recent-section,
	.th-categories-section,
	.th-cta-section {
		padding: var(--spacing-lg) var(--spacing-sm);
	}

	.th-featured-section h2,
	.th-recent-section h2,
	.th-categories-section h2,
	.th-cta-section h2 {
		font-size: 1.375rem;
		margin-bottom: var(--spacing-md);
	}

	.th-cta-section p {
		font-size: 0.95rem;
		margin-bottom: var(--spacing-md);
	}

	.th-card-title {
		font-size: 1rem;
	}

	.th-card-excerpt {
		font-size: 0.8rem;
	}

	.th-archive-header {
		margin-bottom: var(--spacing-lg);
		padding: var(--spacing-md) 0;
	}

	.th-archive-header h1 {
		font-size: 1.5rem;
		margin-bottom: 0;
	}

	.th-filters-sidebar {
		padding: var(--spacing-md);
	}

	.th-filter-group {
		margin-bottom: var(--spacing-md);
	}

	.th-filter-input,
	.th-filter-select {
		padding: var(--spacing-sm);
		font-size: 0.9rem;
	}

	.th-tutorial-info {
		padding: var(--spacing-md);
	}

	.th-tutorial-header {
		padding-bottom: var(--spacing-md);
		margin-bottom: var(--spacing-md);
	}

	.th-tutorial-header h1 {
		font-size: 1.5rem;
		margin-bottom: var(--spacing-sm);
	}

	.th-rating-section {
		gap: var(--spacing-sm);
	}

	.th-stars-large {
		font-size: 1.25rem;
	}

	.th-meta-info {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.th-star-picker {
		gap: var(--spacing-sm);
		font-size: 1.75rem;
	}

	.th-rating-form {
		padding: var(--spacing-md);
	}

	.th-related-item {
		padding: var(--spacing-sm);
		gap: var(--spacing-sm);
	}

	.th-related-thumb {
		width: 70px;
		height: 50px;
	}

	.th-related-info h4 {
		font-size: 0.9rem;
	}

	.th-footer {
		padding: var(--spacing-xl) var(--spacing-sm);
	}

	.th-footer-bottom {
		font-size: 0.85rem;
		padding-top: var(--spacing-md);
	}

	/* Pagination */
	.th-pagination {
		gap: var(--spacing-sm);
		flex-wrap: wrap;
	}

	.th-pagination a,
	.th-pagination span {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: 0.9rem;
	}
}

/* Mobile Small (360px) */
@media (max-width: 480px) {
	:root {
		--spacing-xs: 0.375rem;
		--spacing-sm: 0.75rem;
		--spacing-md: 0.875rem;
		--spacing-lg: 1.25rem;
		--spacing-xl: 1.5rem;
		--spacing-2xl: 2rem;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.25rem; }
	h3 { font-size: 1rem; }

	.th-hero-title {
		font-size: 1.25rem;
	}

	.th-hero-subtitle {
		font-size: 0.9rem;
	}

	.th-btn {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: 0.9rem;
	}

	.th-btn-large {
		padding: var(--spacing-md) var(--spacing-lg);
		font-size: 1rem;
	}

	.th-featured-section h2,
	.th-recent-section h2,
	.th-categories-section h2,
	.th-cta-section h2 {
		font-size: 1.25rem;
	}

	.th-tutorials-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}

	.th-card-rating {
		font-size: 0.75rem;
	}

	.th-stars {
		letter-spacing: 1px;
	}

	.th-difficulty-badge {
		font-size: 0.7rem;
		padding: var(--spacing-xs) var(--spacing-xs);
	}

	.th-duration-badge {
		font-size: 0.7rem;
		padding: var(--spacing-xs) var(--spacing-xs);
	}

	.th-star-picker {
		font-size: 1.5rem;
		gap: var(--spacing-xs);
	}

	.th-social-links {
		gap: var(--spacing-sm);
	}

	.th-social-links a {
		width: 36px;
		height: 36px;
	}
}

/* Print Styles */
@media print {
	.th-header,
	.th-footer,
	.th-filters-sidebar,
	.th-single-sidebar,
	.th-carousel-prev,
	.th-carousel-next,
	.th-menu-toggle {
		display: none;
	}

	.th-tutorial-card,
	.th-tutorial-info {
		page-break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ccc;
	}

	a {
		text-decoration: underline;
	}
}