/**
 * Semantic Media Kit — Estilos Base (Fallback)
 *
 * PROPÓSITO: Evitar layout roto si el tema no carga.
 * PRINCIPIOS:
 *   - Especificidad mínima (una sola clase, sin anidación)
 *   - Cero !important
 *   - Solo propiedades estructurales, no cosméticas
 *   - Cualquier regla del tema las sobrescribe sin esfuerzo
 */

/* ─── Figure wrapper ─── */
.smk-media-figure {
    margin: 1.5em 0;
    padding: 0;
    max-width: 100%;
}

/* ─── Imágenes ─── */
.smk-media-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.smk-media-fallback {
    display: block;
    max-width: 100%;
    height: auto;
    opacity: 0.85;
}

/* ─── Figcaption / Leyenda ─── */
.smk-media-caption {
    margin-top: 0.5em;
    font-size: 0.875em;
    line-height: 1.4;
    color: inherit;
    opacity: 0.75;
}

/* ─── Enlaces dentro de leyendas ─── */
.smk-media-caption a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ─── Video / Audio ─── */
.smk-media-video,
.smk-media-audio {
    display: block;
    max-width: 100%;
}

.smk-media-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.smk-media-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─── Enlace de media (lightbox / file link) ─── */
.smk-media-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.smk-media-file-link {
    display: inline-block;
    color: inherit;
    text-decoration: underline;
}

/* ─── Logo de atribución ─── */
.smk-attr-logo {
    display: inline-block;
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.25em;
}

/* ─── Debug (solo visible para admins con debug activo) ─── */
.smk-debug-info {
    font-size: 0.75rem;
    line-height: 1.5;
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 0.75em 1em;
    margin: 0.75em 0;
}

/* ─── Wrapper alternativo (div) ─── */
.smk-media-wrapper {
    margin: 1.5em 0;
    padding: 0;
    max-width: 100%;
}