/* =====================================================================
   VIVA KIRCHE AMRISWIL – HERO STARTSEITE
   Teil des Plugins «Viva Blocks» – Shortcode [viva_hero]
   Farben/Schriften aus dem Corporate Design (assets/core.css, var(--vb-…)).
   PhotoMe-Fix liegt zentral in core.css (.vb-block).
   ===================================================================== */

.vk-hero {
    --vk-gold: var(--vb-primary);
    --vk-gold-dark: var(--vb-primary-dark);
    --vk-gold-light: color-mix(in srgb, var(--vb-primary) 50%, #fff);
    --vk-ink: var(--vb-text);
    --vk-font-ui: 'Oswald', 'Helvetica Neue', Arial, sans-serif; /* Hero: Buttons, Label, Karte einheitlich in Oswald */
    --vk-header: 170px; /* Höhe des transparenten PhotoMe-Headers (Logo + Menüzeile) */
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1b1b;
    color: #fff;
    font-family: var(--vb-font-body);
    box-sizing: border-box;
}
.vk-hero *, .vk-hero *::before, .vk-hero *::after { box-sizing: border-box; }

/* ---------- Hintergrund: Video mit langsamem Zoom ---------- */
.vk-hero__media {
    position: absolute;
    inset: 0;
    z-index: -3;
}
.vk-hero__video,
.vk-hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.15) brightness(1.05);
    animation: vk-zoom 24s ease-in-out infinite alternate;
}
.vk-hero__poster { display: none; }
@keyframes vk-zoom {
    from { transform: scale(1.12); }
    to   { transform: scale(1.0); }
}

/* ---------- Overlay: hell & warm, nur oben (Menü) und unten (Karte) etwas dunkler ---------- */
.vk-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 90% 70% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.4) 100%),
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
        rgba(35,25,8,.16);
}
/* Filmkorn – subtiler Kino-Look */
.vk-hero__grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .05;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Inhalt ---------- */
.vk-hero__content {
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: calc(var(--vk-header) + 20px) 24px 48px;
    text-align: center;
}

/* Die grosse Typografie */
.vk-hero__title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif !important; /* Hero bewusst Oswald (dick) */
    font-weight: 700 !important;
    text-transform: uppercase;
    line-height: .88 !important;
    color: #fff !important;
    letter-spacing: 0;
}
.vk-hero__line {
    display: block;
}
.vk-hero__line--small {
    font-size: clamp(2rem, min(6.2vw, 9vh), 5.4rem);
    letter-spacing: .32em;
    padding-left: .32em; /* optischer Ausgleich für letter-spacing */
    font-weight: 500;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)) drop-shadow(0 4px 24px rgba(0,0,0,.5));
}
.vk-hero__line--small span {
    display: inline-block;
    animation: vk-blur-in 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.vk-hero__line--small span:nth-child(1) { animation-delay: .35s; }
.vk-hero__line--small span:nth-child(2) { animation-delay: .6s; }

/* "KIRCHE": Kontur → füllt sich mit Gold */
.vk-hero__line--big {
    font-size: clamp(4.6rem, min(17vw, 22vh), 13.5rem);
    display: inline-block;
    letter-spacing: .02em;
    margin-top: .06em;
    /* Platz für die Goldfüllung (background-clip malt nur innerhalb der Box) */
    padding: .08em .04em .12em;
    margin-bottom: -.12em;
    line-height: 1;
    color: transparent !important;
    -webkit-text-stroke: 2px var(--vk-gold);
    background: linear-gradient(100deg, var(--vk-gold) 0%, var(--vk-gold-light) 45%, var(--vk-gold) 70%, var(--vk-gold-dark) 100%) no-repeat left center / 0% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)) drop-shadow(0 6px 30px rgba(0,0,0,.5));
    animation:
        vk-blur-in 1.2s cubic-bezier(.2,.7,.2,1) .85s both,
        vk-fill 1.6s cubic-bezier(.65,0,.35,1) 1.7s forwards;
}
@keyframes vk-fill {
    to { background-size: 100% 100%; }
}

