/**
 * CWAD Gallery.
 *
 * Layout is CSS multi-column. A column box always grows to fit its content, so the section
 * below a gallery can never be overlapped. An earlier version measured every card in JS and
 * wrote a CSS grid row span; the container was then only as tall as that arithmetic claimed,
 * and any moment the measurement was out of step -- a lazy image arriving, a width change that
 * fired no resize event, a stale span after a breakpoint -- photos spilled past the container
 * and under the footer. Nothing here is measured, so there is nothing to fall out of step.
 *
 * The plugin does not set its own width. It fills whatever container it is dropped into, so the
 * same shortcode works in a narrow sidebar and a full-width section.
 */

.cwx {
	--cwx-red: #E31E24;
	--cwx-ink: #222;
	--cwx-body: #555;
	--cwx-muted: #777;
	--cwx-line: #e2e2e2;
	--cwx-panel: #f7f7f7;
	--cwx-gap: 20px;
}

.cwx * { box-sizing: border-box; }

/* Filters ---------------------------------------------------------------- */

.cwx-filters {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 26px;
	background: var(--cwx-panel);
	border-radius: 12px;
	margin-bottom: 24px;
}
.cwx-filters:empty { display: none; }

.cwx-frow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.cwx-flabel {
	flex: 0 0 104px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cwx-muted);
}

.cwx-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.cwx-chip {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--cwx-body);
	background: #fff;
	border: 1px solid var(--cwx-line);
	border-radius: 30px;
	padding: 7px 16px;
	cursor: pointer;
	transition: all .15s ease;
}
.cwx-chip:hover { border-color: var(--cwx-red); color: var(--cwx-red); }
.cwx-chip[aria-pressed="true"] { background: var(--cwx-red); border-color: var(--cwx-red); color: #fff; }
.cwx-chip:focus-visible { outline: 2px solid var(--cwx-ink); outline-offset: 2px; }

.cwx-bar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.cwx-bar:empty { display: none; }

.cwx-count { font-size: 14px; color: var(--cwx-muted); margin: 0; }
.cwx-count b { color: var(--cwx-ink); font-weight: 800; }

.cwx-reset {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--cwx-red);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}
.cwx-reset[hidden] { display: none; }

/* Grid ------------------------------------------------------------------- */

.cwx-grid { columns: 3; column-gap: var(--cwx-gap); }
.cwx-grid[data-cols="2"] { columns: 2; }
.cwx-grid[data-cols="4"] { columns: 4; }

.cwx-card {
	break-inside: avoid;
	margin: 0 0 var(--cwx-gap);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .05);
	background: #fff;
	position: relative;
}
.cwx-card[hidden] { display: none; }
.cwx-card a { display: block; line-height: 0; }

/* width/height on every img means the browser reserves the right box from the intrinsic ratio
   before the file arrives, so nothing reflows as photos load. */
.cwx-card img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.cwx-card:hover img { transform: scale(1.04); }

.cwx-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 14px 12px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .75));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
.cwx-card:hover figcaption,
.cwx-card:focus-within figcaption { opacity: 1; }
.cwx-card figcaption span { display: block; font-weight: 400; font-size: 12px; opacity: .85; margin-top: 2px; }

.cwx-empty {
	padding: 44px 20px;
	text-align: center;
	color: var(--cwx-muted);
	border: 1px dashed var(--cwx-line);
	border-radius: 12px;
}
.cwx-empty[hidden] { display: none; }

/* Elementor overrides ----------------------------------------------------
   Elementor's frontend stylesheet carries
     .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }
   at specificity 0,4,1, which beats .cwx-card{margin:...} at 0,1,0. That reset is why the cards
   once sat flush against each other vertically while the column gutters looked correct. Five
   classes here (0,5,0) outrank four, so the margin survives without !important.

   display is restated for the same reason. Raising it above Elementor's rule also raises it
   above .cwx-card[hidden]{display:none} at 0,2,0 -- which is how the filters hide a card -- so
   the [hidden] rule below has to be restated at a specificity this cannot outrank. Without it
   every filter shows everything. Do not "simplify" either of these away. */
.elementor .elementor-widget .cwx .cwx-grid .cwx-card {
	display: block;
	margin: 0 0 var(--cwx-gap);
}
.elementor .elementor-widget .cwx .cwx-grid .cwx-card[hidden] {
	display: none;
}

/* Breakpoints ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.cwx-grid,
	.cwx-grid[data-cols="4"] { columns: 2; }
}

@media (max-width: 820px) {
	.cwx-grid,
	.cwx-grid[data-cols="2"],
	.cwx-grid[data-cols="4"] { columns: 1; }
	.cwx-flabel { flex: 0 0 100%; }
}