/* =========================================================
   RED 2 RED — أنماط الصفحة الرئيسية فقط (front-page.php)
   ========================================================= */

/* ============ حماية التخطيط: تجبر كل قسم يوخذ العرض الكامل وينزل عمودي ============
   (تحمي من أي تعارض مع Elementor أو أي إضافة أخرى تفرض flex/grid) */
.red2red-home,
.red2red-home #hero,
.red2red-home #manifesto,
.red2red-home #gallery,
.red2red-home #categories,
.red2red-home #cta{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  clear:both !important;
  flex:none !important;
  grid-column:auto !important;
}
.red2red-home{ overflow-x:hidden; }

/* ============ هيدر شفاف عائم فوق البنر (يطابق التصميم الأصلي) ============ */
body.red2red-floating-header #masthead{
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:100;
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  transition:background .25s ease, box-shadow .25s ease;
}
body.red2red-floating-header.red2red-scrolled #masthead{
  background:rgba(11,11,12,.92) !important;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(0,0,0,.35) !important;
}
body.red2red-floating-header .ast-primary-header-bar{
  background:transparent !important;
  border-bottom:0 !important;
  margin:0 !important;
  min-height:96px !important;
}
body.red2red-floating-header .main-header-menu .menu-item{ line-height:96px !important; }
body.red2red-floating-header .site-branding{ padding:.5em 0 !important; display:flex !important; align-items:center !important; }
body.red2red-floating-header .custom-logo{ max-height:84px !important; width:auto !important; height:auto !important; object-fit:contain !important; }
body.red2red-floating-header #content{ margin-top:0 !important; }
body.red2red-floating-header #hero{ padding-top:6rem; }

/* تجميع الشعار + القائمة بمنتصف الهيدر فعلياً، بدل الاعتماد على عرض الحاوية بس
   (نلغي التوزيع التلقائي space-between ونحط justify-content:center + gap يدوي) */
body.red2red-floating-header .ast-primary-header-bar .ast-container{
  max-width:1280px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3.5rem !important;
}
/* نمنع قسمي الشعار والقائمة من التمدد (flex-grow) حتى ينلزقون بالوسط مو بالأطراف */
body.red2red-floating-header .site-header-primary-section-left,
body.red2red-floating-header .site-header-primary-section-right,
body.red2red-floating-header .ast-site-identity{
  flex:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}
/* تقليل المسافة بين عناصر القائمة نفسها (كانت متباعدة جداً) */
body.red2red-floating-header .main-header-menu{
  gap:.3rem !important;
}
body.red2red-floating-header .main-header-menu .menu-item > a{
  padding-left:.9rem !important;
  padding-right:.9rem !important;
}

/* ============ البنر يمتد لعرض الشاشة الكامل (يكسر حاوية أسترا المحدودة) ============ */
body.red2red-floating-header #content .ast-container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin:0 !important;
}
/* الهيرو يحتاج flex داخلياً حتى يدفع الأزرار والأفاتار لأسفل الصفحة، نستثنيه من التصحيح العام */
.red2red-home #hero{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}

/* ============ الأزرار الأساسية (تستخدم بالهيرو وCTA) ============ */
.btn{
  font-family:'Cairo',sans-serif; font-weight:800; font-size:.95rem; padding:1em 2.1em; border-radius:100px;
  display:inline-flex; align-items:center; gap:.6em; transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none;
}
.btn-primary{ background:var(--red); color:var(--paper); box-shadow:4px 4px 0 var(--acid); }
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--acid); }
.btn-ghost{ border:2px solid var(--paper); color:var(--paper); background:transparent; }
.btn-ghost:hover{ background:var(--paper); color:var(--ink); }

/* ============ شريط تقدّم السكرول ============ */
#progress{
  position:fixed; top:0; right:0; height:3px; width:100%; background:var(--red);
  transform-origin:right; transform:scaleX(0); z-index:1000; pointer-events:none;
}