.vk-hero__lead {
    margin: 26px 0 0 !important;
    padding: 0 !important;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.6);
    animation: vk-rise 1s cubic-bezier(.2,.7,.2,1) 2.2s both;
}
.vk-hero__lead strong { color: var(--vk-gold); font-weight: 700; }

/* ---------- Unterer Bereich: Buttons + nächster Gottesdienst ---------- */
.vk-hero__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 28px;
    margin-top: 40px;
    animation: vk-rise 1s cubic-bezier(.2,.7,.2,1) 2.5s both;
}
.vk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Buttons: Basis aus core.css (.vb-btn). Hier nur der Glas-Button auf dem Video. */
.vk-hero .vb-btn { padding: 17px 30px; font-family: var(--vk-font-ui) !important; font-weight: 500 !important; font-size: 1rem !important; letter-spacing: .12em; }
.vk-hero__next-label, .vk-hero .ct-event-badge { font-family: var(--vk-font-ui) !important; }
.vk-hero .vb-btn--primary:hover { background: #fff; color: var(--vk-ink) !important; box-shadow: 0 14px 34px -8px rgba(255,255,255,.5); }
.vk-hero .vk-hero__ghost {
    background: rgba(0,0,0,.3);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.vk-hero .vk-hero__ghost:hover,
.vk-hero .vk-hero__ghost:focus-visible { background: #fff; color: var(--vk-ink) !important; }
.vk-hero .vb-btn:focus-visible { outline-color: #fff; }

/* Glas-Karte: nächster Gottesdienst (Shortcode-Output wird hier umgestylt) */
.vk-hero__next {
    position: relative;
    min-width: 300px;
    padding: 14px 18px 14px;
    border-radius: calc(var(--vb-radius) + 4px);
    background: rgba(20,20,20,.38);
    border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
    text-align: left;
}
.vk-hero__next-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-family: var(--vb-font-body);
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--vk-gold);
}
.vk-hero__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vk-gold);
    box-shadow: 0 0 0 0 rgba(var(--vb-primary-rgb),.7);
    animation: vk-pulse 2s infinite;
}
@keyframes vk-pulse {
    70%  { box-shadow: 0 0 0 10px rgba(var(--vb-primary-rgb),0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--vb-primary-rgb),0); }
}

