/*
 * Tile strip - a scrolling row of screenshots inside article body copy.
 *
 * Sizes are on the article's scale rather than the marketing pages': the label matches
 * .ubind-panel__cap in the article sidebar, and the tile caption matches .ubind-related__meta, so a
 * strip reads as part of the same article furniture as the panels beside it.
 *
 * Everything here is scoped to .ubind-tile-strip. The article body's own rules are written
 * `.elementor-widget-theme-post-content <tag>` and several carry !important, so a bare `ul`, `li` or
 * `img` in this file would either lose to them or reach outside the component - which is why the
 * list reset below is written against the component's classes rather than against the elements.
 */

.ubind-tile-strip {
	/* Less at the bottom than the top: the list reserves 12px inside itself for the scrollbar, so
	   the gap a reader sees under the captions is the same 34px as above the label. */
	margin: 34px 0 22px;
	padding: 0;
}

/* ---- the label ------------------------------------------------------------------------------
   Same treatment as the sidebar panels' caption: 12px uppercase Montserrat with the emerald dot. */

.ubind-tile-strip__cap {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	font-family: var(--ubind-font-body, 'Montserrat', sans-serif);
	font-size: 12px;
	font-weight: 700;
	/* The user-agent stylesheet has no opinion on figcaption, but the theme italicises it along with
	   the rest of its figure treatment. An uppercase, letterspaced label set in oblique Montserrat
	   reads as a caption from a different design. */
	font-style: normal;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-400, #687974);
}

.ubind-tile-strip__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--emerald-500, #1fa67a);
	flex: none;
}

/* ---- the scroller ---------------------------------------------------------------------------
   `overflow-x: auto` rather than `scroll`, so a container wide enough to hold every tile shows no
   scrollbar and no strip of dead space. `proximity` snapping rather than `mandatory`: mandatory
   fights a reader who is scrolling a long way in one gesture, and hijacks a trackpad's diagonal
   scroll on the way down the page.

   No side padding, so the first tile's left edge lines up with the body copy above and below it.
   The bottom padding is the scrollbar's lane. Windows and Linux reserve room for a classic
   scrollbar by shrinking the content box, but macOS, iOS and Android draw an overlay bar on top of
   the content - and measured at 375px, that put a grey rule straight through the last line of the
   tallest caption. */

.ubind-tile-strip__list {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--ink-200, #c8d2cd) transparent;
}

.ubind-tile-strip__list:focus-visible {
	outline: 2px solid var(--emerald-500, #1fa67a);
	outline-offset: 3px;
	border-radius: 12px;
}

/* ---- a tile ---------------------------------------------------------------------------------
   216px is the measurement that matters on desktop: about three tiles fit the article's ~710px text
   column and the fourth shows past the right edge, which is what tells a reader the row moves.

   The 58% governs only between roughly 260px and 490px of container, and it is there to keep that
   same signal on a phone. A flat 164px tile put exactly 1.9 tiles in a 325px column - the second
   one clipped by a few pixels, which reads as a layout fault rather than as an invitation. 58%
   gives one full tile and a clear half of the next. */

.ubind-tile-strip__tile {
	flex: 0 0 clamp(150px, 58%, 216px);
	scroll-snap-align: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ubind-tile-strip__media {
	display: block;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--ink-100, #e7ece9);
	border-radius: 10px;
	overflow: hidden;
	background: var(--ink-50, #f2f5f3);
}

/* Imagify's next-gen display wraps optimised rasters as <picture><source><img></picture>. The
 * wrapper is taken out of layout so the image remains the media box's own child and `height: 100%`
 * resolves against the 1:1 box rather than against a wrapper with no height of its own - the same
 * arrangement the sidebar's related thumbnails use, and for the same reason. */
.ubind-tile-strip__media > picture {
	display: contents;
}

.ubind-tile-strip__media > img,
.ubind-tile-strip__media > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	/* `cover`, not the `fill` the 2017 markup used: four of the five Zest screenshots are square and
	   were unaffected, but the mobile homepage is 663x785 and was being squashed to a square.
	   Centred rather than top-anchored, so that shot keeps both the photograph at its top and the
	   search field at its bottom. */
	object-fit: cover;
	object-position: center;
	margin: 0;
}

.ubind-tile-strip__label {
	display: block;
	margin-top: 9px;
	font-family: var(--ubind-font-body, 'Montserrat', sans-serif);
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--ink-400, #687974);
}

@media (max-width: 767px) {
	.ubind-tile-strip {
		margin: 26px 0;
	}
}