/* =============================================
   KM Category Showcase
   ============================================= */

.km-cs {
    --cs-circle: 300px;
    --cs-gap: 16px;
    --cs-radius: 4px;
    --cs-smooth: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cs-gap);
    width: 100%;
}

/* =============================================
   Rows
   ============================================= */

.km-cs__row {
    display: flex;
    gap: var(--cs-gap);
}

.km-cs__row--top,
.km-cs__row--bot {
    height: 350px;
}

/* Top row: 20 / 60 / 20 */
.km-cs__card--tl,
.km-cs__card--tr {
    flex: 20;
}

.km-cs__card--tc {
    flex: 60;
}

/* Bottom row: 2 equal columns */
.km-cs__row--bot .km-cs__card {
    flex: 1;
}

/* =============================================
   Center circle
   ============================================= */

.km-cs__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--cs-circle);
    height: var(--cs-circle);
    border-radius: 50%;
    background: #fff;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.km-cs__center-img {
    width: 60% !important;
    height: 60% !important;
    max-width: none !important;
    object-fit: contain;
}

/* =============================================
   Cards base
   ============================================= */

.km-cs__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    text-decoration: none !important;
    color: #fff !important;
    border-radius: var(--cs-radius);
}

/* Background image layer — separate span for zoom effect */
.km-cs__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: 0;
}

a.km-cs__card:hover .km-cs__card-bg {
    transform: scale(1.05);
}

/* Dark overlay */
.km-cs__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%);
    z-index: 1;
    pointer-events: none;
    transition: background 0.3s ease;
}

a.km-cs__card:hover .km-cs__card-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
}

/* Content over overlay */
.km-cs__card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.km-cs__card-title {
    font-family: 'Arca Majora 3', Lato, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.km-cs__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-top: auto;
    padding-right: 24px;
    transition: color 0.2s;
}

a.km-cs__card:hover .km-cs__card-cta {
    color: #fff;
}

/* Arrow square — "subtract" effect in bottom-right corner
   The arrow is positioned absolute in the card corner.
   Two pseudo-elements create inverted border-radius (concave)
   using the same box-shadow technique as the center circle smooth corners. */

.km-cs__card-arrow {
    --arrow-inner: 40px;
    --arrow-border: 6px;
    --arrow-curve: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--arrow-inner);
    height: var(--arrow-inner);
    border-top-left-radius: 12px;
    background: #494949;
    border-top: var(--arrow-border) solid #fff;
    border-left: var(--arrow-border) solid #fff;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 3;
    transition: background 0.2s ease;
}

a.km-cs__card:hover .km-cs__card-arrow {
    background: #5a5a5a;
}

/* Concave curve — above the arrow (right edge of card)
   White concave to blend with the white border. */
.km-cs__card-arrow::before {
    content: '';
    position: absolute;
    width: var(--arrow-curve);
    height: var(--arrow-curve);
    top: calc(-1 * var(--arrow-curve) - var(--arrow-border));
    right: calc(-1 * var(--arrow-border));
    background: transparent;
    border-bottom-right-radius: var(--arrow-curve);
    box-shadow: var(--arrow-curve) var(--arrow-curve) 0 0 #fff;
    pointer-events: none;
}

/* Concave curve — left of the arrow (bottom edge of card) */
.km-cs__card-arrow::after {
    content: '';
    position: absolute;
    width: var(--arrow-curve);
    height: var(--arrow-curve);
    bottom: calc(-1 * var(--arrow-border));
    left: calc(-1 * var(--arrow-curve) - var(--arrow-border));
    background: transparent;
    border-bottom-right-radius: var(--arrow-curve);
    box-shadow: var(--arrow-curve) var(--arrow-curve) 0 0 #fff;
    pointer-events: none;
}

/* =============================================
   Bottom-right card: offset title so the
   circle doesn't cover it
   ============================================= */

.km-cs__card--br .km-cs__card-title {
    padding-left: calc(var(--cs-circle) / 2);
}

/* =============================================
   Circle cutouts — pseudo-elements on cards
   ============================================= */

.km-cs__card--tc::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--cs-circle) / 2 - var(--cs-gap) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: var(--cs-circle);
    height: var(--cs-circle);
    border-radius: 50%;
    background: #fff;
    z-index: 5;
}

.km-cs__card--bl::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--cs-circle) / 2 - var(--cs-gap) / 2);
    right: calc(-1 * var(--cs-circle) / 2 - var(--cs-gap) / 2);
    width: var(--cs-circle);
    height: var(--cs-circle);
    border-radius: 50%;
    background: #fff;
    z-index: 5;
}

.km-cs__card--br::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--cs-circle) / 2 - var(--cs-gap) / 2);
    left: calc(-1 * var(--cs-circle) / 2 - var(--cs-gap) / 2);
    width: var(--cs-circle);
    height: var(--cs-circle);
    border-radius: 50%;
    background: #fff;
    z-index: 5;
}

