/* ============================================================
Project : Compro Doodle
Module  : Component
File    : catalog-card.css
Version : 1.0.0
Author  : Doodle Engineering

Kartu produk katalog + elemen bersama halaman katalog & detail
(chip, tombol, eyebrow, grid). Dipakai /product-catalog dan
/product-catalog/{slug} (bagian "Produk Lainnya").
============================================================ */

:root{

    --catalog-pink:#FF4090;

    --catalog-pink-dark:#E6317C;

    --catalog-pink-soft:#FFF1F7;

    --catalog-pink-line:#F7DCE8;

    --catalog-gold:#A37D2E;

    --catalog-ink:#4A494C;

    --catalog-muted:#7C7A80;

}


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

.catalog-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

    gap:28px;

}


/* ============================================================
CARD
============================================================ */

.catalog-card{

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;

    color:inherit;

    text-decoration:none;

    background:#ffffff;

    border:1px solid var(--catalog-pink-line);

    border-radius:24px;

    box-shadow:0 6px 20px rgba(255,64,144,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.catalog-card:hover,
.catalog-card:focus-visible{

    transform:translateY(-6px);

    border-color:rgba(255,64,144,.35);

    box-shadow:0 18px 40px rgba(255,64,144,.14);

}

.catalog-card:focus-visible{

    outline:3px solid rgba(255,64,144,.35);

    outline-offset:3px;

}

/* Foto diposisikan absolut: ukuran asli foto tidak ikut menentukan lebar
   kartu (aman di Safari/Chrome iOS). */
.catalog-card-media{

    --media-pad:28px;

    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:#ffffff;

}

.catalog-card-media img{

    position:absolute;

    inset:var(--media-pad);

    display:block;

    width:calc(100% - var(--media-pad) * 2);

    height:calc(100% - var(--media-pad) * 2);

    object-fit:contain;

    filter:drop-shadow(0 12px 18px rgba(90,89,92,.12));

    transition:transform .35s ease;

}

.catalog-card-media .catalog-card-placeholder{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.catalog-card:hover .catalog-card-media img{

    transform:scale(1.06);

}

.catalog-card-placeholder{

    color:var(--catalog-pink);

    font-size:28px;

    font-weight:800;

    opacity:.35;

}

.catalog-card-body{

    display:flex;

    flex:1;

    flex-direction:column;

    gap:10px;

    padding:20px 22px 22px;

}

.catalog-card-title{

    margin:0;

    color:var(--catalog-ink);

    font-size:18px;

    font-weight:700;

    line-height:1.35;

}

.catalog-card-variants{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin:0;

}

.catalog-chip{

    display:inline-flex;

    align-items:center;

    padding:4px 12px;

    color:var(--catalog-pink-dark);

    background:var(--catalog-pink-soft);

    border:1px solid var(--catalog-pink-line);

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    line-height:1.4;

}

.catalog-card-summary{

    display:-webkit-box;

    margin:0;

    overflow:hidden;

    color:var(--catalog-muted);

    font-size:14px;

    line-height:1.6;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

}

.catalog-card-cta{

    display:inline-flex;

    align-items:center;

    gap:4px;

    margin-top:auto;

    padding-top:6px;

    color:var(--catalog-pink);

    font-size:14px;

    font-weight:700;

}

.catalog-card-cta svg{

    width:18px;

    height:18px;

    transition:transform .25s ease;

}

.catalog-card:hover .catalog-card-cta svg{

    transform:translateX(4px);

}


/* ============================================================
SHARED
============================================================ */

.catalog-eyebrow{

    display:inline-block;

    color:var(--catalog-gold);

    font-size:13px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.catalog-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:50px;

    padding:0 28px;

    border:2px solid transparent;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.catalog-btn:hover{

    transform:translateY(-2px);

}

.catalog-btn--primary{

    color:#ffffff;

    background:var(--catalog-pink);

    box-shadow:0 10px 22px rgba(255,64,144,.28);

}

.catalog-btn--primary:hover{

    color:#ffffff;

    background:var(--catalog-pink-dark);

}

.catalog-btn--ghost{

    color:var(--catalog-pink);

    background:#ffffff;

    border-color:var(--catalog-pink-line);

}

.catalog-btn--ghost:hover{

    border-color:var(--catalog-pink);

}

.catalog-btn:focus-visible{

    outline:3px solid rgba(255,64,144,.35);

    outline-offset:3px;

}


/* ============================================================
MOBILE: 2 kolom kartu ringkas
============================================================ */

@media (max-width:640px){

    .catalog-grid{

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

        gap:14px;

    }

    .catalog-card{

        border-radius:18px;

    }

    .catalog-card:hover{

        transform:none;

    }

    .catalog-card-media{

        --media-pad:16px;

    }

    .catalog-card-body{

        gap:8px;

        padding:14px 14px 16px;

    }

    .catalog-card-title{

        font-size:15px;

    }

    .catalog-chip{

        padding:2px 9px;

        font-size:11px;

    }

    .catalog-card-summary{

        font-size:12.5px;

        -webkit-line-clamp:2;

    }

    .catalog-card-cta{

        font-size:13px;

    }

}

@media (prefers-reduced-motion:reduce){

    .catalog-card,
    .catalog-card-media img,
    .catalog-card-cta svg,
    .catalog-btn{

        transition:none;

    }

}