/**
 * Character Card Component - Theme Integration
 * Inline character display with text wrapping support
 *
 * Primary use case: Inline 200px character cards in story posts
 * Replaces wie-is-wie block for single character showcase
 */

/* =================================================================
   BASE CHARACTER CARD (Image-like structure)
   ================================================================= */

.qm-character-card {
    /* Size controlled by imageSize attribute (small/medium/large) */
    --image-size: var(--qm-character-card-width, 200px);

    /* Character accent color (dynamic per character) */
    --character-color: var(--qm-accent-primary, #007cba);

    /* Layout - inline like WordPress image block */
    display: inline-block;
    vertical-align: top;
    max-width: var(--image-size);
    margin: 0;

    /* Remove card styling */
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* =================================================================
   CHARACTER IMAGE
   ================================================================= */

.qm-character-card img.qm-character-image {
    width: var(--image-size);
    height: var(--image-size);
    object-fit: cover;
    display: block;
}

/* Image styles */
.qm-image-rounded img.qm-character-image {
    border-radius: var(--qm-border-radius-md, 8px);
}

.qm-image-circle img.qm-character-image,
.qm-image-circular img.qm-character-image {
    border-radius: 50%;
}

.qm-image-square img.qm-character-image {
    border-radius: 0;
}

/* =================================================================
   CHARACTER CAPTION (WordPress image caption style)
   ================================================================= */

.qm-character-card .wp-element-caption {
    /* WordPress image caption styling - matches core */
    margin-top: 0.25em;
    margin-bottom: 0;
    font-size: 0.875rem;
    text-align: center;
    color: #666;
}

.qm-character-description {
    font-size: var(--qm-text-sm, 0.875rem);
    font-weight: var(--qm-font-normal, 400);
    color: var(--card-text-muted);
    line-height: var(--qm-leading-normal, 1.5);
    margin: 0;
    text-align: center;
}

/* =================================================================
   SIZE VARIANTS (via imageSize attribute)
   ================================================================= */

/* Small: 150px */
.qm-character-card[data-image-size="small"] {
    --image-size: 150px;
}

.qm-character-card[data-image-size="small"] .wp-element-caption {
    font-size: 0.75rem;
}

/* Medium: 200px (default - inline use case) */
.qm-character-card[data-image-size="medium"] {
    --image-size: 200px;
}

/* Large: 300px */
.qm-character-card[data-image-size="large"] {
    --image-size: 300px;
}

.qm-character-card[data-image-size="large"] .wp-element-caption {
    font-size: 1rem;
}


/* =================================================================
   WORDPRESS ALIGNMENT SUPPORT (inline text wrapping)
   ================================================================= */

/* Left alignment - text wraps on right */
figure.qm-character-card.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

/* Right alignment - text wraps on left */
figure.qm-character-card.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}

/* Center alignment - no text wrap */
figure.qm-character-card.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    float: none;
}

/* =================================================================
   DYNAMIC CHARACTER COLORS
   ================================================================= */

/* Character color set via inline style="--character-color: ..." */
.qm-character-card img.qm-character-image {
    border-color: var(--character-color);
}

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

@media (max-width: 768px) {
    /* Slightly smaller on tablet */
    .qm-character-card[data-image-size="large"] {
        --image-size: 250px;
    }

    .qm-character-card[data-image-size="medium"] {
        --image-size: 180px;
    }
}

@media (max-width: 480px) {
    /* Stack on mobile, no float */
    figure.qm-character-card.alignleft,
    figure.qm-character-card.alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
    }

    /* Smaller on mobile */
    .qm-character-card[data-image-size="large"] {
        --image-size: 200px;
    }

    .qm-character-card[data-image-size="medium"] {
        --image-size: 160px;
    }

    .qm-character-card[data-image-size="small"] {
        --image-size: 120px;
    }
}

/* =================================================================
   EMPTY & ERROR STATES
   ================================================================= */

.qm-character-card-empty,
.qm-character-card-error {
    padding: 1.5rem;
    text-align: center;
    color: #666;
    font-style: italic;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background: #f5f5f5;
}

.qm-character-card-error {
    color: #dc2626;
    background: #fef2f2;
    border-color: #dc2626;
}