/* Block base styles */
.wp-block-givia-responsive-image {
    position: relative;
    width: 100%;
    margin: 0;
    display: flex;
}
.wp-block-uagb-container.alignwide{}
.wp-block-uagb-container.alignfull{}

/* Block alignment styles */
.wp-block-givia-responsive-image.alignnone {
    max-width: var(--contents_width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-uagb-container .alignwide,
.wp-block-givia-responsive-image.alignwide {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.wp-block-uagb-container .alignfull,
.wp-block-givia-responsive-image.alignfull {
    /*
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    */
    max-width: 100%;
    width: 100%;
    margin-left:0;
    margin-right:0;
}

/* Preview container styles */
.responsive-image-preview {
    position: relative;
    display: inline-flex;
}

/* Picture and image styles */
.responsive-image-preview picture {
    display: inline-flex;
}

.responsive-image-preview img {
    display: block;
    width: 100%;
    object-fit: contain;
}

/* Horizontal alignment styles */
.wp-block-givia-responsive-image[data-align="left"] {
    justify-content: flex-start;
}

.wp-block-givia-responsive-image[data-align="center"] {
    justify-content: center;
}

.wp-block-givia-responsive-image[data-align="right"] {
    justify-content: flex-end;
}

.wp-block-givia-responsive-image[data-align="space-between"] {
    justify-content: space-between;
}

/* Vertical alignment styles */
.wp-block-givia-responsive-image[data-vertical-align="top"] {
    align-items: flex-start;
}

.wp-block-givia-responsive-image[data-vertical-align="middle"] {
    align-items: center;
}

.wp-block-givia-responsive-image[data-vertical-align="bottom"] {
    align-items: flex-end;
}

.wp-block-givia-responsive-image[data-vertical-align="stretch"] {
    align-items: stretch;
}

/* Editor specific styles */
.wp-block-givia-responsive-image.is-selected {
    outline: 2px solid var(--wp-admin-theme-color, #007cba);
}

/* Editor UI styles */
.editor-post-featured-image {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.editor-post-featured-image h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.editor-post-featured-image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.editor-post-featured-image .components-button {
    display: block;
    width: 100%;
}

/* Placeholder styles */
.responsive-image-placeholder {
    width: 100%;
    padding: 20px;
    background: #f0f0f0;
    text-align: center;
    border: 2px dashed #ccc;
    border-radius: 4px;
}

/* Inline method specific styles */
.responsive-image-pc,
.responsive-image-mobile {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 인라인 감추기 방식 - 기본 상태 */
.responsive-image-preview .responsive-image-pc {
    display: block;
}
.responsive-image-preview .responsive-image-mobile {
    display: none;
}

/* 모바일 전환 - CSS 변수를 활용한 반응형 브레이크포인트 */
@media (max-width: var(--guten-mobile, 767px)) {
    .responsive-image-preview[style*="--mobile-aspect-ratio"] {
        aspect-ratio: var(--mobile-aspect-ratio) !important;
    }
    .responsive-image-preview .responsive-image-pc {
        display: none !important;
    }
    .responsive-image-preview .responsive-image-mobile {
        display: block !important;
    }
}

/* 태블릿 전환 */
@media (max-width: var(--guten-tablet, 1024px)) {
    .responsive-image-preview[style*="--mobile-aspect-ratio"] {
        aspect-ratio: var(--mobile-aspect-ratio) !important;
    }
    .responsive-image-preview .responsive-image-pc {
        display: none !important;
    }
    .responsive-image-preview .responsive-image-mobile {
        display: block !important;
    }
}

/* CLS prevention styles */
.responsive-image-preview img {
    max-width: 100%;
    height: auto;
}

/* Aspect ratio support fallback for older browsers */
.responsive-image-preview {
    position: relative;
    overflow: hidden;
}

/* When aspect-ratio is not supported, use padding-bottom method as fallback */
@supports not (aspect-ratio: 16 / 9) {
    .responsive-image-preview[data-aspect-ratio] {
        position: relative;
        height: 0;
        overflow: hidden;
    }

    .responsive-image-preview[data-aspect-ratio] img,
    .responsive-image-preview[data-aspect-ratio] picture {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* Loading state */
.responsive-image-preview img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

.responsive-image-preview img[loading="lazy"]:not([src]) {
    opacity: 0;
}

/* Mobile responsive styles */
@media (max-width: var(--guten-mobile, 768px)) {
    .wp-block-givia-responsive-image.alignwide {
        max-width: var(--contents_width, 100%);
        margin-left: auto;
        margin-right: auto;
    }
}

/* 보롬 반응형 이미지 블록 - 최적화된 CSS (구텐버그용) */
.wp-block-givia-responsive-image .borom-responsive-image-container {
    /* 컨테이너 기본 스타일 */
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
}

/* 이미지/픽쳐 태그 공통 스타일 - 구텐버그 방식 */
.wp-block-givia-responsive-image .borom-responsive-image-container img {
    display: block;
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    object-fit:cover;
    object-position: top center;
    /* 각 이미지의 인라인 aspect-ratio 스타일이 적용됨 */
}

.wp-block-givia-responsive-image .borom-responsive-image-container picture {
    display: block;
    width: 100%;
    line-height: 0; /* 빈 공간 제거 */
}

/* ====================================
   구텐버그 FSE 디바이스 모드 기반 반응형 (구텐버그 전용 클래스)
   ==================================== */

/* 기본 상태 - 데스크탑에서 표시 */
.wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-mobile {
    display: block !important;
}

.wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-desktop {
    display: none !important;
}

/* 모바일 모드 */
[data-gutenberg-device-mode="mobile"] .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-mobile {
    display: none !important;
}

[data-gutenberg-device-mode="mobile"] .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-desktop {
    display: block !important;
}

/* 태블릿 모드 - PC 이미지 표시 (데스크탑과 동일) */
[data-gutenberg-device-mode="tablet"] .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-mobile {
    display: block !important;
}

[data-gutenberg-device-mode="tablet"] .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-desktop {
    display: none !important;
}

[data-gutenberg-device-mode="tablet"] .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-tablet {
    display: none !important;
}

/* 데스크탑 모드 */
[data-gutenberg-device-mode="desktop"] .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-mobile {
    display: block !important;
}

[data-gutenberg-device-mode="desktop"] .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-desktop {
    display: none !important;
}

/* ====================================
   폴백: 디바이스 모드가 설정되지 않은 경우 미디어쿼리 사용
   ==================================== */

body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-mobile {
    display: block !important;
}

body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-desktop {
    display: none !important;
}

/* 미디어쿼리 폴백 - CSS 변수 활용 */
@media (max-width: var(--guten-mobile, 767px)) {
    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-mobile {
        display: none !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-desktop {
        display: block !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-tablet {
        display: block !important;
    }
}

/* 태블릿/데스크탑에서 PC 이미지 표시 */
@media (min-width: calc(var(--guten-mobile, 767px) + 1px)) {
    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-mobile {
        display: block !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-desktop {
        display: none !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container .gutenberg-hidden-tablet {
        display: none !important;
    }
}

/* 개별 브레이크포인트 설정이 있는 경우 */
@media (max-width: 960px) {
    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container[data-breakpoint="960"] .gutenberg-hidden-mobile {
        display: none !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container[data-breakpoint="960"] .gutenberg-hidden-desktop {
        display: block !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container[data-breakpoint="960"] .gutenberg-hidden-tablet {
        display: block !important;
    }
}

@media (min-width: 961px) {
    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container[data-breakpoint="960"] .gutenberg-hidden-mobile {
        display: block !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container[data-breakpoint="960"] .gutenberg-hidden-desktop {
        display: none !important;
    }

    body:not([data-gutenberg-device-mode]):not([data-elementor-device-mode]) .wp-block-givia-responsive-image .borom-responsive-image-container[data-breakpoint="960"] .gutenberg-hidden-tablet {
        display: none !important;
    }
}

/* ====================================
   Picture/Srcset 방식 스타일
   ==================================== */

.wp-block-givia-responsive-image .givia-responsive-picture,
.wp-block-givia-responsive-image .givia-responsive-srcset {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 반응형 이미지 aspect-ratio를 위한 기본 폴백 */
@media (max-width: var(--guten-mobile, 767px)) {
    body:not([data-gutenberg-device-mode]) .wp-block-givia-responsive-image .givia-responsive-picture,
    body:not([data-gutenberg-device-mode]) .wp-block-givia-responsive-image .givia-responsive-srcset {
        /* JavaScript에서 동적으로 설정되는 aspect-ratio에 의존 */
        transition: aspect-ratio 0.2s ease;
    }
}

/* 로딩 상태 애니메이션 */
.wp-block-givia-responsive-image .borom-responsive-image-container img[loading="lazy"] {
    transition: opacity 0.3s ease;
}

/* 플레이스홀더 스타일 */
.wp-block-givia-responsive-image .responsive-image-placeholder {
    width: 100%;
    padding: 40px 20px;
    background: #f8f8f8;
    border: 2px dashed #ddd;
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 4px;
}