/**
 * slider.css — السلايدرات والكاروسيل وشبكات الـ Grid
 * يغطي: hero slider, simple slider, group slider, carousel, grid-bg sliders
 * @package SW_Theme
 * @version 4.1.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO SLIDER
   ═══════════════════════════════════════════════════════════════════════════ */
.sw-hero { background: var(--sw-primary-dk); overflow: hidden; }

.sw-hero-wrapper {
  max-width: var(--sw-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr var(--sw-sidebar-w);
  min-height: 480px;
}

.sw-slider-container { position: relative; overflow: hidden; }

.sw-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.77,0,0.18,1);
}

.sw-slide { min-width: 100%; position: relative; cursor: pointer; }

.sw-slide-img,
.sw-slide-img img,
.sw-slide-img picture { height: 480px; object-fit: cover; display: block; width: 100%; }

.sw-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,16,48,.90) 0%, rgba(10,16,48,.35) 55%, transparent 100%);
}

.sw-slide-content {
  position: absolute; bottom: 0; right: 0; left: 0;
  padding: 28px 32px;
}

.sw-slide-cat {
  display: inline-block;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.sw-slide-title {
  font-size: 1.65rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sw-slide-meta {
  color: rgba(255,255,255,.65);
  font-size: 0.85rem;
  display: flex;
  gap: 14px;
  align-items: center;
}

/* أسهم وأدوات التنقل */
.sw-slider-arrows {
  position: absolute;
  bottom: 24px; left: 24px;
  display: flex; gap: 6px; z-index: 3;
}

.sw-slider-arrow {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer;
  font-size: 1.1rem;
  display: grid; place-items: center;
  transition: all var(--sw-tr);
  backdrop-filter: blur(4px);
}

.sw-slider-arrow:hover { background: var(--sw-red); border-color: var(--sw-red); }

.sw-slider-controls {
  position: absolute;
  bottom: 32px; right: 24px;
  display: flex; gap: 7px; align-items: center; z-index: 3;
}

.sw-slider-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  border: none; cursor: pointer; padding: 0;
  transition: all var(--sw-tr);
}

.sw-slider-dot.sw-active {
  background: var(--sw-red);
  width: 22px; border-radius: 4px;
}

/* الشريط الجانبي للـ Hero */
.sw-hero-sidebar {
  background: var(--sw-white);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--sw-gray-200);
}

.sw-hero-sidebar-header {
  background: var(--sw-primary);
  color: #fff;
  padding: 13px 18px;
  font-size: 0.875rem;
  font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}

.sw-hero-sidebar-header span {
  width: 8px; height: 8px;
  background: var(--sw-red);
  border-radius: 50%;
  animation: sw-pulse 1.2s infinite;
  flex-shrink: 0;
}

@keyframes sw-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.8); }
}

.sw-sidebar-news-list { flex: 1; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. CAROUSEL أفقي
   ═══════════════════════════════════════════════════════════════════════════ */
.sw-carousel-wrap { position: relative; overflow: hidden; }

.sw-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.sw-carousel-track::-webkit-scrollbar { display: none; }

.sw-car-card {
  flex: 0 0 auto;
  background: var(--sw-white);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--sw-tr);
}

.sw-car-card:hover { box-shadow: var(--sw-shadow-md); }
.sw-car-card .sw-card-body { padding: 10px 12px 12px; }

.sw-car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sw-white);
  border: 1px solid var(--sw-gray-200);
  box-shadow: var(--sw-shadow-sm);
  cursor: pointer; z-index: 2;
  display: grid; place-items: center;
  font-size: 1.2rem; color: var(--sw-primary);
  transition: all var(--sw-tr);
}

