/*
 * Digital Systems Studio
 * Final public page covers and research controls.
 *
 * This file must remain the final stylesheet loaded in site.blade.php.
 */

:root {
    --dss-frame: 1180px;
    --dss-dark: #041e17;
    --dss-dark-secondary: #0a3527;
    --dss-green: #4fc986;
    --dss-green-hover: #258b5d;
    --dss-border: rgba(120, 221, 165, .18);
}

/* ==================================================
   1. UNIFIED PAGE COVERS
   ================================================== */

:is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 410px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 70px 0 64px !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(60, 195, 122, .15),
            transparent 29%
        ),
        radial-gradient(
            circle at 91% 10%,
            rgba(72, 207, 137, .10),
            transparent 29%
        ),
        linear-gradient(
            118deg,
            #041c15 0%,
            #06261c 55%,
            #0c3d2c 100%
        ) !important;
}

:is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
)::before {
    content: "" !important;
    position: absolute !important;
    width: 440px !important;
    height: 440px !important;
    inset-inline-end: -215px !important;
    bottom: -290px !important;
    border: 1px solid rgba(101, 218, 154, .12) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

:is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
)::after {
    content: "" !important;
    position: absolute !important;
    width: 155px !important;
    height: 155px !important;
    inset-inline-start: -70px !important;
    top: 50px !important;
    border: 1px solid rgba(101, 218, 154, .08) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* إطار جميع أغلفة الصفحات يطابق إطار الموقع */
:is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) > .container,
:is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) .container {
    position: relative !important;
    z-index: 2 !important;
    width: min(var(--dss-frame), calc(100% - 48px)) !important;
    max-width: var(--dss-frame) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
}

/* الشبكة المستخدمة في المقالات والأبحاث وتفاصيل المشاريع */
:is(
    .editorial-index-hero-grid,
    .editorial-hero-grid,
    .dss-research-hero-grid,
    .dss-research-detail-hero-grid,
    .project-detail-hero-grid,
    .unified-page-hero-grid
) {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(235px, 300px) !important;
    align-items: center !important;
    gap: clamp(38px, 6vw, 78px) !important;
}

/* النص الصغير أعلى عنوان الغلاف */
:is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) :is(
    .eyebrow,
    .hero-eyebrow,
    .editorial-kicker,
    .dss-research-kicker,
    .project-detail-kicker
) {
    display: block !important;
    margin: 0 0 12px !important;
    color: var(--dss-green) !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
}

/* العنوان الإنجليزي */
html[dir="ltr"] :is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) h1 {
    max-width: 760px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.55rem, 3.55vw, 3.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance !important;
}

/* العنوان العربي، أصغر من النسخة السابقة */
html[dir="rtl"] :is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) h1 {
    max-width: 780px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.45rem, 3.3vw, 3.55rem) !important;
    font-weight: 800 !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
}

/* الوصف */
:is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) p {
    max-width: 680px !important;
    margin: 17px 0 0 !important;
    color: rgba(255, 255, 255, .68) !important;
    font-size: .96rem !important;
    line-height: 1.82 !important;
}

html[dir="rtl"] :is(
    .page-hero,
    .editorial-index-hero,
    .editorial-hero,
    .dss-research-hero,
    .dss-research-detail-hero,
    .project-detail-hero
) p {
    line-height: 1.95 !important;
}

/* بطاقات الإحصاء أو الأغلفة الموجودة بجانب العنوان */
:is(
    .editorial-index-hero-stat,
    .editorial-hero-aside,
    .dss-research-hero-stat,
    .dss-research-detail-cover,
    .project-detail-hero-visual,
    .project-detail-hero-card,
    .unified-page-hero-card
) {
    position: relative !important;
    width: 100% !important;
    max-width: 300px !important;
    min-height: 185px !important;
    overflow: hidden !important;
    padding: 23px !important;
    border: 1px solid var(--dss-border) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .065) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(10px) !important;
}

