/**
 * Brag Features – Utility Classes
 *
 * Reusable utility classes for use across blocks and plugin templates.
 * Add further utility classes to this file as needed.
 *
 * @package BragFeatures
 * @since 1.0.0
 */

/* Display */
.none {
	display: none !important;
}

/* Overflow */
.overflow-auto {
	overflow: auto;
}

.overflow-hidden {
	overflow: hidden;
}

/* Transform – rotate */
.-rotate-2 {
	transform: rotate(-2deg);
}

.rotate-2 {
	transform: rotate(2deg);
}

.-rotate-5 {
	transform: rotate(-5deg);
}

.rotate-5 {
	transform: rotate(5deg);
}

/* Border style */
.border-dotted {
	border-style: dotted;
}

.border-dashed {
	border-style: dashed;
}

/* Position */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

/* Position – responsive (md = 768px and up, Tailwind-style) */
@media (min-width: 768px) {
	.md\:relative {
		position: relative;
	}

	.md\:absolute {
		position: absolute;
	}

	.md\:aspect-\[4\/2\] {
		aspect-ratio: 4 / 2;
	}

	.md\:none {
		display: none !important;
	}

	.md\:flex {
		display: flex !important;
	}
}

/* Position values */
.-right-20 {
	right: -20px;
}

.-top-10 {
	top: -10px;
}

.-right-80 {
	right: -80px;
}

.-top-15 {
	top: -15px;
}

/* Aspect ratio */
.aspect-none {
	aspect-ratio: auto;
}

.aspect-4\/3 {
	aspect-ratio: 4 / 3;
}

.aspect-video {
	aspect-ratio: 16 / 9;
}

/* Width */
.w-full {
	width: 100%;
}

.w-full img {
	width: 100%;
}

/* Fade overlay – gradient from #F5F5F0 to transparent (top to bottom).
   Apply to a container; the ::after overlays its contents so they "fade away" towards the bottom. */
.fade-bottom-overlay {
	position: relative;
}

.fade-bottom-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent 0%, #F5F5F0 100%);
	pointer-events: none;
}