/**
 * home.css — هيكل الصفحة الرئيسية والتخطيطات
 * الملفات المرافقة: cards.css | slider.css | tabs.css
 * @package SW_Theme @version 4.1.0
 * @edit: جعل القائمة الجانبية مطوية افتراضياً في الجوال (max-width:860px)
 */

/* ═══ 1. المتغيرات ═══════════════════════════════════════════════════════ */
:root {
  --sw-primary:#1a2b5c;--sw-primary-dk:#101836;--sw-primary-mid:#2a4b8c;
  --sw-primary-lt:#eef3fd;--sw-red:#d32f2f;--sw-gold:#f9a826;
  --sw-white:#ffffff;--sw-bg:#f5f6fa;--sw-gray-50:#fafafa;
  --sw-gray-100:#f1f3f5;--sw-gray-200:#e2e8f0;--sw-gray-400:#9aa6b2;
  --sw-gray-600:#4a5568;--sw-gray-900:#1a202c;
  --sw-radius:6px;--sw-radius-lg:10px;--sw-tr:0.22s ease;
  --sw-shadow-sm:0 2px 6px rgba(0,0,0,.05);
  --sw-shadow-md:0 6px 18px rgba(0,0,0,.08);
  --sw-shadow-lg:0 12px 32px rgba(0,0,0,.10);
  --sw-container:1320px;--sw-sidebar-w:300px;
}

/* ═══ 2. حاوية وأقسام ════════════════════════════════════════════════════ */
.sw-container{max-width:var(--sw-container);margin:0 auto;padding:0 20px}
.sw-section{padding:40px 0}
.sw-section-gray{background:var(--sw-bg)}

/* ═══ 3. رأس القسم ═══════════════════════════════════════════════════════ */
.sw-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:12px;border-bottom:3px solid var(--sw-primary);position:relative}
.sw-section-header::after{content:'';position:absolute;bottom:-3px;right:0;width:60px;height:3px;background:var(--sw-red)}
.sw-section-title{font-size:1.35rem;font-weight:900;color:var(--sw-primary-dk);margin:0;letter-spacing:-0.02em}
.sw-section-more{color:var(--sw-primary);font-size:.875rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color var(--sw-tr);white-space:nowrap}
.sw-section-more:hover{color:var(--sw-red)}
.sw-col .sw-section-header{margin-bottom:16px;padding-bottom:8px;border-bottom-width:2px}
.sw-col .sw-section-title{font-size:1.05rem}

/* ═══ 4. شبكات الأعمدة ══════════════════════════════════════════════════ */
.sw-grid-1{display:grid;grid-template-columns:1fr;gap:20px}
.sw-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sw-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sw-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ═══ 5. FEATURED ════════════════════════════════════════════════════════ */
.sw-featured-layout{display:grid;grid-template-columns:1fr;gap:28px}
.sw-featured-grid{display:grid;gap:20px}

