/**
 * Divi Filterable Portfolio ("Project Grid") - dropdown filters styling.
 */

/* Hide the original Category tabs once the dropdown has taken their place.
 * Not scoped to ".et_pb_portfolio_filters_menu" as an ancestor class - the
 * filter <ul> isn't reliably marked with that class (verified against real
 * markup, see dropdown-filters.js), so the JS adds this modifier class
 * directly to whichever <ul> it actually found. */
.et_pb_portfolio_filters_menu--has-dropdown {
	display: none;
}

/* Items hidden by the Audience filter or the Search box - !important so
 * they always win over whatever Divi's own category filtering is doing
 * to the same element. */
.dpd_audience_hidden,
.dpd_search_hidden {
	display: none !important;
}

/* Layout: put the dropdowns and the search box side by side, wrapping on
 * small screens. */
.et_pb_portfolio_filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.et_pb_portfolio_filters_dropdown {
	display: inline-block;
	width: auto;
	max-width: 100%;
	padding: 0.6em 2.2em 0.6em 1em;
	font-size: 16px;
	line-height: 1.4;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	background-color: #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8em center;
	background-size: 10px 7px;
}

.et_pb_portfolio_filters_search {
	display: inline-block;
	flex: 1 1 200px;
	min-width: 160px;
	max-width: 100%;
	padding: 0.6em 1em 0.6em 2.2em;
	font-size: 16px;
	line-height: 1.4;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	background-color: #fff;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' d='M7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10zM15 15l-4.35-4.35'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.7em center;
	background-size: 14px 14px;
}

/* Removes Chrome/Safari's default "x" clear-button and magnifier icon on
 * type="search" inputs so only our own icon/spacing shows. */
.et_pb_portfolio_filters_search::-webkit-search-decoration,
.et_pb_portfolio_filters_search::-webkit-search-cancel-button,
.et_pb_portfolio_filters_search::-webkit-search-results-button,
.et_pb_portfolio_filters_search::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

/* The excerpt appended to each grid item - adjust to match your theme's
 * type scale/spacing. */
.dpd-portfolio-excerpt {
	margin: 0.5em 0 0;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.8;
}

/* Category is moved above the featured image/title server-side now (see
 * includes/reorder-category.php) - a CSS flex "order" trick was tried
 * first, but Divi's own stylesheet can win that cascade fight (its own
 * "display" rule for .et_pb_portfolio_item may have higher specificity or
 * simply load after ours), silently disabling "order" since it only does
 * anything inside a flex/grid container. Reordering the actual HTML
 * doesn't depend on any CSS being in effect. */

.et_pb_portfolio_item .et_portfolio_image {
	background-image: url(/wp-content/uploads/2026/09/high-school_34.png);
	padding-bottom: 20px;
}
.et_pb_portfolio_item .et_overlay {
	border: 0 !important;
}

.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
	border-top: 0 !important;
}

/* Grid columns: 3 on desktop, 2 on tablet (was 4 and 3).
 * ---------------------------------------------------------------------
 * Divi doesn't expose a "columns" setting for this module - when it sits
 * in a full-width row (the normal case), the 4-across/3-across counts
 * come from Divi's own built-in grid CSS for a full-width column, keyed
 * off the site's global gutter-width setting (body.et_pb_gutters3 here)
 * and hardcoded per column-width class. There's no built-in "3 columns"
 * variant for a full-width column to switch to, so this replaces the
 * two rules that matter with the same width/gutter math Divi itself
 * uses for 3-column and 2-column grids elsewhere, scoped only to this
 * module (.et_pb_filterable_portfolio) so no other grid on the site
 * (blog grid, shop grid, etc.) is affected.
 *
 * Verified against the live site at 1024px (3 across), 900px (2
 * across), 700px and 400px (unchanged 2 across / 1 across - those two
 * narrower breakpoints already showed 2 and 1 and are left alone,
 * hence the 768px floor on the tablet media query below: without it,
 * !important here would also override Divi's own <768px rules).
 *
 * If you ever change the Gutter Width theme setting away from its
 * current value, re-check these two percentages - they're hardcoded to
 * match a 5.5% gutter, the value Divi's own equivalent rules use today.
 */
@media (min-width: 981px) {
	.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item {
		width: 29.6667% !important;
		margin-right: 5.5% !important;
		clear: none !important;
	}
	.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(3n) {
		margin-right: 0 !important;
	}
	.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(3n+1) {
		clear: both !important;
	}
}

@media (max-width: 980px) and (min-width: 768px) {
	.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item {
		width: 47.25% !important;
		margin-right: 5.5% !important;
		clear: none !important;
	}
	.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(2n) {
		margin-right: 0 !important;
	}
	.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(2n+1) {
		clear: both !important;
	}
}

/*
 * WANT TABS ON DESKTOP, DROPDOWNS ONLY ON MOBILE?
 * Replace the unconditional rule above that hides
 * ".et_pb_portfolio_filters_menu--has-dropdown" with this instead:
 *
 * .et_pb_portfolio_filters_dropdown--category { display: none; }
 *
 * @media (max-width: 767px) {
 *   .et_pb_portfolio_filters_menu--has-dropdown {
 *     display: none;
 *   }
 *   .et_pb_portfolio_filters_dropdown--category {
 *     display: inline-block;
 *   }
 * }
 *
 * (The Audience dropdown has no "tab" equivalent, so it can stay visible
 * at every width, or you can wrap it in the same media query if you'd
 * rather it only shows on mobile too.)
 */