/*
 * LLU 5.4.7 – definitive homepage transition layer
 * Loaded after llu-color-mode.css.
 *
 * No navigation selectors.
 * No intro changes.
 * No SALE color changes.
 * No image replacements.
 */

:root,
html[data-llu-theme="dark"] {
    --llu-edge-page: var(--llu-page-bg);
    --llu-edge-page-rgb: 18,21,18;
    --llu-edge-left: var(--llu-dark-left);
    --llu-edge-right: var(--llu-dark-right);
    --llu-edge-contact: var(--llu-surface-2);
}

html[data-llu-theme="light"] {
    --llu-edge-page: #ffffff;
    --llu-edge-page-rgb: 255,255,255;
    --llu-edge-left: var(--llu-dark-left);
    --llu-edge-right: var(--llu-dark-right);
    --llu-edge-contact: var(--llu-surface-2);
}

/* All pseudo transition layers must actually exist. Older 5.3.x rules
   disabled some of them with content:none/display:none !important. */
body.llu-home .llu-legacy-hero::after,
body.llu-home .llu-original-photo::before,
body.llu-home .llu-original-photo::after,
body.llu-home .llu-section--sale::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   1. HERO / TITELBILD -> NEWS / content_before
   ============================================================ */

body.llu-home .llu-legacy-hero {
    position: relative !important;
}

/* Fade the last part of the hero into the active page canvas.
   The intro content stays above it. */
body.llu-home .llu-legacy-hero::after {
    bottom: 0 !important;
    height: clamp(70px, 8vw, 128px) !important;
    z-index: 0 !important;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-edge-page-rgb), 0) 0%,
            rgba(var(--llu-edge-page-rgb), .20) 32%,
            rgba(var(--llu-edge-page-rgb), .68) 72%,
            rgba(var(--llu-edge-page-rgb), 1) 100%
        ) !important;
}

/* Make the receiving homepage/news canvas mode-consistent. */
body.llu-home .llu-slider-slot,
body.llu-home .home-page-news,
body.llu-home .news-list-homepage,
body.llu-home .llu-section--news {
    border-top: 0 !important;
}

/* ============================================================
   2. NEWS -> HORSE PHOTO
   ============================================================ */

body.llu-home .llu-original-photo--horses {
    position: relative !important;
}

body.llu-home .llu-original-photo--horses::before {
    top: 0 !important;
    bottom: auto !important;
    height: clamp(72px, 8vw, 130px) !important;
    z-index: 4 !important;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-edge-page-rgb), 1) 0%,
            rgba(var(--llu-edge-page-rgb), .72) 28%,
            rgba(var(--llu-edge-page-rgb), .25) 64%,
            rgba(var(--llu-edge-page-rgb), 0) 100%
        ) !important;
}

/* ============================================================
   3. HORSE PHOTO -> PFERDEZUCHT
   5. NEW PHOTO -> VIEHZUCHT
   Use the exact two-column section colors at the lower photo edge.
   ============================================================ */

body.llu-home .llu-original-photo--horses::after,
body.llu-home .llu-original-photo--livestock::after {
    top: auto !important;
    bottom: 0 !important;
    height: clamp(84px, 9vw, 150px) !important;
    z-index: 4 !important;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            var(--llu-edge-left) 100%
        ) left bottom / 50% 100% no-repeat,
        linear-gradient(
            to bottom,
            transparent 0%,
            var(--llu-edge-right) 100%
        ) right bottom / 50% 100% no-repeat !important;
}

/* The legacy shadow image/div is the source of the visible horizontal strip.
   The new photo::after overlays replace it completely. */
