/* 배경영상 */
.elementor-widget-shortcode:has(> .elementor-shortcode > .autol-video-fill) {
	position: static;
}
.autol-video-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
}


/*  */
.autol-reco-list {
	display: flex;
	gap: 20px;
}
.autol-reco-card {
	display: flex;
	flex-direction: column;
	padding: 6px;
	border-radius: 12px;
	background: #fff;
	box-sizing: border-box;
  min-width: 512px;
}
.autol-reco-card .autol-reco-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EDEDED;
  border-radius: 12px;
  height: 310px;
}
.autol-reco-card .autol-reco-img {
	width: 100%;
	max-width: 220px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.autol-reco-card .autol-reco-body {
  padding: 20px 24px;
  color: #2b2b2b;
}
.autol-reco-card .autol-reco-title {
	margin: 0 0 8px;
	font-size: 2.625rem;
	font-weight: 600;
	line-height: 1.4;
  letter-spacing: -0.45px;
}
.autol-reco-card .autol-reco-desc {
  margin: 0;
	font-size: 1.25rem;
	line-height: 1.5;
  letter-spacing: -0.45px;
}
.autol-reco-card .autol-reco-cta {
  display: inline-block;
	margin-top: 30px;
	padding: 6px 16px;
	border: 1px solid #2b2b2b;
	border-radius: 999px;
	font-size: 1rem;
	color: #222;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.autol-reco-card .autol-reco-cta svg {
  transform: translateY(1px);
  margin-left: 6px;
}
.autol-reco-card .autol-reco-cta:hover {
	background: #222;
	color: #fff;
}
.autol-reco-card .autol-reco-cta:hover svg path{
  stroke:#fff !important;
}
/* 추천 LiDAR — Swiper 슬라이더 컨테이너
   간격은 Swiper의 spaceBetween(20)이 담당하므로 flex/gap은 해제합니다. */
.autol-reco-list {
	display: block;
	gap: 0;
}

.autol-reco-list .swiper-wrapper {
	align-items: stretch;
}

/* 슬라이드는 폭을 정하지 않고, 안쪽 카드의 폭을 그대로 씁니다 */
.autol-reco-list .swiper-slide {
	width: auto;
	height: auto;
	max-width: 100%;
}

/* 카드 폭 : 기존 min-width 512px 와 같은 크기.
   min-width 대신 width + max-width 로 잡아야 화면이 좁을 때 잘리지 않습니다. */
.autol-reco-list .swiper-slide .autol-reco-card {
	min-width: 0;
	width: 512px;
	max-width: 100%;
	height: 100%;
}

/* 페이지네이션 — 넘치지 않으면 Swiper가 자동으로 숨깁니다(.swiper-pagination-lock).
   position:static 이라 숨을 때 여백도 함께 사라집니다. */
.autol-reco-list .swiper-pagination {
	position: static;
	margin-top: 16px;
	--swiper-pagination-color: #969696;
	--swiper-pagination-bullet-inactive-color: #646464;
	--swiper-pagination-bullet-inactive-opacity: .25;
	--swiper-pagination-bullet-size: 8px;
	--swiper-pagination-bullet-horizontal-gap: 4px;
}

@media (max-width: 768px) {
  
  .autol-reco-card {
    min-width: 0;
  }

  .autol-reco-card .autol-reco-img-box {
    height: 120px;
  }

  .autol-reco-card .autol-reco-img {
    width: 50%;
  }
  .autol-reco-card .autol-reco-body {
    padding: 10px;
  }
  .autol-reco-card .autol-reco-title{
    font-size: 16px;
    
  }
  .autol-reco-card .autol-reco-desc {
    font-size: 14px;
  }

  .autol-reco-card .autol-reco-cta {
    font-size: 12px;
    margin-top: 10px;
    padding: 4px 12px;
  }
  .autol-reco-card .autol-reco-cta svg {
    width: 5px;
    height: auto;
  }
  	/* 모바일은 지금처럼 2개가 한 줄에 들어가도록 — 3개 이상일 때만 슬라이드됩니다.
	   0.5px 는 소수점 반올림으로 1px씩 넘쳐 점이 생기는 것을 막는 여유값입니다. */
	.autol-reco-list .swiper-slide {
		width: calc( (100% - 20px) / 2 - 0.5px );
	}
	.autol-reco-list .swiper-slide .autol-reco-card {
		width: 100%;
	}
}