/* ── Editorial Block ─────────────────────────────────────────────────────── */

.kdk-editorial {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Section heights ─────────────────────────────────────────────────────── */
.kdk-editorial--vh50  { min-height: 50vh; }
.kdk-editorial--vh75  { min-height: 75vh; }
.kdk-editorial--vh100 { min-height: 100vh; }

/* ── Vertical padding scale ──────────────────────────────────────────────── */
.kdk-editorial--pad-sm { padding-top: 3rem;  padding-bottom: 3rem; }
.kdk-editorial--pad-md { padding-top: 5rem;  padding-bottom: 5rem; }
.kdk-editorial--pad-lg { padding-top: 7rem;  padding-bottom: 7rem; }
.kdk-editorial--pad-xl { padding-top: 10rem; padding-bottom: 10rem; }

/* ── Overlap (negative margin) ───────────────────────────────────────────── */
.kdk-editorial--overlap-top    { margin-top: calc(-1 * var(--editorial-overlap, 4rem)); }
.kdk-editorial--overlap-bottom { margin-bottom: calc(-1 * var(--editorial-overlap, 4rem)); }
.kdk-editorial--overlap-both   {
    margin-top: calc(-1 * var(--editorial-overlap, 4rem));
    margin-bottom: calc(-1 * var(--editorial-overlap, 4rem));
}
/* Ensure overlapping sections render above siblings */
.kdk-editorial--overlap-top,
.kdk-editorial--overlap-bottom,
.kdk-editorial--overlap-both {
    position: relative;
    z-index: 2;
}

/* ── Background image layer ──────────────────────────────────────────────── */
.kdk-editorial__bg {
    position: absolute;
    inset: -10%; /* extra room for parallax travel */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    z-index: 0;
}

/* ── Inner layout ────────────────────────────────────────────────────────── */
.kdk-editorial__inner {
    position: relative;
    z-index: 1;
    max-width: var(--wp--style--global--content-size, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

/* Vertical alignment (requires height set) */
.kdk-editorial--valign-top    .kdk-editorial__inner { align-self: flex-start; }
.kdk-editorial--valign-middle .kdk-editorial__inner { align-self: center; }
.kdk-editorial--valign-bottom .kdk-editorial__inner { align-self: flex-end; }

.kdk-editorial--vh50,
.kdk-editorial--vh75,
.kdk-editorial--vh100 {
    display: flex;
    flex-direction: column;
}

/* Content alignment */
.kdk-editorial--align-left   .kdk-editorial__inner { text-align: left; }
.kdk-editorial--align-center .kdk-editorial__inner { text-align: center; }
.kdk-editorial--align-right  .kdk-editorial__inner { text-align: right; }

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.kdk-editorial__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 1;
    margin-bottom: 0;
    color: inherit;
    text-decoration: none;
}
a.kdk-editorial__eyebrow:hover { opacity: 1; }

/* Eyebrow sizes */
.kdk-editorial--eyebrow-xs .kdk-editorial__eyebrow { font-size: 1.25rem; }
.kdk-editorial--eyebrow-sm .kdk-editorial__eyebrow { font-size: 1.5rem; }
.kdk-editorial--eyebrow-md .kdk-editorial__eyebrow { font-size: 1.75rem; }

/* ── Headline ────────────────────────────────────────────────────────────── */
.kdk-editorial__headline {
    font-family: var(--wp--preset--font-family--display, inherit);
    font-weight: 400;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    position: relative;
    /* Default: inline-block but only as wide as the text itself, so accent
       styles never extend past the characters. max-width keeps long single
       words from overflowing the section. */
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    /* Long German compound words ("Straßenumzug", "Bandbewerbungsschluss")
       must break inside the word on narrow screens — otherwise the headline
       overflows the container which has overflow:hidden and gets clipped. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    will-change: transform;
}

/* Headline sizes — unified S/M/L/XL scale (2xl aliased to XL) */
.kdk-editorial--hl-sm  .kdk-editorial__headline { font-size: var(--kdk-fs-s);  }
.kdk-editorial--hl-md  .kdk-editorial__headline { font-size: var(--kdk-fs-m);  }
.kdk-editorial--hl-lg  .kdk-editorial__headline { font-size: var(--kdk-fs-l);  }
.kdk-editorial--hl-xl  .kdk-editorial__headline { font-size: var(--kdk-fs-xl); }
.kdk-editorial--hl-2xl .kdk-editorial__headline { font-size: var(--kdk-fs-xl); }

/* ── Accent styles — must wrap text only, never the container ───────────── */

/* Underline: text-decoration is a text effect — already text-only. */
.kdk-editorial--hl-underline .kdk-editorial__headline {
    text-decoration: underline;
    text-decoration-color: var(--editorial-accent, currentColor);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.06em;
}

/* Stroke: -webkit-text-stroke applies to glyphs only — already text-only. */
.kdk-editorial--hl-stroke .kdk-editorial__headline {
    -webkit-text-stroke: 2px var(--editorial-accent, currentColor);
    -webkit-text-fill-color: transparent;
}

/* Highlight: thick text-decoration underline with negative offset acts as a
   marker-style highlight band. text-decoration is applied per glyph, so it
   wraps cleanly across line breaks AND never extends past the text — solving
   both the "container-wide bar" and the "only one line is highlighted" bugs. */
.kdk-editorial--hl-highlight .kdk-editorial__headline {
    text-decoration: underline;
    text-decoration-color: var(--editorial-accent, #FFE85E);
    text-decoration-thickness: 0.5em;
    text-underline-offset: -0.25em;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    line-height: 1.6;
}

/* Round HL: full-glyph background pill, cloned per line for wrapping text. */
.kdk-editorial--hl-round-highlight .kdk-editorial__headline {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: var(--editorial-accent, #FFE85E);
    padding: 0.05em 0.25em;
    border-radius: 0.2em;
    line-height: 1.6;
}

/* ── Editorial styled list (own authoring field) ────────────────────────── */
.kdk-editorial__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    line-height: 1.4;
    max-width: 680px;
}
.kdk-editorial--align-center .kdk-editorial__list { margin-left: auto; margin-right: auto; }
.kdk-editorial--align-right  .kdk-editorial__list { margin-left: auto; }

/* Size modifiers — `body` follows the Body text scale, S/M/L/XL use the
   shared display scale (same tiers as headings). */
.kdk-editorial__list--size-body { font-size: var(--kdk-fs-body-m); }
.kdk-editorial--body-sm .kdk-editorial__list--size-body { font-size: var(--kdk-fs-body-s); }
.kdk-editorial--body-md .kdk-editorial__list--size-body { font-size: var(--kdk-fs-body-m); }
.kdk-editorial--body-lg .kdk-editorial__list--size-body { font-size: var(--kdk-fs-body-l); }
.kdk-editorial__list--size-sm { font-size: var(--kdk-fs-s);  line-height: 1.25; }
.kdk-editorial__list--size-md { font-size: var(--kdk-fs-m);  line-height: 1.2;  }
.kdk-editorial__list--size-lg { font-size: var(--kdk-fs-l);  line-height: 1.15; }
.kdk-editorial__list--size-xl { font-size: var(--kdk-fs-xl); line-height: 1.1;  }

/* Font family modifiers */
.kdk-editorial__list--font-sans    { font-family: var(--wp--preset--font-family--sans, inherit); font-weight: 500; }
.kdk-editorial__list--font-display { font-family: "Gasoek One", sans-serif; font-weight: 400; }
.kdk-editorial__list--font-mono    { font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); font-weight: 400; }

.kdk-editorial__list-item {
    display: flex;
    align-items: baseline;
    padding: 0.3em 0;
}
.kdk-editorial__list-bullet {
    flex-shrink: 0;
    margin-right: 0.5em;
    /* Explicitly lock the bullet glyph to the list's current font-size so it
       always visually matches the text next to it (some fonts render ●/→/★
       smaller than regular letters by default). */
    font-size: 1em;
    line-height: 1;
    color: var(--editorial-accent, currentColor);
    opacity: 0.85;
}
.kdk-editorial__list-text { flex: 1; }

.kdk-editorial__list--dot   .kdk-editorial__list-bullet::before { content: '●'; }
.kdk-editorial__list--dash  .kdk-editorial__list-bullet::before { content: '—'; }
.kdk-editorial__list--arrow .kdk-editorial__list-bullet::before { content: '→'; }
.kdk-editorial__list--check .kdk-editorial__list-bullet::before { content: '✓'; }
.kdk-editorial__list--star  .kdk-editorial__list-bullet::before { content: '★'; }
.kdk-editorial__list--number { counter-reset: kdk-ed-list; }
.kdk-editorial__list--number .kdk-editorial__list-item { counter-increment: kdk-ed-list; }
.kdk-editorial__list--number .kdk-editorial__list-bullet::before { content: counter(kdk-ed-list) '.'; }

/* ── Body text ───────────────────────────────────────────────────────────── */
.kdk-editorial__body {
    max-width: 680px;
    font-size: var(--kdk-fs-body-m);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.kdk-editorial--align-center .kdk-editorial__body { margin-left: auto; margin-right: auto; }
.kdk-editorial--align-right  .kdk-editorial__body { margin-left: auto; }

/* Body sizes — unified body scale */
.kdk-editorial--body-sm .kdk-editorial__body { font-size: var(--kdk-fs-body-s); }
.kdk-editorial--body-md .kdk-editorial__body { font-size: var(--kdk-fs-body-m); }
.kdk-editorial--body-lg .kdk-editorial__body { font-size: var(--kdk-fs-body-l); }

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.kdk-editorial__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 200ms ease, gap 200ms ease;
}

.kdk-editorial__cta:hover { opacity: 0.7; gap: 0.75rem; }

.kdk-editorial__cta::after {
    content: "→";
    transition: transform 200ms ease;
}

.kdk-editorial__cta:hover::after { transform: translateX(4px); }

/* Normal links in body text */
.kdk-editorial__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: opacity 200ms ease;
}
.kdk-editorial__body a:hover { opacity: 0.7; }

/* CTA-style links — wrap link text with <strong> in the WYSIWYG to trigger */
.kdk-editorial__body a strong,
.kdk-editorial__body a b {
    font-weight: 600;
}
.kdk-editorial__body strong a,
.kdk-editorial__body b a {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}
.kdk-editorial__body strong a::after,
.kdk-editorial__body b a::after { content: " →"; }

/* ── Accent shapes ───────────────────────────────────────────────────────── */
.kdk-editorial__shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    color: var(--editorial-shape-color, var(--editorial-accent, currentColor));
}

/* 9-position system */
.kdk-editorial__shape--tl { top: 1.5rem;  left: 1.5rem;  }
.kdk-editorial__shape--tc { top: 1.5rem;  left: 50%; transform: translateX(-50%); }
.kdk-editorial__shape--tr { top: 1.5rem;  right: 1.5rem; }
.kdk-editorial__shape--cl { top: 50%; transform: translateY(-50%); left: 1.5rem;  }
.kdk-editorial__shape--cc { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.kdk-editorial__shape--cr { top: 50%; transform: translateY(-50%); right: 1.5rem; }
.kdk-editorial__shape--bl { bottom: 1.5rem; left: 1.5rem;  }
.kdk-editorial__shape--bc { bottom: 1.5rem; left: 50%; transform: translateX(-50%); }
.kdk-editorial__shape--br { bottom: 1.5rem; right: 1.5rem; }

/* Shape types */
.kdk-editorial__shape--line-h {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.kdk-editorial__shape--line-h.kdk-shape--sm { width: 40px; }
.kdk-editorial__shape--line-h.kdk-shape--md { width: 80px; }
.kdk-editorial__shape--line-h.kdk-shape--lg { width: 140px; }

.kdk-editorial__shape--line-v {
    display: block;
    width: 2px;
    background: currentColor;
    border-radius: 2px;
}
.kdk-editorial__shape--line-v.kdk-shape--sm { height: 40px; }
.kdk-editorial__shape--line-v.kdk-shape--md { height: 80px; }
.kdk-editorial__shape--line-v.kdk-shape--lg { height: 140px; }

.kdk-editorial__shape--dot {
    display: block;
    border-radius: 50%;
    background: currentColor;
}
.kdk-editorial__shape--dot.kdk-shape--sm { width: 10px; height: 10px; }
.kdk-editorial__shape--dot.kdk-shape--md { width: 20px; height: 20px; }
.kdk-editorial__shape--dot.kdk-shape--lg { width: 40px; height: 40px; }

.kdk-editorial__shape--rect {
    display: block;
    background: currentColor;
    border-radius: 3px;
}
.kdk-editorial__shape--rect.kdk-shape--sm { width: 32px; height: 12px; }
.kdk-editorial__shape--rect.kdk-shape--md { width: 60px; height: 20px; }
.kdk-editorial__shape--rect.kdk-shape--lg { width: 100px; height: 32px; }

.kdk-editorial__shape--circle {
    display: block;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
}
.kdk-editorial__shape--circle.kdk-shape--sm { width: 32px; height: 32px; }
.kdk-editorial__shape--circle.kdk-shape--md { width: 64px; height: 64px; }
.kdk-editorial__shape--circle.kdk-shape--lg { width: 120px; height: 120px; }

/* ── Reveal animations (hidden state) ───────────────────────────────────── */
/* Applied to __inner so the section background stays visible */
.kdk-editorial__inner[data-reveal="fade-up"]    { opacity: 0; transform: translateY(40px); }
.kdk-editorial__inner[data-reveal="fade-in"]    { opacity: 0; }
.kdk-editorial__inner[data-reveal="slide-left"] { opacity: 0; transform: translateX(60px); }
.kdk-editorial__inner[data-reveal="slide-right"]{ opacity: 0; transform: translateX(-60px); }
.kdk-editorial__inner[data-reveal="scale-up"]   { opacity: 0; transform: scale(0.94); }

.kdk-editorial__inner.kdk-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Always visible in the block editor preview */
.acf-block-preview .kdk-editorial__inner[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .kdk-editorial--pad-sm { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .kdk-editorial--pad-md { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .kdk-editorial--pad-lg { padding-top: 3rem;   padding-bottom: 3rem; }
    .kdk-editorial--pad-xl { padding-top: 4rem;   padding-bottom: 4rem; }
}