.sw-car-btn:hover { background: var(--sw-red); color: #fff; border-color: var(--sw-red); }
.sw-car-prev { right: -16px; }
.sw-car-next { left: -16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. السلايدر الأساسي (sw_slider)
   ═══════════════════════════════════════════════════════════════════════════ */
.sw-slider { position: relative; overflow: hidden; }
.sw-slider .slider-track { display: flex; transition: transform .4s ease; }
.sw-slider .slider-slide { flex: 0 0 100%; }

.sw-slider .slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  background: rgba(0,0,0,.48); color: #fff;
  border: none; border-radius: 50%; cursor: pointer;
  z-index: 3; font-size: 1.3rem;
  display: grid; place-items: center;
  transition: background .2s;
}

.sw-slider .slider-btn:hover { background: var(--sw-red); }
.sw-slider .slider-prev { left: 16px; }
.sw-slider .slider-next { right: 16px; }
[dir="rtl"] .sw-slider .slider-prev { left: auto; right: 16px; }
[dir="rtl"] .sw-slider .slider-next { right: auto; left: 16px; }

.sw-slider .slider-dots {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 3;
}

.sw-slider .slider-dots .dot {
  width: 9px; height: 9px;
  background: rgba(255,255,255,.48);
  border: none; border-radius: 50%; padding: 0; cursor: pointer;
  transition: all .2s;
}

.sw-slider .slider-dots .dot.active { background: var(--sw-red); transform: scale(1.2); }

/* ═══════════════════════════════════════════════════════════════════════════
   4. سلايدر المجموعات (sw_group_slider)
   ═══════════════════════════════════════════════════════════════════════════ */
.sw-group-slider { position: relative; }
.sw-group-slider .slider-slick-wrapper { overflow: hidden; }
.sw-group-slider .slider-track { display: flex; transition: transform .5s ease; }
.sw-group-slider .slide-group { flex: 0 0 100%; max-width: 100%; }

.slider-area-inner { position: relative; }

.sw-slider-nav {
  list-style: none; padding: 0; margin: 0;
  position: absolute; top: 50%; width: 100%;
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
  pointer-events: none;
}

.sw-slider-nav li {
  pointer-events: auto;
  width: 38px; height: 38px;
  background: rgba(0,0,0,.48); color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s;
  margin: 0 12px;
}

.sw-slider-nav li:hover { background: var(--sw-red); }

/* fa icons fallback */
.sw-slider-nav li i[class*="fa-angle"] { font-style: normal; font-size: 1.2rem; line-height: 1; }
.sw-slider-nav li .fa-angle-right::before { content: '›'; }
.sw-slider-nav li .fa-angle-left::before  { content: '‹'; }

.sw-group-slider .slider-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.sw-group-slider .slider-dots .dot { width: 9px; height: 9px; background: var(--sw-gray-200); border: none; border-radius: 50%; padding: 0; cursor: pointer; }
.sw-group-slider .slider-dots .dot.active { background: var(--sw-red); }

/* ═══════════════════════════════════════════════════════════════════════════
   5. شبكات الـ Grid Sliders (خلفية صورة)
   ═══════════════════════════════════════════════════════════════════════════ */
.grid-item {
  position: relative;
  background-size: cover; background-position: center;
  border-radius: var(--sw-radius);
  overflow: hidden; min-height: 140px;
}

.grid-item .thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 65%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
}

.grid-item .post-cat-wrap { margin-bottom: 6px; }

.grid-item .post-cat {
  display: inline-block; background: var(--sw-red); color: #fff;
  font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 3px;
  text-decoration: none;
}

.grid-item .thumb-content h2,
.grid-item .thumb-content h3,
.grid-item .thumb-title { font-size: .95rem; font-weight: 800; line-height: 1.4; margin: 0 0 4px; }

.grid-item .thumb-title a,
.grid-item .thumb-content a { color: #fff; text-decoration: none; }

.grid-item .thumb-desc {
  font-size: .78rem; color: rgba(255,255,255,.8); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.thumb-overlay h2,.thumb-overlay h3,
.grid-item .thumb-title { background: rgba(0,0,0,.5); display: inline; padding: 2px 6px; border-radius: 3px; }

/* grid-5-big */
.grid-5-container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.grid-item-big { grid-row: span 2; min-height: 300px; }
.grid-item-small { min-height: 140px; }

/* grid-4-half */
.grid-4-half-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.half-big { min-height: 300px; }
.half-small-stack { display: flex; flex-direction: column; gap: 10px; }
.half-small-item { min-height: 90px; flex: 1; }

/* grid-5-center */
.grid-5-center-container {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.center-big { grid-column: 2/3; grid-row: 1/3; min-height: 300px; }
.corner-small { min-height: 140px; }

/* overlay-grid */
.overlay-grid-container { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.overlay-card { min-height: 180px; }
.overlay-main { grid-column: span 2; grid-row: span 2; min-height: 374px; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. Responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  :root { --sw-sidebar-w: 280px; }
  .sw-hero-wrapper { grid-template-columns: 1fr 280px; }
}

@media (max-width: 860px) {
  .sw-hero-wrapper { grid-template-columns: 1fr; }
  .sw-hero-sidebar { display: none; }
  .sw-slide-title { font-size: 1.4rem; }
  .grid-5-container,
  .grid-4-half-container,
  .grid-5-center-container { grid-template-columns: 1fr 1fr; }
  .grid-item-big,.half-big,.center-big { grid-column: span 2; grid-row: auto; }
  .overlay-grid-container { grid-template-columns: repeat(2,1fr); }
  .overlay-main { grid-column: span 2; }
}

@media (max-width: 600px) {
  .sw-slide-title { font-size: 1.25rem; }
  .grid-5-container,.grid-4-half-container,
  .grid-5-center-container,.overlay-grid-container { grid-template-columns: 1fr; }
  .grid-item-big,.half-big,.center-big,.overlay-main { grid-column: auto; grid-row: auto; }
}