/* Outmark Portfolio Widget
   ----------------------------------------------------------------
   Self-contained styles. The "Meta below thumb w/ shadow hover"
   values are matched to Salient's data-ps="9" style:
     - image hover: translateY(-5px) + box-shadow 0 30px 65px rgba(0,0,0,.15)
     - image transition: .3s cubic-bezier(.21,.6,.35,1)
     - title: lores-9-wide, 16px, uppercase, line-height 28px, #293A31
     - column gutter: 15px each side (30px between items)
*/

.outmark-pw-wrap {
	--outmark-col-width: 33.3333%;
	--outmark-gutter: 15px;
	--outmark-accent: #293a31;
	--outmark-title-color: #293a31;
	margin: 0 0 40px;
}

/* ===================== FILTER BAR ===================== */
.outmark-pw-filters {
	width: 100%;
	margin-bottom: 32px;
	padding: 18px 0;
}

/* Inner bar holds a TOGGLES row plus the active options panel, stacked. */
.outmark-pw-filters-inner {
	display: block;
}

.outmark-pw-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 40px;
	align-items: center;
}

.outmark-pw-filters.align-center .outmark-pw-toggles { justify-content: center; }
.outmark-pw-filters.align-left   .outmark-pw-toggles { justify-content: flex-start; }
.outmark-pw-filters.align-right  .outmark-pw-toggles { justify-content: flex-end; }

.outmark-pw-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 4px 10px;
	cursor: pointer;
	font: inherit;
	color: inherit;
	letter-spacing: 0.08em;
	font-size: 0.82rem;
	overflow: hidden;
	z-index: 0;
	transition: color 0.25s cubic-bezier(0.5, 0, 0, 1);
}

/* Font case (toggles and options share these classes). */
.case-upper { text-transform: uppercase; }
.case-normal { text-transform: none; }
.outmark-pw-toggle.case-upper { text-transform: uppercase; }
.outmark-pw-toggle.case-normal { text-transform: none; }
.outmark-pw-options.case-upper .outmark-pw-option { text-transform: uppercase; }
.outmark-pw-options.case-normal .outmark-pw-option { text-transform: none; }

/* Toggle hover/active fill layer. */
.outmark-pw-toggle::before {
	content: "";
	position: absolute;
	background: var(--outmark-toggle-hover-bg, transparent);
	z-index: -1;
	transition: transform 0.25s cubic-bezier(0.5, 0, 0, 1),
	            width 0.25s cubic-bezier(0.5, 0, 0, 1),
	            height 0.25s cubic-bezier(0.5, 0, 0, 1),
	            opacity 0.25s ease;
}

.outmark-pw-toggle:hover,
.outmark-pw-toggle.is-open {
	color: var(--outmark-toggle-hover-color, inherit);
}

/* Toggle effects keyed off the bar's data-toggle-effect. */
.outmark-pw-filters[data-toggle-effect="swipe-right"] .outmark-pw-toggle::before { top:0; left:0; bottom:0; width:0; }
.outmark-pw-filters[data-toggle-effect="swipe-right"] .outmark-pw-toggle:hover::before,
.outmark-pw-filters[data-toggle-effect="swipe-right"] .outmark-pw-toggle.is-open::before { width:100%; }

.outmark-pw-filters[data-toggle-effect="swipe-left"] .outmark-pw-toggle::before { top:0; right:0; bottom:0; width:0; }
.outmark-pw-filters[data-toggle-effect="swipe-left"] .outmark-pw-toggle:hover::before,
.outmark-pw-filters[data-toggle-effect="swipe-left"] .outmark-pw-toggle.is-open::before { width:100%; }

.outmark-pw-filters[data-toggle-effect="swipe-top"] .outmark-pw-toggle::before { top:0; left:0; right:0; height:0; }
.outmark-pw-filters[data-toggle-effect="swipe-top"] .outmark-pw-toggle:hover::before,
.outmark-pw-filters[data-toggle-effect="swipe-top"] .outmark-pw-toggle.is-open::before { height:100%; }

.outmark-pw-filters[data-toggle-effect="swipe-bottom"] .outmark-pw-toggle::before { bottom:0; left:0; right:0; height:0; }
.outmark-pw-filters[data-toggle-effect="swipe-bottom"] .outmark-pw-toggle:hover::before,
.outmark-pw-filters[data-toggle-effect="swipe-bottom"] .outmark-pw-toggle.is-open::before { height:100%; }

