/* ==========================================================================
   Sekcja: Hero (foto-block-text-hero) - Czysty układ z zachowaniem HTML
   ========================================================================== */

.module-group.foto-block-text-hero {
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 540px;
    overflow: hidden;
    background-color: #000000;
    padding: 0;
    margin: 0;
    font-family: 'Chivo Mono', monospace;
}

.module-group.foto-block-text-hero .hero-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* --- Tło wideo --- */
.module-group.foto-block-text-hero .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.module-group.foto-block-text-hero .hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Gradient przyciemniający, aby tekst był czytelny --- */
.module-group.foto-block-text-hero .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top, 
        rgba(22, 24, 38, 0.9) 0%, 
        rgba(22, 24, 38, 0.4) 30%, 
        transparent 60%
    );
}

/* --- Kontener tekstowy w lewym dolnym rogu --- */
.module-group.foto-block-text-hero .hero-copy {
    position: absolute;
    left: clamp(20px, 5vw, 72px);
    bottom: clamp(28px, 5vh, 56px);
    z-index: 2;
    max-width: 640px;
    transform: translateY(0)
}

/* --- Overtitle: "Eventagentur Zürich" (Tag <h3>) --- */
.module-group.foto-block-text-hero .hero-title {
    margin: 0 0 14px 0;
}

.module-group.foto-block-text-hero .hero-title h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9397ab;
    line-height: 1.55;
    
}

/* Pozioma kreseczka przed <h3> */
.module-group.foto-block-text-hero .hero-title h3::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background-color: #b2b6ca;
}

/* --- Główne hasło (Tagi <p>) --- */
.module-group.foto-block-text-hero .hero-copy p {
    font-weight: 400;
    font-size: 15.5px;
    text-transform: uppercase;
    color: #e9e9ed;
    line-height: 1.65;
    letter-spacing: -0.015em;
    margin: 0px 0px 0px -0.06em;
}

/* Usuwamy margines pod ostatnim <p>, aby ładnie przylegał do scrolla */
.module-group.foto-block-text-hero .hero-copy p:last-of-type {
    margin-bottom: 0;
}

/* --- Scroll Hint na samym dole --- */
.module-group.foto-block-text-hero .hero-scroll-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0 0;
    color: #9397ab;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.55;
}

.module-group.foto-block-text-hero .hero-scroll-hint i {
    color: oklch(0.63 0.21 27);
    font-size: 13px;
}