/* =========================================================
 * 카테고리 그리드(templates-category-grid.php) 스타일
 *
 * 원래 템플릿 본문 안 인라인 <style> 로 출력되던 CSS.
 * 본문 뒤쪽에서 파싱되는 탓에 카테고리 전환 직후 첫 페인트에서
 * 필터 링크가 부모 테마 기본 링크색(#c36, 핑크)으로 잠깐 보이는 문제가 있어
 * functions.php(aurum_category_grid_styles)에서 카테고리 페이지에만 head 로 enqueue 한다.
 * ========================================================= */
/* =========================================================
   CATEGORY GRID
========================================================= */

/* Elementor flex 컨테이너 안에서 숏코드 위젯이 내용 폭으로 줄어들지 않도록 */
.elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .category-grid-wrap),
.elementor-widget-shortcode:has(> .elementor-shortcode > .category-grid-wrap) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

.elementor-shortcode:has(> .category-grid-wrap) {
    width: 100%;
}

.category-grid-wrap {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   FILTER
========================================================= */

.category-grid-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.category-grid-filter-item {
    display: flex;
    align-items: flex-start;

    max-width: 100%;

    font-family: "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;

    color: #777777;

    text-decoration: none;

    /* PC: 긴 카테고리명(예: JOURNEY BEYOND)은 단어 단위로 줄바꿈 */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;

    transition: 0.4s;
}

.category-grid-filter-name {
    min-width: 0;
}

.category-grid-filter-item:hover {
    color: #252525;
}

.category-grid-filter-item.is-active {
    font-size: 32px;
    font-weight: 700;
    color: #252525;
}


/* =========================================================
   활성 메뉴 왼쪽 라인
========================================================= */

.category-grid-filter-line {
    display: none;
    flex: 0 0 auto;

    width: 55px;
    height: 2px;

    /* 두 줄로 떨어져도 첫 줄 세로 중앙에 위치 (32px * 1.4 / 2 - 1px) */
    margin-top: 21px;
    margin-right: 15px;

    background: #252525;
}

.category-grid-filter-item.is-active
.category-grid-filter-line {
    display: block;
}


/* =========================================================
   페이지 로딩 시 활성 메뉴 진입 애니메이션
   - 클릭 시 페이지가 새로 로드되므로 transition 대신 animation 사용
========================================================= */

.category-grid-filter-item.is-active {
    animation: jbCategoryFilterActive 0.4s ease both;
}

.category-grid-filter-item.is-active
.category-grid-filter-line {
    animation: jbCategoryFilterLine 0.4s ease both;
}

@keyframes jbCategoryFilterActive {
    from {
        font-size: 24px;
        font-weight: 600;
        color: #777777;
    }
}

@keyframes jbCategoryFilterLine {
    from {
        width: 0;
        margin-right: 0;
    }
}

@keyframes jbCategoryFilterUnderline {
    from {
        transform: scaleX(0);
    }
}



/* =========================================================
   SUB FILTER (3단계) - PC
   - 그리드 상단 회색 바
   - "전체 | 하위1 | 하위2" 형태, 항목 사이 세로 구분선
========================================================= */

.category-grid-sub-filter {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 60px;
    padding: 0;
    margin-bottom: 30px;
    box-sizing: border-box;

    background: #F8F9FB;
    border: 1px solid #EDEDED;
    border-radius: 8px;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.category-grid-sub-filter::-webkit-scrollbar {
    display: none;
}

.category-grid-sub-filter-item {
    position: relative;

    display: flex;
    align-items: center;
    flex: 0 0 auto;

    padding: 0 20px;

    font-family: "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.36px;

    color: #777777;

    text-decoration: none;
    white-space: nowrap;
}

.category-grid-sub-filter-item:hover {
    color: #252525;
}

.category-grid-sub-filter-item.is-active {
    font-weight: 700;
    color: #252525;
}

/* 항목 사이 세로 구분선 */
.category-grid-sub-filter-item + .category-grid-sub-filter-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 1px;
    height: 16px;

    background: #DDDDDD;
}


/* =========================================================
   GRID
========================================================= */

.category-grid-content {
    min-width: 0;
}

.category-grid-list {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;
}

.category-grid-list > .elementor {
    min-width: 0;
}


/* =========================================================
   447 TEMPLATE 보정
========================================================= */

.category-grid-list > .elementor .e-flexbox-base {
    padding: 0;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid #EDEDED;
    overflow: hidden;
}

.category-grid-list > .elementor
.e-flexbox-base
.e-9e11c17-743d10e {
    padding: 0;
}

.category-grid-list > .elementor
.e-flexbox-base
.e-149a393-5ebef41 {
    padding: 18px 20px;
}


/* =========================================================
   카드 마우스 오버
   - 사진 scale 1.1 (이미지 영역 밖으로 넘치지 않게 overflow hidden)
   - 텍스트 영역 배경 흰색 → #EDEDED
========================================================= */

.category-grid-list > .elementor
.e-9e11c17-743d10e {
    overflow: hidden;
}

.category-grid-list > .elementor
.e-9e11c17-743d10e img {
    transition: transform 0.4s ease;
}

.category-grid-list > .elementor
.e-149a393-5ebef41 {
    background-color: #FFFFFF;
    transition: background-color 0.4s ease;
}

.category-grid-list > .elementor:hover
.e-9e11c17-743d10e img {
    transform: scale(1.1);
}

.category-grid-list > .elementor:hover
.e-149a393-5ebef41 {
    background-color: #EDEDED;
}


/* =========================================================
   EMPTY
========================================================= */

.category-grid-content {
    width: 100%;
}

.category-grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;

    width: 100%;
    padding: 60px 0 180px;
    margin: 0 auto;
    box-sizing: border-box;

    text-align: center;
}

