/* Home: nav row + masthead band (date · wordmark · lang+CTA).
   Loaded after ui-fixes; overrides components.css nav border + active rules. */

/* ── Nav row override ───────────────────────────────────────────────── */
.primary-nav {
    border-bottom: 1px solid var(--rule-weak);
    border-top: 1px solid var(--rule-weak);
}

/* ── Masthead band (PC) ─────────────────────────────────────────────── */
/* 3-col grid: date L · wordmark center · lang+CTA R.
   Date + CTA pinned to top edge of band; wordmark stays vertically
   centered with its tagline. */
.masthead-band {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 14px var(--gutter-desktop) 18px;
    border-bottom: 1px solid var(--rule-weak);
    text-align: left;
    position: relative;
}
.masthead-band__left {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 1.4px;
    color: var(--paper-1);
    line-height: 1;
    justify-self: start;
    align-self: start;
}
.masthead-band__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    justify-self: center;
    grid-column: 2;
}
.masthead-band__center .masthead__wordmark {
    font-size: 78px;
    line-height: 0.95;
    letter-spacing: -2.5px;
}
.masthead-band__center .masthead__tagline {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1;
}
.masthead-band__right {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-self: end;
    align-self: start;
    grid-column: 3;
}
.masthead-band__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background-color: var(--accent);
    color: var(--paper-0);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 150ms ease, transform 100ms ease;
    white-space: nowrap;
}
.masthead-band__cta:hover,
.masthead-band__cta:focus-visible {
    background-color: #c12222;
    color: var(--paper-0);
    outline: none;
    transform: translateY(-1px);
}
.masthead-band__cta-heart {
    font-size: 13px;
    line-height: 1;
    transform: translateY(-0.5px);
}
.masthead-band .util-date--compact { display: none; }

/* ── Mobile/tablet ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .masthead-band__center .masthead__wordmark { font-size: 44px; letter-spacing: -1.4px; }
    .masthead-band__left { font-size: 10.5px; letter-spacing: 1.1px; }
    .masthead-band { padding: 14px var(--gutter-narrow, 16px) 12px; }
}
@media (max-width: 1024px) {
    .masthead-band.masthead-desktop { display: none; }
}

/* Mobile tagline + utility row (target2.png) */
.masthead-mobile-tagline,
.masthead-mobile-utility {
    display: none;
}
@media (max-width: 1024px) {
    .masthead-mobile-tagline {
        display: block;
        text-align: center;
        font-family: var(--font-body);
        font-style: italic;
        font-size: 14px;
        color: var(--paper-1);
        padding: 6px 1rem 4px;
    }
    .masthead-mobile-utility {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 8px;
        padding: 6px 1rem 14px;
        border-bottom: 1px solid var(--rule-weak);
    }
    .masthead-band__cta--mobile {
        padding: 7px 8px;
        font-size: 10px;
        letter-spacing: 0.02em;
        gap: 4px;
    }
    /* Drop heart on mobile: decorative, label carries the action.
       Reclaims ~19px so the DE "Unsere Arbeit unterstützen" CTA fits
       on 360px viewports next to the 4-chip lang switcher. */
    .masthead-band__cta--mobile .masthead-band__cta-heart { display: none; }
}
@media (max-width: 600px) {
    .masthead-band__center .masthead__wordmark { font-size: 44px; letter-spacing: -1.4px; }
    .masthead-band__center .masthead__tagline { font-size: 13px; margin-top: 4px; }
    .masthead-band { padding: 16px 1rem 12px; }
    .masthead-band__left { font-size: 9.5px; letter-spacing: 1.1px; }
    .masthead-band__cta { padding: 7px 8px; font-size: 10px; letter-spacing: 0.02em; }
}