/**
 * [v17.1] Givia Media Engine Frontend Styles
 */

/* 1. Base Container & Grid */
.givia-media-engine-wrapper {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 그리드 모드 (스와이퍼가 아닐 때) */
.givia-media-engine-wrapper.givia-grid-mode .givia-media-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols-pc, 1), 1fr);
    gap: var(--grid-gap-pc, 24px);
    width: 100%;
    align-items: stretch; /* 모든 아이템이 동일한 높이를 갖도록 강제 */
}

/* [v17.2] 그리드 아이템 비율 및 크기 (수동 설정 우선) */
.givia-grid-mode .givia-media-item-inner {
    width: var(--img-width, 100%);
    height: var(--img-height, auto);
    aspect-ratio: var(--item-ratio, auto);
}

/* [v17.2] Overlay 모드일 때 기본 비율 보정 (수동 비율 없을 때) */
.givia-grid-mode.pos-overlay-pc:not([style*="--item-ratio"]) .givia-media-item-inner {
    aspect-ratio: 1 / 1;
}

/* [v17.2] 에디터 프리뷰 강제 반응형 (태블릿) */
@media (max-width: 1024px), .givia-editor-preview-tablet {
    .givia-media-engine-wrapper.givia-grid-mode .givia-media-grid {
        grid-template-columns: repeat(var(--grid-cols-tab, 1), 1fr);
        gap: var(--grid-gap-tab, 20px);
    }
    .givia-grid-mode.pos-overlay-tab:not([style*="--item-ratio"]) .givia-media-item-inner {
        aspect-ratio: 1 / 1;
    }
}

/* [v17.2] 에디터 프리뷰 강제 반응형 (모바일) */
@media (max-width: 767px), .givia-editor-preview-mobile {
    .givia-media-engine-wrapper.givia-grid-mode .givia-media-grid {
        grid-template-columns: repeat(var(--grid-cols-mob, 1), 1fr);
        gap: var(--grid-gap-mob, 15px);
    }
    .givia-grid-mode.pos-overlay-mob:not([style*="--item-ratio"]) .givia-media-item-inner {
        aspect-ratio: 1 / 1;
    }
}

