/* ============================================================
   보훈콘텐츠 상세 / 섹션 상세 공통 스타일
   - .visual(이미지형 00001) — 자연 비율 + 텍스트 오버레이
   - .visual-video(00002) / .visual-slider(00003) — 베이스라인(1280×320 flex) 그대로 사용
   - admin 동적 값(--ttl-sz/--intr-sz/--ttl-c/--intr-c) 변수 주입
   ※ admin 페이지별 동적 값은 JSP <style> 블록에 inline 주입 (외부 CSS 불가)
   ============================================================ */

/* ── 이미지형(.visual)만 baseline override — 자연 비율로 풀기 ── */
.visual-archive-container .visual {
    height: auto !important;
    aspect-ratio: auto !important;
    background: none !important;
    display: block !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

/* ── .visual-video / .visual-slider 는 baseline 유지 (1280×320 flex) ──
   pages.css 베이스라인이 1280px 이하에서 자동 세로 배치 + 반응형 처리하므로
   conts에서 별도 override 하지 않는다. 색상만 admin 변수로 덮음. */

/* ── 배경 이미지(admin bckgImgUrl/moblBckgImgUrl) — CSS 변수로 주입 ──
   PC: --bg-pc(데스크탑 이미지), 모바일(≤768): --bg-mobl 우선, 미설정 시 --bg-pc fallback.
   background-size 등 사이즈/위치는 baseline(@media max-width:1280) 그대로 따름. */
.visual-archive-container .visual-video,
.visual-archive-container .visual-slider {
    background-image: var(--bg-pc, none);
}
@media (max-width: 768px) {
    .visual-archive-container .visual-video,
    .visual-archive-container .visual-slider {
        background-image: var(--bg-mobl, var(--bg-pc, none));
    }
}

/* ── 이미지 배경(이미지형): 컨테이너 폭 100%, 자연 비율 ── */
.visual-archive-container .visual-bg-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── 텍스트 오버레이(이미지형) ── */
.visual-archive-container .visual-text {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 130px;
    padding-right: 30px;
    pointer-events: none;
}
.visual-archive-container .visual-text > * {
    pointer-events: auto;
}
.visual-archive-container .visual-title,
.visual-archive-container .visual-desc {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── 폰트 — clamp(min, vw, admin 최대) 자동 축소 + 색상 admin 변수 ──
   ※ baseline 셀렉터(`.visual-archive-container .visual-{video,slider} .visual-title`, 3-class) 매칭 위해 동일 specificity로 작성.
   ※ default 값은 형식별 baseline 사이즈 유지:
      - 이미지형 baseline: 별도 px 정의 없음 → admin default 2.5rem(40px)
      - 동영상/캐러셀 baseline: 32px = 2rem (title), 19px ≈ 1.1875rem (desc)
   ※ admin이 ttlSz/intrSz 설정한 경우 그 값 우선 적용. */
.visual-archive-container .visual .visual-title {
    font-size: clamp(1.125rem, 4vw, var(--ttl-sz, 2.5rem));
    color: var(--ttl-c, inherit);
}
.visual-archive-container .visual .visual-desc {
    font-size: clamp(0.8125rem, 2vw, var(--intr-sz, 1.1875rem));
    color: var(--intr-c, inherit);
}
/* ── 동영상/캐러셀형은 어두운 이미지 배경 위에 텍스트 오버레이 → 기본 흰색.
   admin이 --ttl-c/--intr-c를 명시 주입하면 그 값이 우선. */
.visual-archive-container .visual-video .visual-title,
.visual-archive-container .visual-slider .visual-title {
    font-size: clamp(1.125rem, 4vw, var(--ttl-sz, 2rem));
    color: var(--ttl-c, #fff);
}
.visual-archive-container .visual-video .visual-desc,
.visual-archive-container .visual-slider .visual-desc {
    font-size: clamp(0.8125rem, 2vw, var(--intr-sz, 1.1875rem));
    color: var(--intr-c, #fff);
}

/* ── 캐러셀 desc: 2줄 → 3줄로 확장 + JS가 line-clamp 줄수에 맞게 잘라
   "···"를 직접 부착하므로, 브라우저 기본 ellipsis("…")는 표시되지 않도록 clip 처리 ── */
.visual-archive-container .visual-slider .visual-desc {
    -webkit-line-clamp: 3;
    text-overflow: clip;
}

/* ── 캐러셀 .visual-info: 스와이퍼와 동일한 높이(258px) 확보 →
   텍스트가 상단부터 시작(자연 정렬) + slider-control을 항상 하단 고정.
   - padding-top: title이 스와이퍼 상단보다 살짝 아래(16px)에서 시작
   - visual-title min-height: 0 → 짧은 title은 1줄만 차지 → desc가 바로 붙음
   - box-sizing: border-box → padding 포함 총 258px
   모바일(≤1280)은 베이스라인 세로배치 그대로 유지. */
@media (min-width: 1281px) {
    .visual-archive-container .visual-slider .visual-info {
        height: 258px;
        padding-top: 25px;
        box-sizing: border-box;
    }
    .visual-archive-container .visual-slider .visual-title {
        min-height: 0;
    }
    .visual-archive-container .visual-slider .slider-control {
        margin-top: auto;
    }
}

/* ── 모바일(≤768): 이미지형 텍스트 padding 좁힘 ──
   ※ 동영상/슬라이더 모바일 대응은 baseline(@media max-width:1280)이 처리 */
@media (max-width: 768px) {
    .visual-archive-container .visual-text {
        padding-left: 24px;
        padding-right: 24px;
    }
}