/*========================================
      ARTICLE HERO
========================================*/

.article-hero{
    position:relative;
    width:100%;
  height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.05);
    z-index:2;
}

.hero-content{

    position:relative;
    z-index:3;

    max-width:600px;

    padding:40px;
	
	padding-top:150px;

    margin-left:8%;

    text-align:left;

}

.article-category{
    display:inline-block;
    padding:10px 24px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    color:#d7b86e;
    letter-spacing:3px;
    font-size:.85rem;
    margin-bottom:30px;
}

.article-02 .article-category{
    margin-top:100px;
}


.article-hero h1{
    color:#fff;
    font-size:3.4rem;
    line-height:1.15;
    margin-bottom:25px;
    font-family:"Forum", serif;
    font-weight:400;
    text-shadow:0 4px 20px rgba(0,0,0,.35);
}

.article-description{
    color:#eee;
    font-size:1.2rem;
    line-height:1.9;
    max-width:700px;
	margin-top:15px;
}

.article-meta{
    margin-top:55px;
    display:flex;
    justify-content:flex-start;
    gap:35px;
    flex-wrap:wrap;
    color:#d8d8d8;
    font-size:.95rem;
}

.article-meta span{
    display:flex;
    align-items:center;
    gap:10px;
}

.article-meta i{
    color:#c7a85c;
}

.scroll-down{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    margin-top:40px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    font-size:1.4rem;
    text-decoration:none;
    transition:.35s;
    animation:floatArrow 2s infinite;
	margin-left:0;
}

.scroll-down:hover{
    background:#c7a85c;
    border-color:#c7a85c;
    color:#fff;
}

@keyframes floatArrow{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(10px);
    }

}

@media(max-width:768px){

    .article-hero h1{
        font-size:2.5rem;
    }

    .article-description{
        font-size:1rem;
    }

    .hero-content{
        padding:25px;
    }

    .article-meta{
        gap:18px;
        font-size:.85rem;
    }

}

/*========================================
        ARTICLE CONTENT
========================================*/

.article-content{
    background:
        url("../images/backgrounds/paper-bg.jpg")
        center top / cover no-repeat;
}


.article-container{

    width:min(900px,90%);

    margin:auto;

}

.intro-text{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    line-height:1.7;

    text-align:center;

    color:#444;

    max-width:900px;

    margin:auto;

}

html{
    scroll-behavior:smooth;
}

/*========================================
        ARTICLE IMAGE
========================================*/

.article-image{

    padding:0 0 120px;

}

.full-image{

    width:100%;

    display:block;

    border-radius:20px;

    box-shadow:0 25px 70px rgba(0,0,0,.18);

}

/*========================================
        ARTICLE BANNER
========================================*/

.article-banner{

    width:100%;
	
	margin-top:-6px;

    padding:0;

}

.article-banner img{

    width:100%;

    display:block;

}

/*========================================
            STORY SECTION
========================================*/

.story-section{

    padding:70px 0;

}