.outmark-pw-filters[data-toggle-effect="fade-in"] .outmark-pw-toggle::before { inset:0; width:100%; height:100%; opacity:0; }
.outmark-pw-filters[data-toggle-effect="fade-in"] .outmark-pw-toggle:hover::before,
.outmark-pw-filters[data-toggle-effect="fade-in"] .outmark-pw-toggle.is-open::before { opacity:1; }

.outmark-pw-filters[data-toggle-effect="underline-grow"] .outmark-pw-toggle::before { left:0; bottom:0; height:2px; width:0; }
.outmark-pw-filters[data-toggle-effect="underline-grow"] .outmark-pw-toggle:hover::before,
.outmark-pw-filters[data-toggle-effect="underline-grow"] .outmark-pw-toggle.is-open::before { width:100%; }

.outmark-pw-toggle-sign {
	display: inline-block;
	width: 1em;
	text-align: center;
	font-weight: 400;
}

/* Options panels live inside the bar, in normal flow, so the bar grows
   to contain them. The group animates open via grid-template-rows
   (0fr -> 1fr), which gives a smooth height slide. */
.outmark-pw-group {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.outmark-pw-group.is-open {
	grid-template-rows: 1fr;
}

/* The row track must be allowed to collapse; overflow hidden clips the
   options while the track is at 0fr. */
.outmark-pw-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	min-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.28s ease 0.04s, transform 0.28s ease 0.04s;
}

/* Add the top spacing only when open, so a closed panel takes zero space. */
.outmark-pw-group.is-open .outmark-pw-options {
	opacity: 1;
	transform: translateY(0);
	margin-top: 16px;
}

.outmark-pw-filters.align-center .outmark-pw-options { justify-content: center; }
.outmark-pw-filters.align-left   .outmark-pw-options { justify-content: flex-start; }
.outmark-pw-filters.align-right  .outmark-pw-options { justify-content: flex-end; }

/* ===== Option base ===== */
.outmark-pw-option {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: inherit;
	padding: 8px 16px;
	font-size: 0.95rem;
	overflow: hidden;
	z-index: 0;
	transition: color 0.25s cubic-bezier(0.5, 0, 0, 1);
}

/* The swipe/fade fill layer (behind the text). */
.outmark-pw-option::before {
	content: "";
	position: absolute;
	background: var(--outmark-hover-bg, rgba(0, 0, 0, 0.06));
	z-index: -1;
	transition: transform 0.25s cubic-bezier(0.5, 0, 0, 1),
	            width 0.25s cubic-bezier(0.5, 0, 0, 1),
	            height 0.25s cubic-bezier(0.5, 0, 0, 1),
	            opacity 0.25s ease;
}

/* Hover/active recolor the text to the chosen font color. */
.outmark-pw-option:hover,
.outmark-pw-option.is-active {
	color: var(--outmark-hover-color, inherit);
}

/* ---------- Effect: swipe-right (default) ---------- */
.outmark-pw-options[data-effect="swipe-right"] .outmark-pw-option::before {
	top: 0; left: 0; bottom: 0;
	width: 0;
}
.outmark-pw-options[data-effect="swipe-right"] .outmark-pw-option:hover::before,
.outmark-pw-options[data-effect="swipe-right"] .outmark-pw-option.is-active::before {
	width: 100%;
}

/* ---------- Effect: swipe-left ---------- */
.outmark-pw-options[data-effect="swipe-left"] .outmark-pw-option::before {
	top: 0; right: 0; bottom: 0;
	width: 0;
}
.outmark-pw-options[data-effect="swipe-left"] .outmark-pw-option:hover::before,
.outmark-pw-options[data-effect="swipe-left"] .outmark-pw-option.is-active::before {
	width: 100%;
}

/* ---------- Effect: swipe-top (fills downward) ---------- */
.outmark-pw-options[data-effect="swipe-top"] .outmark-pw-option::before {
	top: 0; left: 0; right: 0;
	height: 0;
}
.outmark-pw-options[data-effect="swipe-top"] .outmark-pw-option:hover::before,
.outmark-pw-options[data-effect="swipe-top"] .outmark-pw-option.is-active::before {
	height: 100%;
}

