/* Patterns for image placeholders when no featured image exists */

.pattern {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* Pattern 1: Diagonal stripes */
.pattern-1 {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(0, 120, 212, 0.15) 0,
		rgba(0, 120, 212, 0.15) 10px,
		rgba(253, 185, 19, 0.15) 10px,
		rgba(253, 185, 19, 0.15) 20px
	);
	background-color: var(--color-bg-secondary);
}

/* Pattern 2: Subtle dots */
.pattern-2 {
	background-image: radial-gradient(rgba(0, 120, 212, 0.25) 1px, transparent 1px),
		radial-gradient(rgba(253, 185, 19, 0.25) 1px, transparent 1px);
	background-size: 20px 20px, 20px 20px;
	background-position: 0 0, 10px 10px;
	background-color: var(--color-bg-secondary);
}

/* Pattern 3: Grid */
.pattern-3 {
	background-image: linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
	background-size: 24px 24px, 24px 24px;
	background-color: var(--color-bg-secondary);
}

/* Pattern 4: Waves */
.pattern-4 {
	background-image: radial-gradient(circle at 0 0, rgba(0, 120, 212, 0.2), transparent 30%),
		radial-gradient(circle at 100% 100%, rgba(253, 185, 19, 0.2), transparent 30%);
	background-color: var(--color-bg-secondary);
}

/* Pattern 5: Angular blocks */
.pattern-5 {
	background-image: linear-gradient(135deg, rgba(0, 120, 212, 0.18) 25%, transparent 25%),
		linear-gradient(225deg, rgba(253, 185, 19, 0.18) 25%, transparent 25%),
		linear-gradient(45deg, rgba(0, 120, 212, 0.18) 25%, transparent 25%),
		linear-gradient(315deg, rgba(253, 185, 19, 0.18) 25%, transparent 25%);
	background-position: 10px 0, 10px 0, 0 0, 0 0;
	background-size: 20px 20px;
	background-repeat: repeat;
	background-color: var(--color-bg-secondary);
}

/* Pattern 6: Crosshatch */
.pattern-6 {
	background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 2px, transparent 2px, transparent 6px),
		repeating-linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 2px, transparent 2px, transparent 6px);
	background-color: var(--color-bg-secondary);
}

html.dark-theme .pattern-3,
html.dark-theme .pattern-6 {
	background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
}