.rkha-collage,
.rkha-collage *,
.rkha-collage *::before,
.rkha-collage *::after {
    box-sizing: border-box;
}

.rkha-collage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "one one one one one one two two two three three three"
        "title title title title four four four five five five five five"
        "six six six six six six seven seven seven seven seven seven";
    grid-template-rows:
        var(--rkha-desktop-h1, 135px)
        var(--rkha-desktop-h2, 145px)
        var(--rkha-desktop-h3, 165px);
    gap: var(--rkha-gap, 9px);
    width: 100%;
    max-width: var(--rkha-max-width, 1500px);
    margin: 0 auto;
    padding: 0;
    direction: ltr;
    overflow: visible;
}


/* ---------------------------------
   هماهنگی عرض با کانتینر المنتور
---------------------------------- */
.elementor-widget-shortcode,
.elementor-widget-shortcode > .elementor-widget-container,
.elementor-widget-shortcode .elementor-shortcode {
    width: 100%;
    max-width: 100%;
}

.elementor-widget-shortcode .rkha-collage,
.elementor-shortcode > .rkha-collage {
    width: 100%;
    max-width: 100% !important;
}

/* ---------------------------------
   ورود نرم و مرحله‌ای آیتم‌های شورت‌کد
---------------------------------- */
.rkha-collage.rkha-animate-ready > .rkha-card,
.rkha-collage.rkha-animate-ready > .rkha-title-box {
    opacity: 0;
    translate: 0 24px;
    scale: .985;
    will-change: opacity, translate, scale;
    transition:
        opacity var(--rkha-enter-duration, 1100ms) cubic-bezier(.2,.7,.2,1),
        translate var(--rkha-enter-duration, 1100ms) cubic-bezier(.16,1,.3,1),
        scale var(--rkha-enter-duration, 1100ms) cubic-bezier(.16,1,.3,1);
    transition-delay: var(--rkha-enter-delay, 0ms);
}

.rkha-collage.rkha-animate-ready.rkha-is-visible > .rkha-card,
.rkha-collage.rkha-animate-ready.rkha-is-visible > .rkha-title-box {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

.rkha-card-1 { grid-area: one; }
.rkha-card-2 { grid-area: two; }
.rkha-card-3 { grid-area: three; }
.rkha-card-4 { grid-area: four; }
.rkha-card-5 { grid-area: five; }
.rkha-card-6 { grid-area: six; }
.rkha-card-7 { grid-area: seven; }
.rkha-title-box { grid-area: title; }

.rkha-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    background: #111;
    border-radius: var(--rkha-radius, 4px);
    text-decoration: none !important;
    cursor: pointer;
    transform: translateZ(0);
    transform-origin: center;
    transition:
        transform var(--rkha-hover-duration, 650ms) cubic-bezier(.2,.7,.2,1),
        box-shadow var(--rkha-hover-duration, 650ms) ease,
        filter var(--rkha-hover-duration, 650ms) ease;
}

.rkha-card img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--rkha-position, center center);
    filter: contrast(1.05) saturate(.94);
    transform: scale(1.01);
    transition:
        transform var(--rkha-hover-duration, 650ms) cubic-bezier(.2,.7,.2,1),
        filter var(--rkha-hover-duration, 650ms) ease,
        opacity var(--rkha-hover-duration, 650ms) ease;
}

/* لایه رنگی */
.rkha-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: var(--rkha-overlay, #000);
    opacity: var(--rkha-overlay-opacity, .62);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition:
        opacity var(--rkha-hover-duration, 650ms) ease,
        background-color var(--rkha-hover-duration, 650ms) ease;
}

/* لایه نور/جزئیات افکت */
.rkha-card::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 38%, rgba(0,0,0,.14));
    opacity: .65;
    pointer-events: none;
    transition:
        opacity var(--rkha-hover-duration, 650ms) ease,
        transform var(--rkha-hover-duration, 650ms) cubic-bezier(.2,.7,.2,1),
        left var(--rkha-hover-duration, 650ms) ease;
}

.rkha-card:focus-visible {
    outline: 3px solid #000;
    outline-offset: -3px;
}

/* ------------------------------
   افکت: بدون افکت
------------------------------ */
.rkha-hover-none .rkha-card,
.rkha-hover-none .rkha-card img,
.rkha-hover-none .rkha-card::before,
.rkha-hover-none .rkha-card::after {
    transition: none;
}

.rkha-hover-none .rkha-card:hover,
.rkha-hover-none .rkha-card:hover img {
    transform: none;
}