/* ---------- Effect: swipe-bottom (fills upward) ---------- */
.outmark-pw-options[data-effect="swipe-bottom"] .outmark-pw-option::before {
	bottom: 0; left: 0; right: 0;
	height: 0;
}
.outmark-pw-options[data-effect="swipe-bottom"] .outmark-pw-option:hover::before,
.outmark-pw-options[data-effect="swipe-bottom"] .outmark-pw-option.is-active::before {
	height: 100%;
}

/* ---------- Effect: fade-in ---------- */
.outmark-pw-options[data-effect="fade-in"] .outmark-pw-option::before {
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;
	opacity: 0;
}
.outmark-pw-options[data-effect="fade-in"] .outmark-pw-option:hover::before,
.outmark-pw-options[data-effect="fade-in"] .outmark-pw-option.is-active::before {
	opacity: 1;
}

/* ---------- Effect: underline-grow ---------- */
.outmark-pw-options[data-effect="underline-grow"] .outmark-pw-option::before {
	left: 0; bottom: 0;
	height: 2px;
	width: 0;
}
.outmark-pw-options[data-effect="underline-grow"] .outmark-pw-option:hover::before,
.outmark-pw-options[data-effect="underline-grow"] .outmark-pw-option.is-active::before {
	width: 100%;
}

/* ===================== GRID ===================== */
.outmark-pw-grid {
	margin: 0 calc(var(--outmark-gutter) * -1);
	box-sizing: border-box;
}
.outmark-pw-grid * { box-sizing: border-box; }
.outmark-pw-grid::after { content: ''; display: block; clear: both; }

/* Sizer defines the exact column width for Isotope (avoids rounding to
   fewer columns than requested). It must not occupy vertical space. */
.outmark-pw-sizer {
	width: var(--outmark-col-width);
	box-sizing: border-box;
	height: 0;
	margin: 0;
	padding: 0;
}

.outmark-pw-item {
	width: var(--outmark-col-width);
	box-sizing: border-box;
	float: left;
	padding: 0 var(--outmark-gutter);
	margin-bottom: 40px;
}

/* Paged-hidden items removed from flow until "Load more" */
.outmark-pw-item.is-paged-hidden { display: none; }

.outmark-pw-item-inner { position: relative; }

/* ---- Thumb + the shadow-hover effect (matched to Salient ps=9) ---- */
.outmark-pw-thumb {
	overflow: visible;
	line-height: 0;
}

.outmark-pw-img,
.outmark-pw-thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.35, 1),
	            box-shadow 0.3s cubic-bezier(0.21, 0.6, 0.35, 1);
	will-change: transform;
}

.ps-meta-below .outmark-pw-item-inner:hover .outmark-pw-img {
	transform: translateY(-5px);
	box-shadow: 0 30px 65px rgba(0, 0, 0, 0.15);
}

/* ---- Meta below thumb ---- */
.outmark-pw-meta {
	padding: 18px 0 0;
	text-align: left;
}

.outmark-pw-title {
	margin: 0;
	font-family: "lores-9-wide", "Courier New", monospace;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	text-transform: uppercase;
	color: var(--outmark-title-color);
}

.outmark-pw-title a {
	color: inherit;
	text-decoration: none;
}

/* ===================== LOAD MORE ===================== */
.outmark-pw-loadmore-wrap {
	text-align: center;
	margin-top: 20px;
}

.outmark-pw-loadmore {
	font: inherit;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 12px 28px;
	border: 1px solid currentColor;
	background: transparent;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.outmark-pw-loadmore:hover { opacity: 0.7; }
.outmark-pw-loadmore[hidden] { display: none; }

.outmark-pw-empty { padding: 24px 0; opacity: 0.7; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 999px) {
	.outmark-pw-wrap[data-columns="3"] .outmark-pw-item,
	.outmark-pw-wrap[data-columns="4"] .outmark-pw-item,
	.outmark-pw-wrap[data-columns="5"] .outmark-pw-item,
	.outmark-pw-wrap[data-columns="6"] .outmark-pw-item {
		width: 50%;
	}
}

@media (max-width: 600px) {
	.outmark-pw-item { width: 100% !important; }
	.outmark-pw-filters-inner { gap: 16px; }
}