/**
 * Homepage Slider Styles
 * Strategic Club Theme
 * Figma Node:4434:11068
 */

body.home,
body.front-page,
body.home .site,
body.front-page .site,
body.home #page,
body.front-page #page,
body.home .site-main,
body.front-page .site-main {
 background: #101114;
}

body.home .site-main,
body.front-page .site-main {
 margin-top: 0;
 padding-top: 0;
}

body.home .site-header,
body.front-page .site-header,
body.home header,
body.front-page header {
 margin-bottom: 0;
}

.homepage-slider.sc-figma-main-slider {
 position: relative;
 width: 100%;
 max-width: 1640px;
 height: 650px;
 min-height: 504px;
 overflow: hidden;
 margin: 0 auto;
 padding: 32px;
 display: flex;
 align-items: flex-end;
 background: #191a1e;
 border-bottom: 2px solid #30343b;
 border-radius: 0 0 8px 8px;
 color: #ffffff;
 font-family: 'Vazir', var(--font-primary), Tahoma, Arial, sans-serif;
 isolation: isolate;
}

.sc-figma-main-slider .sc-slider-bg,
.sc-figma-main-slider .sc-slider-bg::after,
.sc-figma-main-slider .sc-slider-bg img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
}

.sc-figma-main-slider .sc-slider-bg {
 z-index: -1;
 pointer-events: none;
 /* border-radius: 0 0 24px 24px; */
 overflow: hidden;
}

.sc-figma-main-slider .sc-slider-bg img {
 object-fit: cover;
 object-position: center 42%;
 transform: scale(1.01);
 transition: opacity 360ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
 will-change: opacity, transform;
}

.sc-figma-main-slider.sc-slider-transitioning .sc-slider-bg-image {
 opacity: 0;
 transform: scale(1.045) translateX(-18px);
}