/* ═══ 6. TICKER ══════════════════════════════════════════════════════════ */
.sw-ticker{background:var(--sw-red);display:flex;align-items:center;overflow:hidden;max-width:100%}
.sw-ticker-label{background:var(--sw-primary-dk);color:#fff;font-size:.82rem;font-weight:900;padding:9px 16px;white-space:nowrap;flex-shrink:0;letter-spacing:.03em}
.sw-ticker-wrap{overflow:hidden;flex:1}
.sw-ticker-track{display:flex;gap:36px;animation:sw-ticker-scroll linear infinite;white-space:nowrap;width:max-content}
.sw-ticker-item{color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;padding:9px 0;display:inline-block}
.sw-ticker-item:hover{text-decoration:underline}
.sw-ticker-item::before{content:'◈ ';opacity:.6}
@keyframes sw-ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══ 7. TWO COLUMNS ═════════════════════════════════════════════════════ */
.sw-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.sw-col{min-width:0}

/* ═══ 8. COLUMN SIDEBAR — تخطيط كامل ═══════════════════════════════════ */
.sw-column-sidebar{
  display:grid;
  grid-template-columns:1fr var(--sw-sidebar-w);
  gap:32px;
  align-items:start;
}
.sw-col-main{min-width:0}
.sw-col-sidebar{min-width:0}

/* زر toggle الجوال — مخفي افتراضياً على الشاشات الكبيرة */
.sw-sidebar-toggle{
  display:none;
  align-items:center;justify-content:space-between;
  width:100%;padding:10px 16px;
  background:var(--sw-primary-lt);
  border:1px solid var(--sw-gray-200);
  border-radius:var(--sw-radius);
  font-size:.9rem;font-weight:700;color:var(--sw-primary);
  cursor:pointer;margin-bottom:12px;
  font-family:inherit;transition:background var(--sw-tr);
}
.sw-sidebar-toggle:hover{background:var(--sw-primary);color:#fff}
.sw-sidebar-toggle-icon{font-size:.8rem;transition:transform var(--sw-tr)}
.sw-sidebar-toggle[aria-expanded="true"] .sw-sidebar-toggle-icon{transform:rotate(180deg)}

/* الجسم القابل للطي — بدون أي قيم افتراضية على الشاشات الكبيرة (يظهر بشكل طبيعي) */
.sw-col-sidebar-body{}

.sw-sidebar-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:1rem;font-weight:800;color:var(--sw-primary-dk)}
.sw-sidebar-hdr-line{width:4px;height:18px;background:var(--sw-red);border-radius:2px;flex-shrink:0}

/* ═══ 9. MAGAZINE ════════════════════════════════════════════════════════ */
.sw-magazine{display:grid;grid-template-columns:1fr 290px;gap:24px;margin-bottom:24px}
.sw-magazine-main{min-width:0}
.sw-magazine-side{display:flex;flex-direction:column;border-right:3px solid var(--sw-primary);padding-right:18px}

/* ═══ 10. BIG + SMALL ════════════════════════════════════════════════════ */
.sw-big-small{display:flex;gap:20px;align-items:flex-start}

/* ═══ 11. GRID + SIDEBAR ═════════════════════════════════════════════════ */
.sw-gs-wrap{display:flex;gap:28px;align-items:flex-start}
.sw-gs-grid{flex:1;min-width:0}
.sw-gs-sidebar{flex:0 0 280px;min-width:0;border-right:3px solid var(--sw-primary);padding-right:20px}

/* ═══ 12. MOSAIC ═════════════════════════════════════════════════════════ */
.sw-mosaic{display:grid;gap:16px}
.sw-mosaic--classic{grid-template-columns:1.5fr 1fr}
.sw-mosaic--classic .sw-mosaic-big{grid-row:span 2;min-height:400px}
.sw-mosaic--classic .sw-mosaic-big .sw-card{height:100%}
.sw-mosaic--classic .sw-mosaic-big .sw-card-img{height:100%;aspect-ratio:auto}
.sw-mosaic-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sw-mosaic--featured{display:flex;flex-direction:column;gap:16px}
.sw-mosaic-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sw-mosaic--balanced{grid-template-columns:1.5fr 1fr}
.sw-mosaic-mid{display:flex;flex-direction:column;gap:16px}
.sw-mosaic-smalls{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sw-side-stacked{display:flex;gap:20px;align-items:flex-start}
.sw-side-stacked>div:first-child{flex:0 0 45%;min-width:0}
.sw-side-stacked>div:last-child{flex:1;min-width:0}

/* ═══ 13. reveal ══════════════════════════════════════════════════════════ */
.sw-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.sw-reveal.sw-visible{opacity:1;transform:translateY(0)}

/* ═══ 14. سياق الأعمدة ═══════════════════════════════════════════════════ */
.sw-col-sidebar .sw-grid-2,.sw-col-sidebar .sw-grid-3,.sw-col-sidebar .sw-grid-4,
.sw-col-sidebar .sw-modern-grid,.sw-col-sidebar .sw-video-grid,
.sw-col-sidebar .sw-interviews-grid,.sw-col-sidebar .sw-quotes-grid,
.sw-col-sidebar .sw-overlay-enhanced-grid{grid-template-columns:1fr}

.sw-col-sidebar .sw-mosaic--classic,
.sw-col-sidebar .sw-mosaic--balanced{grid-template-columns:1fr}
.sw-col-sidebar .sw-mosaic--classic .sw-mosaic-big{grid-row:auto;min-height:200px}
.sw-col-sidebar .sw-mosaic-grid,.sw-col-sidebar .sw-mosaic-row{grid-template-columns:1fr 1fr;gap:10px}

.sw-col-sidebar .sw-side-stacked,.sw-col-sidebar .sw-big-small{flex-direction:column}
.sw-col-sidebar .sw-side-stacked>div,.sw-col-sidebar .sw-big-small>div{flex:none!important;width:100%!important}
.sw-col-sidebar .sw-card--large .sw-card-img{max-height:200px}
.sw-col-sidebar .overlay-grid-container{grid-template-columns:1fr 1fr}
.sw-col-sidebar .overlay-main{grid-column:span 2;min-height:180px}
.sw-col-sidebar .overlay-card{min-height:100px}

.sw-col .sw-grid-3,.sw-col .sw-grid-4{grid-template-columns:repeat(2,1fr)}
.sw-col .sw-tab-onebig{flex-direction:column}
.sw-col .sw-tab-onebig-main{max-width:100%;flex:none}

/* ═══ 15. أنماط الأقسام ═══════════════════════════════════════════════════ */
.sw-section-dark{background:var(--sw-primary-dk);color:#fff}
.sw-section-black{background:#0d0d0d;color:#eee}
.sw-section-dark .sw-section-title{color:#fff}
.sw-section-black .sw-section-title{color:#eee}
.sw-section-dark .sw-card{background:rgba(255,255,255,.07);color:#fff}
.sw-section-black .sw-card{background:rgba(255,255,255,.06)}
.sw-section-dark .sw-card-title a{color:#fff}
.sw-section-black .sw-card-title a{color:#eee}
.sw-section-dark .sw-card-title a:hover{color:var(--sw-gold)}
.sw-section-dark .sw-card-meta{color:rgba(255,255,255,.55)}
.sw-section-black .sw-card-meta{color:rgba(255,255,255,.45)}
.sw-section-dark .sw-card-excerpt{color:rgba(255,255,255,.7)}
.sw-section-dark .sw-section-header{border-bottom-color:rgba(255,255,255,.15)}
.sw-section-black .sw-section-header{border-bottom-color:rgba(255,255,255,.1)}
.sw-section-dark .sw-section-header::after{background:var(--sw-gold)}
.sw-section-dark .sw-section-more{color:var(--sw-gold)}
.sw-section-dark .sw-list-item{background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.08)}
.sw-section-dark .sw-list-title a,.sw-section-dark .sw-num-title{color:#fff}
.sw-section-dark .sw-numbered-item{background:rgba(255,255,255,.06)}
.sw-section-dark .sw-compact-title{color:rgba(255,255,255,.9)}
.sw-section-dark .sw-compact-item{border-bottom-color:rgba(255,255,255,.08)}
.sw-text-light,.sw-text-light .sw-card-title a,.sw-text-light .sw-section-title{color:#fff!important}
.sw-text-light .sw-card-meta,.sw-text-light .sw-card-excerpt{color:rgba(255,255,255,.65)!important}
.sw-section-compact{padding:20px 0}
.sw-section-wide{padding:72px 0}
.sw-section-no-pad{padding:0}

/* ═══ 16. Responsive ══════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .sw-magazine{grid-template-columns:1fr 250px}
  .sw-column-sidebar{grid-template-columns:1fr 260px}
}

@media(max-width:860px){
  /* جعل التخطيط عموديًا */
  .sw-column-sidebar{grid-template-columns:1fr;gap:0}
  
  /* إظهار زر التبديل */
  .sw-sidebar-toggle{display:flex}
  
  /* تنسيق حاوية الشريط الجانبي */
  .sw-col-sidebar{border-top:3px solid var(--sw-primary);padding-top:16px;margin-top:24px}
  
  /* ⚠️ القاعدة الأساسية: القائمة الجانبية مطوية افتراضياً (مخفية) */
  .sw-col-sidebar-body{
    overflow:hidden;
    max-height:0;
    transition:max-height .38s ease;
  }
  
  /* عند إضافة data-open="true" (عبر JavaScript) يتم فتح القائمة */
  .sw-col-sidebar[data-open="true"] .sw-col-sidebar-body{
    max-height:3000px;  /* قيمة كبيرة كافية لظهور كل المحتوى */
  }
  
  /* باقي التعديلات responsiveness */
  .sw-two-cols{grid-template-columns:1fr;gap:32px}
  .sw-magazine{grid-template-columns:1fr}
  .sw-mosaic--classic,.sw-mosaic--balanced{grid-template-columns:1fr}
  .sw-mosaic--classic .sw-mosaic-big{grid-row:auto;min-height:280px}
  .sw-mosaic-row{grid-template-columns:repeat(2,1fr)}
  .sw-big-small{flex-direction:column!important}
  .sw-big-small>div{flex:none!important;width:100%!important}
  .sw-gs-wrap{flex-direction:column!important}
  .sw-gs-sidebar{flex:none!important;width:100%!important;border-right:none;padding-right:0;border-top:3px solid var(--sw-primary);padding-top:16px}
  .sw-side-stacked{flex-direction:column!important}
  .sw-side-stacked>div{flex:none!important;width:100%!important}
  .sw-grid-3,.sw-grid-4{grid-template-columns:repeat(2,1fr)}
  .sw-col-sidebar .sw-grid-2{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .sw-section{padding:28px 0}
  .sw-grid-2,.sw-grid-3,.sw-grid-4{grid-template-columns:1fr}
  .sw-numbered-cols-2,.sw-compact-cols-2,.sw-compact-cols-3{grid-template-columns:1fr}
  .sw-mosaic-row,.sw-mosaic-smalls{grid-template-columns:1fr}
  .sw-col-sidebar .sw-grid-2{grid-template-columns:1fr}
}