/**
 * Copyright © WebbyTroops Technologies. All rights reserved.
 *
 * Grid widget: the filter bar, the grid layout and the card.
 *
 * Layout rules are scoped under .wt-cs-grid__cases--grid rather than applied to
 * .wt-cs-card and then overridden. Keep new layout rules inside their modifier.
 */

.wt-cs-grid {
	color: var(--wt-cs-color-text);
}

/* ---------------------------------------------------------------- filter bar */

.wt-cs-grid__filter {
	margin-bottom: var(--wt-cs-space-lg);

	/*
	 * Capped so the pill tracks scroll instead of running off the page. Elementor's
	 * wrappers around this widget (.e-con-inner > .elementor-widget-container) are
	 * plain blocks that stretch to their widest child, so without this cap the track
	 * sizes itself from the full pill list and overflow-x has nothing to scroll
	 * inside.
	 */
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

.wt-cs-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-cs-space-md);
	align-items: flex-end;
}

.wt-cs-filter--pills {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wt-cs-space-sm);

	/* Part of the capped chain the pill scrollers measure against; see above. */
	max-width: 100%;
	min-width: 0;
}

.wt-cs-filter__group {
	display: flex;
	flex-direction: column;
	gap: var(--wt-cs-space-xs);
	min-width: 0;
}

/*
 * Stacked by default so the pills own the full container width on a phone, where a
 * 6.5rem label column would leave the scrolling track almost no room. The
 * side-by-side layout returns from 768px up.
 */
.wt-cs-filter--pills .wt-cs-filter__group {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wt-cs-space-xs);
}

.wt-cs-filter__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wt-cs-color-heading);
	text-transform: uppercase;
}

/*
 * Label beside the pills from tablet up. min-width:0 on the group is load-bearing: a
 * flex item defaults to min-width:auto, which refuses to shrink below its content, so
 * the pill row would size itself from the full list (33 industries) and push straight
 * out of the container instead of scrolling. Removing it re-breaks the layout.
 */
@media (min-width: 768px) {

	.wt-cs-filter--pills .wt-cs-filter__group {
		flex-direction: row;
		align-items: center;
		gap: var(--wt-cs-space-md);
		min-width: 0;
		max-width: 100%;
	}

	.wt-cs-filter--pills .wt-cs-filter__label {
		flex: 0 0 auto;
		min-width: 6.5rem;
	}
}

.wt-cs-filter__select {
	max-width: 100%;
	min-width: 12rem;
	padding: 0.55rem 2rem 0.55rem 0.75rem;
	font: inherit;
	color: var(--wt-cs-color-heading);
	background-color: var(--wt-cs-color-base);
	border: 1px solid var(--wt-cs-color-border);
	border-radius: var(--wt-cs-radius-sm);
	transition: border-color var(--wt-cs-transition);
}

.wt-cs-filter__select:hover {
	border-color: var(--wt-cs-color-accent);
}

/* Holds the All pill, the scroller and the two arrow buttons on one row. */
.wt-cs-filter__track {
	display: flex;
	gap: var(--wt-cs-space-xs);
	align-items: center;
	min-width: 0;
	max-width: 100%;
}

.wt-cs-filter__nav {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--wt-cs-color-heading);
	cursor: pointer;
	background-color: var(--wt-cs-color-base);
	border: 1px solid var(--wt-cs-color-border);
	border-radius: 999px;
	transition: border-color var(--wt-cs-transition), color var(--wt-cs-transition);
}

.wt-cs-filter__nav:hover {
	color: var(--wt-cs-color-accent);
	border-color: var(--wt-cs-color-accent);
}

.wt-cs-filter__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

/*
 * One line that scrolls horizontally: a facet with many values must not push the grid
 * down. The scrollbar is hidden but the track still scrolls by wheel, trackpad, touch
 * drag and keyboard. Needs the capped ancestor chain above to scroll inside.
 */
.wt-cs-filter__pills {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wt-cs-space-xs);
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;

	/* Firefox honours scrollbar-width; WebKit needs the pseudo-element below. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wt-cs-filter__pills::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/*
 * The soft fade at the scrolling edge. With the scrollbar hidden this is the only cue
 * that the row continues past the right edge, so it earns its keep.
 *
 * animation-timeline drives it off scroll position, so the fade lifts as the track
 * reaches its end rather than hovering over a row that has nothing more to show. The
 * @supports guard means browsers without scroll-driven animations get no fade at all
 * instead of one permanently stuck on.
 */