/* ============ الهيرو ============ */
#hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:76px; padding-bottom:6.5rem; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(227,30,36,.28), transparent 70%),
    var(--ink);
}
#hero .halftone-layer{ position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:0; }
#orbit-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hero-grid{ position:relative; z-index:3; width:100%; text-align:center; padding:2.5rem 6vw 4rem; }
.hero-avatar{ display:flex; justify-content:center; margin-bottom:1rem; }
.hero-avatar img{ max-width:420px; width:80%; filter:drop-shadow(0 20px 40px rgba(227,30,36,.45)); }
.hero-actions{ margin-top:1.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:4; }
.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:'Cairo'; font-size:.7rem;
  letter-spacing:.12em; color:var(--paper); opacity:.6;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--paper), transparent); animation:red2red-cue 1.8s ease infinite; }
@keyframes red2red-cue{ 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

.stray{ position:absolute; z-index:3; width:86px; filter:drop-shadow(0 10px 14px rgba(0,0,0,.5)); pointer-events:none; transition:transform .5s ease; }
.stray img{ width:100%; }

/* ============ شل عام للأقسام ============ */
section{ position:relative; }
.pin-stage{ min-height:100svh; display:flex; align-items:center; overflow:hidden; }

/* ============ المانيفستو ============ */
#manifesto{ background:var(--ink); border-top:1px solid var(--line); }
.manifesto-inner{ direction:rtl; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; width:100%; padding:8rem 0; }
.manifesto-card{
  background:var(--paper); color:var(--ink); border-radius:6px; padding:3rem 2.6rem;
  position:relative; transform:rotate(-3deg); box-shadow:14px 18px 0 var(--red-dark);
}
.manifesto-card h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:1rem; color:var(--ink); }
.manifesto-card h2 em{ font-style:normal; color:var(--red); }
.manifesto-card p{ font-size:1rem; line-height:1.95; color:#2b2620; }
.manifesto-card .stamp{
  position:absolute; top:-22px; left:-22px; width:84px; height:84px; border-radius:50%;
  border:3px dashed var(--red); display:flex; align-items:center; justify-content:center;
  font-family:'Cairo'; font-weight:900; font-size:.62rem; text-align:center; color:var(--red);
  background:var(--paper); transform:rotate(-14deg); line-height:1.2;
}
.manifesto-facts{ display:flex; flex-direction:column; gap:1.6rem; }
.fact{ display:flex; align-items:flex-start; gap:1.1rem; border-bottom:1px solid var(--line); padding-bottom:1.4rem; }
.fact .num{ font-family:'Cairo'; font-weight:900; font-size:2.1rem; color:var(--red); min-width:64px; }
.fact h3{ font-size:1.05rem; margin-bottom:.35em; color:var(--paper); }
.fact p{ font-size:.9rem; color:var(--paper); opacity:.7; line-height:1.7; }
@media (max-width:880px){
  .manifesto-inner{ grid-template-columns:1fr; padding:6rem 0; gap:3rem; }
  .manifesto-card{ transform:rotate(-1.5deg); }
}

/* ============ المعرض (Arc) — تخطيط ثابت بـ CSS بدل JS ============ */
#gallery{ background:var(--ink-2); border-top:1px solid var(--line); overflow:hidden; }
.gallery-stage{ width:100%; padding:7rem 0 5rem; }
.gallery-head{ text-align:center; margin-bottom:1rem; }
.gallery-head h2{ font-size:clamp(2.4rem,6vw,5rem); color:var(--paper); }
.gallery-head h2 span{ color:var(--acid); }
.arc-wrap{
  position:relative; height:280px; margin:3rem auto 0; max-width:1100px;
  display:flex; align-items:center; justify-content:center; gap:0;
  direction:rtl;
}
.arc-item{ width:150px; height:150px; margin:0 -18px; transition:transform .3s ease, z-index 0s; }
.arc-item:nth-child(1){ transform:rotate(-24deg) translateY(30px); z-index:1; }
.arc-item:nth-child(2){ transform:rotate(-16deg) translateY(14px); z-index:2; }
.arc-item:nth-child(3){ transform:rotate(-8deg) translateY(4px); z-index:3; }
.arc-item:nth-child(4){ transform:rotate(0deg) translateY(0); z-index:4; }
.arc-item:nth-child(5){ transform:rotate(8deg) translateY(4px); z-index:3; }
.arc-item:nth-child(6){ transform:rotate(16deg) translateY(14px); z-index:2; }
.arc-item:nth-child(7){ transform:rotate(24deg) translateY(30px); z-index:1; }
.arc-item:hover{ transform:translateY(-16px) scale(1.06) !important; z-index:9 !important; }
.arc-item .card{
  width:100%; height:100%; background:var(--paper); border-radius:14px; padding:16px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 18px 30px rgba(0,0,0,.45);
  transition:box-shadow .25s ease;
}
.arc-item img{ width:100%; height:100%; object-fit:contain; }
.arc-item .card:hover{ box-shadow:0 22px 40px rgba(227,30,36,.35); }
.gallery-note{ text-align:center; max-width:520px; margin:2.5rem auto 0; color:var(--paper); opacity:.65; font-size:.95rem; line-height:1.8; }
@media (max-width:760px){
  .arc-wrap{ flex-wrap:wrap; height:auto; gap:1rem; }
  .arc-item{ transform:none !important; margin:0; width:110px; height:110px; }
}

/* ============ الفئات ============ */
#categories{ background:var(--ink); border-top:1px solid var(--line); }
.cat-stage{ width:100%; padding:7rem 0; }
.cat-head{ margin-bottom:3rem; max-width:640px; }
.cat-head h2{ font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:.6rem; color:var(--paper); }
.cat-head p{ color:var(--paper); opacity:.7; line-height:1.8; }
.cat-grid{ direction:rtl; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.cat-tile{
  position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line);
  clip-path:polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  display:block;
}
.cat-tile .bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:2.4rem; }
.cat-tile .bg img{ width:auto; height:auto; max-width:55%; max-height:45%; object-fit:contain; opacity:.9; filter:drop-shadow(0 14px 20px rgba(0,0,0,.5)); transition:transform .35s ease; }
.cat-tile:hover .bg img{ transform:scale(1.08) rotate(-4deg); }
.cat-tile .shade{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.88) 100%); }
.cat-tile .info{ position:absolute; right:1.4rem; bottom:1.3rem; left:1.4rem; }
.cat-tile .info .k{ font-family:'Cairo'; font-weight:700; font-size:.72rem; letter-spacing:.12em; color:var(--acid); }
.cat-tile .info h3{ font-size:1.5rem; color:var(--paper); margin-top:.3rem; }
@media (max-width:880px){ .cat-grid{ grid-template-columns:1fr; } }

/* ============ CTA ============ */
#cta{
  background:var(--red); color:var(--ink); padding:8rem 0 6rem; position:relative; overflow:hidden;
  clip-path:polygon(0 5%, 100% 0, 100% 100%, 0 100%);
}
#cta .wrap{ text-align:center; position:relative; z-index:2; }
#cta h2{ font-size:clamp(2.6rem,7vw,5.4rem); color:var(--ink); }
#cta h2 span{ color:var(--paper); }
#cta p{ margin:1.4rem auto 2.2rem; max-width:480px; font-size:1.05rem; color:rgba(11,11,12,.75); line-height:1.85; }
#cta .btn-primary{ background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--paper); }
#cta .btn-primary:hover{ box-shadow:6px 6px 0 var(--paper); }
.cta-marquee{
  position:absolute; bottom:1.4rem; right:0; left:0; white-space:nowrap; opacity:.5;
  font-family:'Cairo'; font-weight:900; font-size:1.1rem; color:var(--ink); letter-spacing:.08em;
}
.cta-marquee span{ display:inline-block; padding-left:2rem; }