/**
 * Stylesheet for EP KU Info Cards Widget
 * Premium visual aesthetics, fully responsive, and highly animated.
 */

/* ========================================
   GRID CONTAINER
   ======================================== */
.ep-ku-info-cards-grid {
    display: grid;
    /* Respect Rule 2.2: Do not mix flex and grid on same class. Columns set via CSS variables. */
    grid-template-columns: repeat(var(--ep-ku-grid-cols, 4), minmax(0, 1fr));
    gap: var(--ep-ku-grid-gap, 24px);
    width: 100%;
}

/* Responsive grid fallbacks */
@media (max-width: 1024px) {
    .ep-ku-info-cards-grid {
        grid-template-columns: repeat(var(--ep-ku-grid-cols-tablet, var(--ep-ku-grid-cols, 2)), minmax(0, 1fr));
        gap: var(--ep-ku-grid-gap-tablet, var(--ep-ku-grid-gap, 24px));
    }
}

@media (max-width: 767px) {
    .ep-ku-info-cards-grid {
        grid-template-columns: repeat(var(--ep-ku-grid-cols-mobile, var(--ep-ku-grid-cols-tablet, 1)), minmax(0, 1fr));
        gap: var(--ep-ku-grid-gap-mobile, var(--ep-ku-grid-gap-tablet, var(--ep-ku-grid-gap, 24px)));
    }
}

/* ========================================
   CARD WRAPPER
   ======================================== */
