/* =========================================================
   BEOACTIVE — HERO VARIANTS

   Clinical ostaje u main.css.

   Alternative:
   1. Editorial = fullscreen photo
   2. Human     = large photo card
========================================================= */


/* =========================================================
   1. EDITORIAL — FULLSCREEN PHOTO
========================================================= */

.hero-editorial-fullscreen {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--navy);
}


/*
 * Cela sekcija staje između headera i dna viewporta.
 * Desktop header = 82px.
 */

.hero-editorial-fullscreen-stage {
    position: relative;

    width: 100%;

    height: calc(100svh - 82px);
    min-height: 620px;

    overflow: hidden;

    background: var(--navy);
}


/* Photo */

.hero-editorial-fullscreen-photo {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Dovoljno ulevo da Jelena ostane u kadru,
     * ali da desna pacijentkinja i dalje dominira.
     */
    object-position: 34% 48%;
}


/* Overlay */

.hero-editorial-fullscreen-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 30, 41, .91) 0%,
            rgba(10, 30, 41, .77) 30%,
            rgba(10, 30, 41, .38) 58%,
            rgba(10, 30, 41, .10) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10, 30, 41, .38),
            transparent 48%
        );
}


/* Main copy */

.hero-editorial-fullscreen-copy {
    position: absolute;

    z-index: 2;

    top: 50%;
    left:
        max(
            32px,
            calc(
                (100vw - var(--max)) / 2
                + 30px
            )
        );

    width: min(630px, 48vw);

    transform: translateY(-50%);
}


.hero-editorial-fullscreen-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 17px;

    color: #B9E7C2;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.hero-editorial-fullscreen-eyebrow::before {
    content: '';

    width: 24px;
    height: 2px;

    flex: none;

    background: #B9E7C2;
}


.hero-editorial-fullscreen h1 {
    max-width: 650px;

    margin-bottom: 21px;

    color: #fff;

    font-size:
        clamp(52px, 5.2vw, 72px);

    line-height: .98;
}


.hero-editorial-fullscreen h1 span {
    display: block;

    color: #BFE8C7;
}


.hero-editorial-fullscreen-lead {
    max-width: 540px;

    margin-bottom: 26px;

    color:
        rgba(255, 255, 255, .82);

    font-size: 16px;
    line-height: 1.65;
}


/* Buttons */

.hero-editorial-fullscreen-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;
}


.hero-editorial-fullscreen-secondary {
    border-color:
        rgba(255, 255, 255, .48);

    background:
        rgba(255, 255, 255, .09);

    color: #fff;

    backdrop-filter: blur(8px);
}


.hero-editorial-fullscreen-secondary:hover {
    border-color: #fff;

    background:
        rgba(255, 255, 255, .16);
}


/* Proof */

.hero-editorial-fullscreen-proof {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.hero-editorial-fullscreen-proof span {
    padding: 7px 10px;

    border:
        1px solid
        rgba(255, 255, 255, .23);

    border-radius: 999px;

    background:
        rgba(16, 42, 58, .31);

    color:
        rgba(255, 255, 255, .85);

    font-size: 10.5px;

    backdrop-filter: blur(7px);
}


/* White supporting card */

.hero-editorial-fullscreen-note {
    position: absolute;

    z-index: 2;

    right:
        max(
            30px,
            calc(
                (100vw - var(--max)) / 2
                + 30px
            )
        );

    bottom: 30px;

    width: min(300px, 25vw);

    padding: 20px;

    border-radius: 17px;

    background:
        rgba(255, 255, 255, .94);

    border:
        1px solid
        rgba(255, 255, 255, .58);

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, .16);

    backdrop-filter: blur(12px);
}