/* ------------------------------
   افکت: ساده
------------------------------ */
.rkha-hover-simple .rkha-card:hover img {
    transform: scale(var(--rkha-hover-scale, 1.08));
    filter: contrast(1.08) saturate(1.08);
}

.rkha-hover-simple .rkha-card:hover::after {
    opacity: var(--rkha-overlay-hover-opacity, .38);
}

.rkha-hover-simple .rkha-card:hover::before {
    opacity: .3;
}

/* ------------------------------
   افکت: زوم
------------------------------ */
.rkha-hover-zoom .rkha-card:hover img {
    transform: scale(calc(var(--rkha-hover-scale, 1.08) + .04));
    filter: contrast(1.1) saturate(1.12);
}

.rkha-hover-zoom .rkha-card:hover::after {
    opacity: calc(var(--rkha-overlay-hover-opacity, .38) * .78);
}

.rkha-hover-zoom .rkha-card:hover::before {
    opacity: .16;
}

/* ------------------------------
   افکت: شناور
------------------------------ */
.rkha-hover-lift .rkha-card {
    overflow: hidden;
}

.rkha-hover-lift .rkha-card:hover {
    z-index: 6;
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 22px 42px rgba(0,0,0,.28);
}

.rkha-hover-lift .rkha-card:hover img {
    transform: scale(calc(var(--rkha-hover-scale, 1.08) - .025));
}

.rkha-hover-lift .rkha-card:hover::after {
    opacity: var(--rkha-overlay-hover-opacity, .38);
}

/* ------------------------------
   افکت: نور عبوری
------------------------------ */
.rkha-hover-shine .rkha-card::before {
    top: -35%;
    bottom: -35%;
    right: auto;
    left: -70%;
    width: 36%;
    height: 170%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    opacity: 0;
    transform: rotate(18deg);
}

.rkha-hover-shine .rkha-card:hover::before {
    left: 140%;
    opacity: .9;
}

.rkha-hover-shine .rkha-card:hover img {
    transform: scale(var(--rkha-hover-scale, 1.08));
    filter: contrast(1.08) saturate(1.05);
}

.rkha-hover-shine .rkha-card:hover::after {
    opacity: var(--rkha-overlay-hover-opacity, .38);
}

/* ------------------------------
   افکت: سیاه‌وسفید به رنگی
------------------------------ */
.rkha-hover-grayscale .rkha-card img {
    filter: grayscale(1) contrast(1.08) saturate(.55);
}

.rkha-hover-grayscale .rkha-card:hover img {
    transform: scale(var(--rkha-hover-scale, 1.08));
    filter: grayscale(0) contrast(1.08) saturate(1.1);
}

.rkha-hover-grayscale .rkha-card:hover::after {
    opacity: calc(var(--rkha-overlay-hover-opacity, .38) * .55);
}

.rkha-hover-grayscale .rkha-card:hover::before {
    opacity: .2;
}

/* ------------------------------
   افکت: تیره سینمایی
------------------------------ */
.rkha-hover-dark .rkha-card:hover img {
    transform: scale(var(--rkha-hover-scale, 1.08));
    filter: contrast(1.14) saturate(.82) brightness(.72);
}

.rkha-hover-dark .rkha-card:hover::after {
    opacity: min(1, calc(var(--rkha-overlay-opacity, .62) + .14));
}

.rkha-hover-dark .rkha-card:hover::before {
    opacity: .12;
}

/* ------------------------------
   افکت: چرخش نرم
------------------------------ */
.rkha-hover-tilt .rkha-card:hover {
    z-index: 6;
    transform: rotate(-1.1deg) scale(1.022);
    box-shadow: 0 18px 34px rgba(0,0,0,.2);
}

.rkha-hover-tilt .rkha-card:nth-of-type(even):hover {
    transform: rotate(1.1deg) scale(1.022);
}

.rkha-hover-tilt .rkha-card:hover img {
    transform: scale(calc(var(--rkha-hover-scale, 1.08) - .015));
}

.rkha-hover-tilt .rkha-card:hover::after {
    opacity: var(--rkha-overlay-hover-opacity, .38);
}

/* Placeholder */
.rkha-card.is-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    background: radial-gradient(circle at 20% 20%, #333 0, #111 58%, #000 100%);
}

.rkha-placeholder-number {
    position: relative;
    z-index: 4;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

.rkha-placeholder-text {
    position: relative;
    z-index: 4;
    font-size: 12px;
    opacity: .7;
}

/* Title */
.rkha-title-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 0 3px;
    background: #fff;
    color: #080808;
}

.rkha-title-en {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(45px, 6vw, 78px);
    font-weight: 500;
    line-height: .85;
    letter-spacing: 5px;
    white-space: nowrap;
}

