/* =========================================================
   SKYRISS HOME HERO
   Standalone CSS for the home-page hero / podcast slider

   Load this AFTER your main/global stylesheet.
   Remove the corresponding home-hero and podcast-hero rules
   from style7.css and podcast-home1.css.
   ========================================================= */


/* ---------------------------------------------------------
   BASE / SHARED
   --------------------------------------------------------- */

.home-hero {
    background-color: var(--black);
    color: var(--white);
    padding: 0 20px 20px;
}

.home-hero-h {
    position: relative;
    background-color: #fafafa;
    border-radius: 20px 20px 0 20px;
    overflow: visible;
}

.home-hero .container {
    position: relative;
    margin: 0;
    max-width: none;
    background-color: #fafafa;
    border-radius: 20px 20px 0 20px;
}

#hero-slider-container,.home-hero-h .container {
    position: relative;
}


/* ---------------------------------------------------------
   SLIDES / NAVIGATION
   --------------------------------------------------------- */

.hero-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 10;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.slider-dot {
    width: 40px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50rem;
    background-color: #545454;
    cursor: pointer;
    transition: background-color .3s ease;
}

.slider-dot.active {
    background-color: #0bff00;
}

@keyframes sliderFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sliderFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}


/* ---------------------------------------------------------
   SLIDE 1 - MAIN HOME HERO
   --------------------------------------------------------- */

.home-title {
    display: block;
    max-width: 80%;
    height: auto;
}

.hero-hedr {
    color: #000000;
    font-size: 50px;
}

.home-users {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.hero-slide .home-users {
    position: absolute;
    top: 5%;
    left: 8%;
    z-index: 2;
}

.home-users img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50rem;
    overflow: hidden;
}

.home-users span {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
}

.hero-slide .home-users span {
    color: var(--black);
}

.home-users span strong {
    font-weight: 600;
}

.home-feat {
    padding-top: 80px;
}

.home-feat-boxes {
    max-width: 580px;
    margin-top: 20px;
}

.home-feat-box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.home-feat-box {
    display: flex;
    width: 130px;
    height: 42px;
    justify-content: center;
    align-items: center;
    border: solid 1px #545454;
    border-radius: 6px;
}

.home-feat-box img {
    width: auto;
    max-width: 110px;
    height: auto;
    max-height: 24px;
}