/* 2. Media Link & Picture */
.givia-media-link {
    display: flex;
    flex-direction: inherit; /* 부모의 방향을 상속 */
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

.givia-media-item-inner picture {
    display: block;
    width: 100%;
    height: 100%;
}

.givia-responsive-picture {
    display: block;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.5s ease;
}

/* [v17.2] Overlay 모드: 꽉 채움 (Cover) */
[class*="pos-overlay"] .givia-responsive-picture {
    object-fit: cover !important;
}

/* [v17.6] Fixed Height 모드일 때는 무조건 cover 적용 (Bottom 모드 포함) */
.givia-media-engine-wrapper[class*="-h-"] .givia-responsive-picture {
    object-fit: cover !important;
}

.givia-media-link:hover .givia-responsive-picture {
    transform: scale(1.08);
}

/* 3. Content Group & Layout Styles */
.givia-media-item-inner {
    position: relative;
    width: 100%;
    height: auto;
    background: #fff;
    overflow: hidden;
    border-radius: var(--card-radius, 0);
    border: var(--card-border-w, 0) solid var(--card-border-c, #eeeeee);
    box-shadow: var(--card-shadow, none);
    transition: all 0.3s ease;
}

.givia-media-item {
    height: 100%;
    min-height: 0;
    max-width: 100%;
}

.givia-media-content-group {
    position: relative;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Default (Desktop/PC) */
.givia-media-content-group {
    justify-content: var(--v-align-pc, center);
    align-items: var(--h-align-pc, center);
}

.pos-overlay-pc .givia-media-content-group {
    position: absolute;
    opacity: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.8) 100%);
    color: #fff;
    transition: all 0.4s ease;
    z-index: 5;
}

/* [v17.2] 기본 노출 방식 설정 */
.overlay-show-hover-pc.pos-overlay-pc .givia-media-content-group {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.overlay-show-always-pc.pos-overlay-pc .givia-media-content-group {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pos-bottom .givia-media-content-group {
    position: relative;
    padding: 20px;
    background: #fff;
    color: #333;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 테마별 레이아웃 컨테이너 설정 */
.pos-bottom.givia-media-item-inner {
    display: flex;
    flex-direction: column;
}

.pos-side.givia-media-item-inner,
.pos-side-reverse.givia-media-item-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.pos-side-reverse.givia-media-item-inner {
    flex-direction: row-reverse;
}

/* [v17.6] 고정 높이 모드일 때 이미지와 콘텐츠의 비율 및 레이아웃 제어 */
/* 세로형(Flow) 테마 최적화 */
.givia-media-engine-wrapper[class*="-h-"] .pos-bottom picture {
    height: var(--img-ratio-pc, 50%) !important;
    width: 100% !important;
    flex: none !important;
    overflow: hidden;
    display: block;
}

.givia-media-engine-wrapper[class*="-h-"] .pos-bottom .givia-responsive-picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* 가로형 카드 (Side) 최적화 */
.givia-media-engine-wrapper[class*="-h-"] .pos-side picture,
.givia-media-engine-wrapper[class*="-h-"] .pos-side-reverse picture {
    width: var(--img-ratio-pc, 33%) !important;
    height: 100% !important;
    flex: none !important;
    display: block;
    overflow: hidden;
}

.givia-media-engine-wrapper[class*="-h-"] .pos-side .givia-responsive-picture,
.givia-media-engine-wrapper[class*="-h-"] .pos-side-reverse .givia-responsive-picture {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

.pos-side .givia-media-content-group,
.pos-side-reverse .givia-media-content-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #fff;
    color: #333;
    overflow: hidden;
}

/* PC Hover Effects - Only for Hover Mode */
.overlay-show-hover-pc.pos-overlay-pc .givia-media-link:hover .givia-media-content-group,
.overlay-show-hover-pc.pos-overlay-pc .givia-media-item-inner:hover .givia-media-content-group {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* PC Visibility Toggles */
.hide-heading-pc .givia-media-heading,
.hide-desc-pc .givia-media-desc,
.hide-button-pc .givia-media-btn {
    display: none !important;
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px), .givia-editor-preview-tablet {
    .givia-media-content-group {
        justify-content: var(--v-align-tab, center);
        align-items: var(--h-align-tab, center);
    }
    
    .pos-overlay-tab .givia-media-content-group {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        padding: 20px;
        background: rgba(0,0,0,0.4);
        color: #fff;
        transition: all 0.4s ease;
        z-index: 5;
    }

    /* [v17.2] 태블릿 노출 방식 */
    .overlay-show-hover-tab.pos-overlay-tab:not(.overlay-mobile-always-tab) .givia-media-content-group {
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
    }

    .overlay-show-always-tab.pos-overlay-tab .givia-media-content-group,
    .overlay-mobile-always-tab.pos-overlay-tab .givia-media-content-group {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* 클릭 시 노출 (Touch) */
    .overlay-mobile-click-tab.pos-overlay-tab .givia-media-item-inner:active .givia-media-content-group {
        opacity: 1;
        transform: translateY(0);
    }

    .pos-bottom-tab .givia-media-content-group {
        position: relative;
        padding: 15px 10px;
        background: #fff;
        color: #333;
        flex-shrink: 0;
    }

    .pos-bottom-tab .givia-media-link {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 태블릿 테마 레이아웃 */
    .pos-bottom.givia-media-item-inner {
        display: flex;
        flex-direction: column;
    }

    .pos-side.givia-media-item-inner,
    .pos-side-reverse.givia-media-item-inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .pos-side-reverse.givia-media-item-inner {
        flex-direction: row-reverse;
    }

    /* [v17.6] 태블릿 비율 제어 */
    .givia-media-engine-wrapper[class*="-h-"] .pos-bottom picture {
        height: var(--img-ratio-tab, 50%) !important;
        width: 100% !important;
        flex: none !important;
        overflow: hidden;
        display: block;
    }
    
    .givia-media-engine-wrapper[class*="-h-"] .pos-bottom .givia-responsive-picture {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .givia-media-engine-wrapper[class*="-h-"] .pos-side picture,
    .givia-media-engine-wrapper[class*="-h-"] .pos-side-reverse picture {
        width: var(--img-ratio-tab, 33%) !important;
        height: 100% !important;
        flex: none !important;
        display: block;
        overflow: hidden;
    }

    .givia-media-engine-wrapper[class*="-h-"] .pos-side .givia-responsive-picture,
    .givia-media-engine-wrapper[class*="-h-"] .pos-side-reverse .givia-responsive-picture {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .pos-side .givia-media-content-group,
    .pos-side-reverse .givia-media-content-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
        background: #fff;
        color: #333;
        overflow: hidden;
    }

    .hide-heading-tab .givia-media-heading,
    .hide-desc-tab .givia-media-desc,
    .hide-button-tab .givia-media-btn {
        display: none !important;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px), .givia-editor-preview-mobile {
    .givia-media-content-group {
        justify-content: var(--v-align-mob, center);
        align-items: var(--h-align-mob, center);
    }
    
    .pos-overlay-mob .givia-media-content-group {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        padding: 15px;
        background: rgba(0,0,0,0.5);
        color: #fff;
        transition: all 0.4s ease;
        z-index: 5;
    }

    /* [v17.2] 모바일 노출 방식 */
    .overlay-show-hover-mob.pos-overlay-mob:not(.overlay-mobile-always-mob) .givia-media-content-group {
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
    }

    .overlay-show-always-mob.pos-overlay-mob .givia-media-content-group,
    .overlay-mobile-always-mob.pos-overlay-mob .givia-media-content-group {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* 클릭 시 노출 (Touch) */
    .overlay-mobile-click-mob.pos-overlay-mob .givia-media-item-inner:active .givia-media-content-group {
        opacity: 1;
        transform: translateY(0);
    }

    .pos-bottom-mob .givia-media-content-group {
        position: relative;
        padding: 12px 8px;
        background: #fff;
        color: #333;
        flex-shrink: 0;
    }

    .pos-bottom-mob .givia-media-link {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 모바일 테마 레이아웃 */
    .pos-bottom.givia-media-item-inner {
        display: flex;
        flex-direction: column;
    }

    .pos-side.givia-media-item-inner,
    .pos-side-reverse.givia-media-item-inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .pos-side-reverse.givia-media-item-inner {
        flex-direction: row-reverse;
    }

    /* [v17.6] 모바일 비율 제어 */
    .givia-media-engine-wrapper[class*="-h-"] .pos-bottom picture {
        height: var(--img-ratio-mob, 50%) !important;
        width: 100% !important;
        flex: none !important;
        overflow: hidden;
        display: block;
    }
    
    .givia-media-engine-wrapper[class*="-h-"] .pos-bottom .givia-responsive-picture {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .givia-media-engine-wrapper[class*="-h-"] .pos-side picture,
    .givia-media-engine-wrapper[class*="-h-"] .pos-side-reverse picture {
        width: var(--img-ratio-mob, 33%) !important;
        height: 100% !important;
        flex: none !important;
        display: block;
        overflow: hidden;
    }

    .givia-media-engine-wrapper[class*="-h-"] .pos-side .givia-responsive-picture,
    .givia-media-engine-wrapper[class*="-h-"] .pos-side-reverse .givia-responsive-picture {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .pos-side .givia-media-content-group,
    .pos-side-reverse .givia-media-content-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 15px;
        background: #fff;
        color: #333;
        overflow: hidden;
    }

    .hide-heading-mob .givia-media-heading,
    .hide-desc-mob .givia-media-desc,
    .hide-button-mob .givia-media-btn {
        display: none !important;
    }
}

/* Typography inside group */
.givia-media-heading {
    margin: 0 0 8px 0 !important;
    font-size: var(--heading-font-size-pc, clamp(18px, 4vw, 24px));
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading-color-pc, inherit);
}

.givia-media-subheading {
    margin: 0 0 10px 0 !important;
    font-size: var(--subheading-font-size-pc, clamp(12px, 2.5vw, 14px));
    font-weight: 500;
    line-height: 1.4;
    color: var(--subheading-color-pc, inherit);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.givia-media-desc {
    margin: 0 0 15px 0 !important;
    font-size: var(--desc-font-size-pc, clamp(14px, 3vw, 15px));
    line-height: 1.5;
    color: var(--desc-color-pc, inherit);
    opacity: 0.9;
}

.givia-media-btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--btn-bg-color-pc, #000);
    color: var(--btn-text-color-pc, #fff);
    font-size: var(--btn-font-size-pc, 14px);
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 1024px) {
    .givia-media-heading {
        font-size: var(--heading-font-size-tab, 20px);
        color: var(--heading-color-tab, inherit);
    }
    .givia-media-subheading {
        font-size: var(--subheading-font-size-tab, 13px);
        color: var(--subheading-color-tab, inherit);
    }
    .givia-media-desc {
        font-size: var(--desc-font-size-tab, 14px);
        color: var(--desc-color-tab, inherit);
    }
    .givia-media-btn {
        background-color: var(--btn-bg-color-tab, #000);
        color: var(--btn-text-color-tab, #fff);
        font-size: var(--btn-font-size-tab, 13px);
    }
}

@media (max-width: 767px) {
    .givia-media-heading {
        font-size: var(--heading-font-size-mob, 18px);
        color: var(--heading-color-mob, inherit);
    }
    .givia-media-subheading {
        font-size: var(--subheading-font-size-mob, 12px);
        color: var(--subheading-color-mob, inherit);
    }
    .givia-media-desc {
        font-size: var(--desc-font-size-mob, 13px);
        color: var(--desc-color-mob, inherit);
    }
    .givia-media-btn {
        background-color: var(--btn-bg-color-mob, #000);
        color: var(--btn-text-color-mob, #fff);
        font-size: var(--btn-font-size-mob, 12px);
    }
}

/* Item Background & Border */
.givia-media-item-inner {
    background-color: var(--item-bg-color-pc, transparent);
    border-radius: var(--item-border-radius-pc, 0);
    overflow: hidden;
}

@media (max-width: 1024px) {
    .givia-media-item-inner {
        background-color: var(--item-bg-color-tab, transparent);
        border-radius: var(--item-border-radius-tab, 0);
    }
}

@media (max-width: 767px) {
    .givia-media-item-inner {
        background-color: var(--item-bg-color-mob, transparent);
        border-radius: var(--item-border-radius-mob, 0);
    }
}

/* 에디터 프리뷰 가시성 보조 (필요시 강제 해제 가능) */
.givia-preview-wrapper .givia-media-content-group {
    /* !important 제거하여 호버 설정이 에디터에서도 작동하도록 함 */
    visibility: visible;
}

/* 4. Swiper Customization */
.givia-swiper-active .swiper-pagination-bullet-active {
    background: #000;
}

.givia-swiper-active .swiper-button-next,
.givia-swiper-active .swiper-button-prev {
    color: #000;
    background: rgba(255, 255, 255, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.givia-swiper-active .swiper-button-next:after,
.givia-swiper-active .swiper-button-prev:after {
    font-size: 16px;
    font-weight: bold;
}

/* 5. Targeting Engine Linkage */
[data-givia-targeting-id] {
    cursor: pointer !important;
}

.givia-media-item-inner:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
/* Animation Engine */
.givia-anim-fade { opacity: 0; }
.givia-anim-slideUp { opacity: 0; transform: translateY(30px); }
.givia-anim-zoomIn { opacity: 0; transform: scale(0.9); }
.givia-anim-slideLeft { opacity: 0; transform: translateX(-30px); }

/* Show state for animations */
.overlay-show-always-pc .givia-media-content-group[class*="givia-anim-"],
.overlay-show-hover-pc:hover .givia-media-content-group[class*="givia-anim-"],
.overlay-show-always-tab .givia-media-content-group[class*="givia-anim-"],
.overlay-show-hover-tab:hover .givia-media-content-group[class*="givia-anim-"],
.overlay-show-always-mob .givia-media-content-group[class*="givia-anim-"],
.overlay-mobile-always-mob .givia-media-content-group[class*="givia-anim-"],
.overlay-mobile-click-mob .givia-media-item-inner:active .givia-media-content-group[class*="givia-anim-"] {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Base Transition for all content groups */
.givia-media-content-group {
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}