.category-grid-empty .category-grid-empty-img {
    display: block;
    width: 400px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 400 / 154;
    margin: 0 auto;
}

.category-grid-empty-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    width: 100%;

    font-family: "Pretendard Variable", "Pretendard", sans-serif;
    color: #777777;
    word-break: keep-all;
}

.category-grid-empty-text p {
    width: 100%;
    margin: 0;
    opacity: 0.9;
    text-align: center;
}

.category-grid-empty-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.64px;
}

.category-grid-empty-desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.36px;
}


/* =========================================================
   PAGINATION
========================================================= */

.category-grid-pagination {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-top: 50px;
}

.category-grid-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    text-decoration: none;
}

.category-grid-pagination .current {
    font-weight: 700;
}


/* =========================================================
   TABLET : 1024px 이하
   - 필터 가로 스크롤
   - 게시물 4열
========================================================= */

@media screen and (max-width: 1024px) {

    .category-grid-wrap {
        display: block;
        background: #F8F9FB;
        padding-bottom: 30px;
    }

    /* 콘텐츠 좌우 여백 (1024px 이하부터 적용) */
    .category-grid-content {
        padding: 0 20px;
    }


    /* 카테고리 필터 */

    .category-grid-filter {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        width: 100%;
        padding: 17.5px 25px 15px;
        background: #fff;
        border-bottom: 1px solid #EDEDED;
        margin-bottom: 30px;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-inline: 25px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .category-grid-filter::-webkit-scrollbar {
        display: none;
    }

    .category-grid-filter-item {
        position: relative;

        flex: 0 0 auto;
        align-items: center;

        font-size: 16px;

        /* 가로 스크롤 필터에서는 한 줄 유지 */
        white-space: nowrap;
    }

    .category-grid-filter-item.is-active {
        font-size: 16px;
        font-weight: 700;
        color: #252525;
    }


    /* PC용 왼쪽 라인 제거 */

    .category-grid-filter-line,
    .category-grid-filter-item.is-active
    .category-grid-filter-line {
        display: none;
    }


    /* 활성 카테고리 하단 라인 */

    .category-grid-filter-item.is-active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -15px;
        width: 100%;
        height: 2px;

        background: #252525;

        transform-origin: left center;
        animation: jbCategoryFilterUnderline 0.4s ease both;
    }

    /* 모바일은 글자 크기 변화가 없으므로 하단 라인만 애니메이션 */
    .category-grid-filter-item.is-active {
        animation: none;
    }


    /* 가로 스크롤 필터 좌·우 페이드 (Figma 14-10020: 30px, 투명 → 배경색 91.667%)
       - 뒤에 숨은 카테고리가 잘려 보이지 않도록 배경색 그라데이션을 덮는다.
       - 스크롤 컨테이너 안에서 position: sticky 로 양 끝에 고정.
         sticky 기준 영역은 패딩 안쪽이므로 left/right 를 패딩만큼 음수로 보정한다.
       - flex gap(20px)만큼 당겨 전체 스크롤 폭은 바뀌지 않게 한다.
       - JS 가 스크롤 위치에 따라 is-scroll-start / is-scroll-end 를 붙여
         맨 앞이면 좌측, 맨 뒤면 우측 페이드를 숨긴다.
         (첫 카테고리 활성 → 맨 앞, 마지막 카테고리 활성 → 맨 뒤로 스크롤됨) */

    .category-grid-filter::before,
    .category-grid-filter::after,
    .category-grid-sub-filter::before,
    .category-grid-sub-filter::after {
        content: "";
        position: sticky;
        /* 필터 항목(position: relative)보다 위에 그려지도록 */
        z-index: 1;

        flex: 0 0 30px;
        width: 30px;
        align-self: stretch;

        pointer-events: none;
        transition: opacity 0.2s;
    }

    .category-grid-filter::before,
    .category-grid-sub-filter::before {
        left: -25px;
        margin-right: calc(-30px - 20px);
    }

    .category-grid-filter::after,
    .category-grid-sub-filter::after {
        right: -25px;
        margin-left: calc(-30px - 20px);
    }

    .category-grid-filter::before {
        background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 91.667%);
    }

    .category-grid-filter::after {
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 91.667%);
    }

    .category-grid-sub-filter::before {
        background: linear-gradient(to left, rgba(240, 241, 244, 0) 0%, #F0F1F4 91.667%);
    }

    .category-grid-sub-filter::after {
        background: linear-gradient(to right, rgba(240, 241, 244, 0) 0%, #F0F1F4 91.667%);
    }

    .category-grid-filter.is-scroll-start::before,
    .category-grid-sub-filter.is-scroll-start::before,
    .category-grid-filter.is-scroll-end::after,
    .category-grid-sub-filter.is-scroll-end::after {
        opacity: 0;
    }


    /* 서브 필터 (3단계)
       - 상단 필터 바로 아래 회색 띠, 가로 스크롤
       - 구분선 없음 */

    .category-grid-wrap.has-sub-filter .category-grid-filter {
        margin-bottom: 0;
    }

    .category-grid-sub-filter {
        min-height: 0;
        gap: 20px;
        padding: 14px 25px;
        margin-bottom: 30px;

        background: #F0F1F4;
        border-radius: 0;
        border: 0;

        scroll-padding-inline: 25px;

        /* 콘텐츠 좌우 여백(20px)을 무시하고 화면 전체 폭으로 */
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }

    .category-grid-sub-filter-item {
        padding: 0;

        font-size: 14px;
        letter-spacing: -0.28px;
    }

    .category-grid-sub-filter-item + .category-grid-sub-filter-item::before {
        display: none;
    }


    /* 3열 */

    .category-grid-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }
    .category-grid-list img {
      width: 100%;
    }

    .category-grid-list > .elementor .e-flexbox-base {
        border-radius: 8px;
    }

}


