/**
 * Keyfactor Customers Cards Block Styles
 */

.kf-customer-cards {
    padding: clamp(clamp(clamp(20px, 0.06vw + 19.79px, 20.17px), 0.83vw + 14.57px, 22.66px), 5.74vw + -33.5px, 40px) 0;
}

.kf-customer-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: clamp(clamp(clamp(20px, 0.06vw + 19.79px, 20.17px), 0.83vw + 14.57px, 22.66px), 5.74vw + -33.5px, 40px);
}

.kf-customer-cards.style-1.kf-customer-cards--single .kf-customer-cards__grid {
    display: block;
}

.kf-customer-cards__notice {
    padding: 20px;
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    color: #92400e;
    font-size: 14px;
}

.kf-customer-card__wrapper {
    text-align: right; /* Used for video */
}

/* Card Base Styles */
.kf-customer-card {
    --border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    border-radius: var(--border-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.kf-customer-card__video {
    display: none;
}

.editor-styles-wrapper .kf-customer-card {
    pointer-events: none;
}

.kf-customer-card:hover,
.kf-customer-card:focus {
    transform: translateY(-4px);
    outline: none;
}

.kf-customer-card:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.kf-customer-card__image {
    overflow: hidden;
}

.kf-customer-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;

    mask-image: linear-gradient(to bottom, black 60%, rgba(0, 0, 0, .3) 80%);
}

.kf-customer-card:hover .kf-customer-card__img {
    transform: scale(1.05);
}

.kf-customer-card__logo {
    margin-bottom: auto;
}

.kf-customer-card__logo-img {
    display: block;
    width: var(--width, 150px);
    height: auto;
    max-width: 100%;
}

.kf-customer-card__title {
    margin: 0;
    padding: 30px;
    padding-bottom: 12px;
    
    text-wrap-style: pretty;
    
    font-family: Degular;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--x-24);
    line-height: 28px;
    vertical-align: middle;

    margin-top: 0;
}

.kf-customer-card__services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 30px 30px;
}

.kf-customer-card__service-tag {
    display: inline-block;
    padding: 7px 10px;

    font-family: Degular;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;


    border-radius: 29px;
    background-color: #5F61FF;
    color: #ffffff;
}

/* ========================================
   Style 1
   ======================================== */

.kf-customer-cards.style-1 .kf-customer-card {
    aspect-ratio: 400 / 483;
    background-color: #191919;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.kf-customer-cards.style-1 .kf-customer-card > * {
    position: relative;
}

.kf-customer-cards.style-1 .kf-customer-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    opacity: 0.9;
}

.kf-customer-cards.style-1 .kf-customer-card__image {
    position: static;
}

.kf-customer-cards.style-1 .kf-customer-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kf-customer-cards.style-1 .kf-customer-card__logo {
    padding: 30px;
}

.kf-customer-cards.style-1 .kf-customer-card__title {
    color: #FFFFFF;
}

.kf-customer-cards.style-1 .kf-customer-card__read-more {
    display: none;
}

/* ========================================
   Style 2
   ======================================== */
.kf-customer-cards.style-2 .kf-customer-card {
    aspect-ratio: 235 / 284;
    background-color: #191919;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.kf-customer-cards.style-2 .kf-customer-card > * {
    position: relative;
}

.kf-customer-cards.style-2 .kf-customer-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    opacity: 0.9;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper {
    position: relative;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: span 2;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(2) {
    grid-column: 2;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(3) {
    grid-column: 2;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(1)::before,
.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(4)::after {
    display: block;
    content: "";
    position: relative;
    top: -10px;
    left: 0;
    width: 100%;
    height: calc(42% - 20px);
    background-image: url('data:image/svg+xml,<svg width="235" height="120" viewBox="0 0 235 120" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity="0.5" width="235" height="120" rx="15" fill="url(%23paint0_linear_1_74)"/><defs><linearGradient id="paint0_linear_1_74" x1="117.5" y1="0" x2="117.5" y2="120" gradientUnits="userSpaceOnUse"><stop stop-color="%235F61FF" stop-opacity="0"/><stop offset="1" stop-color="%235F61FF"/></linearGradient></defs></svg>');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(4)::after {
    top: auto;
    bottom: -10px;
    background-position: center bottom;
    transform: rotate(180deg);
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(4)::before,
.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(1)::after {
    display: block;
    content: "";
    position: relative;
    top: -10px;
    left: 0;
    width: 100%;
    height: calc(15% - 20px);
    background-image: url('data:image/svg+xml,<svg width="235" height="60" viewBox="0 0 235 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.5" d="M0 45C0 53.2843 6.71573 60 15 60H220C228.284 60 235 53.2843 235 45V15C235 6.71573 228.284 0 220 0H15C6.71573 0 0 6.71573 0 15V45Z" fill="url(%23paint0_linear_1_90)"/><defs><linearGradient id="paint0_linear_1_90" x1="117.5" y1="60" x2="118" y2="-34" gradientUnits="userSpaceOnUse"><stop stop-color="%235F61FF" stop-opacity="0"/><stop offset="1" stop-color="%235F61FF"/></linearGradient></defs></svg>');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    transform: rotate(180deg);
}

.kf-customer-cards.style-2 .kf-customer-cards__grid .kf-customer-card__wrapper:nth-child(1)::after {
    top: auto;
    bottom: -10px;
    background-position: center top;
    transform: rotate(0deg);
}

.kf-customer-cards.style-2 .kf-customer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    padding: 1px;
    background: linear-gradient(145.6deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    z-index: 1;
}


.kf-customer-cards.style-2 .kf-customer-card__image {
    position: static;
}

.kf-customer-cards.style-2 .kf-customer-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kf-customer-cards.style-2 .kf-customer-card__logo {
    padding: 30px;
}

.kf-customer-cards.style-2 .kf-customer-card__logo-img {
    width: calc(var(--width, 150px) * .75);
}

.kf-customer-cards.style-2 .kf-customer-card__title {
    color: #FFFFFF;
}

.kf-customer-cards.style-2 .kf-customer-card__read-more {
    font-family: NT Bau;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #FFFFFF;
    padding: clamp(clamp(clamp(16px, 0.04vw + 15.85px, 16.12px), 0.58vw + 12.2px, 17.86px), 4.02vw + -21.45px, 30px);
}

.kf-customer-cards.style-2 .kf-customer-card__video {
    display: block;
    height: 0px;
    position: relative;
}

.kf-customer-cards.style-2 .kf-customer-card__video .kf-customer-card__video-link {
    position: absolute;
    right: 10px;
    bottom: 2px;
    z-index: 1;
    padding: clamp(clamp(clamp(6px, 0.04vw + 5.85px, 6.12px), 0.58vw + 2.2px, 7.86px), 4.02vw + -31.45px, 20px);
}

.kf-customer-cards.style-2 .kf-customer-card__title,
.kf-customer-cards.style-2 .kf-customer-card__services {
    display: none;
}

@media (max-width: 767px) {
    .kf-customer-cards__grid {
        grid-template-columns: repeat(1, minmax(220px, 330px));
        justify-content: center;
    }

    .kf-customer-card__title {
        font-size: 24px;
    }
    
}

@media (max-width: 550px) {
    .kf-customer-cards.style-2 .kf-customer-card__read-more { 
        display: none;
    }
}