/**
 * Layout System - Mobile First
 * Single source of truth for containers, spacing, and structural layout
 * 
 * @package TaatiStudio
 * @since 1.0.0
 */

/* ==========================================================================
   CONTAINERS
   ========================================================================== */

/**
 * Primary Container - Mobile First
 * Single, unified container definition
 */
.ts-container {
	width: 100%;
	max-width: var(--container-xl, 1280px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4, 1.5rem);
	padding-right: var(--space-4, 1.5rem);
}

/* Tablet */
@media (min-width: 768px) {
	.ts-container {
		padding-left: var(--space-4, 1rem);
		padding-right: var(--space-4, 1rem);
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.ts-container {
		padding-left: var(--space-4, 1rem);
		padding-right: var(--space-4, 1rem);
	}
	/* Single product uses dedicated .ts-product-container inside its template; remove special-case container override */
}

/* Wide Container */
.ts-container-wide {
	width: 100%;
	max-width: var(--container-2xl, 1440px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4, 1.5rem);
	padding-right: var(--space-4, 1.5rem);
}

@media (min-width: 768px) {
	.ts-container-wide {
		padding-left: var(--space-6, 2rem);
		padding-right: var(--space-6, 2rem);
	}
}

@media (min-width: 1024px) {
	.ts-container-wide {
		padding-left: var(--space-8, 3rem);
		padding-right: var(--space-8, 3rem);
	}
}

/* Narrow Container (for blog posts, etc.) */
.ts-container-narrow {
	width: 100%;
	max-width: var(--container-md, 900px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4, 1.5rem);
	padding-right: var(--space-4, 1.5rem);
}

@media (min-width: 768px) {
	.ts-container-narrow {
		padding-left: var(--space-6, 2rem);
		padding-right: var(--space-6, 2rem);
	}
}

/* Fluid Container (no max-width) */
.ts-container-fluid {
	width: 100%;
	padding-left: var(--space-4, 1.5rem);
	padding-right: var(--space-4, 1.5rem);
}

@media (min-width: 768px) {
	.ts-container-fluid {
		padding-left: var(--space-6, 2rem);
		padding-right: var(--space-6, 2rem);
	}
}

@media (min-width: 1024px) {
	.ts-container-fluid {
		padding-left: var(--space-8, 3rem);
		padding-right: var(--space-8, 3rem);
	}
}

/* ==========================================================================
   BREATHING SPACE - Content Area Spacing
   ========================================================================== */

/**
 * Primary Content Wrapper
 * Ensures consistent spacing above content across all page types
 */
.ts-site-content {
	flex: 1; /* Sticky footer support */
	padding-top: var(--content-top-spacing, 2rem);
}

/* Tablet - Increase spacing */
@media (min-width: 768px) {
	.ts-site-content {
		padding-top: calc(var(--content-top-spacing, 2rem) + 0.5rem);
	}
}

/* Desktop - More breathing space */
@media (min-width: 1024px) {
	.ts-site-content {
		padding-top: 3rem;
	}
}

/**
 * Account for Sticky Header
 * When header is sticky, add header height to top padding
 */
body.has-sticky-header .ts-site-content {
	padding-top: calc(var(--header-height, 80px) + var(--content-top-spacing, 2rem));
}

@media (min-width: 1024px) {
	body.has-sticky-header .ts-site-content {
		padding-top: calc(var(--header-height, 80px) + 3rem);
	}
}

/**
 * Account for Transparent Header
 * When header is transparent and at top, no extra padding
 */
body.has-transparent-header:not(.scrolled) .ts-site-content {
	padding-top: 0;
}

/* Once scrolled and header becomes opaque, add spacing */
body.has-transparent-header.scrolled .ts-site-content {
	padding-top: var(--content-top-spacing, 2rem);
}

@media (min-width: 1024px) {
	body.has-transparent-header.scrolled .ts-site-content {
		padding-top: 3rem;
	}
}

/**
 * WooCommerce Pages - Special Handling
 * Products/shop may need different spacing
 */
.woocommerce .ts-site-content,
.woocommerce-page .ts-site-content {
	padding-top: 2rem;
}

@media (min-width: 1024px) {
	.woocommerce .ts-site-content,
	.woocommerce-page .ts-site-content {
		padding-top: 2.5rem;
	}
}

/* Single Product - More space for premium feel */
.single-product .ts-site-content {
	padding-top: 2rem;
}

@media (min-width: 1024px) {
	.single-product .ts-site-content {
		padding-top: 3rem;
	}
}

/* ==========================================================================
   SITE STRUCTURE
   ========================================================================== */

/**
 * Site Wrapper
 * Main page wrapper for sticky footer
 */
.ts-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/**
 * Main Content Area
 * Grows to fill available space
 */
.ts-site-main {
	flex: 1;
}

/* ==========================================================================
   GRID UTILITIES
   ========================================================================== */

/**
 * Basic Grid System
 * Mobile-first responsive grid
 */

/* Single column by default (mobile) */
.ts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap, 2rem);
}

/* 2 columns - tablet */
@media (min-width: 768px) {
	.ts-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 3 columns - tablet */
@media (min-width: 768px) {
	.ts-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* 4 columns - desktop */
@media (min-width: 1024px) {
	.ts-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1280px) {
	.ts-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

/**
 * Section Spacing
 * Consistent spacing for page sections
 */
.ts-section {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.ts-section {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media (min-width: 1024px) {
	.ts-section {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

/* Small section spacing */
.ts-section-sm {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.ts-section-sm {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.ts-section-sm {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* Large section spacing */
.ts-section-lg {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

@media (min-width: 768px) {
	.ts-section-lg {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

@media (min-width: 1024px) {
	.ts-section-lg {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

/* ==========================================================================
   FLEX UTILITIES
   ========================================================================== */

/**
 * Flexbox utilities for common layouts
 */
.ts-flex {
	display: flex;
}

.ts-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ts-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ts-flex-col {
	display: flex;
	flex-direction: column;
}

.ts-flex-wrap {
	flex-wrap: wrap;
}

/* ==========================================================================
   VISIBILITY UTILITIES
   ========================================================================== */

/**
 * Responsive visibility helpers
 */

/* Hide on mobile only */
@media (max-width: 767px) {
	.ts-hidden-mobile {
		display: none !important;
	}
}

/* Hide on tablet and up */
@media (min-width: 768px) {
	.ts-visible-mobile-only {
		display: none !important;
	}
}

/* Hide on desktop only */
@media (min-width: 1024px) {
	.ts-hidden-desktop {
		display: none !important;
	}
}

/* Show on desktop only */
@media (max-width: 1023px) {
	.ts-visible-desktop-only {
		display: none !important;
	}
}

/* ==========================================================================
   CLEARFIX
   ========================================================================== */

/**
 * Clearfix utility
 */
.ts-clearfix::after {
	content: "";
	display: table;
	clear: both;
}