/* OIC Components Library — Slider Split 01 (imported from Post-Sliders-2.html)
   Tokens-first: uses --oic-color-* and --oic-radius-* when available. */

.oic-split-slider{
  --_primary: var(--oic-color-primary, #006b4d);
  --_surface: var(--oic-color-surface, #ffffff);
  --_text: var(--oic-color-text, #111111);
  --_muted: var(--oic-color-text-muted, #666666);
  --_radius: var(--oic-slider-radius, var(--oic-radius-md, 12px));
  --_shadow: var(--oic-slider-shadow, 0 10px 25px rgba(0,0,0,0.10));

  display:flex;
  background: var(--_surface);
  border-radius: var(--_radius);
  overflow:hidden;
  box-shadow: var(--_shadow);
  height: 480px;
  max-width: 1100px;
  margin-inline: auto;
  position: relative;
}

.oic-split-slider__main{
  flex: 2.2;
  position: relative;
  overflow: hidden;
}

.oic-split-slider__link{
  display:block;
  height:100%;
  color: inherit;
  text-decoration:none;
  position:relative;
}

.oic-split-slider__media,
.oic-split-slider__image{
  width:100%;
  height:100%;
}

.oic-split-slider__image{
  object-fit: cover;
  transition: transform 0.6s ease;
  display:block;
}

.oic-split-slider__link:hover .oic-split-slider__image{ transform: scale(1.05); }

.oic-split-slider__cluster{
  position:absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,.95) 10%, rgba(0,0,0,.60) 50%, transparent 100%);
  color: #fff;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.oic-split-slider__tag{
  background: var(--_primary);
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
}

.oic-split-slider__title{
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.oic-split-slider__desc{
  font-size: 14px;
  opacity: .92;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #efefef;
}

.oic-split-slider__list{
  flex: 1;
  display:flex;
  flex-direction:column;
  border-inline-start: 1px solid rgba(0,0,0,0.08);
  background: var(--_surface);
}

.oic-split-slider__item{
  flex: 1;
  padding: 15px 20px;
  border: 0;
  background: transparent;
  border-block-end: 1px solid rgba(0,0,0,0.06);
  text-align: start;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0,0,0,0.72);
  line-height: 1.4;
}

.oic-split-slider__item:last-child{ border-block-end: 0; }
.oic-split-slider__item:hover{ background: rgba(0,0,0,0.03); }

.oic-split-slider__item.is-active{
  background: color-mix(in srgb, var(--_primary) 10%, #ffffff);
  border-inline-start: 4px solid var(--_primary);
  color: var(--_primary);
}

.oic-split-slider__nav{
  position:absolute;
  inset-block-start: 20px;
  inset-inline-start: 20px;
  display:flex;
  gap: 8px;
  z-index: 10;
}

.oic-split-slider__btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.oic-split-slider__btn:hover{ background: var(--_primary); border-color: var(--_primary); }

@media (max-width: 850px){
  .oic-split-slider{ flex-direction: column; height: auto; }
  .oic-split-slider__main{ height: 320px; }
  .oic-split-slider__cluster{ padding: 18px; }
  .oic-split-slider__title{ font-size: 18px; }
  .oic-split-slider__item{ padding: 12px 14px; font-size: 13px; }
}