/* =========================================================
   MOBILE : 767px 이하
   - 게시물 2열
========================================================= */

@media screen and (max-width: 767px) {
    /* 콘텐츠 좌우 여백과 서브 필터 전체 폭 처리는 1024px 블록에서 상속 */
    .category-grid-sub-filter {
        padding: 14px 20px;
        scroll-padding-inline: 20px;
    }
    .category-grid-sub-filter::before {
        left: -20px;
    }

    .category-grid-sub-filter::after {
        right: -20px;
    }
    .category-grid-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px 10px;
    }

    
  .category-grid-list > .elementor
  .e-flexbox-base
  .e-149a393-5ebef41 {
      padding: 8px 10px;
  }

    .category-grid-empty {
        gap: 30px;
        padding: 30px 0 100px;
    }

    .category-grid-empty .category-grid-empty-img {
        width: 350px;
    }

    .category-grid-empty-text {
        gap: 10px;
    }

    .category-grid-empty-title {
        font-size: 24px;
        letter-spacing: -0.44px;
    }

    .category-grid-empty-desc {
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: -0.3px;
    }

}


/* =========================================================
   PARENT CAT
========================================================= */

#parent-cat h2 {
    visibility: hidden;
}

#parent-cat.is-category-ready h2 {
    visibility: visible;
}

/* 동작 줄이기 설정 사용자는 애니메이션 제외 */
@media (prefers-reduced-motion: reduce) {
    .category-grid-filter-item,
    .category-grid-filter-item.is-active,
    .category-grid-filter-item.is-active .category-grid-filter-line,
    .category-grid-filter-item.is-active::after {
        transition: none;
        animation: none;
    }

    .category-grid-list > .elementor .e-9e11c17-743d10e img,
    .category-grid-list > .elementor .e-149a393-5ebef41 {
        transition: none;
    }
}