/* ============================================================================
 * Pictogram strip — the icon row below the CWS Suite product gallery.
 *
 * Markup comes from gallery-acf-images.php on cws_suite_gallery_after_stage,
 * which places the <ul> as a direct child of .cws-gallery. That wrapper is a
 * flex column with its own gap, so the space ABOVE the strip is already the
 * gallery's; nothing here adds a top margin and fights it.
 *
 * The plugin styles .cws-gallery__extra (its own theme-content slot) to width
 * 100% / min-width 0 and explicitly declines to style anything inside it. The
 * same two properties are set here for the same reason: a flex item's default
 * min-width is auto, so without min-width: 0 a wide row of icons can push the
 * gallery column wider than its grid track instead of wrapping.
 *
 * Class names are ours on purpose. The old theme used .piktogrami > .image-wrap,
 * and .image-wrap is a site-wide utility shared with the linked-product card,
 * the matica promo card and the loyalty module — restyling it here would reach
 * all three.
 *
 * Specificity, not !important (see menu.css). The Elementor kit's img rules and
 * the theme's list resets are both single-class or element selectors; the
 * two-class descendant selectors below clear them.
 * ========================================================================== */

.cws-gallery .jm-piktogrami {
	/* The one number worth tuning. Everything below is derived from it. */
	--jm-piktogram-size: 56px;

	display: flex;
	flex-direction: column;

	/* Both of these now mean the other axis than they read as. align-items is the
	   HORIZONTAL alignment of the icons within the list, and flex-wrap spills into
	   a second COLUMN beside the first rather than onto a second row — which is
	   what keeps a long pictogram set inside the slide instead of running off the
	   bottom of it. */
	flex-wrap: wrap;
	align-items: center;

	gap: 12px;

	width: 100%;
	min-width: 0;

	/* Themes and the Elementor kit both put margin and padding on ul. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.cws-gallery .jm-piktogrami__item {
	display: flex;
	align-items: center;
	justify-content: center;

	/* Never stretch or shrink an icon: a pictogram distorted to fill a row is a
	   different symbol. */
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cws-gallery .jm-piktogrami__item img {
	display: block;

	/* Height-driven, so icons of different aspect ratios still line up on one
	   baseline. object-fit is the guard for the rare hard-cropped upload. */
	height: var(--jm-piktogram-size);
	width: auto;
	max-width: 100%;
	object-fit: contain;

	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

/* ============================================================================
 * per_slide — overlaid on the photo, top left.
 *
 * Two surfaces, one rule. The inline stage puts the markup in
 * <figure class="cws-gallery__slide">; the lightbox puts it in
 * .cws-gallery__lightbox-extra. Both are position: absolute / inset: 0, so both
 * are positioning parents and the same offsets work in each. They share a
 * selector list rather than getting a rule apiece because an overlay that looks
 * one way on the stage and another on zoom reads as a bug.
 *
 * What differs is the box being pinned to. On the stage the figure IS the hero,
 * so top-left is the photo's top-left. In the lightbox the wrapper spans the
 * whole stage while the image is centred within it at its own size, so top-left
 * is the stage's corner. That is the plugin's design: the overlay sits outside
 * the zoom transform on purpose, so the icons keep their size and position while
 * the photo scales.
 *
 * .cws-gallery__lightbox-extras already carries pointer-events: none, and opts
 * its own <a>/<button> children back in. Ours has neither, so it stays inert
 * there either way.
 * ========================================================================== */

.cws-gallery .cws-gallery__slide .jm-piktogrami--per-slide,
.cws-gallery .cws-gallery__lightbox-extra .jm-piktogrami--per-slide {
	--jm-piktogram-size: 44px;

	position: absolute;
	top: 0;
	left: 0;

	/* Above .cws-gallery__hero-image, below the hero's own overlays (the mobile
	   counter sits at z-index 4 — bottom left, so it no longer collides). */
	z-index: 3;

	padding: 14px 16px;
	gap: 10px;

	/* The hero opens the lightbox on click. An overlay that swallowed that click
	   would kill zoom on the part of the photo it covers. The icons are not
	   interactive, so they have nothing to lose by being transparent to the
	   pointer. */
	pointer-events: none;

	/* Beats width: 100% on the base rule (three classes to two), so the overlay
	   is only as wide as the icons instead of a full-width invisible band. Note
	   this also stops flex-wrap from ever firing: max-content resolves to the
	   whole row on one line, and the hero's overflow: hidden clips the tail. Swap
	   for max-width: 100% if a product ever carries enough pictograms to run off
	   the edge. */
	width: max-content;
}

/* ------------------------------------------------------------
   Small screens.

   A viewport breakpoint, not a container query: what actually matters is the
   width of the gallery COLUMN, which on a desktop product layout is roughly
   half the viewport. If the icons ever look cramped in a narrow desktop column
   rather than on a phone, move this to
   `.cws-gallery { container-type: inline-size }` + @container instead of
   chasing it with more viewport breakpoints.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
	.cws-gallery .jm-piktogrami {
		--jm-piktogram-size: 44px;
		gap: 10px;
	}

	/* Size only. .cws-gallery__mobile-counter switches on at this breakpoint, but
	   it sits bottom left and the overlay is anchored top left, so there is
	   nothing to move out of the way. */
	.cws-gallery .cws-gallery__slide .jm-piktogrami--per-slide,
	.cws-gallery .cws-gallery__lightbox-extra .jm-piktogrami--per-slide {
		--jm-piktogram-size: 38px;
		padding: 10px 12px;
	}
}