.home-car {
    display: block;
    width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   GET STARTED / LANGUAGE BLOCK
   --------------------------------------------------------- */

.home-login {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding-bottom: 15px;
    background-color: var(--black);
    border-radius: 20px 0 0 0;
}

.home-login-box {
    padding: 15px 20px 0;
    background-color: var(--black);
    color: var(--white);
    border-radius: 20px 20px 20px 0;
}

.bottom-left-corner {
    position: absolute;
    bottom: -15px;
    left: -40px;
    width: 40px;
    height: 40px;
    background-color: var(--black);
}

.bottom-left-corner-inner {
    width: 40px;
    height: 40px;
    background-color: #fafafa;
    border-radius: 0 0 20px 0;
}

.top-right-corner {
    position: absolute;
    top: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: var(--black);
}

.top-right-corner-inner {
    width: 40px;
    height: 40px;
    background-color: #fafafa;
    border-radius: 0 0 20px 0;
}


/* ---------------------------------------------------------
   PODCAST CONTENT
   --------------------------------------------------------- */

.podcast-navbar {
    z-index: 2;
}

.podcast-navbar .nav-center {
    background-color: transparent;
}

.podcast-navbar .navbar-nav .dropdown .nav-link {
    color: var(--white) !important;
}

.podcast-pt-img {
    display: none;
}

.red-brd {
    display: inline-block;
    padding: 1px;
    overflow: hidden;
    background: linear-gradient(90deg, #ff0000, #ffffff, #ffffff);
}

.red-box {
    padding: 5px 30px;
    background: var(--black);
    color: #ff3131;
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: center;
}

.power span {
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
}

.power img {
    max-height: 35px;
}

.pod-yt img {
    max-height: 40px;
}

.bl-w-r-box {
    display: inline-block;
    padding: 1px;
    overflow: hidden;
    background: linear-gradient(90deg, #5d9cf9, #f9fbfe, #9d0120, #ffffff);
}

.bl-w-r-box > div {
    background-color: var(--black);
}

.bl-w-r-box a,
.bl-w-r-box a:hover {
    background: var(--black) !important;
    color: var(--white) !important;
    border: 0 !important;
}

.pod-btn,
.pod-btn:hover {
    display: block;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-h);
    font-size: var(--font-sz);
}

.pad-530 {
    padding: 5px 30px;
}


/* =========================================================
   DESKTOP / LAPTOP
   Width >= 992px

   Key principle:
   height is constrained independently from width so:
   - 1920 x 1080 = large desktop
   - 1920 x 540  = horizontally split / short desktop
   - 960-ish wide = compact/tablet/mobile layout
   ========================================================= */

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .bottom-left-corner {
        bottom: -8px;
    }
}

@media (min-width: 992px) {

    .home-hero-h {
        /*
           svh reacts to the actual visible viewport.
           min/max stop extreme tall/short screens from distorting layout.
        */
        height: calc(90svh - 20px);
        min-height: 620px;
        max-height: 920px;

        display: flex;
        align-items: stretch;
    }

    .home-hero .container {
        width: 100%;
        height: 100%;
        padding: clamp(55px, 15vh, 120px) 0 0;
    }

    #hero-slider-container,
    .home-hero-h .container,
    .hero-slide,
    .hero-slide > .row {
        height: 100%;
    }

    .hero-slide {
        display: none;
        animation: sliderFadeOut .5s forwards;
    }

    .hero-slide.active {
        display: block;
        animation: sliderFadeIn .5s forwards;
    }

    /* First column: users + car */
    .hero-slide > .row > .col-lg-6:first-child {
        position: relative;
        height: 100%;
    }

    .hero-slide .home-users {
        /*top: clamp(10px, 4vh, 45px);*/
        top:clamp(-20px, -4vh, -45px)
    }

    .blur-right {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
    }

    .home-car {
        width: 100%;
        /*max-height: calc(100% - 60px);
        object-fit: contain;*/
        object-position: left bottom;
    }

    /* Second column: title/buttons/featured */
    .hero-slider-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        justify-content:space-between;
        padding-bottom: 120px;
    }

    .hero-slider-dots-container {
        flex: 0 0 auto;
        padding-top: 5vh;
    }

    .home-title {
        width: min(80%, 620px);
        max-width: none;
    }

    .home-feat {
        /*padding-top: clamp(30px, 6vh, 80px);*/
        padding-top:unset;
    }

    /* Podcast desktop slide */
    .podcast-slide {
        padding-top: 0 !important;
        background-color: var(--black) !important;
    }

    .podcast-home-hero-h {
        background-color: var(--black) !important;
    }

    .podcast-login .bottom-left-corner-inner,
    .podcast-login .top-right-corner-inner {
        display: none;
    }

    .podcast-hero {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .pod-hero-img {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .pod-hero-img > img {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .podcast-hero .pod-container {
        position: absolute;
        inset: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        max-width: none;
        padding-top: 0 !important;
    }
}


/* ---------------------------------------------------------
   COMPACT DESKTOP / HORIZONTALLY SPLIT SCREEN

   Example:
   1920 x 500 / 1920 x 650
   Width remains large, height is limited.
   --------------------------------------------------------- */

@media (min-width: 992px) and (max-height: 749px) {

    .home-hero-h {
        min-height: 520px;
        max-height: none;
    }

    .home-hero .container {
        padding-top: clamp(30px, 15vh, 100px);
    }

    .hero-slide .home-users {
        top: -10px;
    }

    .home-users img {
        width: 34px;
        height: 34px;
    }

    .home-title {
        width: min(68%, 500px);
    }

    .hero-slider-container {
        padding-bottom: 85px;
    }

    .home-feat {
        padding-top: clamp(15px, 3vh, 30px);
    }

    .home-feat-boxes {
        margin-top: 12px;
    }

    .home-feat-box-container {
        gap: 10px;
    }

    .home-feat-box {
        width: 120px;
        height: 36px;
    }

    .home-feat-box img {
        max-width: 100px;
        max-height: 20px;
    }

    .hero-slider-dots {
        bottom: 12px;
    }

    .home-login {
        padding-bottom: 8px;
    }

    .home-login-box {
        padding-top: 10px;
    }
}


/* ---------------------------------------------------------
   VERY SHORT DESKTOP / EXTREME HORIZONTAL SPLIT

   Rather than forcing the hero into the viewport and
   overlapping content, allow the page to become taller than
   the visible half-screen and scroll naturally.
   --------------------------------------------------------- */

@media (min-width: 992px) and (max-height: 579px) {

    .home-hero-h {
        height: auto;
        min-height: 540px;
    }

    .home-hero .container {
        min-height: 540px;
    }

    .home-title {
        width: min(60%, 440px);
    }

    .home-feat {
        padding-top: 15px;
    }
}


/* ---------------------------------------------------------
   GENUINELY LARGE DESKTOP
   Width alone is NOT enough.
   --------------------------------------------------------- */

@media (min-width: 1600px) and (min-height: 850px) {

    .home-title {
        width: min(80%, 680px);
    }

    .home-feat-boxes {
        max-width: 780px;
    }

    .home-feat-box {
        width: 180px;
        height: 58px;
    }

    .home-feat-box img {
        max-width: 150px;
        max-height: 35px;
    }

    .bottom-left-corner {
        bottom: -15px;
    }

    .red-brd {
        margin-top: 30px;
    }
}


/* =========================================================
   MOBILE / TABLET
   Width < 992px

   The slider only occupies the upper visual section.
   Featured On + Get Started + language remain common.
   ========================================================= */

@media (max-width: 991.98px) {

    .home-hero {
        padding-bottom: 80px;
    }

    .home-hero-h {
        min-height: 0;
        height: auto;
        display: block;
        border-radius: 20px;
    }

    .home-hero .container {
        height: auto;
        min-height: 0;
        padding-top: 0;
        border-radius: 20px;
    }

    /*
       On mobile JS treats .mobile-scroll-section as the slides,
       not the two outer .hero-slide wrappers.
    */
    .hero-slide {
        display: block;
        height: auto;
    }

    .hero-slide:not(:first-child) {
        display: none;
    }

    .hero-slide .mobile-scroll-section {
        display: none;
        animation: sliderFadeOut .4s forwards;
    }

    .hero-slide .mobile-scroll-section.active {
        display: block;
        animation: sliderFadeIn .4s forwards;
    }

    .hero-slide > .row {
        height: auto;
    }

    .hero-slider-dots-container {
        position: relative;
    }

    .hero-slider-dots {
        bottom: 18px;
    }

    /* Main visual mobile slide */
    .home-section {
        position: relative;
        height: clamp(390px, 53svh, 560px);
        padding-top: 40px;
        overflow: hidden;
        text-align: center;

        background-image: url('/assets/images/home/car-m.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;

        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /*.home-section .btn-sleek {
        flex: 0 0 50%;
        padding: 5px 15px;
        font-size: var(--font-sm);
        text-align: center;
    }*/

    .home-title {
        width: min(60%, 470px);
        max-width: none;
        margin: 0 auto;
    }

    .hero-hedr {
        font-size: 24px;
        margin: 0px 30px;
    }

    body[data-lang="ru"] .hero-hedr {
        font-size: 22px;
    }

    .hero-slide .home-users {
        display: none !important;
    }

    .home-feat {
        padding: 20px;
    }

    .home-feat-boxes {
        width: 100%;
        max-width: 580px;
        margin: 20px auto 0;
    }

    body[data-lang="en"] .home-feat-boxes {
        margin-top: 0;
    }

    .home-feat-box-container {
        gap: 10px;
        row-gap: 10px;
        justify-content: space-between;
    }

    .home-feat-box {
        width: calc(25% - 10px);
        height: 40px;
        padding: 5px;
        text-align: center;
        border-radius: 4px;
    }

    .home-feat-box img {
        max-width: 100%;
        max-height: 24px;
    }

    /* Common bottom CTA/language block */
    .home-login {
        right: auto;
        bottom: 10px;
        width: 100%;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    .home-login-box {
        width: fit-content;
        margin: 0 auto;
        padding: 10px;
        border-radius: 50rem;
    }

    .bottom-left-corner,
    .top-right-corner {
        display: none;
    }

    .sellang {
        min-width: 130px;
        border: solid 1px #545454;
    }

    .sellang .custom-select-trigger {
        padding: 5px 30px 5px 20px;
        font-size: var(--font-sm);
        text-align: left;
    }

    /* Podcast visual mobile slide */
    .podcast-hero {
        position: relative;
        height: clamp(390px, 53svh, 560px);
        overflow: hidden;
        background-color: #000110;
        background-image: url('/assets/images/podcast/podcast-mobile.jpg');
        background-repeat: no-repeat;
        /*background-size: cover;
        background-position: center bottom;*/
        background-size:100% 170%;
        background-position: center;
        border-radius: 20px 20px 10px 10px;
    }

    .podcast-hero .pb-80 {
        padding-bottom: 50px;
    }

    .red-brd {
        margin-top: 20px;
    }

    .power span {
        font-size: 12px;
    }

    .power img {
        width: 80px !important;
        max-height: none;
    }

    .pod-yt img {
        width: 80px !important;
        max-height: none;
    }

    .pod-btn,
    .pod-btn:hover {
        font-size: var(--font-sm);
    }
}


/* ---------------------------------------------------------
   TABLET / NARROW DESKTOP-LIKE PORTRAIT
   576px - 991px

   Important: no device detection / pointer:coarse.
   Width and available height drive the layout.
   --------------------------------------------------------- */

@media (min-width: 576px) and (max-width: 991.98px) {

    .home-section,
    .podcast-hero {
        height: clamp(380px, 48svh, 540px);
    }

    .home-section {
        background-size: 50%;
        background-position: left bottom;
    }

    .home-section::after {
        content: '';
        position: absolute;
        top: 0;
        left: calc(50% - 40px);
        bottom: 0;
        width: 40px;
        background-image: linear-gradient(to left, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 1) 30%, rgba(250, 250, 250, 0.7) 60%, rgba(250, 250, 250, 0) 100%);
        z-index: -1;
        pointer-events: none;
    }

    .home-title {
        width: min(50%, 430px);
    }

    .podcast-hero {
        background-position: center;
    }

    .red-brd {
        margin-top: 10px;
    }
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 575.98px) {

    .home-section,
    .podcast-hero {
        height: clamp(390px, 53svh, 520px);
    }

    .home-section {
        background-size: 100%;
        background-position: left bottom;
    }

    .home-title {
        width: 75%;
        max-width: 390px;
    }

    .btn-grp {
        flex-wrap: wrap;
    }

    .podcast-hero {
        background-size: 100%;
    }

    .pod-hero-img {
        padding-top: 40px;
        background-color: rgba(0, 10, 37, .6);
    }

    .pod-container img {
        width: auto !important;
    }

    .home-feat-box {
        width: calc(33.33% - 10px);
    }
}


/* ---------------------------------------------------------
   MOBILE / TABLET LANDSCAPE WITH LOW HEIGHT

   This also covers a narrow horizontally-split browser.
   Avoid 150vh: content simply receives a sensible minimum
   height and the page can scroll if required.
   --------------------------------------------------------- */

@media (max-width: 991.98px) and (max-height: 520px) {

    .home-hero {
        padding-bottom: 70px;
    }

    .home-section,
    .podcast-hero {
        height: 390px;
        min-height: 390px;
    }

    .home-title {
        width: min(45%, 360px);
    }

    .home-section {
        padding-top: 25px;
    }

    .home-feat {
        padding-top: 10px;
    }

    .red-brd {
        margin-top: 8px;
    }
}


/* ---------------------------------------------------------
   PORTRAIT IMAGE SWITCH FOR PODCAST
   --------------------------------------------------------- */

@media (max-aspect-ratio: 1/1) {

    .podcast-pt-img {
        display: block;
    }

    .podcast-ls-img {
        display: none;
    }
}