.hero-editorial-fullscreen-note small {
    display: block;

    margin-bottom: 7px;

    color: var(--green-dark);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.hero-editorial-fullscreen-note strong {
    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-size: 14px;
    line-height: 1.4;
}


.hero-editorial-fullscreen-note p {
    margin: 0;

    color: var(--text);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   EDITORIAL — WORDPRESS ADMIN BAR

   Da i dok si ulogovan sekcija stane u viewport.
========================================================= */

.admin-bar .hero-editorial-fullscreen-stage {
    height:
        calc(
            100svh
            - 82px
            - 32px
        );
}


/* =========================================================
   EDITORIAL — TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-editorial-fullscreen-stage {
        height: calc(100svh - 70px);

        min-height: 600px;
    }


    .hero-editorial-fullscreen-photo {
        object-position: 38% center;
    }


    .hero-editorial-fullscreen-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(10, 30, 41, .93) 0%,
                rgba(10, 30, 41, .62) 48%,
                rgba(10, 30, 41, .10) 87%
            );
    }


    .hero-editorial-fullscreen-copy {
        top: auto;

        left: 32px;
        right: 32px;
        bottom: 30px;

        width: auto;
        max-width: 580px;

        transform: none;
    }


    .hero-editorial-fullscreen-note {
        top: 25px;
        right: 25px;
        bottom: auto;

        width: 245px;
    }

}


/* Admin bar tablet */

@media (min-width: 783px) and (max-width: 900px) {

    .admin-bar .hero-editorial-fullscreen-stage {
        height:
            calc(
                100svh
                - 70px
                - 32px
            );
    }

}


/* =========================================================
   EDITORIAL — MOBILE
========================================================= */

@media (max-width: 620px) {

    .hero-editorial-fullscreen-stage {
        height:
            calc(
                100svh - 70px
            );

        min-height: 560px;
    }


    .hero-editorial-fullscreen-photo {
        object-position: 40% center;
    }


    .hero-editorial-fullscreen-copy {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }


    .hero-editorial-fullscreen h1 {
        margin-bottom: 15px;

        font-size: 41px;
    }


    .hero-editorial-fullscreen-lead {
        margin-bottom: 19px;

        font-size: 13.5px;
        line-height: 1.55;
    }


    .hero-editorial-fullscreen-actions {
        display: grid;

        gap: 8px;

        margin-bottom: 0;
    }


    .hero-editorial-fullscreen-actions .btn {
        width: 100%;
    }


    .hero-editorial-fullscreen-proof,
    .hero-editorial-fullscreen-note {
        display: none;
    }

}


/*
 * WordPress admin bar je na telefonu 46px,
 * ali ispod 600px više nije sticky.
 * Zato ne skidamo dodatnih 46px.
 */


/* =========================================================
   HUMAN — LARGE PHOTO CARD
========================================================= */

.hero-human-card {
    padding: 34px 0 58px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(64, 182, 60, .09),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #FAFCFB,
            var(--bg)
        );
}


/* =========================================================
   STAGE
========================================================= */

.hero-human-stage {
    position: relative;

    height: calc(100svh - 82px - 92px);

    min-height: 620px;
    max-height: 760px;

    overflow: hidden;

    border-radius: 32px;

    background: var(--navy);

    box-shadow: var(--shadow);
}


.hero-human-photo {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /* Jelena ostaje lepo vidljiva */
    object-position: 34% 48%;
}


/*
 * Human varijanta:
 * svetla podloga iza teksta koja se postepeno
 * gubi ka fotografiji.
 */

.hero-human-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(244, 249, 246, .95) 0%,
            rgba(244, 249, 246, .88) 27%,
            rgba(244, 249, 246, .65) 45%,
            rgba(244, 249, 246, .25) 64%,
            rgba(244, 249, 246, .03) 100%
        );
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.hero-human-content {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 54px;

    width: min(650px, 53%);

    transform: translateY(-50%);
}


.hero-human-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 18px;

    color: var(--green-dark);

    font-size: 10.5px;
    font-weight: 700;

    letter-spacing: .1em;
    text-transform: uppercase;
}


.hero-human-eyebrow::before {
    content: '';

    width: 24px;
    height: 2px;

    flex: none;

    background: var(--green);
}


/* Heading */

.hero-human-content h1 {
    max-width: 640px;

    margin-bottom: 20px;

    color: var(--navy);

    font-size:
        clamp(54px, 5vw, 72px);

    line-height: .98;
}


.hero-human-content h1 span {
    display: block;

    color: var(--green-dark);
}


/* Lead */

.hero-human-lead {
    max-width: 560px;

    margin-bottom: 26px;

    color: var(--text);

    font-size: 16px;
    line-height: 1.68;
}


/* =========================================================
   ACTIONS
========================================================= */

.hero-human-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 22px;
}


