/* =========================================================
   AD-LAYOUT PAGE (app/Views/front/pages/layout/ad-layout.php)
   - ads-base.css의 공용 3단 레이아웃 위에 얹는 페이지 보정
   - life-info-front-refactor.css의 .life-front-page 규칙 중
     카드/타이어/캐러셀 등 콘텐츠 전용 스타일을 뺀 순수 레이아웃 부분만 재사용
   ========================================================= */

.ad-layout-front-page .main-layout,
.ad-layout-front-page.main-layout {
  background-color: var(--color-gray-50);
  padding: var(--spacing-10) 0;
  min-height: calc(100vh - var(--header-height));
}

.ad-layout-front-page .main-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  max-width: var(--layout-main-content);
}

.ad-layout-front-page .layout-container {
  max-width: var(--layout-max-width) !important;
  margin: 0 auto;
  padding: 0 var(--spacing-12);
  display: flex;
  gap: var(--spacing-8);
  overflow-x: visible !important;
}

.ad-layout-front-page .life-top-banner-wrap {
  margin-bottom: 14px;
}
.ad-layout-front-page .life-top-banner-wrap:empty {
  display: none;
}
.ad-layout-front-page .life-top-banner-wrap .catad-raw-html img {
  aspect-ratio: 16/4.2;
  object-fit: cover;
  border-radius: 24px;
  width: 100%;
  display: block;
}
.ad-layout-front-page .life-top-banner-wrap img:not(.catad-icon svg) {
  max-height: 216px;
  width: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* 사이드 광고 카드 크기 (ads/life-info.css) */
.ad-layout-front-page .left-ad .ad-card,
.ad-layout-front-page .right-ad .ad-card {
  min-height: 300px;
}

/* 데스크톱~태블릿: 레이아웃 오버플로 방지를 위해 사이드 배너를 일찍 숨기고
   패딩을 좁힘 (life-info-responsive.css와 동일 브레이크포인트) */
@media (max-width: 1399px) {
  .ad-layout-front-page .left-ad,
  .ad-layout-front-page .right-ad {
    display: none;
  }
  .ad-layout-front-page .layout-container {
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
  }
  .ad-layout-front-page .main-content {
    width: 100%;
    max-width: var(--layout-main-content);
  }
}

/* 모바일: 패딩 한 단계 더 좁힘 (life-info-cards.css) */
@media (max-width: 768px) {
  .ad-layout-front-page .layout-container {
    padding: 0 var(--spacing-4);
  }
}