/*
 * TheDesizn Tools — Responsive Stylesheet
 * Version: 1.0.0
 *
 * Mobile-first breakpoint overrides.
 * Base styles (mobile) are defined in tools.css / frontend.css.
 * This file adjusts layout for larger screens.
 */

/* =========================================================
   Breakpoints used:
     sm  → 480px
     md  → 768px
     lg  → 1024px
     xl  → 1280px
   ========================================================= */

/* ---------------------------------------------------------
   Small → 480px
   --------------------------------------------------------- */
@media (min-width: 480px) {
	.tdz-actions {
		flex-wrap: nowrap;
	}
}

/* ---------------------------------------------------------
   Medium → 768px (tablet)
   --------------------------------------------------------- */
@media (min-width: 768px) {
	.tdz-tool {
		padding: 0 32px 64px;
	}

	.tdz-tool__header {
		padding: 56px 0 40px;
	}

	.tdz-upload-area {
		padding: 64px 32px;
	}

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

	/* Stats bar — horizontal on tablet+ */
	.tdz-stats {
		flex-direction: row;
	}

	.tdz-stats__item {
		border-bottom: none;
	}
}

/* ---------------------------------------------------------
   Large → 1024px (desktop)
   --------------------------------------------------------- */
@media (min-width: 1024px) {
	.tdz-tool {
		padding: 0 48px 80px;
	}

	/* Side-by-side: original | result */
	.tdz-result--split {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.tdz-result--split .tdz-result__image-wrap {
		border-right: 1px solid var(--tdz-border);
	}
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------
   Mobile: stack stats items vertically
   --------------------------------------------------------- */
@media (max-width: 767px) {
	.tdz-stats {
		flex-direction: column;
	}

	.tdz-stats__item {
		border-right: none;
		border-bottom: 1px solid var(--tdz-border);
	}

	.tdz-stats__item:last-child {
		border-bottom: none;
	}

	.tdz-btn--lg {
		width: 100%;
		justify-content: center;
	}

	/* Options grid: single column on mobile */
	.tdz-options__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   High DPI / Retina
   --------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.tdz-upload-area__icon {
		/* Sharpen icon rendering on high-DPI screens */
		-webkit-font-smoothing: antialiased;
	}
}