/* =============================================================================
   Get Inspired (Projects) — responsive fixes for the flexible homepage section
   Scoped to .flexible-projects so the shared .card-2 / content-projecthome
   markup is untouched everywhere else. Overrides UIkit width utilities (which
   use !important), so these rules use higher specificity + !important.

   Layout by width:
     < 640px            single column, cards fill the container width  (Item 8)
     640px – 900px      two-up horizontal scroll carousel              (Item 9)
     ≥ 900px            existing UIkit 3-up desktop grid (no overrides)
   ============================================================================= */

/* ── Item 8: below 640px, one full-width card per row ─────────────────────── */
@media (max-width: 639px) {

	.flexible-projects .card-2-outer {
		display: block;
		margin-left: 0 !important; /* clear uk-grid negative margin */
	}

	.flexible-projects .card-2-outer > .uk-width-1-1 {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important; /* clear uk-grid gutter */
		margin-bottom: 20px;
	}

	.flexible-projects .card-2-outer > .uk-width-1-1:last-child {
		margin-bottom: 0;
	}
}

/* ── Item 9: 640–900px, two-up horizontal scroll carousel ─────────────────── */
@media (min-width: 640px) and (max-width: 900px) {

	.flexible-projects .card-2-outer {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex !important;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		margin-left: 0 !important; /* clear uk-grid negative margin */
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 8px;
	}

	.flexible-projects .card-2-outer::-webkit-scrollbar {
		display: none;
	}

	.flexible-projects .card-2-outer > .uk-width-1-1 {
		width: auto !important;
		max-width: none !important;
		padding-left: 0 !important; /* clear uk-grid gutter */
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 calc(50% - 8px);
		-ms-flex: 0 0 calc(50% - 8px);
		flex: 0 0 calc(50% - 8px);
		scroll-snap-align: start;
	}
}