/*
 * Theme T&B — Responsive Utilities
 *
 * Mobile-first responsive utilities and breakpoint helpers.
 * Breakpoints:
 *   xs:  320px | sm:  576px | md:  768px
 *   lg:  1024px | xl:  1280px | xxl: 1536px
 *
 * @package ThemeTB
 * @version 2.0.0
 */

/* =========================================================
   Responsive Breakpoint Variables
   ========================================================= */

:root {
	--tb-bp-xs:  320px;
	--tb-bp-sm:  576px;
	--tb-bp-md:  768px;
	--tb-bp-lg:  1024px;
	--tb-bp-xl:  1280px;
	--tb-bp-xxl: 1536px;
}

/* =========================================================
   Display Utilities
   ========================================================= */

.tb-hidden     { display: none !important; }
.tb-block      { display: block !important; }
.tb-flex       { display: flex !important; }
.tb-grid       { display: grid !important; }
.tb-inline     { display: inline !important; }
.tb-inline-flex{ display: inline-flex !important; }

@media (max-width: 767px) {
	.tb-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.tb-hidden-tablet { display: none !important; }
}

@media (min-width: 1024px) {
	.tb-hidden-desktop { display: none !important; }
}

@media (min-width: 768px) {
	.tb-mobile-only { display: none !important; }
}

/* =========================================================
   Responsive Container
   ========================================================= */

.tb-container {
	width: 100%;
	max-width: var(--tb-container-max);
	margin-inline: auto;
	padding-inline: var(--tb-space-4);
}

@media (min-width: 576px)  { .tb-container { padding-inline: var(--tb-space-5); } }
@media (min-width: 768px)  { .tb-container { padding-inline: var(--tb-space-6); } }
@media (min-width: 1280px) { .tb-container { padding-inline: var(--tb-space-8); } }

.tb-full-width {
	width: 100%;
	padding-inline: 0;
}

.tb-narrow {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--tb-space-4);
}

@media (min-width: 768px) {
	.tb-narrow { padding-inline: var(--tb-space-6); }
}

/* =========================================================
   Sidebar Content Area
   ========================================================= */

.tb-content-area--with-sidebar,
.tb-layout--sidebar_left,
.tb-layout--sidebar_right {
	display: grid;
	gap: var(--tb-space-8);
	align-items: start;
}

.tb-content-area--with-sidebar { grid-template-columns: 1fr var(--tb-sidebar-width); }
.tb-layout--sidebar_left       { grid-template-columns: var(--tb-sidebar-width) 1fr; }
.tb-layout--sidebar_right      { grid-template-columns: 1fr var(--tb-sidebar-width); }

.tb-content-area--with-sidebar .tb-sidebar {
	position: sticky;
	top: calc(var(--tb-header-height) + var(--tb-space-6));
	align-self: start;
}

@media (max-width: 1023px) {
	.tb-content-area--with-sidebar,
	.tb-layout--sidebar_left,
	.tb-layout--sidebar_right {
		grid-template-columns: 1fr;
	}

	.tb-content-area--with-sidebar .tb-sidebar,
	.tb-layout--sidebar_left .tb-sidebar,
	.tb-layout--sidebar_right .tb-sidebar {
		position: static;
		order: 1;
	}
}

/* =========================================================
   Homepage Hero Search
   ========================================================= */

@media (max-width: 767px) {
	.tb-hero-search {
		flex-direction: column;
		gap: var(--tb-space-3);
	}
	.tb-hero-search input[type="search"],
	.tb-hero-search input[type="text"] {
		width: 100%;
	}
	.tb-hero-search button {
		width: 100%;
	}
}

/* =========================================================
   Homepage Sections
   ========================================================= */

@media (max-width: 1023px) {
	.tb-homepage-sections .tb-featured-tools-grid,
	.tb-homepage-sections .tb-latest-tools-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.tb-homepage-sections .tb-featured-tools-grid,
	.tb-homepage-sections .tb-latest-tools-grid {
		grid-template-columns: 1fr;
	}

	.tb-homepage-sections .tb-featured-tools-grid .tb-tool-card,
	.tb-homepage-sections .tb-latest-tools-grid .tb-tool-card {
		grid-column: span 1;
	}
}

/* =========================================================
   Tools Grid
   ========================================================= */