.hero-human-secondary {
    background:
        rgba(255, 255, 255, .52);

    backdrop-filter: blur(7px);
}


/* =========================================================
   PROOF
========================================================= */

.hero-human-proof {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;
}


.hero-human-proof span {
    position: relative;

    padding-left: 14px;

    color: var(--text);

    font-size: 11px;
    line-height: 1.4;
}


.hero-human-proof span::before {
    content: '';

    position: absolute;

    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);

    transform: translateY(-50%);
}


/* =========================================================
   SUPPORTING CARD
========================================================= */

.hero-human-note {
    position: absolute;

    z-index: 2;

    right: 30px;
    bottom: 30px;

    width: min(300px, 26%);

    padding: 20px;

    border:
        1px solid rgba(16, 42, 58, .08);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 22px 55px
        rgba(16, 42, 58, .14);

    backdrop-filter: blur(10px);
}


.hero-human-note small {
    display: block;

    margin-bottom: 7px;

    color: var(--green-dark);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.hero-human-note strong {
    display: block;

    margin-bottom: 7px;

    color: var(--navy);

    font-size: 14px;
    line-height: 1.4;
}


.hero-human-note p {
    margin: 0;

    color: var(--text);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   HUMAN — LAPTOP / TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-human-card {
        padding: 24px 0 48px;
    }


    .hero-human-stage {
        height: 590px;

        min-height: 590px;

        border-radius: 26px;
    }


    .hero-human-photo {
        object-position: 36% center;
    }


    .hero-human-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(248, 249, 245, .97) 0%,
                rgba(248, 249, 245, .91) 38%,
                rgba(248, 249, 245, .55) 61%,
                rgba(248, 249, 245, .08) 100%
            );
    }


    .hero-human-content {
        left: 34px;

        width: 58%;
    }


    .hero-human-content h1 {
        font-size: 48px;
    }


    .hero-human-lead {
        font-size: 14px;
    }


    .hero-human-proof {
        gap: 12px;
    }


    .hero-human-note {
        right: 24px;
        bottom: 24px;

        width: 225px;

        padding: 17px;
    }

}


/* =========================================================
   HUMAN — MOBILE
========================================================= */

@media (max-width: 620px) {

    .hero-human-card {
        padding: 14px 0 40px;
    }


    .hero-human-card .wrap {
        padding: 0 14px;
    }


    .hero-human-stage {
        height: 610px;

        min-height: 610px;

        border-radius: 22px;
    }


    .hero-human-photo {
        object-position: 40% center;
    }


    /*
     * Na telefonu gradient više ide odozdo,
     * jer tekst koristimo u donjoj polovini.
     */

    .hero-human-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(248, 249, 245, .98) 0%,
                rgba(248, 249, 245, .95) 43%,
                rgba(248, 249, 245, .56) 70%,
                rgba(248, 249, 245, .05) 100%
            );
    }


    .hero-human-content {
        top: auto;
        left: 20px;
        right: 20px;
        bottom: 22px;

        width: auto;

        transform: none;
    }


    .hero-human-eyebrow {
        margin-bottom: 12px;

        font-size: 9px;
    }


    .hero-human-content h1 {
        margin-bottom: 14px;

        font-size: 39px;
    }


    .hero-human-lead {
        margin-bottom: 19px;

        font-size: 13px;
        line-height: 1.55;
    }


    .hero-human-actions {
        display: grid;

        gap: 8px;

        margin-bottom: 16px;
    }


    .hero-human-actions .btn {
        width: 100%;
    }


    /*
     * Na mobile ostavljamo proof,
     * ali kraći i diskretniji.
     */

    .hero-human-proof {
        gap: 7px 14px;
    }


    .hero-human-proof span {
        font-size: 9.5px;
    }


    .hero-human-note {
        display: none;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .hero-human-stage {
        height: 590px;

        min-height: 590px;
    }


    .hero-human-content h1 {
        font-size: 36px;
    }

}


/* =========================================================
   HOME HERO SWITCH
========================================================= */

/* Desktop + laptop = Editorial */

.home-hero-desktop {
    display: block;
}

.home-hero-mobile {
    display: none;
}


/* Tablet + mobile = Clinical */

@media (max-width: 1099px) {

    .home-hero-desktop {
        display: none;
    }

    .home-hero-mobile {
        display: block;
    }

}