/* =================================================================
   NDN — Creative Intro Section · editorial magazine layout
   Alternating left/right chapters (01 / 02) with a framed visual,
   large serif title, eyebrow pill, floating stat badges and optional
   polaroid thumbnails. Pure CSS, always visible.
   ================================================================= */

.cis-section {
    background: var(--ndn-bg, #F6F2EC);
    padding: clamp(70px, 8vw, 130px) 20px;
    position: relative;
    overflow: hidden;
}

/* Warm ambient glows drifting diagonally across the section */
.cis-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.cis-glow--a {
    top: -120px; left: -80px;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(200, 164, 106, 0.35), transparent 70%);
}
.cis-glow--b {
    bottom: -140px; right: -100px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(169, 131, 74, 0.28), transparent 70%);
}

.cis-container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(70px, 9vw, 140px);
}

/* ═══════════════════════════════════════════════════════════
   CHAPTER — one per block (two blocks = two chapters)
   Alternates visual + text each chapter for editorial rhythm.
   ═══════════════════════════════════════════════════════════ */

.cis-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
}
.cis-chapter--right { direction: rtl; }
.cis-chapter--right > * { direction: ltr; }

@media (max-width: 900px) {
    .cis-chapter,
    .cis-chapter--right {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 36px;
    }
    .cis-chapter--right .cis-chapter__visual { order: 2; }
}

/* ─── TEXT SIDE ─────────────────────────────────────────── */

.cis-chapter__text {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    max-width: 520px;
}

