/* Scoped addition to the existing Zaporuka theme; no global form changes. */
.first-screen.zprk-hero { margin-bottom: 76px; }
.zprk-hero__stage { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,412px); gap: 40px; align-items: end; min-height: 590px; padding: 24px; border-radius: 8px; overflow: hidden; isolation: isolate; background: #303339; }
.zprk-hero__slides { grid-column: 1; grid-row: 1; min-width: 0; align-self: end; }
.zprk-hero__slide[hidden] { display: none !important; }
.zprk-hero__image { position: absolute; inset: 0; z-index: -2; display: block; }
.zprk-hero__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.12) 62%,transparent); }
.zprk-hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.first-screen.zprk-hero .text-content { position: relative; width: auto; max-width: 530px; margin: 0; padding: 24px 16px 16px; z-index: 1; background: none; }
.first-screen.zprk-hero .main-title { margin: 0 0 18px; font-size: 48px; line-height: 1.12; font-weight: 600; color: #fff; overflow-wrap: break-word; }
.first-screen.zprk-hero .text-content .text { font-size: 18px; line-height: 1.5; color: #fff; }
.zprk-hero__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 4px 0; color: #fff; font-size: 20px; line-height: 1.4; text-decoration: none; }
.zprk-hero__cta span { border-bottom: 1px solid currentColor; }
.zprk-hero__cta:hover { color: #F6B738; }
.zprk-hero__cta svg { flex-shrink: 0; }
.first-screen.zprk-hero .text-content svg { filter: none; }
.first-screen.zprk-hero .donation-container { position: relative; grid-column: 2; grid-row: 1; width: 100%; max-width: none; align-self: center; z-index: 2; margin: 0; background: rgba(246,183,56,.55); }
.zprk-hero__navigation { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 0; }
.zprk-hero__dots { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.zprk-hero__arrow,.zprk-hero__dot { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: #303339; }
.zprk-hero__arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; }
.zprk-hero__dot { position: relative; width: 24px; height: 40px; transition: width .2s; }
.zprk-hero__dot::before { content: ''; display: block; width: 10px; height: 10px; margin: auto; border-radius: 12px; background: #d0d0d0; }
.zprk-hero__dot.is-active { width: 34px; }
.zprk-hero__dot.is-active::before { width: 30px; background: #F6B738; }
.zprk-hero button:focus-visible,.zprk-hero__cta:focus-visible { outline: 2px solid #EF9E29; outline-offset: 4px; }
.zprk-hero__slide.is-active .zprk-hero__copy { animation: zprk-hero-appear .45s ease-out; }
@keyframes zprk-hero-appear { from { opacity: .25; } to { opacity: 1; } }
@media (min-width: 768px) and (max-width: 1023px) {
    .zprk-hero__stage { grid-template-columns: minmax(0,1fr) minmax(290px,360px); gap: 20px; min-height: 550px; padding: 20px; }
    .first-screen.zprk-hero .main-title { font-size: 38px; }
    .first-screen.zprk-hero .text-content { padding: 16px 0; }
    .first-screen.zprk-hero .donation-container { padding: 24px; }
    .first-screen.zprk-hero .donation-container .title { font-size: 24px; line-height: 1.25; }
}
@media (max-width: 767px) {
    .first-screen.zprk-hero { margin-bottom: 32px; }
    .zprk-hero__inner { display: flex; flex-direction: column; }
    .zprk-hero__stage { display: contents; }
    .zprk-hero__slides { order: 1; }
    .zprk-hero__image { position: relative; inset: auto; z-index: auto; aspect-ratio: 5 / 3; border-radius: 20px; overflow: hidden; }
    .zprk-hero__image::after { display: none; }
    .first-screen.zprk-hero .text-content { width: 100%; max-width: none; margin: 0; padding: 20px 0 0; color: #171717; }
    .first-screen.zprk-hero .main-title { font-size: 30px; line-height: 1.18; color: #171717; margin-bottom: 12px; }
    .first-screen.zprk-hero .text-content .text { color: #303339; font-size: 17px; line-height: 1.45; }
    .zprk-hero__cta { font-size: 18px; color: #171717; margin-top: 18px; }
    .zprk-hero__navigation { order: 2; padding: 12px 0; gap: 8px; }
    .zprk-hero__dots { gap: 8px; }
    .first-screen.zprk-hero .donation-container { order: 3; width: 100%; max-width: none; margin: 8px 0 0; padding: 24px 20px; background: linear-gradient(120deg,#ffe8b8,#ffdda0); }
    .first-screen.zprk-hero .donation-container .title { color: #171717; font-size: 24px; line-height: 1.22; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .zprk-hero__slide.is-active .zprk-hero__copy { animation: none; }
    .zprk-hero__dot { transition: none; }
}

/* Keep the previous image underneath until the incoming lazy image is decoded. */
.zprk-hero__slides { display: grid; touch-action: pan-y pinch-zoom; }
.zprk-hero__slide { grid-area: 1 / 1; min-width: 0; }
.zprk-hero__slide .zprk-hero__image { opacity: 1; transition: opacity .6s ease; }
.zprk-hero__slide.is-entering .zprk-hero__image { opacity: 0; }
.zprk-hero__slide.is-active .zprk-hero__image { z-index: -1; }
/* Opacity hides the entire outgoing layer, including links with explicit visibility. */
.zprk-hero__slide.is-leaving .zprk-hero__copy { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
    .zprk-hero__slides { position: relative; }
    .zprk-hero__slide.is-active .zprk-hero__image { z-index: 1; }
    .zprk-hero__slide.is-leaving .zprk-hero__image { z-index: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .zprk-hero__slide .zprk-hero__image { transition: none; }
}

/* Each desktop/tablet copy ends at the same baseline throughout the crossfade. */
@media (min-width: 768px) {
    .zprk-hero__slide { align-self: end; }
}

/* Applies to the first server-rendered slide and subsequent client-side changes. */
.first-screen.zprk-hero.is-form-hidden .donation-container,
.first-screen.zprk-hero .donation-container[hidden] { display: none !important; }