body.llu-home .llu-original-photo + .llu-original-shadow,
body.llu-home .llu-original-shadow {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ============================================================
   4. PFERDEZUCHT -> NEW PFERDE2 PHOTO
   Remove the old divider strip and fade directly into the image.
   ============================================================ */

body.llu-home .llu-original-divider,
body.llu-home .llu-original-divider--1,
body.llu-home .llu-original-divider--2,
body.llu-home .llu-original-divider--3 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.llu-home .llu-original-photo--livestock {
    position: relative !important;
}

/* The top of pferde2 continues the two-column breeding section colors,
   eliminating the former hard divider line. */
body.llu-home .llu-original-photo--livestock::before {
    top: 0 !important;
    bottom: auto !important;
    height: clamp(76px, 8vw, 136px) !important;
    z-index: 4 !important;
    background:
        linear-gradient(
            to bottom,
            var(--llu-edge-left) 0%,
            transparent 100%
        ) left top / 50% 100% no-repeat,
        linear-gradient(
            to bottom,
            var(--llu-edge-right) 0%,
            transparent 100%
        ) right top / 50% 100% no-repeat !important;
}

/* ============================================================
   6. VIEHZUCHT -> VERKAUF
   Re-enable the transition that an older rule disabled.
   ============================================================ */

body.llu-home .llu-section--sale {
    position: relative !important;
}

body.llu-home .llu-section--sale::before {
    top: 0 !important;
    bottom: auto !important;
    height: clamp(46px, 5vw, 82px) !important;
    z-index: 0 !important;
    opacity: 1 !important;
    background:
        linear-gradient(
            to bottom,
            var(--llu-edge-left) 0%,
            rgba(var(--llu-edge-page-rgb), 0) 100%
        ) left top / 50% 100% no-repeat,
        linear-gradient(
            to bottom,
            var(--llu-edge-right) 0%,
            rgba(var(--llu-edge-page-rgb), 0) 100%
        ) right top / 50% 100% no-repeat !important;
}

/* ============================================================
   7. VERKAUF / POLLS -> CONTACT PHOTO
   Re-enable ::before explicitly; older CSS had display:none !important.
   ============================================================ */

body.llu-home .llu-post-sale-white,
body.llu-home .llu-post-sale-white-inner,
body.llu-home .llu-post-sale-white .block,
body.llu-home .llu-post-sale-white .block-body,
body.llu-home .llu-post-sale-white .widget-zone,
body.llu-home .llu-post-sale-white [data-widget-zone] {
    background-color: var(--llu-edge-page) !important;
    background-image: none !important;
    border-color: transparent !important;
}

body.llu-home .llu-original-photo--contact,
body.llu-home .llu-original-photo--after-sale {
    position: relative !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}

body.llu-home .llu-original-photo--contact::before,
body.llu-home .llu-original-photo--after-sale::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    height: clamp(82px, 9vw, 150px) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-edge-page-rgb), 1) 0%,
            rgba(var(--llu-edge-page-rgb), .74) 30%,
            rgba(var(--llu-edge-page-rgb), .28) 66%,
            rgba(var(--llu-edge-page-rgb), 0) 100%
        ) !important;
}

/* ============================================================
   8. CONTACT PHOTO -> CONTACT
   ============================================================ */

body.llu-home .llu-original-photo--contact::after,
body.llu-home .llu-original-photo--after-sale::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: clamp(82px, 9vw, 150px) !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            var(--llu-edge-contact) 100%
        ) !important;
}

/* Contact starts in exactly the color reached by the photo fade. */
body.llu-home .llu-original-photo--contact + .llu-section--contact,
body.llu-home .llu-original-photo--after-sale + .llu-section--contact {
    margin-top: 0 !important;
    border-top: 0 !important;
    background: var(--llu-edge-contact) !important;
}

/* ============================================================
   Mode guarantees
   ============================================================ */

html[data-llu-theme="light"] body.llu-home .llu-post-sale-white,
html[data-llu-theme="light"] body.llu-home .llu-post-sale-white-inner {
    background-color: #ffffff !important;
}

html[data-llu-theme="dark"] body.llu-home .llu-post-sale-white,
html[data-llu-theme="dark"] body.llu-home .llu-post-sale-white-inner {
    background-color: var(--llu-page-bg) !important;
}

/* Photos remain bottom-anchored from 5.4.6. Reassert only the crop position. */
body.llu-home .llu-hero-media,
body.llu-home .llu-original-photo-img {
    object-position: center bottom !important;
}