.story-grid{

    width:min(1250px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.45fr;

    gap:70px;

    align-items:center;

}

@media (max-width:900px){

.story-grid{

grid-template-columns:1fr;

}

.story-grid.reverse{

transform:none;

}

.story-image{

width:100%;
height:auto;

}

.story-title{

font-size:2.7rem;

}

}

.story-text{

    background:transparent;

    backdrop-filter:none;

    border:none;

    border-radius:0;

    padding:0;

    box-shadow:none;

}






.story-grid.reverse{

    transform:translateY(-150px);

}

/*=============================
        STORY TYPOGRAPHY
==============================*/

.story-badge{
    display: inline-block;

    font-family:"Forum", serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2px;
    

    color: #9b7a3b;

    padding-bottom: 12px;
    margin-bottom: 18px;

    border-bottom: 1px solid rgba(155,122,59,.45);
}

.story-title{

    font-family:"Forum",serif;

    font-size:3rem;

    font-weight:400;

    line-height:1.08;

    color:#2f2418;

    margin-bottom:30px;

}

.story-divider{
    display: none;
}

.story-text p{

    font-family: 'Cormorant Garamond', serif;
	
    font-style: italic;

    font-size:1.35rem;

    line-height:2;

    color:#5d5449;

    margin-bottom:20px;

}

.story-text p:first-of-type::first-letter{

    float:left;

    font-family:"Forum",serif;

    font-size:4rem;

    line-height:.8;

    color:#b78d43;

    padding-right:8px;

}

.section-ornament{

    display:flex;
    justify-content:center;
    align-items:center;

   
}

.ornament-1{
    margin-top:40px;
    margin-bottom:80px;
}

.ornament-2{
    margin-top:-110px;   /* تتحكم فى الثانية فقط */
    margin-bottom:80px;
}

.ornament-3{
    margin-top:-30px;   /* تتحكم فى الثانية فقط */
    margin-bottom:10px;
}

.section-ornament img{

    width:250px;
    height:auto;
    display:block;

}

.story-image{

    width:100%;
max-width:700px;
    height:520px;

    border-radius:32px;
    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.story-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:50% 20%;

    display:block;

}

.last-section{
    margin-top:-150px;
}

/*========================================
          VIEW FULL PROJECT
========================================*/

.project-cta{

    display:flex;
    justify-content:center;
    align-items:center;
    padding: 16px 34px;
    margin:25px 0 70px;
 
}

.project-btn{

    display:inline-flex;
    align-items:center;
    gap:14px;

    padding:18px 42px;

    background:#1f4b3b;
    color:#fff;

    text-decoration:none;

    font-family:"Forum", serif;
    font-size:1.35rem;
    letter-spacing:.5px;

    border-radius:60px;

    box-shadow:0 10px 28px rgba(0,0,0,.18);

    transition:.35s ease;

}

.project-btn i{

    transition:.35s ease;

}

.project-btn:hover{

    background:#295846;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(0,0,0,.22);

}

.project-btn:hover i{

    transform:translateX(6px);

}

/*========================================
        SCROLL REVEAL
========================================*/

.reveal{

    opacity:0;

    transition:
        opacity .9s ease,
        transform .9s ease;

    will-change:transform, opacity;

}

/* من اليسار */

.reveal-left{

    transform:translateX(-70px);

}

/* من اليمين */

.reveal-right{

    transform:translateX(70px);

}

/* من أسفل */

.reveal-up{

    transform:translateY(60px);

}

/* Fade فقط */

.reveal-fade{

    transform:scale(.95);

}

/* بعد الظهور */

.reveal.active{

    opacity:1;

    transform:none;

}

/* ==========================================
   ARTICLE — VIEW THIS ARTWORK BUTTON
========================================== */

.project-cta .footer-btn{
    width:240px;
    height:48px;
    gap:12px;
    white-space:nowrap;
    font-size:20px;
}

.project-cta .footer-btn span{
    white-space:nowrap;
}

.project-cta .footer-btn i{
    font-size:18px;
    margin-right:0;
}


/* =========================================================
   ARTICLE — MOBILE FINAL FIX
   Keep mobile adjustments here, not inside article HTML.
   ========================================================= */

@media (max-width:600px){

    /* Keep language/navigation links clickable above visual layers */
    .header,
    .header nav,
    .header .flags,
    .header .flag,
    .header .flag a{
        position:relative;
        z-index:10000 !important;
        pointer-events:auto !important;
    }

    /* Final artwork button: visible and clickable */
    .project-cta{
        position:relative !important;
        z-index:10000 !important;
        pointer-events:auto !important;
    }

    .project-cta .footer-btn{
        position:relative !important;
        z-index:10001 !important;
        pointer-events:auto !important;
        display:inline-flex !important;
        width:300px !important;
        min-width:300px !important;
        height:48px !important;
        box-sizing:border-box !important;
        align-items:center !important;
        justify-content:center !important;
    }

    /* Third ornament: move ONLY the ornament image 95px upward.
       This is the final position requested before the button fix. */
    .ornament-3 img{
        position:relative !important;
        top:-95px !important;
        transform:none !important;
        animation:none !important;
        transition:none !important;
    }

}