/*
 * [uks_solution_cards] - the Solutions category cards.
 *
 * Its own file, loaded only on pages that use the shortcode. Markup comes from
 * inc/shortcodes.php. No script: it is a plain grid of linked cards.
 *
 * Each card is a picture with two white tabs cut into it: the name at the top
 * left and an arrow at the bottom right. A tab is a white block sitting on the
 * card's white padding; the two small ::before / ::after squares outside it
 * carry a radial gradient that paints only the corner nearest the tab white,
 * so the picture appears to curve under the tab.
 */

.uks-scards {
	--uks-sc-navy: #142E71;
	--uks-sc-card-bg: #FFFFFF;
	--uks-sc-pill-bg: #E8F0FF;
	--uks-sc-placeholder: #E3E7EF;
	--uks-sc-radius: 12px;
	--uks-sc-image-radius: 8px;
	--uks-sc-pad: 12px;
	--uks-sc-notch: 22px;
	--uks-sc-aspect: 1 / 1;
	--uks-scards-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--uks-scards-columns), minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
}

.solution-inner-wrapper .uks-scards{
	padding: 0px!important;
}

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

.uks-scards__card {
	position: relative;
    display: block;
    padding: 25px 22px 22px 22px;
    border-radius: var(--uks-sc-radius);
    background-color: var(--uks-sc-card-bg);
    box-shadow: 0px 2px 2px 0px #B4B4B499;
    color: var(--uks-sc-navy);
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* --------------------------------------------------------------- image -- */

.uks-scards__image {
	display: block;
	aspect-ratio: var(--uks-sc-aspect);
	overflow: hidden;
	border-radius: 24px;
	background-color: var(--uks-sc-placeholder);
}

.uks-scards__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	border-radius: 24px;
}


/* ---------------------------------------------------------------- tabs -- */

.uks-scards__arrow {
	position: absolute;
	z-index: 1;
	display: block;
	background-color: var(--uks-sc-card-bg);
}


.uks-scards__arrow::before,
.uks-scards__arrow::after {
	content: "";
	position: absolute;
	width: var(--uks-sc-notch);
	height: var(--uks-sc-notch);
}

/* Title tab - top left, open to the top and left edges of the card. */

.uks-scards__title {
	z-index: 1;
    position: absolute;
    display: block;
    background-color: #EEF6FF;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 24px 24px;
    top: 14px;
    left: 52px;
    padding: 20px 32px;
}

/* Inverted corner to the right of the tab, along the top edge. */

/* Inverted corner below the tab, along the left edge. */
.uks-scards__title::after {
	content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 0;
    height: 0;
    border-top: 12px solid #5a6b7c;
    border-right: 12px solid transparent;
    transform: rotate(270deg);
}

/* The pill the name sits in. */
.uks-scards__title-text {
	display: block;
	color: var(--uks-sc-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Arrow tab - bottom right, open to the bottom and right edges of the card. */

.uks-scards__arrow {
	right: 22px;
    bottom: 22px;
    padding: 20px 0 0 20px;
    border-top-left-radius: 21px;
    width: 40px;
    height: 40px;
}

/* Inverted corner above the tab, along the right edge. */
.uks-scards__arrow::before {
	top: calc(var(--uks-sc-notch) * -1);
	right: 0px;
	background: radial-gradient(
		circle at 0 0,
		transparent var(--uks-sc-notch),
		var(--uks-sc-card-bg) calc(var(--uks-sc-notch) + 0.5px)
	);
}

/* Inverted corner to the left of the tab, along the bottom edge. */
.uks-scards__arrow::after {
	bottom: 0px;
	left: calc(var(--uks-sc-notch) * -1);
	background: radial-gradient(
		circle at 0 0,
		transparent var(--uks-sc-notch),
		var(--uks-sc-card-bg) calc(var(--uks-sc-notch) + 0.5px)
	);
}

.uks-scards__arrow-icon {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--uks-sc-navy);
    transition: transform 0.25s ease;
    position: absolute;
    bottom: 6px;
    right: 6px;
}

.uks-scards__arrow-icon svg {
	width: 22px;
    height: 22px;
}


/* ------------------------------------------------------------ responsive -- */

@media(max-width: 1366px){
	.uks-scards__arrow-icon{
		width: 40px;
    	height: 40px;
		bottom: 5px;
    	right: 2px;
	}
	.uks-scards__title{
		left: 35px;
    	padding: 10px 15px;
	}
	.uks-scards__title-text{
		font-size: 14px;
	}
	.uks-scards__arrow{
		width: 35px;
		height: 35px;
	}
}

@media (max-width: 1024px) {
	.solution-inner-wrapper .uks-scards {
    	--uks-scards-columns: 2 !important;
	}
}
@media (max-width: 781px) {
	.solution-inner-wrapper .uks-scards {
    	--uks-scards-columns: 1 !important;
	}
	.uks-scards__card {
    	padding: 24px 14px 15px 14px;
		height: 300px;
	}
	.uks-scards__image{
		width: 100%;
		height: 100%;
	}
	.uks-scards__arrow {
    	right: 14px;
    	bottom: 15px;
	}
	.uks-scards__title {
        padding: 14px 20px;
    }
	.uks-scards__title-text {
        font-size: 16px;
    }
	.uks-scards__arrow-icon svg {
    	width: 22px;
    	height: 16px;
	}
	.uks-scards__title{
		top: 11px;
	}
}

@media(max-width: 375px){
	.uks-scards__title-text {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
	.uks-scards__card,
	.uks-scards__image img,
	.uks-scards__arrow-icon {
		transition: none;
	}
}