/* Overrides für das Kalender-Plugin – NUR innerhalb des Heros */
.vk-hero .ct-kalender-wrapper {
    display: block !important;
    container-type: normal !important; /* Plugin-Container-Query (stapelt Karte) ausschalten */
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    font-family: var(--vb-font-body) !important;
}
.vk-hero .ct-event {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: none !important;
}
.vk-hero .ct-event-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    text-align: left !important;
}
.vk-hero .ct-event-badge {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    width: 62px;
    min-width: 62px !important;
    height: 66px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--vb-radius) !important;
    background: var(--vk-gold) !important;
    color: var(--vk-ink) !important;
    font-family: var(--vb-font-body);
    line-height: 1;
    transition: transform .3s ease;
}
.vk-hero .ct-event:hover .ct-event-badge { transform: scale(1.06) rotate(-2deg); }
.vk-hero .ct-month { display: block; margin: 0 !important; font-size: .75rem !important; font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--vk-ink) !important; }
.vk-hero .ct-day   { display: block; margin-top: 3px !important; font-size: 1.9rem !important; font-weight: 700 !important; color: var(--vk-ink) !important; }
.vk-hero .ct-event-content { flex: 1 1 auto; min-width: 0; width: auto !important; text-align: left !important; }
.vk-hero .ct-event-titel {
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-family: var(--vk-font-ui) !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    letter-spacing: .03em;
    line-height: 1.2 !important;
    color: #fff !important;
}
.vk-hero .ct-event-time,
.vk-hero .ct-event-content > div {
    font-size: .88rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,.82) !important;
    margin-top: 2px !important;
    text-align: left !important;
}
.vk-hero .ct-event-time {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    padding: 0 !important;
    background: none !important;
    white-space: nowrap;
}
.vk-hero .ct-event-content strong { color: #fff !important; font-weight: 700; }

/* ---------- Animationen ---------- */
@keyframes vk-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes vk-blur-in {
    from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(14px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- Tablet: PhotoMe zeigt ab 960px nur Logo + Hamburger (~80px) ---------- */
@media (max-width: 960px) {
    .vk-hero { --vk-header: 90px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .vk-hero__content { padding: calc(var(--vk-header) + 10px) 18px 32px; }
    .vk-hero__line--small { letter-spacing: .2em; padding-left: .2em; font-size: clamp(2rem, min(9.6vw, 6vh), 3.4rem); }
    .vk-hero__line--big { -webkit-text-stroke-width: 1.5px; font-size: clamp(4.6rem, min(27vw, 16vh), 9rem); }
    .vk-hero__lead { margin-top: 18px !important; }
    .vk-hero__bottom { flex-direction: column; align-items: stretch; margin-top: 28px; gap: 16px; }
    .vk-hero__actions { flex-direction: column; }
    .vk-hero .vb-btn { width: 100%; padding: 16px 22px; }
    .vk-hero__next { min-width: 0; }
}

/* ---------- Barrierefreiheit: weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .vk-hero__video { display: none; }
    .vk-hero__poster { display: block; animation: none; }
    .vk-hero *, .vk-hero *::before, .vk-hero *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
    }
    .vk-hero__line--big { background-size: 100% 100%; }
}

/* ---------- Layout v2: Buttons nebeneinander, darunter grosse Karte «Nächster Gottesdienst» ---------- */
.vk-hero__bottom { flex-direction: column; gap: 26px; }
.vk-hero .vk-hero__ghost:hover,
.vk-hero .vk-hero__ghost:focus-visible { background: var(--vk-gold); color: var(--vk-ink) !important; box-shadow: none; }
.vk-hero__next { min-width: 440px; padding: 18px 24px 20px; }
.vk-hero__next-label { font-size: .9rem; letter-spacing: .24em; margin-bottom: 14px; }
.vk-hero__pulse { width: 10px; height: 10px; }
.vk-hero .ct-event-layout { gap: 20px; }
.vk-hero .ct-event-badge { width: 84px; min-width: 84px !important; height: 90px; }
.vk-hero .ct-month { font-size: .95rem !important; }
.vk-hero .ct-day { font-size: 2.6rem !important; }
.vk-hero .ct-event-titel { font-size: 1.6rem !important; margin-bottom: 6px !important; }
.vk-hero .ct-event-time,
.vk-hero .ct-event-content > div { font-size: 1.05rem !important; }

@media (max-width: 768px) {
    .vk-hero__bottom { gap: 18px; }
    .vk-hero__next { min-width: 0; width: 100%; padding: 14px 16px 16px; }
    .vk-hero__next-label { font-size: .78rem; }
    .vk-hero .ct-event-badge { width: 68px; min-width: 68px !important; height: 74px; }
    .vk-hero .ct-day { font-size: 2.1rem !important; }
    .vk-hero .ct-event-titel { font-size: 1.25rem !important; }
    .vk-hero .ct-event-time,
    .vk-hero .ct-event-content > div { font-size: .92rem !important; }
}

/* Einheitliche Icons in beiden Hero-Buttons (vor dem Text) */
.vk-hero .vk-hero__ghost { gap: 10px; }
.vk-hero__ico { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vk-hero__ico--fill { fill: currentColor; stroke: none; }

/* Link «Neu hier?» unter dem Untertitel */
.vk-hero__new { margin: 12px 0 0 !important; padding: 0 !important; animation: vk-rise 1s cubic-bezier(.2,.7,.2,1) 2.35s both; }
.vk-hero__new a {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px;
    font-family: var(--vk-font-ui); font-size: .95rem; font-weight: 500; letter-spacing: .06em;
    color: #fff !important; text-decoration: none !important; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.55);
    border-bottom: 1.5px solid var(--vk-gold);
    transition: color .25s;
}
.vk-hero__new a:hover, .vk-hero__new a:focus-visible { color: var(--vk-gold) !important; }