/* ملف جديد: أيقونة متحركة جنب عنوان البانر بصفحات من نحن، خدماتنا، رؤيتنا، كن شريكنا */
/* كل شي هون بيشتغل بس على البانر يللي فيه .kh-hero-mark، فبانر تفاصيل الفرع (/dt) وأي صفحة تانية ما بيتغير فيها شي */
/* الترتيب: الأيقونة فوق الكلمة بكل المقاسات. الأيقونة بتطلع وبترسم خطوطها، وبعدها الكلمة بتطلع تحتها، وبالكمبيوتر خطين ناعمين بيمتدوا عجنبي الكلمة. بعدها كلشي بيثبت مكانو */

/* البانر صار grid بسطر واحد: الصورة مالية كل البانر (وهي يللي بتحدد ارتفاعو متل قبل)، والكلمة بالنص والأيقونة فوقها.
   الأيقونة والكلمة بنفس الخانة بالنص، والـ margin بيفرّقهن: الأيقونة بتطلع لفوق بقد (المسافة + ارتفاع الكلمة تقريباً)،
   والكلمة بتنزل لتحت بقد (حجم الأيقونة + المسافة)، فبيصيروا مجموعة وحدة بنص البانر وبينهن 16px */
.partner-main-container:has(> .kh-hero-mark) {
    --kh-hb-size: clamp(68px, 2.4vw + 50px, 96px);
    --kh-hb-title: 3.75rem;
    display: grid;
    direction: rtl;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    align-items: center;
}

.partner-main-container:has(> .kh-hero-mark) > .partner-hero-img-box {
    grid-area: 1 / 1 / 2 / -1;
    align-self: stretch;
    overflow: hidden;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* العنوان نفسو (نفس الخط والحجم من partner.css)، بس صار بالـ grid بدل ما يكون absolute */
.partner-main-container:has(> .kh-hero-mark) > .partner-main-title {
    grid-area: 1 / 2;
    justify-self: center;
    position: relative;
    z-index: 1;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    /* لو العنوان طويل بينزل لسطر تاني بدل ما يطلع برّا الشاشة */
    max-width: min(900px, 70vw);
    margin: 0;
    margin-top: calc(var(--kh-hb-size) + 16px);
    line-height: 1.25;
    text-align: center;
}

/* شارة الأيقونة: دائرة بلون الهوية الأخضر */
.kh-hero-mark {
    grid-area: 1 / 2;
    justify-self: center;
    position: relative;
    z-index: 1;
    width: var(--kh-hb-size);
    aspect-ratio: 1;
    margin-bottom: calc(16px + var(--kh-hb-title));
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--pr-color);
    background: radial-gradient(circle at 50% 40%, rgba(91, 225, 30, 0.18), rgba(91, 225, 30, 0.05) 70%);
    border: 1px solid rgba(91, 225, 30, 0.42);
    box-shadow: 0 0 0 6px rgba(91, 225, 30, 0.06), 0 0 30px rgba(91, 225, 30, 0.18);
}

.kh-hero-mark svg {
    width: 50%;
    height: 50%;
    max-width: none;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* حلقة بتنتشر مرة وحدة لما تطلع الأيقونة */
.kh-hero-mark::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(91, 225, 30, 0.65);
    opacity: 0;
    pointer-events: none;
}

/* خطين ناعمين عالجنبين بيملوا عرض البانر بهدوء (بالكمبيوتر بس) */
.partner-main-container:has(> .kh-hero-mark)::before,
.partner-main-container:has(> .kh-hero-mark)::after {
    content: "";
    position: relative;
    z-index: 1;
    grid-row: 1;
    width: min(220px, 70%);
    height: 1px;
    margin-inline: clamp(24px, 3vw, 44px);
    /* نفس نزلة الكلمة، مشان الخطين يكونوا بمستواها */
    margin-top: calc(var(--kh-hb-size) + 16px);
}

.partner-main-container:has(> .kh-hero-mark)::before {
    grid-column: 1;
    justify-self: end;
    background: linear-gradient(to left, transparent, rgba(91, 225, 30, 0.65));
    transform-origin: left center;
}

.partner-main-container:has(> .kh-hero-mark)::after {
    grid-column: 3;
    justify-self: start;
    background: linear-gradient(to right, transparent, rgba(91, 225, 30, 0.65));
    transform-origin: right center;
}

/* العنوان أصغر من 1040px وتحت (partner.css)، فارتفاعو أقل */
@media (max-width: 1040px) {
    .partner-main-container:has(> .kh-hero-mark) {
        --kh-hb-title: 3.1rem;
    }
}

/* الموبايل والتابلت الطولي: عمود واحد بلا الخطين، والعنوان بياخد عرض أكبر */
@media (max-width: 768px) {
    .partner-main-container:has(> .kh-hero-mark) {
        grid-template-columns: 1fr;
    }

    .kh-hero-mark,
    .partner-main-container:has(> .kh-hero-mark) > .partner-main-title {
        grid-column: 1;
    }

    .partner-main-container:has(> .kh-hero-mark) > .partner-main-title {
        max-width: 90vw;
    }

    .partner-main-container:has(> .kh-hero-mark)::before,
    .partner-main-container:has(> .kh-hero-mark)::after {
        display: none;
    }
}

/* الحركة: مرة وحدة بأول الصفحة، وبعدها ما في شي بيتحرك */
@keyframes kh-hb-badge {
    from {
        opacity: 0;
        scale: 0.6;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes kh-hb-ring {
    0% {
        opacity: 0;
        scale: 1;
    }

    15% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        scale: 1.6;
    }
}

@keyframes kh-hb-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes kh-hb-rise {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: none;
    }
}

@keyframes kh-hb-line {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes kh-hb-zoom {
    from {
        scale: 1.06;
    }

    to {
        scale: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {

    .partner-main-container:has(> .kh-hero-mark) > .partner-hero-img-box img {
        animation: kh-hb-zoom 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .kh-hero-mark {
        animation: kh-hb-badge 0.7s 0.1s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    }

    .kh-hero-mark::after {
        animation: kh-hb-ring 1.1s 0.55s ease-out both;
    }

    /* كل خط بالأيقونة بينرسم ورا التاني (pathLength="1" على كل خط) */
    .kh-hero-mark svg > * {
        stroke-dasharray: 1;
        animation: kh-hb-draw 1s 0.35s ease-in-out both;
    }

    .kh-hero-mark svg > :nth-child(2) {
        animation-delay: 0.5s;
    }

    .kh-hero-mark svg > :nth-child(3) {
        animation-delay: 0.65s;
    }

    .kh-hero-mark svg > :nth-child(4) {
        animation-delay: 0.8s;
    }

    .kh-hero-mark svg > :nth-child(5) {
        animation-delay: 0.95s;
    }

    .kh-hero-mark svg > :nth-child(6) {
        animation-delay: 1.1s;
    }

    /* بيلغي حركة العنوان القديمة برؤيتنا وكن شريكنا، لأنو هون العنوان بيطلع بعد الأيقونة */
    .partner-main-container:has(> .kh-hero-mark) > .partner-main-title {
        animation: kh-hb-rise 0.8s 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .partner-main-container:has(> .kh-hero-mark)::before,
    .partner-main-container:has(> .kh-hero-mark)::after {
        animation: kh-hb-line 0.9s 1.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
}