/* =========================================================
 * 포트폴리오 카드 — 메인페이지 PORTFOLIO 섹션과 /shop/portfolio 목록이 공유하는 카드.
 *
 * views/common/_portfolio_card.ejs 와 1:1 로 대응한다.
 * 원래는 portfolio/index.css 안에 있었는데, 그 파일은 목록 페이지에서만 link 되므로
 * 메인페이지에서 같은 카드를 쓰려면 스타일이 따라가지 못했다. 그래서 카드만 떼어냈다.
 * portfolio/index.css 에는 페이지 레이아웃(.portfolio-grid, 페이지 헤더, 빈 목록)만 남는다.
 *
 * 토큰을 :root 가 아니라 .portfolio-card 에 선언한 이유:
 * 메인페이지(index.css)에는 portfolio/index.css 의 :root 토큰이 없다. :root 에 의존하면
 * 메인에서 var() 가 전부 무효가 되어 카드가 깨진다. 값은 portfolio/index.css 의 :root 와 같으므로
 * 목록 페이지의 계산값은 이전과 동일하다.
 *
 * 카드를 쓰는 화면은 이 파일을 반드시 link 해야 한다 (views/index.ejs, views/portfolio/index.ejs).
 * ========================================================= */

.portfolio-card {
    --pf-panel: #ffffff;
    --pf-border: #e5e7eb;
    --pf-border-light: #f0f1f4;
    --pf-text: #111827;
    --pf-muted: #6b7280;
    --pf-accent-light: #f3f4f6;
    --pf-radius: 12px;
    --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --pf-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --pf-transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    display: block;
    background: var(--pf-panel);
    border-radius: var(--pf-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--pf-transition-slow);
    box-shadow: var(--pf-shadow-sm);
    border: 1px solid var(--pf-border-light);
    position: relative;
}

/* 상세로 이동할 수 없는 카드(헤더 메뉴가 꺼진 쇼핑몰)는 손가락 커서를 주지 않는다. */
.portfolio-card--static {
    cursor: default;
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pf-shadow-md);
    border-color: var(--pf-border);
}

.portfolio-image-wrap {
    position: relative;
    width: 100%;
    /* 작업물은 가로형이 많아 4:3 으로 잡는다 (상품 카드의 1:1 과 다른 점) */
    padding-top: 75%;
    overflow: hidden;
    background: linear-gradient(145deg, #f8f9fc 0%, #edf0f7 100%);
}

.portfolio-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card:hover .portfolio-image img {
    transform: scale(1.08);
}

.portfolio-card .no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--pf-border);
}

/* ---------- 카드 본문 ---------- */
.portfolio-info {
    padding: 18px 20px 20px;
}

.portfolio-client {
    display: inline-flex;
    width: fit-content;
    font-size: 11px;
    color: var(--pf-muted);
    background: var(--pf-accent-light);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: 500;
}

.portfolio-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--pf-text);
    margin: 0 0 8px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-desc {
    font-size: 13px;
    color: var(--pf-muted);
    margin: 0 0 14px 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-date {
    display: block;
    font-size: 12px;
    color: var(--pf-muted);
    font-weight: 500;
    padding-top: 14px;
    border-top: 1px solid var(--pf-border-light);
}

/* =========================================================
 * LIST 레이아웃 (cardLayout: 'LIST')
 *
 * 마크업은 GRID 와 똑같고 수식 클래스만 붙는다 — 썸네일을 왼쪽으로 돌리고 본문을 오른쪽에 둔다.
 * 썸네일 비율은 GRID 와 같은 4:3 을 유지한다 (product-card.css 가 aspect-ratio 를 하나로
 * 통일해 둔 것과 같은 이유로, 같은 작업물이 섹션에 따라 다른 비율로 보이면 안 된다).
 * ========================================================= */
.portfolio-card--list {
    display: flex;
    align-items: stretch;
}

.portfolio-card--list .portfolio-image-wrap {
    flex: 0 0 260px;
    width: 260px;
    /* flex 아이템에서는 padding-top 백분율이 부모 폭을 기준으로 하지 않아 비율이 틀어진다. */
    padding-top: 0;
    aspect-ratio: 4 / 3;
}

.portfolio-card--list .portfolio-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 24px;
    min-width: 0;
}

.portfolio-card--list .portfolio-name {
    font-size: 17px;
    -webkit-line-clamp: 1;
}

.portfolio-card--list .portfolio-desc {
    font-size: 14px;
}

.portfolio-card--list .portfolio-date {
    /* 가로형에서는 구분선이 카드를 가로지르는 모양이 되어 어색하다. */
    border-top: none;
    padding-top: 0;
}

.portfolio-card--list:hover {
    /* 가로로 긴 카드가 위로 뜨면 흔들려 보인다. 그림자만 바꾼다. */
    transform: none;
    box-shadow: var(--pf-shadow-md);
    border-color: var(--pf-border);
}

/* ---------- 반응형 ---------- */
@media screen and (max-width: 768px) {
    .portfolio-card--list .portfolio-image-wrap {
        flex-basis: 160px;
        width: 160px;
    }

    .portfolio-card--list .portfolio-info {
        padding: 14px 16px;
    }

    .portfolio-card--list .portfolio-name {
        font-size: 15px;
    }

    .portfolio-card--list .portfolio-desc {
        font-size: 13px;
        margin-bottom: 8px;
    }
}

@media screen and (max-width: 480px) {
    /* 화면이 좁으면 가로형을 세로로 눕힌다. 160px 썸네일로는 본문이 두 글자씩 끊긴다. */
    .portfolio-card--list {
        display: block;
    }

    .portfolio-card--list .portfolio-image-wrap {
        width: 100%;
        aspect-ratio: auto;
        padding-top: 75%;
    }

    .portfolio-card--list .portfolio-info {
        padding: 16px 18px 18px;
    }
}