.cis-chapter__num {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ndn-accent-dark, #A9834A);
    margin-bottom: 4px;
}
.cis-chapter__num-digit {
    font-family: "Times New Roman", Times, serif;
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}
.cis-chapter__num-rule {
    flex: 1;
    height: 2px;
    max-width: 140px;
    background: linear-gradient(90deg, var(--ndn-accent-dark, #A9834A), transparent);
    border-radius: 2px;
}

/* Eyebrow — laser-device SVG + text (matches hero-eyebrow__seed) */
.cis-chapter__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ndn-accent-dark, #A9834A);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.4;
}
.cis-chapter__eyebrow-text { color: inherit; }
.cis-chapter__eyebrow-seed {
    width: 22px; height: 42px;
    flex-shrink: 0;
    color: var(--ndn-accent-dark, #A9834A);
    overflow: visible;
}
.cis-chapter__eyebrow-seed-dot {
    transform-origin: 30px 22px; transform-box: fill-box;
    animation: ndn-laser-blink 1.8s ease-in-out infinite;
}
.cis-chapter__eyebrow-seed-beam {
    transform-origin: 30px 38px; transform-box: fill-box;
    animation: ndn-laser-fire 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.cis-chapter__eyebrow-seed-ripple {
    transform-origin: 30px 100px; transform-box: fill-box;
    animation: ndn-laser-ripple 1.6s cubic-bezier(.22,1,.36,1) infinite;
}
.cis-chapter__eyebrow-seed-ripple--2 { animation-delay: 0.25s; }
.cis-chapter__eyebrow-seed-ripple--3 { animation-delay: 0.5s; }

.cis-chapter__title {
    font-family: "Times New Roman", Times, serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--ndn-text-main, #1A1A1A);
    margin: 0;
}

.cis-chapter__desc {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: clamp(15.5px, 1.3vw, 17.5px);
    line-height: 1.72;
    color: var(--ndn-text-secondary, #6B5E4B);
    margin: 0;
}

.cis-chapter__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ndn-accent, #C8A46A), var(--ndn-accent-dark, #A9834A));
    color: #fff;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 30px -10px rgba(200, 164, 106, 0.55);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cis-chapter__cta:hover,
.cis-chapter__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -10px rgba(200, 164, 106, 0.75);
    outline: none;
}
.cis-chapter__cta svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.cis-chapter__cta:hover svg { transform: translateX(4px); }

/* ─── VISUAL SIDE ───────────────────────────────────────── */

/* Visual wrapper — positioning context for floating badges & thumbs.
   Frame itself has overflow:hidden for image-zoom, but badges/thumbs
   live OUTSIDE the frame on the wrapper so they're never clipped. */
.cis-chapter__visual {
    position: relative;
    min-height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.cis-chapter__visual-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 4 / 3;                        /* matches landscape NDN photos */
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(200, 164, 106, 0.08), rgba(26, 26, 26, 0.04)),
        var(--ndn-surface-soft, #FBF7F1);       /* soft crème letterbox */
    box-shadow:
        0 40px 80px -30px rgba(26, 26, 26, 0.35),
        0 16px 36px -20px rgba(169, 131, 74, 0.25);
}

/* Image fills the frame without cropping — fully visible at all times */
.cis-chapter__visual-media,
.cis-chapter__visual-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;                        /* volledige afbeelding */
    object-position: center;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.cis-chapter__visual-placeholder {
    background:
        linear-gradient(135deg, rgba(200, 164, 106, 0.18), rgba(26, 26, 26, 0.08)),
        var(--ndn-surface-soft, #FBF7F1);
}
.cis-chapter__visual-frame:hover .cis-chapter__visual-media {
    transform: scale(1.04);
}

/* ─── FLOATING STAT BADGES — positioned on .cis-chapter__visual
   so they hover over the frame edges without getting clipped. ─── */

.cis-chapter__stat {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid rgba(200, 164, 106, 0.3);
    border-radius: 14px;
    box-shadow: 0 20px 44px -14px rgba(26, 26, 26, 0.28);
    color: var(--ndn-text-main, #1A1A1A);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    max-width: 240px;
}
.cis-chapter__stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 54px -14px rgba(26, 26, 26, 0.35);
}
/* Top-left badge hangs over the top-left corner of the frame */
.cis-chapter__stat--tl {
    top: calc(50% - 190px);   /* roughly upper-middle of a 420-480px frame */
    left: max(0px, calc(50% - 280px));
}
/* Bottom-right badge hangs over the bottom-right corner of the frame */
.cis-chapter__stat--br {
    top: calc(50% + 130px);
    right: max(0px, calc(50% - 280px));
}
@media (max-width: 1024px) {
    .cis-chapter__stat--tl { left: 0;  top: 16px; }
    .cis-chapter__stat--br { right: 0; top: auto; bottom: 16px; }
}
@media (max-width: 600px) {
    .cis-chapter__stat {
        font-size: 12px;
        padding: 10px 14px;
    }
    .cis-chapter__stat--tl { left: 6px; }
    .cis-chapter__stat--br { right: 6px; }
}
.cis-chapter__stat-icon {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--ndn-accent-dark, #A9834A);
    color: #fff;
    flex-shrink: 0;
}
.cis-chapter__stat-icon svg { width: 14px; height: 14px; }

/* ─── SECONDARY CARDS — polaroid thumbs on the frame edge ──
   Positioned on .cis-chapter__visual (parent without overflow-hidden)
   so they can safely stick out past the frame. ─────────────── */

.cis-chapter__thumbs {
    position: absolute;
    z-index: 4;
    bottom: 0;
    right: max(0px, calc(50% - 290px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translate(20%, 20%);
}
.cis-chapter--right .cis-chapter__thumbs {
    right: auto;
    left: max(0px, calc(50% - 290px));
    transform: translate(-20%, 20%);
}
@media (max-width: 1024px) {
    .cis-chapter__thumbs,
    .cis-chapter--right .cis-chapter__thumbs {
        bottom: -10px;
        right: 10px;
        left: auto;
        transform: none;
    }
}
@media (max-width: 600px) {
    .cis-chapter__thumbs,
    .cis-chapter--right .cis-chapter__thumbs {
        position: static;
        flex-direction: row;
        margin: 16px auto 0;
        justify-content: center;
        transform: none;
    }
}
.cis-chapter__thumb {
    margin: 0;
    width: 110px;
    background: #fff;
    padding: 8px 8px 14px;
    border-radius: 10px;
    box-shadow: 0 22px 40px -18px rgba(26, 26, 26, 0.35);
    transform: rotate(4deg);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cis-chapter__thumb--1 { transform: rotate(-6deg); }
.cis-chapter__thumb:hover { transform: rotate(0deg) translateY(-4px); }
.cis-chapter__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
}
.cis-chapter__thumb figcaption {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-family: "Times New Roman", Times, serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ndn-accent-dark, #A9834A);
}

/* ─── Legacy reset — neutralise any old markup still in DB ─ */
.cis-media-wrapper,
.cis-media-cards,
.cis-media-card,
.cis-stat-badge,
.cis-content-block,
.cis-profile {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}