:is(
    .dss-research-detail-cover,
    .project-detail-hero-visual
) img {
    width: 100% !important;
    height: 100% !important;
    max-height: 290px !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

/* ==================================================
   2. RESEARCH VIEWER BUTTONS
   ================================================== */

.research-viewer-head .research-actions,
.research-reader-actions,
.dss-research-detail-actions,
.dss-research-detail-hero .research-actions,
.research-edition-buttons,
.research-actions-stack {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    margin: 0 !important;
}

/* القاعدة الأساسية لكل الأزرار */
.research-viewer-head .research-actions > :is(a, button),
.research-reader-actions > :is(a, button),
.dss-research-detail-actions > :is(a, button),
.dss-research-detail-hero .research-actions > :is(a, button),
.research-edition-buttons > :is(a, button),
.research-actions-stack > :is(a, button) {
    position: relative !important;
    z-index: 2 !important;
    width: auto !important;
    min-width: 118px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #103c2c !important;
    -webkit-text-fill-color: #103c2c !important;
    font-family: inherit !important;
    font-size: .8rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    box-shadow: none !important;
}

/* إلغاء أي طبقة قديمة كانت تغطي نص الزر */
.research-viewer-head .research-actions > :is(a, button)::before,
.research-viewer-head .research-actions > :is(a, button)::after,
.research-reader-actions > :is(a, button)::before,
.research-reader-actions > :is(a, button)::after,
.dss-research-detail-actions > :is(a, button)::before,
.dss-research-detail-actions > :is(a, button)::after {
    content: none !important;
    display: none !important;
}

/* زر Download PDF */
.research-viewer-head .research-actions > :is(a, button):nth-child(3),
.research-viewer-head .research-actions > .btn-primary,
.research-viewer-head .research-actions > a[download],
.research-reader-actions > .btn-primary,
.dss-research-detail-actions > .btn-primary,
.dss-research-detail-actions > a[download],
.dss-research-detail-hero .research-actions > .btn-primary {
    border-color: #35a66f !important;
    background: #35a66f !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 9px 22px rgba(35, 145, 91, .21) !important;
}

/* Open in New Window */
.research-viewer-head .research-actions > :is(a, button):nth-child(4) {
    min-width: auto !important;
    padding-inline: 7px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #45bf7d !important;
    -webkit-text-fill-color: #45bf7d !important;
    box-shadow: none !important;
}

/* Hover */
.research-viewer-head .research-actions > :is(a, button):hover,
.research-reader-actions > :is(a, button):hover,
.dss-research-detail-actions > :is(a, button):hover,
.dss-research-detail-hero .research-actions > :is(a, button):hover,
.research-edition-buttons > :is(a, button):hover,
.research-actions-stack > :is(a, button):hover {
    border-color: #55ce8a !important;
    background: var(--dss-green-hover) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ==================================================
   3. TABLET
   ================================================== */

@media (max-width: 1099px) {
    :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) {
        min-height: auto !important;
        padding: 62px 0 54px !important;
    }

    :is(
        .editorial-index-hero-grid,
        .editorial-hero-grid,
        .dss-research-hero-grid,
        .dss-research-detail-hero-grid,
        .project-detail-hero-grid,
        .unified-page-hero-grid
    ) {
        grid-template-columns: 1fr !important;
        gap: 27px !important;
    }

    html[dir="ltr"] :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) h1 {
        font-size: clamp(2.35rem, 6vw, 3.25rem) !important;
    }

    html[dir="rtl"] :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) h1 {
        font-size: clamp(2.25rem, 5.8vw, 3.1rem) !important;
    }

    :is(
        .editorial-index-hero-stat,
        .editorial-hero-aside,
        .dss-research-hero-stat,
        .dss-research-detail-cover,
        .project-detail-hero-visual,
        .project-detail-hero-card,
        .unified-page-hero-card
    ) {
        width: min(100%, 480px) !important;
        max-width: 480px !important;
        min-height: 155px !important;
    }
}

/* ==================================================
   4. MOBILE
   ================================================== */

@media (max-width: 767px) {
    :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) {
        padding: 43px 0 38px !important;
    }

    :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) > .container,
    :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) .container {
        width: calc(100% - 28px) !important;
    }

    html[dir="ltr"] :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) h1 {
        max-width: 16ch !important;
        font-size: clamp(1.95rem, 8.8vw, 2.55rem) !important;
        line-height: 1.12 !important;
    }

    html[dir="rtl"] :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) h1 {
        max-width: 17ch !important;
        font-size: clamp(1.9rem, 8.5vw, 2.45rem) !important;
        line-height: 1.28 !important;
    }

    :is(
        .page-hero,
        .editorial-index-hero,
        .editorial-hero,
        .dss-research-hero,
        .dss-research-detail-hero,
        .project-detail-hero
    ) p {
        max-width: 35ch !important;
        margin-top: 13px !important;
        font-size: .91rem !important;
        line-height: 1.8 !important;
    }

    .research-viewer-head .research-actions,
    .research-reader-actions,
    .dss-research-detail-actions,
    .dss-research-detail-hero .research-actions,
    .research-edition-buttons,
    .research-actions-stack {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .research-viewer-head .research-actions > :is(a, button),
    .research-reader-actions > :is(a, button),
    .dss-research-detail-actions > :is(a, button),
    .dss-research-detail-hero .research-actions > :is(a, button),
    .research-edition-buttons > :is(a, button),
    .research-actions-stack > :is(a, button) {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .research-viewer-head .research-actions > :is(a, button):nth-child(4) {
        padding: 10px 16px !important;
        border: 1px solid rgba(82, 203, 137, .4) !important;
    }
}