/* =========================================
   Block: Journal (kss/lswn-journal)
   ========================================= */

.lswn-journal {
    position: relative;
    z-index: 4;
    padding: var(--lswn-section) var(--lswn-edge);
    max-width: 1160px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.lswn-journal__headline {
    font-family: var(--lswn-serif);
    font-weight: 400;
    line-height: var(--lswn-leading-heading);
    letter-spacing: var(--lswn-tracking-heading);
    font-size: var(--lswn-text-h2);
    color: var(--lswn-wine);
    margin: 0 0 8px;
}
.lswn-journal__headline i { font-style: italic; color: var(--lswn-gold); }

.lswn-journal__intro {
    color: var(--lswn-ink-soft);
    margin: 0 0 52px;
}

.lswn-journal__post {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: clamp(16px, 4vw, 50px);
    padding: 30px 18px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(176, 134, 47, .3);
    text-decoration: none;
}
.lswn-journal__post:first-of-type {
    border-top: 1px solid rgba(176, 134, 47, .3);
}

.lswn-journal__swipe {
    position: absolute;
    inset: 0;
    background: var(--lswn-parch);
    transform: translateX(-101%);
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
    z-index: 0;
}
.lswn-journal__post:hover .lswn-journal__swipe {
    transform: translateX(0);
}
/* :not(.lswn-journal__swipe) ist Pflicht — sonst gewinnt diese Regel (gleiche
   Spezifität, steht später im Stylesheet) gegen .lswn-journal__swipes
   position:absolute und degradiert es zu position:relative. Das Overlay
   kollabiert dann auf Höhe 0 (kein Hover-Effekt sichtbar) UND nimmt als
   In-Flow-Element eine echte Grid-Spalte ein, wodurch Datum/Titel/Pfeil je
   eine Spalte nach rechts rutschen. */
.lswn-journal__post > *:not(.lswn-journal__swipe) {
    position: relative;
    z-index: 1;
}

.lswn-journal__date {
    font-family: var(--lswn-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--lswn-gold);
    white-space: nowrap;
}

.lswn-journal__post h3 {
    font-size: clamp(20px, 2.4vw, 31px);
    color: var(--lswn-wine);
    margin: 0;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.lswn-journal__post:hover h3 {
    transform: translateX(14px);
}

.lswn-journal__arw {
    width: 26px;
    opacity: 0;
    transform: translateX(-12px);
    transition: all .55s cubic-bezier(.2, .7, .3, 1);
}
.lswn-journal__post:hover .lswn-journal__arw {
    opacity: 1;
    transform: translateX(0);
}
.lswn-journal__arw path {
    stroke: var(--lswn-gold);
    fill: none;
    stroke-width: 1.2;
}

/* --- Einblenden beim Scrollen (siehe script.js) --- */
.lswn-journal__headline,
.lswn-journal__intro,
.lswn-journal__post {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .8s cubic-bezier(.2, .7, .3, 1), transform .8s cubic-bezier(.2, .7, .3, 1);
}
.lswn-journal__headline.is-visible,
.lswn-journal__intro.is-visible,
.lswn-journal__post.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 700px) {
    .lswn-journal__post {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .lswn-journal__arw {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lswn-journal__headline,
    .lswn-journal__intro,
    .lswn-journal__post {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .lswn-journal__post:hover h3,
    .lswn-journal__post:hover .lswn-journal__arw,
    .lswn-journal__post:hover .lswn-journal__swipe {
        transform: none;
    }
}