/* ============================================================
   13-utilities.css
   Spacing, display, flex helpers, visibility, etc.
   ============================================================ */

/* Display */
.ss-d-block { display: block; }
.ss-d-inline-block { display: inline-block; }
.ss-d-flex { display: flex; }
.ss-d-grid { display: grid; }
.ss-d-none { display: none; }

/* Flex direction / wrap / align */
.ss-flex-col { flex-direction: column; }
.ss-flex-wrap { flex-wrap: wrap; }
.ss-items-center { align-items: center; }
.ss-items-start { align-items: flex-start; }
.ss-items-end { align-items: flex-end; }
.ss-justify-center { justify-content: center; }
.ss-justify-between { justify-content: space-between; }
.ss-justify-end { justify-content: flex-end; }

/* Gap helpers */
.ss-gap-1 { gap: var(--ss-space-1); }
.ss-gap-2 { gap: var(--ss-space-2); }
.ss-gap-3 { gap: var(--ss-space-3); }
.ss-gap-4 { gap: var(--ss-space-4); }
.ss-gap-5 { gap: var(--ss-space-5); }
.ss-gap-6 { gap: var(--ss-space-6); }

/* Margin / padding helpers (block direction) */
.ss-mt-0 { margin-top: 0; }
.ss-mt-1 { margin-top: var(--ss-space-1); }
.ss-mt-2 { margin-top: var(--ss-space-2); }
.ss-mt-3 { margin-top: var(--ss-space-3); }
.ss-mt-4 { margin-top: var(--ss-space-4); }
.ss-mt-5 { margin-top: var(--ss-space-5); }
.ss-mt-6 { margin-top: var(--ss-space-6); }

.ss-mb-0 { margin-bottom: 0; }
.ss-mb-1 { margin-bottom: var(--ss-space-1); }
.ss-mb-2 { margin-bottom: var(--ss-space-2); }
.ss-mb-3 { margin-bottom: var(--ss-space-3); }
.ss-mb-4 { margin-bottom: var(--ss-space-4); }
.ss-mb-5 { margin-bottom: var(--ss-space-5); }
.ss-mb-6 { margin-bottom: var(--ss-space-6); }

.ss-p-0  { padding: 0; }
.ss-p-3  { padding: var(--ss-space-3); }
.ss-p-4  { padding: var(--ss-space-4); }
.ss-p-5  { padding: var(--ss-space-5); }
.ss-p-6  { padding: var(--ss-space-6); }

/* Width */
.ss-w-full { width: 100%; }
.ss-w-auto { width: auto; }
.ss-max-w-prose { max-width: 65ch; }

/* Position */
.ss-relative { position: relative; }
.ss-absolute { position: absolute; }
.ss-static   { position: static; }

/* Text helpers */
.ss-uppercase { text-transform: uppercase; }
.ss-lowercase { text-transform: lowercase; }
.ss-capitalize { text-transform: capitalize; }
.ss-bold { font-weight: 700; }
.ss-semibold { font-weight: 600; }
.ss-normal { font-weight: 400; }
.ss-italic { font-style: italic; }
.ss-underline { text-decoration: underline; }
.ss-no-underline { text-decoration: none; }

/* Font size helpers */
.ss-fs-xs { font-size: var(--ss-fs-xs); }
.ss-fs-sm { font-size: var(--ss-fs-sm); }
.ss-fs-md { font-size: var(--ss-fs-md); }
.ss-fs-lg { font-size: var(--ss-fs-lg); }
.ss-fs-xl { font-size: var(--ss-fs-xl); }

/* Visibility / responsive */
.ss-hide-mobile { }
@media (max-width: 720px) {
	.ss-hide-mobile { display: none !important; }
	.ss-show-mobile { display: block !important; }
}
.ss-show-mobile { display: none; }
@media (max-width: 720px) {
	.ss-show-mobile { display: block; }
}

/* Borders */
.ss-rounded-sm { border-radius: var(--ss-radius-sm); }
.ss-rounded-md { border-radius: var(--ss-radius-md); }
.ss-rounded-lg { border-radius: var(--ss-radius-lg); }
.ss-rounded-xl { border-radius: var(--ss-radius-xl); }
.ss-rounded-2xl { border-radius: var(--ss-radius-2xl); }
.ss-rounded-pill { border-radius: var(--ss-radius-pill); }

.ss-border { border: 1px solid var(--ss-line); }
.ss-border-0 { border: 0; }
.ss-shadow-sm { box-shadow: var(--ss-shadow-sm); }
.ss-shadow-md { box-shadow: var(--ss-shadow-md); }
.ss-shadow-lg { box-shadow: var(--ss-shadow-lg); }

/* Backgrounds */
.ss-bg-offwhite { background: var(--ss-offwhite); }
.ss-bg-gray { background: var(--ss-gray-light); }
.ss-bg-white { background: var(--ss-white); }
.ss-bg-black { background: var(--ss-black); color: var(--ss-white); }
.ss-bg-violet { background: var(--ss-violet); }
.ss-bg-turquoise { background: var(--ss-turquoise); }
.ss-bg-lime { background: var(--ss-lime); }

/* Pointer / cursor */
.ss-cursor-pointer { cursor: pointer; }
.ss-cursor-default { cursor: default; }

/* Aspect ratios */
.ss-aspect-video { aspect-ratio: 16 / 9; }
.ss-aspect-square { aspect-ratio: 1 / 1; }
.ss-aspect-card { aspect-ratio: 3 / 2; }

/* Misc */
.ss-overflow-hidden { overflow: hidden; }
.ss-overflow-auto { overflow: auto; }
.ss-text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Placeholder mockup background used in cards */
.ss-placeholder {
	background: linear-gradient(135deg, var(--ss-violet), var(--ss-turquoise));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-black);
	font-size: var(--ss-fs-xs);
	font-weight: 600;
	letter-spacing: var(--ss-tracking-wide);
}

/* Final CTA contrast guard */
.ss-scroll-cta .ss-final-cta__title,
.ss-scroll-cta .ss-service-cta__title,
.ss-final-cta .ss-final-cta__title,
.ss-service-cta .ss-service-cta__title {
	color: var(--ss-offwhite) !important;
	text-shadow: 0 1px 24px rgba(247, 245, 242, 0.16);
}

.ss-scroll-cta .ss-final-cta__text,
.ss-scroll-cta .ss-service-cta__text,
.ss-final-cta .ss-final-cta__text,
.ss-service-cta .ss-service-cta__text {
	color: rgba(247, 245, 242, 0.76) !important;
}