/*
* atomic styles
* used by backend & frontend
*/

/* ## Reset
================================= */
/* Modern CSS Reset - circa 2024/2025 */
	*, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
	
	:where(img){
		width: 100%;
	}

	/* ## Presets */
	:root{
		--unit-xs: 4px;
		--unit-sm: 12px;
		--unit-md: 30px;
		--unit-lg: clamp(30px, -32.308px + 7.692vw, 60px);
		--unit-xl: clamp(30px, -156.923px + 23.077vw, 120px);

		--siteInset: clamp(30px, calc(19.091px + 3.409vw), 60px);

		--z-top: 1000;
		--z-mid: 100;
		--z-bottom: 0;

		--gray05: hsl(0, 0%, 95%);
		--gray10: hsl(0, 0%, 90%);
		--gray20: hsl(0, 0%, 80%);
		--gray30: hsl(0, 0%, 70%);
		--gray40: hsl(0, 0%, 60%);
		--gray50: hsl(0, 0%, 50%);
		--gray60: hsl(0, 0%, 40%);
		--gray70: hsl(0, 0%, 30%);
		--gray80: hsl(0, 0%, 20%);
		--gray90: hsl(0, 0%, 10%);
	}

	/* ## Alignment */
	.txt-center{text-align: center;}
	.txt-right{text-align: right;}
	.margin-center{margin-inline:auto}

	.justify-center{justify-content: center;}
	.justify-start{justify-content: start;}
	.justify-space-between{justify-content: space-between;}

	.align-center{align-items: center;}
	.align-end{align-items: end;}
	.place-center{place-content: center;}


	/* ## Aspect-ratio */
	.asp-landscape{aspect-ratio: 4 / 3;}
	.asp-portrait{aspect-ratio: 3 / 4;}
	.asp-square{aspect-ratio: 1;}
	.asp-wide {aspect-ratio:16 / 9;}
	.asp-tall {aspect-ratio: 9 / 16;}


	/* ## Color */
	.currentcolor{color: currentColor !important}

	/* ## Display */
	.d-none{display:none !important}
	.d-block{display:block !important}
	.d-iblock{display:inline-block !important}
	.d-inline{display:inline !important}
	.d-flex{display:flex !important}
	.d-grid{display:grid !important}
	.d-contents{display:contents !important}

	/* ## Gap */
	.gap-xs{gap: var(--unit-xs)}
	.gap-sm{gap: var(--unit-sm)}
	.gap-md{gap: var(--unit-md)}
	.gap-lg{gap: var(--unit-lg)}
	.gap-xl{gap: var(--unit-xl)}

	/* ## margin */
	.mt-0{margin-top: 0 !important;}
	.mb-0{margin-bottom: 0 !important;}

	.mt-xs{margin-top:var(--unit-xs) !important}
	.mt-sm{margin-top:var(--unit-sm) !important}
	.mt-md{margin-top:var(--unit-md) !important}
	.mt-lg{margin-top:var(--unit-lg) !important}
	.mt-xl{margin-top:var(--unit-xl) !important}
	.mt-auto{margin-top:auto !important}

	.mb-xs{margin-bottom:var(--unit-xs) !important}
	.mb-sm{margin-bottom:var(--unit-sm) !important}
	.mb-md{margin-bottom:var(--unit-md) !important}
	.mb-lg{margin-bottom:var(--unit-lg) !important}
	.mb-xl{margin-bottom:var(--unit-xl) !important}
	.mb-auto{margin-bottom:auto !important}

	.ml-xs{margin-left:var(--unit-xs) !important}
	.ml-sm{margin-left:var(--unit-sm) !important}
	.ml-md{margin-left:var(--unit-md) !important}
	.ml-lg{margin-left:var(--unit-lg) !important}
	.ml-xl{margin-left:var(--unit-xl) !important}
	.ml-auto{margin-left:auto !important}

	.mr-xs{margin-right:var(--unit-xs) !important}
	.mr-sm{margin-right:var(--unit-sm) !important}
	.mr-md{margin-right:var(--unit-md) !important}
	.mr-lg{margin-right:var(--unit-lg) !important}
	.mr-xl{margin-right:var(--unit-xl) !important}
	.mr-auto{margin-right:auto !important}

	.minline-auto{margin-inline:auto}

	/* ## Position */
	.pos-static{position:static}
	.pos-rel{position:relative}
	.pos-abs{position:absolute}
	.pos-fixed{position:fixed}
	.pos-sticky{position:sticky}

	/* ## Padding */
	.p-0{padding:0 !important}
	.p-xs{padding:var(--unit-xs) !important}
	.p-sm{padding:var(--unit-sm) !important}
	.p-md{padding:var(--unit-md) !important}
	.p-lg{padding:var(--unit-lg) !important}
	.p-xl{padding:var(--unit-xl) !important}

	.pt-0{padding-top:0 !important}
	.pt-xs{padding-top:var(--unit-xs) !important}
	.pt-sm{padding-top:var(--unit-sm) !important}
	.pt-md{padding-top:var(--unit-md) !important}
	.pt-lg{padding-top:var(--unit-lg) !important}
	.pt-xl{padding-top:var(--unit-xl) !important}

	.pb-0{padding-bottom:0 !important}
	.pb-xs{padding-bottom:var(--unit-xs) !important}
	.pb-sm{padding-bottom:var(--unit-sm) !important}
	.pb-md{padding-bottom:var(--unit-md) !important}
	.pb-lg{padding-bottom:var(--unit-lg) !important}
	.pb-xl{padding-bottom:var(--unit-xl) !important}

	.pl-0{padding-left:0 !important}
	.pl-xs{padding-left:var(--unit-xs) !important}
	.pl-sm{padding-left:var(--unit-sm) !important}
	.pl-md{padding-left:var(--unit-md) !important}
	.pl-lg{padding-left:var(--unit-lg) !important}
	.pl-xl{padding-left:var(--unit-xl) !important}

	.pr-0{padding-right:0 !important}
	.pr-xs{padding-right:var(--unit-xs) !important}
	.pr-sm{padding-right:var(--unit-sm) !important}
	.pr-md{padding-right:var(--unit-md) !important}
	.pr-lg{padding-right:var(--unit-lg) !important}
	.pr-xl{padding-right:var(--unit-xl) !important}

	.pinline-auto{padding-inline:auto !important}

	/* ## Responsive Hiding */
	@media (min-width:1201px){
		/* desktop */
		.hide-desktop{display:none !important}
	}
	@media (min-width:811px) and (max-width: 1200px){
		/* tablet horizontal +*/
		.hide-tablet{display:none !important}
	}
	@media only screen and (max-width: 810px){
		/* mobile & tablet*/
		.hide-mobile{display:none !important}
	}

	/* ## Sizing */
	.alignfull{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.w-100{
		width: 100% !important;
	}