@supports (animation-timeline: scroll(x)) {

	.wt-cs-filter__pills {
		animation: wt-cs-fade-scroll-end linear both;
		animation-timeline: scroll(self x);
	}

	@keyframes wt-cs-fade-scroll-end {

		/* Scrolled to the start, and at every point before the end: fade the right. */
		0%,
		85% {
			mask-image: linear-gradient(to right, #000 80%, transparent 100%);
		}

		/* At the end there is nothing beyond the edge, so the mask lifts. */
		100% {
			mask-image: linear-gradient(to right, #000 100%, #000 100%);
		}
	}
}

/* Outside the scroller, so the facet reset never slides out of reach. */
.wt-cs-filter__all {
	flex: 0 0 auto;
	display: flex;
}

.wt-cs-filter__pill {
	/*
	 * Keeps each pill at its natural width: the track scrolls rather than squeezing
	 * the pills to fit.
	 */
	flex: 0 0 auto;
	padding: 0.4rem 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--wt-cs-color-text);
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--wt-cs-color-base);
	border: 1px solid var(--wt-cs-color-border);
	border-radius: 999px;
	transition: color var(--wt-cs-transition), background-color var(--wt-cs-transition), border-color var(--wt-cs-transition);
}

.wt-cs-filter__pill:hover {
	color: var(--wt-cs-color-heading);
	border-color: var(--wt-cs-color-accent);
}

.wt-cs-filter__pill--active {
	color: var(--wt-cs-color-base);
	background-color: var(--wt-cs-color-heading);
	border-color: var(--wt-cs-color-heading);
}

.wt-cs-filter__pill--active:hover {
	color: var(--wt-cs-color-base);
}

.wt-cs-filter__actions {
	display: flex;
	gap: var(--wt-cs-space-sm);
	align-items: center;
}

.wt-cs-filter__reset {
	font-size: 0.9375rem;
	color: var(--wt-cs-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
}

.wt-cs-filter__reset:hover {
	color: var(--wt-cs-color-heading);
}

/* ------------------------------------------------------------------- results */

.wt-cs-grid__results {
	transition: opacity var(--wt-cs-transition);
}

.wt-cs-grid--loading .wt-cs-grid__results {
	opacity: 0.45;
	pointer-events: none;
}

.wt-cs-grid__empty {
	padding: var(--wt-cs-space-lg);
	color: var(--wt-cs-color-text);
	text-align: center;
	background-color: var(--wt-cs-color-surface);
	border-radius: var(--wt-cs-radius);
}

/*
 * minmax(0, 1fr) not 1fr: 1fr floors at max-content, which a long unbroken title
 * then blows the track out with.
 */
.wt-cs-grid__cases {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wt-cs-space-md);
}

/* Grid: one column on phones, two from md, the chosen count from lg. */
@media (min-width: 768px) {

	.wt-cs-grid__cases--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.wt-cs-grid__cases--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wt-cs-grid__cases--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------- card */

.wt-cs-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wt-cs-space-sm);
	align-content: start;
	overflow: hidden;
	background-color: var(--wt-cs-color-base);
	border: 1px solid var(--wt-cs-color-border);
	border-radius: var(--wt-cs-radius);
	transition: border-color var(--wt-cs-transition), transform var(--wt-cs-transition);
}

.wt-cs-card:hover,
.wt-cs-card:focus-within {
	box-shadow: 1px 1px 8px #666;
	transform: translateY(-1px);
}

.wt-cs-card__media {
	display: block;
	overflow: hidden;
	background-color: var(--wt-cs-color-surface);
}

.wt-cs-card__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wt-cs-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wt-cs-space-sm);
	padding: var(--wt-cs-space-md);
}

.wt-cs-card__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--wt-cs-color-heading);
}

.wt-cs-card__title a {
	color: inherit;
	text-decoration: none;
}

.wt-cs-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wt-cs-card__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wt-cs-color-text);
}

.wt-cs-card__cta {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
	margin-top: auto;
	font-weight: 600;
	color: var(--wt-cs-color-accent);
	text-decoration: none;
}

.wt-cs-card__cta:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wt-cs-card__cta-arrow {
	transition: transform var(--wt-cs-transition);
}

.wt-cs-card__cta:hover .wt-cs-card__cta-arrow {
	transform: translateX(3px);
}