.rkha-title-fa {
    width: 100%;
    margin-top: 10px;
    font-family: inherit;
    font-size: clamp(34px, 4.5vw, 59px);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -2px;
    direction: rtl;
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .rkha-collage {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "one one one one one one"
            "two two two three three three"
            "title title title four four four"
            "five five five five five five"
            "six six six seven seven seven";
        grid-template-rows:
            var(--rkha-tablet-h1, 220px)
            var(--rkha-tablet-h2, 175px)
            var(--rkha-tablet-h3, 180px)
            var(--rkha-tablet-h4, 210px)
            var(--rkha-tablet-h5, 190px);
        gap: min(var(--rkha-gap, 9px), 8px);
    }

    .rkha-title-en { font-size: clamp(43px, 8vw, 68px); }
    .rkha-title-fa { font-size: clamp(34px, 6vw, 50px); }
}

@media (max-width: 767px) {
    .rkha-collage {
        display: grid;
        grid-template-columns: repeat(var(--rkha-mobile-columns, 1), minmax(0, 1fr));
        grid-template-areas: none;
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-rows: auto;
        gap: min(var(--rkha-gap, 9px), 7px);
        overflow: visible;
    }

    .rkha-collage > .rkha-card,
    .rkha-collage > .rkha-title-box {
        grid-area: auto !important;
    }

    .rkha-title-box {
        grid-column: 1 / -1;
        min-height: var(--rkha-mobile-title-height, 135px);
        padding: 20px 4px;
    }

    .rkha-card {
        min-height: 0;
        height: var(--rkha-mobile-height, 210px);
        aspect-ratio: auto;
    }

    .rkha-title-en {
        font-size: clamp(49px, 16vw, 70px);
        letter-spacing: 3px;
    }

    .rkha-title-fa {
        margin-top: 12px;
        font-size: clamp(38px, 12vw, 53px);
        text-align: right;
    }
}

@media (max-width: 480px) {
    .rkha-collage[style*="--rkha-mobile-columns:2"] .rkha-title-en {
        font-size: clamp(41px, 13vw, 58px);
    }

    .rkha-collage[style*="--rkha-mobile-columns:2"] .rkha-title-fa {
        font-size: clamp(32px, 10vw, 46px);
    }
}

@media (hover: none) {
    .rkha-card:hover,
    .rkha-hover-tilt .rkha-card:nth-of-type(even):hover {
        transform: none;
        box-shadow: none;
    }

    .rkha-card:hover img {
        transform: scale(1.01);
    }

    .rkha-card:hover::after {
        opacity: var(--rkha-overlay-opacity, .62);
    }

    .rkha-card:hover::before {
        opacity: .65;
        left: -70%;
    }

    .rkha-hover-grayscale .rkha-card img,
    .rkha-hover-grayscale .rkha-card:hover img {
        filter: grayscale(0) contrast(1.05) saturate(.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rkha-card,
    .rkha-card img,
    .rkha-card::before,
    .rkha-card::after,
    .rkha-collage.rkha-animate-ready > .rkha-card,
    .rkha-collage.rkha-animate-ready > .rkha-title-box {
        transition: none !important;
    }

    .rkha-collage.rkha-animate-ready > .rkha-card,
    .rkha-collage.rkha-animate-ready > .rkha-title-box {
        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
    }
}

/* ---------------------------------
   متن و تاریخ پایین کارت پس از هاور
---------------------------------- */
.rkha-card-meta {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 28px 13px 11px;
    direction: rtl;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 24%, rgba(0,0,0,.78) 100%);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition:
        opacity var(--rkha-hover-duration, 650ms) ease,
        transform var(--rkha-hover-duration, 650ms) cubic-bezier(.2,.7,.2,1);
}

.rkha-card:hover .rkha-card-meta,
.rkha-card:focus-visible .rkha-card-meta,
.rkha-card:focus .rkha-card-meta {
    opacity: 1;
    transform: translateY(0);
}

.rkha-card-meta__text,
.rkha-card-meta__date {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    color: inherit;
    line-height: 1.55;
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

.rkha-card-meta__text {
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 12px;
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rkha-card-meta__date {
    flex: 0 0 auto;
    direction: rtl;
    font-size: 10.5px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    opacity: .9;
}

@media (max-width: 767px) {
    .rkha-card-meta {
        gap: 8px;
        padding: 24px 10px 9px;
    }

    .rkha-card-meta__text {
        font-size: 11px;
    }

    .rkha-card-meta__date {
        font-size: 9.5px;
    }
}

@media (hover: none) {
    .rkha-card-meta {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rkha-card-meta {
        transition: none !important;
    }
}