/* ─── Lanze Gene — Custom Styles ─────────────────────────────────────────── */

/* Lazy-load image progressive reveal */
.img-lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.img-lazy.loaded {
    opacity: 1;
}

/* Blur-up placeholder effect */
.img-blur-up {
    filter: blur(12px);
    transform: scale(1.02);
    transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.img-blur-up.loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Image container with aspect-ratio lock to prevent layout shift */
.img-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #e5e7eb; /* gray-200 placeholder */
}

.dark .img-wrapper {
    background-color: #1f2937; /* dark gray-800 placeholder */
}

/* ─── Typography Fallbacks (Prose) ────────────────────────────────────────── */
/* In case the Tailwind typography plugin is not loaded, these provide basic formatting */

.prose ul, .rich-text ul, [data-block-key] ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin-top: 1.25em !important;
    margin-bottom: 1.25em !important;
    display: block !important;
}

.prose ol, .rich-text ol, [data-block-key] ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin-top: 1.25em !important;
    margin-bottom: 1.25em !important;
    display: block !important;
}

.prose li, .rich-text li, [data-block-key] li {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
    display: list-item !important;
    list-style: inherit !important;
}

.prose h2, .rich-text h2, [data-block-key] h2 {
    display: block !important;
    font-size: 1.875rem !important; /* text-3xl */
    font-weight: 700 !important;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
    line-height: 1.3 !important;
    color: inherit !important;
}

.prose h3, .rich-text h3, [data-block-key] h3 {
    display: block !important;
    font-size: 1.5rem !important; /* text-2xl */
    font-weight: 600 !important;
    margin-top: 1.6em !important;
    margin-bottom: 0.6em !important;
    line-height: 1.4 !important;
    color: inherit !important;
}

.prose h4, .rich-text h4, [data-block-key] h4 {
    display: block !important;
    font-size: 1.25rem !important; /* text-xl */
    font-weight: 600 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
    color: inherit !important;
}

.prose b, .prose strong, .rich-text b, .rich-text strong {
    font-weight: 700 !important;
}