/* -----------------------------------------------
   Prebuilt Section Blocks — Frontend Styles
----------------------------------------------- */

.psb-wrapper {
	width: 100%;
}

/* Loading state */
.psb-wrapper.psb-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ---- Filter dropdown ---- */
.psb-filter {
	display: flex;
	justify-content: var( --psb-filter-align, left );
	margin-bottom: var( --psb-filter-bottom-spacing, 24px );
}

.psb-filter__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;

	/* CSS-variable driven settings */
	background-color: var( --psb-filter-bg, #ffffff );
	color:            var( --psb-filter-text-color, #333333 );
	font-size:        var( --psb-filter-text-size, 14px );
	width:            var( --psb-filter-width, 220px );
	border:           1px solid var( --psb-filter-border-color, #dddddd );
	border-radius:    var( --psb-filter-border-radius, 4px );
	padding:          var( --psb-filter-padding-v, 10px ) 40px var( --psb-filter-padding-v, 10px ) var( --psb-filter-padding-h, 14px );
}

.psb-filter__select:hover {
	border-color: #aaa;
}

.psb-filter__select:focus {
	outline: none;
	box-shadow: none;
}

/* ---- Grid (masonry via flex column wrappers) ---- */
.psb-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var( --psb-grid-gap, 24px );
}

.psb-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var( --psb-grid-gap, 24px );
}

/* ---- Post item ---- */
.psb-item {
	position: relative;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.08 );
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	width: 100%;
}

.psb-item:hover {
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.14 );
	transform: translateY( -3px );
}

/* Preview image */
.psb-item__preview {
	display: block;
	overflow: hidden;
	background: #f0f0f0;
}

.psb-item__image {
	width: 100%;
	height: auto;
	display: block;
}

.psb-item__no-image {
	width: 100%;
	padding-top: 65%;
	background: #e8e8e8;
}

/* Category badges — overlaid top-left */
.psb-item__cats {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 2;
}

.psb-item__cat {
	background: #7b2ff7;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
	line-height: 1.4;
}

.psb-item__cat:hover {
	background: #6020d0;
	transform: scale( 1.05 );
}

/* ---- Load More ---- */
.psb-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 0;
}

/* Base button styles — Divi's ButtonGroupContainer overrides these via generated CSS */
.psb-load-more {
	cursor: pointer;
}

/* ---- Responsive: tablet ---- */
@media ( max-width: 980px ) {
	.psb-filter {
		justify-content: var( --psb-filter-align-tablet, var( --psb-filter-align, left ) );
		margin-bottom:   var( --psb-filter-bottom-spacing-tablet, var( --psb-filter-bottom-spacing, 24px ) );
	}

	.psb-filter__select {
		font-size: var( --psb-filter-text-size-tablet, var( --psb-filter-text-size, 14px ) );
		width:     var( --psb-filter-width-tablet, var( --psb-filter-width, 220px ) );
	}

	.psb-grid,
	.psb-col {
		gap: var( --psb-grid-gap-tablet, var( --psb-grid-gap, 24px ) );
	}
}

/* ---- Responsive: phone ---- */
@media ( max-width: 767px ) {
	.psb-filter {
		justify-content: var( --psb-filter-align-phone, var( --psb-filter-align, left ) );
		margin-bottom:   var( --psb-filter-bottom-spacing-phone, var( --psb-filter-bottom-spacing, 24px ) );
	}

	.psb-filter__select {
		font-size: var( --psb-filter-text-size-phone, var( --psb-filter-text-size, 14px ) );
		width:     var( --psb-filter-width-phone, var( --psb-filter-width, 220px ) );
	}

	.psb-grid,
	.psb-col {
		gap: var( --psb-grid-gap-phone, var( --psb-grid-gap, 24px ) );
	}
}

/* ---- Error state ---- */
.psb-error {
	color: #c00;
	font-size: 14px;
}

/* ---- VB preview placeholders ---- */
.psb-item--placeholder .psb-placeholder-img {
	width: 100%;
	padding-top: 60%;
	background: #e0e0e0;
	margin-bottom: 12px;
}

.psb-placeholder-text {
	height: 12px;
	background: #e0e0e0;
	margin-bottom: 8px;
	border-radius: 2px;
}

.psb-placeholder-text--title {
	height: 16px;
	width: 70%;
}