/* =============================================
   Smooth corners (inverted border-radius)

   Positioned on .km-cs (not inside cards) to
   avoid overflow:hidden clipping.

   Technique: a small square with a white
   box-shadow that fills the corner, and a
   border-radius on the inner corner to create
   a concave curve.
   ============================================= */

.km-cs__smooth {
    position: absolute;
    width: var(--cs-smooth);
    height: var(--cs-smooth);
    z-index: 11;
    pointer-events: none;
    background: transparent;
}

/* --- TC card: where the circle cutout meets the bottom edge --- */

/* Left side of cutout */
.km-cs__smooth--tc-bl {
    top: calc(350px - var(--cs-smooth));
    left: calc(50% - var(--cs-circle) / 2 - var(--cs-smooth));
    border-bottom-right-radius: var(--cs-smooth);
    box-shadow: var(--cs-smooth) var(--cs-smooth) 0 0 #fff;
}

/* Right side of cutout */
.km-cs__smooth--tc-br {
    top: calc(350px - var(--cs-smooth));
    left: calc(50% + var(--cs-circle) / 2);
    border-bottom-left-radius: var(--cs-smooth);
    box-shadow: calc(-1 * var(--cs-smooth)) var(--cs-smooth) 0 0 #fff;
}

/* --- BL card: where the circle cutout meets top and right edges --- */

/* Top edge */
.km-cs__smooth--bl-top {
    top: calc(350px + var(--cs-gap));
    right: calc(50% + var(--cs-gap) / 2 - var(--cs-circle) / 2 + var(--cs-gap) / 2);
    border-top-right-radius: var(--cs-smooth);
    box-shadow: var(--cs-smooth) calc(-1 * var(--cs-smooth)) 0 0 #fff;
}

/* Right edge */
.km-cs__smooth--bl-right {
    top: calc(50% + var(--cs-circle) / 2 - var(--cs-gap) / 2);
    right: calc(50% + var(--cs-gap) / 2 - var(--cs-smooth));
    border-top-left-radius: var(--cs-smooth);
    box-shadow: calc(-1 * var(--cs-smooth)) calc(-1 * var(--cs-smooth)) 0 0 #fff;
}

/* --- BR card: where the circle cutout meets top and left edges --- */

/* Top edge */
.km-cs__smooth--br-top {
    top: calc(350px + var(--cs-gap));
    left: calc(50% + var(--cs-gap) / 2 - var(--cs-circle) / 2 + var(--cs-gap) / 2);
    border-top-left-radius: var(--cs-smooth);
    box-shadow: calc(-1 * var(--cs-smooth)) calc(-1 * var(--cs-smooth)) 0 0 #fff;
}

/* Left edge */
.km-cs__smooth--br-left {
    top: calc(50% + var(--cs-circle) / 2 - var(--cs-gap) / 2);
    left: calc(50% + var(--cs-gap) / 2 - var(--cs-smooth));
    border-top-right-radius: var(--cs-smooth);
    box-shadow: var(--cs-smooth) calc(-1 * var(--cs-smooth)) 0 0 #fff;
}

/* =============================================
   Responsive - Tablet
   ============================================= */

@media (max-width: 1024px) {
    .km-cs {
        --cs-circle: 220px;
    }

    .km-cs__row--top,
    .km-cs__row--bot {
        height: 280px;
    }

    .km-cs__smooth--tc-bl,
    .km-cs__smooth--tc-br {
        top: calc(280px - var(--cs-smooth));
    }

    .km-cs__smooth--bl-top,
    .km-cs__smooth--br-top {
        top: calc(280px + var(--cs-gap));
    }

    .km-cs__card-title {
        font-size: 22px;
    }
}

/* =============================================
   Responsive - Mobile
   ============================================= */

@media (max-width: 768px) {
    .km-cs {
        --cs-circle: 0px;
        --cs-gap: 10px;
    }

    .km-cs__center {
        display: none;
    }

    .km-cs__smooth {
        display: none;
    }

    .km-cs__row--top {
        flex-wrap: wrap;
        height: auto;
    }

    .km-cs__row--top .km-cs__card {
        flex: none;
        height: 230px;
    }

    .km-cs__card--tl {
        width: 100%;
        height: 180px;
    }

    .km-cs__card--tc,
    .km-cs__card--tr {
        width: calc(50% - var(--cs-gap) / 2);
    }

    .km-cs__row--bot {
        height: 230px;
    }

    .km-cs__card--tc::after,
    .km-cs__card--bl::after,
    .km-cs__card--br::after {
        display: none;
    }

    .km-cs__card--br .km-cs__card-title {
        padding-left: 0;
    }

    .km-cs__card-title {
        font-size: 20px;
    }

    .km-cs__card {
        padding: 20px;
        border-radius: 4px;
    }

    .km-cs__card-arrow {
        display: flex;
    }
}