@media (max-width: 1023px) {
	.tb-tools-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.tb-tools-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Ebooks Layout
   ========================================================= */

@media (max-width: 767px) {
	.tb-single-ebook__layout {
		grid-template-columns: 1fr;
	}
	.tb-single-ebook__cover {
		max-width: 200px;
		margin-inline: auto;
	}
}

/* =========================================================
   Blog Cards
   ========================================================= */

@media (max-width: 1023px) {
	.tb-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.tb-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Newsletter Section
   ========================================================= */

@media (max-width: 767px) {
	.tb-newsletter {
		padding: var(--tb-space-8) var(--tb-space-4);
	}
	.tb-newsletter__inner {
		flex-direction: column;
		gap: var(--tb-space-6);
	}
	.tb-newsletter__content {
		text-align: center;
	}
	.tb-newsletter__form {
		width: 100%;
	}
}

/* =========================================================
   Admin Responsive
   ========================================================= */

@media (max-width: 767px) {
	.tb-admin-dashboard .tb-admin-stat-card {
		grid-column: span 1 !important;
	}
	.tb-admin-dashboard .tb-admin-card {
		padding: var(--tb-space-4);
	}
	.tb-admin-dashboard .tb-admin-quick-actions {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Responsive Grid
   ========================================================= */

.tb-grid-1  { grid-template-columns: repeat(1, 1fr); }
.tb-grid-2  { grid-template-columns: repeat(2, 1fr); }
.tb-grid-3  { grid-template-columns: repeat(3, 1fr); }
.tb-grid-4  { grid-template-columns: repeat(4, 1fr); }
.tb-grid-6  { grid-template-columns: repeat(6, 1fr); }
.tb-grid-12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 1023px) {
	.tb-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.tb-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.tb-grid-2,
	.tb-grid-3,
	.tb-grid-4,
	.tb-grid-6 { grid-template-columns: 1fr; }
}

/* =========================================================
   Responsive Spacing
   ========================================================= */

.tb-section {
	padding-block: var(--tb-space-12);
}

@media (min-width: 768px)  { .tb-section { padding-block: var(--tb-space-16); } }
@media (min-width: 1024px) { .tb-section { padding-block: var(--tb-space-20); } }

/* =========================================================
   Responsive Typography
   ========================================================= */

.tb-hero__title {
	font-size: clamp(var(--tb-text-3xl), 5vw, var(--tb-text-6xl));
}

.tb-section__title {
	font-size: clamp(var(--tb-text-2xl), 3vw, var(--tb-text-3xl));
}

/* =========================================================
   Responsive Header
   ========================================================= */

@media (max-width: 1023px) {
	.tb-header__inner {
		padding-inline: var(--tb-space-4);
	}
}

/* =========================================================
   Responsive Footer
   ========================================================= */

@media (max-width: 767px) {
	.tb-footer__bottom-inner {
		flex-direction: column;
		text-align: center;
	}

	.tb-footer__widgets-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Touch Targets (Mobile)
   ========================================================= */

@media (max-width: 767px) {
	.tb-btn {
		min-height: 44px;
	}

	.tb-nav__menu li a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.tb-share-btn {
		min-height: 40px;
	}
}

/* =========================================================
   Ultra-Wide Monitors
   ========================================================= */

@media (min-width: 1536px) {
	.tb-container {
		max-width: 1400px;
	}

	.tb-layout--full_width .tb-content-area {
		max-width: 1400px;
		margin-inline: auto;
	}
}

/* =========================================================
   Social Media Device Visibility
   ========================================================= */

/* Desktop: hide items marked as desktop-hidden */
@media (min-width: 1024px) {
	.tb-social-link.tb-hide-desktop {
		display: none !important;
	}
}

/* Tablet: hide items marked as tablet-hidden */
@media (min-width: 768px) and (max-width: 1023px) {
	.tb-social-link.tb-hide-tablet {
		display: none !important;
	}
}

/* Mobile: hide items marked as mobile-hidden */
@media (max-width: 767px) {
	.tb-social-link.tb-hide-mobile {
		display: none !important;
	}
}

/* =========================================================
   Mobile Header — Hide Desktop Social Icons
   ========================================================= */

@media (max-width: 767px) {
	.tb-header__actions .tb-social-links--header {
		display: none !important;
	}
}

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

@media print {
	.tb-header,
	.tb-footer,
	.tb-sidebar,
	.tb-search-bar,
	.tb-mobile-menu,
	.tb-announcement-bar,
	.tb-newsletter,
	.tb-related-tools,
	.tb-related-ebooks,
	.tb-related-posts,
	.tb-single-tool__sharing,
	.tb-single-ebook__sharing,
	.tb-single-post__sharing,
	.tb-single-tool__footer-cta,
	.tb-single-tool__newsletter,
	.tb-share-btn {
		display: none !important;
	}

	.tb-main {
		padding: 0;
	}

	a {
		text-decoration: underline;
	}

	.tb-tool-card,
	.tb-ebook-card,
	.tb-blog-card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ccc;
	}
}