/* ==========================================================
   CARD
   Arcade UI Kit — flat poster-card style
========================================================== */

.card{

    --card-bg:#FFFFFF;
    --card-accent:var(--ink);

    width:100%;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:var(--card-bg);

    border:2px solid var(--ink);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

}


/* ==========================================================
   ACCENT (halftone strip)
========================================================== */

.card__accent{

    width:100%;
    height:8px;

    flex-shrink:0;

    background-color:var(--card-accent);

    background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.5px);

    background-size: 6px 6px;

}


/* ==========================================================
   MEDIA
========================================================== */

.card__media{

    width:100%;

    overflow:hidden;

    background:var(--surface-soft);

}

.card__media img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

}


/* ==========================================================
   HEADER
========================================================== */

.card__header{

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:16px;

    padding:20px 20px 0;

}

.card__header-left{

    display:flex;

    align-items:flex-start;

    gap:12px;

    min-width:0;

    flex:1;

}


/* ==========================================================
   ICON
========================================================== */

.card__icon{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:var(--radius-sm);

    background:var(--card-accent);

    border:2px solid var(--ink);

}

.card__icon img{

    width:20px;
    height:20px;

    display:block;

    object-fit:contain;

    filter:brightness(0) invert(1);

}


/* ==========================================================
   TITLE GROUP
========================================================== */

.card__title-group{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.card__title{

    margin:0;

    color:var(--ink);

    font-size:17px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.01em;

    line-height:1.25;

}

.card__subtitle{

    margin:0;

    color:var(--text-muted);

    font-size:13px;

    line-height:1.4;

}


/* ==========================================================
   HEADER ACTION
========================================================== */

.card__header-action{ flex-shrink:0; }


/* ==========================================================
   BODY
========================================================== */

.card__body{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:var(--space-5);

    color:var(--text);

}

.card__body p{ margin:0; line-height:1.6; }


/* ==========================================================
   FOOTER
========================================================== */

.card__footer{

    display:flex;

    align-items:center;
    justify-content:flex-end;

    gap:10px;

    padding:0 20px 20px;

}

.card__footer--left{ justify-content:flex-start; }
.card__footer--center{ justify-content:center; }
.card__footer--between{ justify-content:space-between; }


/* ==========================================================
   DIVIDER
========================================================== */

.card__divider{

    width:100%;
    height:2px;

    background:var(--border);

}


/* ==========================================================
   VARIANTS
========================================================== */

.card--default{ --card-accent:var(--ink); }
.card--primary{ --card-accent:var(--primary); }
.card--secondary{ --card-accent:var(--secondary); }
.card--success{ --card-accent:var(--success); }
.card--warning{ --card-accent:var(--warning); }
.card--danger{ --card-accent:var(--danger); }


/* ==========================================================
   SIZES
========================================================== */

.card--sm{ max-width:320px; }
.card--md{ max-width:440px; }
.card--lg{ max-width:560px; }
.card--fluid{ max-width:none; }


/* ==========================================================
   COMPACT
========================================================== */

.card--compact .card__header{ padding:16px 16px 0; }
.card--compact .card__body{ padding:var(--space-4); }
.card--compact .card__footer{ padding:0 16px 16px; }


/* ==========================================================
   INTERACTIVE
========================================================== */

.card--interactive{

    cursor:pointer;

    transition:
        transform 100ms ease,
        box-shadow 100ms ease;

}

.card--interactive:hover{

    transform:translate(-2px,-2px);

    box-shadow:6px 6px 0 var(--ink);

}

.card--interactive:active{

    transform:translate(3px,3px);

    box-shadow:none;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:480px){

    .card__header{ padding:16px 16px 0; }
    .card__body{ padding:var(--space-4); }
    .card__footer{ padding:0 16px 16px; }

    .card__icon{ width:36px; height:36px; }
    .card__icon img{ width:18px; height:18px; }

    .card__title{ font-size:var(--font-size-md); }

}