.ep-ku-info-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    background-color: var(--ep-ku-card-bg-color, #ffffff);
    border-radius: var(--ep-ku-card-border-radius, 24px);
    padding: var(--ep-ku-card-padding, 40px 24px);
    border: var(--ep-ku-card-border-width, 0px) solid var(--ep-ku-card-border-color, #eef2f6);
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                background-color 0.3s ease;
    outline: none;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .ep-ku-info-card {
        border-radius: var(--ep-ku-card-border-radius-tablet, var(--ep-ku-card-border-radius, 24px));
        padding: var(--ep-ku-card-padding-tablet, var(--ep-ku-card-padding, 40px 24px));
    }
}

@media (max-width: 767px) {
    .ep-ku-info-card {
        border-radius: var(--ep-ku-card-border-radius-mobile, var(--ep-ku-card-border-radius-tablet, var(--ep-ku-card-border-radius, 24px)));
        padding: var(--ep-ku-card-padding-mobile, var(--ep-ku-card-padding-tablet, var(--ep-ku-card-padding, 40px 24px)));
    }
}

/* Premium Hover Micro-animations */
.ep-ku-info-card:hover {
    transform: translateY(var(--ep-ku-card-hover-y, -8px));
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

@media (max-width: 1024px) {
    .ep-ku-info-card:hover {
        transform: translateY(var(--ep-ku-card-hover-y-tablet, var(--ep-ku-card-hover-y, -8px)));
    }
}

@media (max-width: 767px) {
    .ep-ku-info-card:hover {
        transform: translateY(var(--ep-ku-card-hover-y-mobile, var(--ep-ku-card-hover-y-tablet, var(--ep-ku-card-hover-y, -8px))));
    }
}

/* Active State Press Effect */
.ep-ku-info-card:active {
    transform: translateY(calc(var(--ep-ku-card-hover-y, -8px) / 2)) scale(0.98);
}

@media (max-width: 1024px) {
    .ep-ku-info-card:active {
        transform: translateY(calc(var(--ep-ku-card-hover-y-tablet, var(--ep-ku-card-hover-y, -8px)) / 2)) scale(0.98);
    }
}

@media (max-width: 767px) {
    .ep-ku-info-card:active {
        transform: translateY(calc(var(--ep-ku-card-hover-y-mobile, var(--ep-ku-card-hover-y-tablet, var(--ep-ku-card-hover-y, -8px))) / 2)) scale(0.98);
    }
}

/* Accessibility Focus Ring */
.ep-ku-info-card:focus-visible {
    outline: 2px solid var(--ep-ku-icon-color, #ff4a7d);
    outline-offset: 4px;
}

/* ========================================
   CARD CONTENT INNER
   ======================================== */
.ep-ku-info-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    justify-content: flex-start;
}

/* ========================================
   ICON STYLING
   ======================================== */
.ep-ku-info-card-icon-wrapper {
    margin-bottom: var(--ep-ku-icon-spacing, 20px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1024px) {
    .ep-ku-info-card-icon-wrapper {
        margin-bottom: var(--ep-ku-icon-spacing-tablet, var(--ep-ku-icon-spacing, 20px));
    }
}

@media (max-width: 767px) {
    .ep-ku-info-card-icon-wrapper {
        margin-bottom: var(--ep-ku-icon-spacing-mobile, var(--ep-ku-icon-spacing-tablet, var(--ep-ku-icon-spacing, 20px)));
    }
}

.ep-ku-info-card-icon {
    font-size: var(--ep-ku-icon-size, 48px);
    color: var(--ep-ku-icon-color, #ff4a7d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1;
}

/* SVG Rendering Support */
.ep-ku-info-card-icon svg {
    width: var(--ep-ku-icon-size, 48px);
    height: var(--ep-ku-icon-size, 48px);
    fill: currentColor;
    transition: fill 0.3s ease;
}

@media (max-width: 1024px) {
    .ep-ku-info-card-icon {
        font-size: var(--ep-ku-icon-size-tablet, var(--ep-ku-icon-size, 48px));
    }
    .ep-ku-info-card-icon svg {
        width: var(--ep-ku-icon-size-tablet, var(--ep-ku-icon-size, 48px));
        height: var(--ep-ku-icon-size-tablet, var(--ep-ku-icon-size, 48px));
    }
}

@media (max-width: 767px) {
    .ep-ku-info-card-icon {
        font-size: var(--ep-ku-icon-size-mobile, var(--ep-ku-icon-size-tablet, var(--ep-ku-icon-size, 48px)));
    }
    .ep-ku-info-card-icon svg {
        width: var(--ep-ku-icon-size-mobile, var(--ep-ku-icon-size-tablet, var(--ep-ku-icon-size, 48px)));
        height: var(--ep-ku-icon-size-mobile, var(--ep-ku-icon-size-tablet, var(--ep-ku-icon-size, 48px)));
    }
}

/* Hover Icon Accent Shift */
.ep-ku-info-card:hover .ep-ku-info-card-icon {
    color: var(--ep-ku-icon-hover-color, #ff2a65);
    transform: scale(1.08);
}

.ep-ku-info-card:hover .ep-ku-info-card-icon svg {
    fill: var(--ep-ku-icon-hover-color, #ff2a65);
}

/* ========================================
   TEXT & HEADINGS
   ======================================== */
.ep-ku-info-card-title {
    color: var(--ep-ku-title-color, #0f172a);
    margin: 0 0 var(--ep-ku-title-margin, 12px) 0;
    transition: color 0.3s ease;
    word-break: break-word;
    font-family: inherit; /* Inherit Elementor defaults or active theme fonts */
}

@media (max-width: 1024px) {
    .ep-ku-info-card-title {
        margin: 0 0 var(--ep-ku-title-margin-tablet, var(--ep-ku-title-margin, 12px)) 0;
    }
}

@media (max-width: 767px) {
    .ep-ku-info-card-title {
        margin: 0 0 var(--ep-ku-title-margin-mobile, var(--ep-ku-title-margin-tablet, var(--ep-ku-title-margin, 12px))) 0;
    }
}

.ep-ku-info-card-desc {
    color: var(--ep-ku-desc-color, #64748b);
    margin: 0;
    transition: color 0.3s ease;
    word-break: break-word;
    font-family: inherit;
}