/* ---------------------------------------------------------------------------
 * Yemeni Belgian Cultural Center — custom design-system CSS.
 * Small, hand-authored layer on top of Tailwind (CDN). Holds only what Tailwind
 * utilities can't express: bidi helpers, scroll-reveal, carousel, prose tuning.
 * ------------------------------------------------------------------------- */

[x-cloak] { display: none !important; }

/* Bidi: force Latin/numeric runs LTR inside RTL flow (§3). */
.num-ltr {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Scroll reveal (§7). JS toggles .is-visible via IntersectionObserver;
   without JS the content is fully visible (progressive enhancement). */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* Stagger children reveals. */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .24s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .32s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .40s; }

/* Testimonial / carousel track. */
.carousel-track {
    display: flex;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { scroll-snap-align: center; flex: 0 0 100%; }

/* Rich-text content rendered from the CMS (news/events/pages bodies). */
.prose-content { line-height: 1.75; color: #443D34; }
.prose-content h2 { font-size: 1.6rem; font-weight: 600; margin: 1.8rem 0 .8rem; color: #1A1614; }
.prose-content h3 { font-size: 1.3rem; font-weight: 600; margin: 1.4rem 0 .6rem; color: #1A1614; }
.prose-content p { margin: 0 0 1.1rem; }
.prose-content a { color: #8B1E24; text-decoration: underline; text-underline-offset: 3px; }
.prose-content ul, .prose-content ol { margin: 0 0 1.1rem; padding-inline-start: 1.4rem; }
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin-bottom: .4rem; }
.prose-content blockquote {
    border-inline-start: 3px solid #C8A24B;
    padding-inline-start: 1rem;
    margin: 1.2rem 0;
    color: #5C5347;
    font-style: italic;
}
.prose-content img { border-radius: .75rem; margin: 1.2rem 0; max-width: 100%; height: auto; }

/* Line clamp helpers. */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }