/* The Icon — video de fundal pe hero-ul paginii Proiect.
   Patru clipuri (plaja, fitness, skybar, parcare) care ruleaza unul dupa
   altul, in bucla, SUB continutul hero-ului.
   Doua straturi video suprapuse: cat timp unul ruleaza, celalalt il incarca
   pe urmatorul, iar trecerea se face prin fade — fara cadru negru. */

.project-hero.has-video-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--navy-content, #0f1d38) !important;
}

/* Padding-ul era aplicat de DOUA ori — pe hero si inca o data pe shell —
   deci hero-ul aduna peste 170px de spatiu gol degeaba. Nu se observa cat
   timp fundalul era plat; cu film in spate, sare in ochi.
   Selectorul e lung pentru ca regula de baza vine cu specificitate mare din
   bundle-urile partajate. */
html body.public-project-page section.project-hero.has-video-bg {
    padding-block: 0 !important;
    min-height: 0 !important;
}

html body.public-project-page section.project-hero.has-video-bg .apartment-detail-shell {
    padding-block: clamp(100px, 12vh, 126px) clamp(52px, 6vh, 76px) !important;
    min-height: 0 !important;
}

/* Textul primeste o umbra curata in loc de voal gros: ramane lizibil peste
   cadrele deschise, fara sa intunece filmul. */
.project-hero.has-video-bg .apartment-detail-copy h1,
.project-hero.has-video-bg .apartment-detail-copy p,
.project-hero.has-video-bg .apartment-detail-copy .apartment-detail-kicker,
.project-hero.has-video-bg .apartment-detail-copy .apartment-breadcrumb {
    text-shadow: 0 2px 18px rgba(4, 9, 20, .85), 0 1px 4px rgba(4, 9, 20, .6);
}

/* Containerul video acopera tot hero-ul si sta in spatele continutului. */
.project-hero.has-video-bg .project-hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Trei stari, ca dizolvarea sa fie curata:
     ascuns    — opacitate 0, dedesubt;
     is-leaving— inca OPAC, dedesubt, continua sa ruleze;
     is-active — deasupra, urca din transparent in opac.
   Cheia e ca cel care pleaca ramane opac pana cand noul il acopera complet.
   Daca amandoua ar trece prin 50% in acelasi timp, la mijloc s-ar vedea
   fundalul prin ele si ar aparea o scufundare intunecata. */
.project-hero.has-video-bg .phv-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Elimină complet orice buton sau control nativ de play/pause pe video (Safari / WebKit / iOS) */
.project-hero video::-webkit-media-controls,
.project-hero video::-webkit-media-controls-start-playback-button,
.project-hero video::-webkit-media-controls-play-button,
.project-hero video::-webkit-media-controls-overlay-play-button,
.project-hero video::-webkit-media-controls-enclosure,
.project-hero video::-webkit-media-controls-panel,
.project-hero video::-webkit-media-controls-current-time-display,
.project-hero video::-webkit-media-controls-time-remaining-display,
.project-hero video::-webkit-media-controls-timeline,
.project-hero video::-webkit-media-controls-volume-slider,
.project-hero video::-webkit-media-controls-mute-button,
.project-hero video::-webkit-media-controls-fullscreen-button,
.project-hero video::-webkit-media-controls-picture-in-picture-button,
.project-hero video::-webkit-media-controls-wireless-playback-picker-button,
.project-hero video::-webkit-media-controls-toggle-closed-captions-button,
.project-hero video::-internal-media-controls-overlay-cast-button,
.phv-layer::-webkit-media-controls,
.phv-layer::-webkit-media-controls-start-playback-button,
.phv-layer::-webkit-media-controls-play-button,
.phv-layer::-webkit-media-controls-overlay-play-button,
.phv-layer::-webkit-media-controls-enclosure,
.phv-layer::-webkit-media-controls-panel,
.phv-layer::-webkit-media-controls-picture-in-picture-button,
.phv-layer::-webkit-media-controls-wireless-playback-picker-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

.project-hero.has-video-bg .phv-layer.is-leaving {
    opacity: 1;
    z-index: 0;
}

.project-hero.has-video-bg .phv-layer.is-active {
    opacity: 1;
    z-index: 1;
    /* 900ms, aceeasi valoare ca `FADE` din the-icon-project-hero.js */
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}

/* Voal peste video: discret si aerisit, asigura contrastul textului in
   stanga fara sa intunece sau sa spele culorile vii ale filmarii. */
.project-hero.has-video-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(15, 29, 56, .52) 0%, rgba(15, 29, 56, .26) 42%, rgba(15, 29, 56, .02) 80%, transparent 100%),
        linear-gradient(180deg, rgba(15, 29, 56, .20) 0%, transparent 35%, rgba(15, 29, 56, .38) 100%);
}

/* Continutul hero-ului trece deasupra voalului. */
.project-hero.has-video-bg .apartment-detail-shell {
    position: relative;
    z-index: 2;
}

/* ---------- Eticheta si indicatorii ---------- */

.project-hero-steps-wrap {
    position: absolute;
    right: clamp(16px, 3vw, 40px);
    bottom: clamp(16px, 3vw, 34px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 14px;
}

.project-hero-steps-wrap .phv-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid rgba(214, 180, 109, .42);
    border-radius: 999px;
    background: transparent;
    color: var(--brand-cream, #eae0cf);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.phv-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--brand-gold, #d6b46d);
}

.phv-steps {
    display: flex;
    gap: 6px;
}

.phv-step {
    width: 22px;
    height: 2px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(234, 224, 207, .35);
    cursor: pointer;
    transition: background-color .3s ease, width .3s ease;
}

.phv-step.is-current {
    width: 34px;
    background: var(--brand-gold, #d6b46d);
}

.phv-step:focus-visible {
    outline: 2px solid var(--brand-gold, #d6b46d);
    outline-offset: 4px;
}

/* ---------- Telefon ---------- */

@media (max-width: 760px) {
    /* Pe ecran ingust coloana de text ocupa toata latimea, deci voalul
       devine uniform pe orizontala, ramanand aerisit si luminos. */
    .project-hero.has-video-bg::before {
        background:
            linear-gradient(180deg, rgba(15, 29, 56, .45) 0%, rgba(15, 29, 56, .18) 45%, rgba(15, 29, 56, .45) 100%);
    }

    .project-hero-steps-wrap {
        left: clamp(14px, 4vw, 24px);
        right: clamp(14px, 4vw, 24px);
        bottom: 14px;
        justify-content: space-between;
        gap: 10px;
    }

    .project-hero-steps-wrap .phv-label {
        font-size: 10px;
        padding: 6px 11px;
        letter-spacing: .06em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-hero.has-video-bg .phv-layer { transition: none; }
}