/* Deepskyastrophoto – Themen-Trennung und Core-Bild-Lightbox, 0.30.0-test.2 */

/*
 * Ein DSA Inhaltscontainer kann einen sichtbaren Themenwechsel erzeugen.
 * Der Streifen nimmt bewusst die normale Seiten-Hintergrundfarbe an und
 * überdeckt innerhalb der großen Astroaufnahme-Beschreibung die ansonsten
 * sichtbare Panel-Farbe bis an deren Außenkante.
 */
.dsa-photo-description {
    --dsa-topic-break-bleed: calc(clamp(1.2rem, 2.4vw, 2rem) + 1px);
}

.dsa-editable-content-container.dsa-section-break-top,
.dsa-editable-content-container.dsa-section-break-bottom {
    position: relative;
}

.dsa-editable-content-container.dsa-section-break-top {
    margin-top: var(--dsa-section-break-top, 32px) !important;
}

.dsa-editable-content-container.dsa-section-break-bottom {
    margin-bottom: var(--dsa-section-break-bottom, 32px) !important;
}

.dsa-editable-content-container.dsa-section-break-top::before,
.dsa-editable-content-container.dsa-section-break-bottom::after {
    content: "";
    position: absolute;
    left: calc(-1 * var(--dsa-topic-break-bleed, 0px));
    right: calc(-1 * var(--dsa-topic-break-bleed, 0px));
    display: block;
    background: var(--dsa-bg, #071019);
    pointer-events: none;
}

.dsa-editable-content-container.dsa-section-break-top::before {
    top: calc(-1 * var(--dsa-section-break-top, 32px));
    height: var(--dsa-section-break-top, 32px);
}

.dsa-editable-content-container.dsa-section-break-bottom::after {
    bottom: calc(-1 * var(--dsa-section-break-bottom, 32px));
    height: var(--dsa-section-break-bottom, 32px);
}

@media (max-width: 760px) {
    .dsa-photo-description {
        --dsa-topic-break-bleed: calc(1rem + 1px);
    }
}

/*
 * Der WordPress-Core-Bildblock kennzeichnet „Vergrößern beim Anklicken“ mit
 * .wp-lightbox-container. Unsere JavaScript-Fallback-Lightbox nutzt denselben
 * Cursorhinweis, bleibt aber unabhängig von der Core-Interactivity-Laufzeit.
 */
.dsa-site-template .wp-lightbox-container img,
.dsa-site-template .wp-lightbox-container .lightbox-trigger {
    cursor: zoom-in;
}


/* 0.33.0 – Hauptbild auf Astroaufnahme-Detailseiten: sichtbarer Ausschnitt darf
 * gezoomt werden, der Klick öffnet weiterhin das vollständige Original. */
.dsa-photo-template .dsa-photo-figure,
.dsa-photo-template .dsa-photo-main-lightbox,
.dsa-photo-template .dsa-photo-main-display {
    overflow: hidden;
}
.dsa-photo-template .dsa-photo-main-lightbox,
.dsa-photo-template .dsa-photo-main-display {
    display: block;
    width: 100%;
    height: 100%;
}
.dsa-photo-template .dsa-photo-main-lightbox {
    cursor: zoom-in;
}
.dsa-photo-template .dsa-photo-main-lightbox .dsa-photo-main-image,
.dsa-photo-template .dsa-photo-main-display .dsa-photo-main-image {
    transform: scale(var(--dsa-detail-scale, 1)) !important;
    transform-origin: var(--dsa-detail-origin-x, 50%) var(--dsa-detail-origin-y, 50%) !important;
    transition: transform .18s ease;
    will-change: transform;
}

/* 0.33.0 – Startseite: beide internen Navigationsbuttons sind gleichwertige
 * Auswahlziele und sollen nicht wie aktiv/inaktiv wirken. */
.dsa-homepage .dsa-button-row .dsa-home-nav-button,
.dsa-system-page.dsa-homepage .dsa-home-intro .wp-block-buttons > .wp-block-button > .wp-block-button__link {
    border: 1px solid rgba(139,205,255,.35) !important;
    background: #145b8e !important;
    color: #fff !important;
}
.dsa-homepage .dsa-button-row .dsa-home-nav-button:hover,
.dsa-homepage .dsa-button-row .dsa-home-nav-button:focus,
.dsa-system-page.dsa-homepage .dsa-home-intro .wp-block-buttons > .wp-block-button > .wp-block-button__link:hover,
.dsa-system-page.dsa-homepage .dsa-home-intro .wp-block-buttons > .wp-block-button > .wp-block-button__link:focus {
    background: #1972ad !important;
    border-color: rgba(139,205,255,.55) !important;
}