/**
 * Seecat gallery layout – host themes can override via CSS variables.
 *
 * Size classes from width_cm (set as data-size / .seecat-size-* by JS):
 *   L = full width, M = 1/2, S = 1/3 (flex row; incomplete rows center).
 *
 * @file    core/css/seecat.css
 * @project seecat
 */

.seecat-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--seecat-gap, 1.5rem);
    width: 100%;
}

.seecat-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    box-sizing: border-box;
}

.seecat-card[data-size="L"],
.seecat-size-l {
    flex: 0 0 100%;
    max-width: 100%;
}

.seecat-card[data-size="M"],
.seecat-size-m {
    flex: 0 0 calc((100% - var(--seecat-gap, 1.5rem)) / 2);
    max-width: calc((100% - var(--seecat-gap, 1.5rem)) / 2);
}

.seecat-card[data-size="S"],
.seecat-size-s {
    flex: 0 0 calc((100% - 2 * var(--seecat-gap, 1.5rem)) / 3);
    max-width: calc((100% - 2 * var(--seecat-gap, 1.5rem)) / 3);
}

.seecat-media {
    position: relative;
    width: 100%;
    background: var(--seecat-media-bg, #f0f0f0);
}

.seecat-media img {
    display: block;
    width: 100%;
    height: auto;
}

.seecat-label {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--seecat-label-color, #fff);
    background: var(--seecat-label-bg, #333);
}

.seecat-label-sold {
    background: var(--seecat-label-sold-bg, #c00);
}

.seecat-caption {
    font-size: var(--seecat-caption-size, 0.875rem);
    line-height: 1.4;
    color: var(--seecat-caption-color, inherit);
    text-align: center;
}

.seecat-empty {
    margin: 0;
    color: var(--seecat-empty-color, #666);
}

@media (max-width: 560px) {
    .seecat-card[data-size="L"],
    .seecat-card[data-size="M"],
    .seecat-card[data-size="S"],
    .seecat-size-l,
    .seecat-size-m,
    .seecat-size-s {
        flex: 0 0 100%;
        max-width: 100%;
    }
}