.sc-figma-main-slider.sc-slider-entering .sc-slider-bg-image {
 animation: sc-slider-bg-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sc-figma-main-slider .sc-slider-bg::after {
 content: '';
 background: linear-gradient(180deg, rgba(16,17,20,0) 0%, #191a1e 100%);
}

.sc-figma-main-slider .sc-slider-content {
 position: relative;
 z-index: 1;
 width: 100%;
 min-width: 0;
 display: flex;
 flex-direction: row-reverse;
 align-items: center;
 gap: 16px;
}

.sc-figma-main-slider .sc-slider-thumbnails {
 position: relative;
 flex: 0 0 844px;
 width: 844px;
 max-width: 844px;
 min-width: 0;
 height: 96px;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 overflow: hidden;
}

.sc-figma-main-slider .sc-slider-thumb {
 position: relative;
 flex: 0 0 205px;
 width: 205px;
 height: 96px;
 padding: 0;
 margin: 0;
 border: 2px solid #30343b;
 border-radius: 4px;
 overflow: hidden;
 background: transparent;
 cursor: pointer;
}

.sc-figma-main-slider .sc-slider-thumb::after {
 content: '';
 position: absolute;
 inset: 0;
 background: rgba(25,26,30,0.3);
 border-radius: 2px;
 pointer-events: none;
}

.sc-figma-main-slider .sc-slider-thumb-active {
 border-color: #1081df;
}

.sc-figma-main-slider .sc-slider-thumb-active::after {
 display: none;
}

.sc-figma-main-slider .sc-slider-thumb img {
 width: 100%;
 height: 100%;
 max-width: none;
 object-fit: cover;
 border-radius: 2px;
}

.sc-figma-main-slider .sc-slider-arrow {
 position: absolute;
 top: 32px;
 z-index: 3;
 width: 32px;
 height: 32px;
 padding: 4px;
 margin: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 0;
 background: #25272d;
 border-radius: 0 8px 8px 0;
 cursor: pointer;
}

.sc-figma-main-slider .sc-slider-arrow-prev {
 right: 0;
}

.sc-figma-main-slider .sc-slider-arrow-next {
 left: 0;
}

.sc-figma-main-slider .sc-slider-arrow img {
 width: 24px;
 height: 24px;
}

.sc-figma-main-slider .sc-slider-arrow-prev img {
 transform: rotate(180deg);
}

.sc-figma-main-slider .sc-slider-copy {
 flex: 1 1 auto;
 min-width: 0;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 8px;
 text-align: right;
 color: #ffffff;
 text-decoration: none;
 direction: ltr;
 unicode-bidi: plaintext;
 transition: opacity 320ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
 will-change: opacity, transform;
}

.sc-figma-main-slider.sc-slider-transitioning .sc-slider-copy {
 opacity: 0;
 transform: translateX(-26px);
}

.sc-figma-main-slider.sc-slider-entering .sc-slider-copy {
 animation: sc-slider-copy-enter 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sc-slider-bg-enter {
 from {
  opacity: 0;
  transform: scale(1.045) translateX(18px);
 }

 to {
  opacity: 1;
  transform: scale(1.01) translateX(0);
 }
}

@keyframes sc-slider-copy-enter {
 from {
  opacity: 0;
  transform: translateX(26px);
 }

 to {
  opacity: 1;
  transform: translateX(0);
 }
}

.sc-figma-main-slider .sc-slider-badge {
 height: 24px;
 display: inline-flex;
 flex-direction: row-reverse;
 align-items: center;
 justify-content: center;
 gap: 2px;
 direction: rtl;
 unicode-bidi: plaintext;
 padding: 4px 8px;
 border-radius: 4px;
 background: #1081df;
 color: #ffffff;
 font-size: 12px;
 font-weight: 400;
 line-height: 1;
 white-space: nowrap;
}

.sc-figma-main-slider .sc-slider-badge img {
 width: 14px;
 height: 14px;
}

.sc-figma-main-slider .sc-slider-title {
 max-width: 100%;
 margin: 0;
 color: #ffffff;
 font-size: 24px;
 font-weight: 400;
 line-height: 32px;
 direction: rtl;
 unicode-bidi: plaintext;
 text-align: right;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.sc-figma-main-slider .sc-slider-subtitle {
 max-width: 100%;
 margin: 0;
 color: #c4c8cf;
 font-size: 20px;
 font-weight: 500;
 line-height: 1.5;
 direction: rtl;
 unicode-bidi: plaintext;
 text-align: right;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
 .homepage-slider.sc-figma-main-slider {
  height: auto;
  min-height: auto;
  padding: 24px;
  border-radius: 0 0 24px 24px;
 }

 .sc-figma-main-slider .sc-slider-content {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
 }

 .sc-figma-main-slider .sc-slider-title {
  font-size: 24px;
  line-height: 32px;
 }

 .sc-figma-main-slider .sc-slider-subtitle {
  font-size: 20px;
 }

 .sc-figma-main-slider .sc-slider-badge {
  height: 24px;
  gap: 2px;
  padding: 4px 8px;
  font-size: 12px;
 }

 .sc-figma-main-slider .sc-slider-badge img {
  width: 12px;
  height: 12px;
 }

 .sc-figma-main-slider .sc-slider-thumbnails {
  flex: 0 0 96px;
  width: 100%;
  max-width: 100%;
  height: 96px;
  overflow-x: auto;
  scrollbar-width: none;
 }

 .sc-figma-main-slider .sc-slider-thumb {
  flex-basis: 205px;
  width: 205px;
  height: 96px;
 }

  .sc-figma-main-slider .sc-slider-arrow {
  top: 32px;
 }

 .sc-figma-main-slider .sc-slider-thumbnails::-webkit-scrollbar {
  display: none;
 }
}

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {
 .homepage-slider.sc-figma-main-slider {
  display: flex;
  width: 100%;
  height: 360px;
  padding: 12px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  border-radius: 0;
 }

 /* Content: vertical stack, centered */
 .sc-figma-main-slider .sc-slider-content {
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  width: 100%;
 }

 /* Copy block: text area above thumbnails */
 .sc-figma-main-slider .sc-slider-copy {
  flex-direction: column;
  align-items: rtl;
  gap: 6px;
  padding: 0 4px;
  width: 100%;
 }

 .sc-figma-main-slider .sc-slider-title {
  font-size: 18px;
  line-height: 1.4;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
 }

 .sc-figma-main-slider .sc-slider-subtitle {
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #c4c8cf;
  text-align: center;
 }

 .sc-figma-main-slider .sc-slider-badge {
  height: 22px;
  gap: 2px;
  padding: 3px 6px;
  font-size: 11px;
 }

 .sc-figma-main-slider .sc-slider-badge img {
  width: 10px;
  height: 10px;
 }

 /* Thumbnails → Blue progress indicator bars (Figma: Frame 2147224910) */
 .sc-figma-main-slider .sc-slider-thumbnails {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  height: 4px;
  overflow: visible;
  scrollbar-width: none;
  gap: 6px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
 }

 .sc-figma-main-slider .sc-slider-thumbnails::-webkit-scrollbar {
  display: none;
 }

 /* Each thumb becomes a small horizontal bar: 40px × 4px */
 .sc-figma-main-slider .sc-slider-thumb {
  flex: 0 0 40px;
  width: 40px;
  height: 4px;
  min-height: 4px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background-color: #30343b;
  cursor: pointer;
  overflow: hidden;
  position: relative;
 }

 /* Hide the thumbnail image inside each bar */
 .sc-figma-main-slider .sc-slider-thumb img {
  display: none;
 }

 /* Remove the overlay pseudo-element from bars */
 .sc-figma-main-slider .sc-slider-thumb::after {
  display: none;
 }

 /* Active bar: blue #1081DF */
 .sc-figma-main-slider .sc-slider-thumb-active {
  background-color: #1081df;
  border: none;
 }

 /* Arrows: hidden on mobile */
 .sc-figma-main-slider .sc-slider-arrow {
  display: none;
 }
}

/* ── Small mobile (≤ 400px) ── */
@media (max-width: 400px) {
 .homepage-slider.sc-figma-main-slider {
  padding: 12px 10px 10px;
 }

 .sc-figma-main-slider .sc-slider-content {
  gap: 10px;
 }

 .sc-figma-main-slider .sc-slider-title {
  font-size: 16px;
  line-height: 1.35;
 }

 .sc-figma-main-slider .sc-slider-subtitle {
  font-size: 13px;
 }

 /* Blue progress bars: slightly narrower on very small screens */
 .sc-figma-main-slider .sc-slider-thumb {
  flex: 0 0 32px;
  width: 32px;
 }

 .sc-figma-main-slider .sc-slider-thumbnails {
  gap: 4px;
 }
}