/*
 * Askie Category Cards
 * New file — does not modify public.css or workspace.css.
 * Grid: 4 cols desktop → 3 cols tablet → 2 cols mobile
 */

/* ── Section wrapper ─────────────────────────────────────────── */
.askie-cat-cards-section {
    margin-bottom: 32px;
}

.askie-cat-cards-section__title {
    font-size:      15px;
    font-weight:    700;
    color:          #1a1a1a;
    margin:         0 0 16px;
    letter-spacing: -.01em;
}

/* ── Grid: 4 columns on desktop ──────────────────────────────── */
.askie-cat-cards {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
    margin-bottom:         24px;
}

.askie-cat-cards--public {
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
    margin-bottom:         36px;
}

.askie-cat-cards--workspace {
    grid-template-columns: repeat(4, 1fr);
    gap:                   14px;
    margin-bottom:         20px;
}

/* ── Card ────────────────────────────────────────────────────── */
.askie-cat-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    border-radius:   14px;
    overflow:        hidden;
    background:      #fff;
    border:          1.5px solid #ebebeb;
    cursor:          pointer;
    text-decoration: none;
    color:           inherit;
    transition:      transform .18s ease,
                     box-shadow .2s ease,
                     border-color .18s ease;
    font-family:     inherit;
    padding:         0;
    text-align:      left;
    -webkit-appearance: none;
    appearance:      none;
}

.askie-cat-card:hover,
.askie-cat-card:focus-visible {
    transform:    translateY(-3px);
    box-shadow:   0 8px 28px rgba(0,0,0,.11);
    border-color: #1563FF;
    outline:      none;
}

.askie-cat-card.active,
.askie-cat-card[aria-pressed="true"] {
    border-color: #1563FF;
    box-shadow:   0 0 0 3px rgba(21,99,255,.15),
                  0 4px 16px rgba(21,99,255,.12);
}

/* ── Image wrapper — 16:9 ratio ──────────────────────────────── */
.askie-cat-card__img-wrap {
    position:    relative;
    width:       100%;
    padding-top: 56.25%;   /* 16:9 */
    overflow:    hidden;
    flex-shrink: 0;
    background:  #f2f3f5;
}

.askie-cat-card__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .3s ease;
}

.askie-cat-card:hover .askie-cat-card__img {
    transform: scale(1.06);
}

.askie-cat-card__img--placeholder {
    object-fit: fill;
}

/* Bottom gradient so name is always readable over image */
.askie-cat-card__overlay {
    position:       absolute;
    inset:          auto 0 0 0;
    height:         65%;
    background:     linear-gradient(
                        to top,
                        rgba(0,0,0,.52) 0%,
                        rgba(0,0,0,.18) 55%,
                        transparent 100%
                    );
    pointer-events: none;
}

/* ── Name overlaid on the image (bottom of card image area) ─── */
.askie-cat-card__body {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    padding:        10px 13px 12px;
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.askie-cat-card__name {
    font-size:      13px;
    font-weight:    700;
    color:          #fff;
    line-height:    1.3;
    text-shadow:    0 1px 4px rgba(0,0,0,.4);
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.askie-cat-card__count {
    font-size:  11px;
    color:      rgba(255,255,255,.82);
    font-weight:500;
}

/* ── Responsive ──────────────────────────────────────────────── */

/* Tablet: 3 columns */
@media (max-width: 900px) {
    .askie-cat-cards,
    .askie-cat-cards--public,
    .askie-cat-cards--workspace {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

/* Large phone: 2 columns */
@media (max-width: 560px) {
    .askie-cat-cards,
    .askie-cat-cards--public,
    .askie-cat-cards--workspace {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .askie-cat-card__name { font-size: 12px; }
}

/* Public page: hide old pill filter row — cards replace it */
.askie-cat-cards--public + .askie-cat-filters {
    display: none;
}