/* ===== NEWS TICKER (news-ticker/news-ticker.php) — homepage only ===== */
header:has(> .news-ticker) {
    display: flex;
    flex-direction: column;
}

/* .header-content centres with margin:0 auto → in a flex column that would shrink it; let it stretch */
header:has(> .news-ticker) > .header-content {
    margin-left: 0;
    margin-right: 0;
}

header.scrolled .news-ticker {
    display: none;
}

.news-ticker {
    --nt-bg: var(--white);
    --nt-label-bg: #e5efec;
    --nt-text: var(--secondary);
    --nt-icon-bg: rgba(38, 122, 94, 0.12);
    --nt-icon: var(--primary);
    display: flex;
    align-items: stretch;
    height: 44px;
    background: var(--nt-bg);
    overflow: hidden;
}

.news-ticker__label {
    display: flex;
    flex: none;
    align-items: center;
    padding: 0 48px 0 48px;
    background: var(--nt-label-bg);
    font: 500 10px/1 "aktiv-grotesk-extended", "Inter", system-ui, sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--nt-text);
}

.news-ticker__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.news-ticker__track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news-ticker.is-running .news-ticker__track {
    animation: nt-scroll var(--nt-duration, 60s) linear infinite;
}

.news-ticker:hover .news-ticker__track,
.news-ticker:focus-within .news-ticker__track {
    animation-play-state: paused;
}

@keyframes nt-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* padding (not gap) so the duplicated half is exactly 50% of the track */
.news-ticker__item {
    flex: none;
    padding-left: 16px;
    padding-right: 16px;
}

.news-ticker__item a {
    display: flex;
    align-items: center;
    gap: 22px;
    color: var(--nt-text);
    text-decoration: none;
}

.news-ticker__title {
    display: -webkit-box;
    max-width: min(calc(var(--nt-chars, 30) * 0.56em), 340px);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font: 400 12px/16px "aktiv-grotesk-extended", "Inter", system-ui, sans-serif;
    text-wrap: balance;
}

.news-ticker__item a:hover .news-ticker__title,
.news-ticker__item a:focus-visible .news-ticker__title {
    text-decoration: underline;
}

.news-ticker__item a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.news-ticker__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--nt-icon-bg);
    transition: background-color 0.2s ease;
}

.news-ticker__icon svg {
    fill: var(--nt-icon);
    transition: fill 0.2s ease;
}

.news-ticker__item a:hover .news-ticker__icon {
    background: var(--nt-icon);
}

.news-ticker__item a:hover .news-ticker__icon svg {
    fill: var(--white);
}

/* No motion: a plain horizontally scrollable row */
@media (prefers-reduced-motion: reduce) {
    .news-ticker__viewport {
        overflow-x: auto;
    }

    .news-ticker.is-running .news-ticker__track {
        animation: none;
    }
}

/* ---------- MOBILE: below the header, label on its own line ---------- */
@media (max-width: 787px) {
    .news-ticker {
        order: 1;
        flex-direction: column;
        height: auto;
        padding: 10px 0 12px;
    }

    .news-ticker__label {
        padding: 0 16px 6px;
        background: none;
        font-size: 11px;
        color: #8592a0;
    }

    .news-ticker__item {
        padding-left: 16px;
        padding-right: 8px;
    }

    .news-ticker__title {
        max-width: min(calc(var(--nt-chars, 30) * 0.56em), 260px);
        font-size: 14px;
        line-height: 20px;
    }

    .news-ticker__icon {
        width: 22px;
        height: 22px;
    }
}