/* =====================================================
   JINGLESTUDIO.NL - HOMEPAGE HERO
   ===================================================== */

.jsb-homehero {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    background: #ffffff;
    overflow: hidden;
    border-radius: 0;
}


/* =====================================================
   BOVENSTE HERO
   ===================================================== */

.jsb-homehero-main {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 470px;
    align-items: stretch;
}


/* =====================================================
   LINKERKANT - TEKST
   ===================================================== */

.jsb-homehero-copy {
    padding: 54px 50px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: #ffffff;
}

.jsb-homehero-eyebrow {
    color: #b21f57;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 16px;
}

.jsb-homehero :is(h1,.jsb-shop-hero-heading) {
    margin: 0 0 22px;
    font-size: clamp(38px, 4.5vw, 58px);
    line-height: 1.04;
    letter-spacing: -1px;
    color: #111827;
    font-weight: 800;
}

.jsb-homehero :is(h1,.jsb-shop-hero-heading) span {
    color: #b21f57;
}

.jsb-homehero-line {
    width: 90px;
    height: 3px;
    background: #b21f57;
    margin: 0 0 24px;
    border-radius: 10px;
}

.jsb-homehero-text {
    max-width: 620px;
    font-size: 17px;
    line-height: 1.65;
    color: #374151;
}

.jsb-homehero-text p {
    margin: 0 0 14px;
}

.jsb-homehero-text strong {
    color: #111827;
    font-weight: 700;
}

.jsb-homehero-accent {
    color: #b21f57;
    font-weight: 700;
}


/* =====================================================
   RECHTERKANT - STUDIO AFBEELDING
   ===================================================== */

.jsb-homehero-image {
    position: relative;
    min-height: 470px;

    background:
        linear-gradient(
            1deg,
            #ffffff 0%,
            rgba(255,255,255,.95) 3%,
            rgba(255,255,255,.72) 10%,
            rgba(255,255,255,.30) 16%,
            rgba(255,255,255,0) 20%
        ),
        var(--jsb-home-desktop-image)
        center center / cover no-repeat;
}


/* =====================================================
   USP'S
   ===================================================== */

.jsb-homehero-usps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;

    margin: 0 30px 18px;
    padding: 20px 18px;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    background: #ffffff;
}

.jsb-homehero-usp {
    text-align: center;
    padding: 6px 20px;
    position: relative;
}

.jsb-homehero-usp:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: #e5e7eb;
}


/* USP ICON */

.jsb-homehero-icon {
    width: 50px;
    height: 50px;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #b21f57;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    font-weight: 700;
}


/* USP TITEL */

.jsb-homehero-usp strong {
    display: block;

    font-size: 14px;
    line-height: 1.3;

    text-transform: uppercase;

    color: #111827;

    margin-bottom: 5px;
}


/* USP TEKST */

.jsb-homehero-usp span {
    display: block;

    color: #4b5563;

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


/* =====================================================
   ONDERSTE RADIO REGEL
   ===================================================== */

.jsb-homehero-tagline {
    margin: 0 30px 34px;

    border: 1px solid #e5e7eb;
    border-radius: 13px;

    padding: 19px 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    background: #fafafa;

    text-align: center;

    font-size: 21px;
    line-height: 1.35;

    font-weight: 700;

    color: #111827;
}

.jsb-homehero-tagline-icon {
    color: #b21f57;
    font-size: 28px;
    flex-shrink: 0;
}

.jsb-homehero-tagline span {
    color: #b21f57;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

    .jsb-homehero-main {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .jsb-homehero-copy {
        padding: 40px 30px 30px;
    }

    .jsb-homehero :is(h1,.jsb-shop-hero-heading) {
        font-size: 44px;
    }

    .jsb-homehero-image {
        min-height: 330px;

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(255,255,255,.60) 10%,
                rgba(255,255,255,.20) 25%,
                rgba(255,255,255,0) 40%
            ),
            var(--jsb-home-mobile-image)
            center center / cover no-repeat;
    }

    .jsb-homehero-usps {
        grid-template-columns: 1fr 1fr;
        gap: 20px 0;
    }

    .jsb-homehero-usp:nth-child(2)::after {
        display: none;
    }
}


/* =====================================================
   MOBIEL
   ===================================================== */

@media (max-width: 600px) {

    .jsb-homehero {
        width: 100%;
        max-width: 100%;
    }

    .jsb-homehero-copy {
        padding: 28px 20px 24px;
    }

    .jsb-homehero-eyebrow {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .jsb-homehero :is(h1,.jsb-shop-hero-heading) {
        font-size: 27px;
        line-height: 1.08;
        letter-spacing: -0.5px;
        margin-bottom: 18px;
    }

    .jsb-homehero-line {
        margin-bottom: 20px;
        width: 70px;
    }

    .jsb-homehero-text {
        font-size: 16px;
        line-height: 1.55;
    }


    /* FOTO OP MOBIEL */

    .jsb-homehero-image {
        min-height: 250px;

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(255,255,255,.45) 8%,
                rgba(255,255,255,.10) 22%,
                rgba(255,255,255,0) 35%
            ),
            var(--jsb-home-mobile-image)
            center center / cover no-repeat;
    }


    /* USP'S 2 x 2 */

    .jsb-homehero-usps {
        grid-template-columns: 1fr 1fr;

        margin: 16px 12px 16px;

        padding: 18px 8px;

        gap: 22px 0;
    }

    .jsb-homehero-usp {
        padding: 6px 10px;
    }

    .jsb-homehero-usp::after {
        display: none !important;
    }

    .jsb-homehero-icon {
        width: 44px;
        height: 44px;

        font-size: 19px;

        margin-bottom: 8px;
    }

    .jsb-homehero-usp strong {
        font-size: 12px;
    }

    .jsb-homehero-usp span {
        font-size: 12px;
    }


    /* ONDERSTE REGEL */

    .jsb-homehero-tagline {
        margin: 0 12px 24px;

        padding: 16px 14px;

        font-size: 17px;

        gap: 10px;
    }

    .jsb-homehero-tagline-icon {
        font-size: 23px;
    }
}



/* =====================================================
   JINGLESTUDIO.NL - DEMO SECTIE
   ===================================================== */

.jsb-demos {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 45px 30px;
    background: #ffffff;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.jsb-demos *,
.jsb-demos *::before,
.jsb-demos *::after {
    box-sizing: border-box;
}


/* ===== KOP ===== */

.jsb-demo-header {
    text-align: center;
    margin-bottom: 32px;
}

.jsb-demo-label {
    color: #b21f57;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.jsb-demo-header h2 {
    margin: 0 0 12px;
    color: #161b22;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
}

.jsb-demo-header p {
    max-width: 700px;
    margin: 0 auto;
    color: #5d6570;
    font-size: 17px;
    line-height: 1.6;
}


/* =====================================================
   YOUTUBE UITGELICHT
   ===================================================== */

.jsb-demo-featured {
    max-width: 950px;
    margin: 0 auto 28px;
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 7px 22px rgba(0,0,0,.07);
}


/* YOUTUBE RESPONSIVE */

.jsb-demo-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
}

.jsb-demo-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* INFO NAAST VIDEO */

.jsb-demo-featured-info {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jsb-demo-featured-label {
    color: #b21f57;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.jsb-demo-featured-info h3 {
    margin: 0 0 12px;
    color: #161b22;
    font-size: 23px;
    line-height: 1.2;
}

.jsb-demo-featured-info p {
    margin: 0;
    color: #5d6570;
    font-size: 15px;
    line-height: 1.55;
}


/* =====================================================
   AUDIO KAARTEN
   ===================================================== */

.jsb-demo-grid {
    max-width: 950px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}

.jsb-demo-card {
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 15px;
    padding: 21px;
    box-shadow: 0 5px 18px rgba(0,0,0,.05);
    min-width: 0;
}

.jsb-demo-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

.jsb-demo-card-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 50%;
    background: #b21f57;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* MANNENSTEM BLAUW */
.jsb-demo-card.man .jsb-demo-card-icon {
    background: #1268ad;
}

/* AI SONG BLAUW */
.jsb-demo-card.ai .jsb-demo-card-icon {
    background: #1268ad;
}

.jsb-demo-card h3 {
    margin: 0 0 3px;
    color: #161b22;
    font-size: 18px;
    line-height: 1.2;
}

.jsb-demo-card-subtitle {
    color: #777f89;
    font-size: 13px;
}


/* =====================================================
   AUDIO PLAYER
   ===================================================== */

.jsb-demo-card audio {
    display: block;
    width: 100%;
    height: 42px;
    max-width: 100%;
}


/* =====================================================
   MEER DEMO'S
   ===================================================== */

.jsb-demo-more {
    text-align: center;
    margin-top: 32px;
}

.jsb-demo-more p {
    color: #69717b;
    font-size: 14px;
    margin: 0 0 15px;
}

.jsb-demo-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 27px;
    border: 2px solid #b21f57;
    border-radius: 30px;
    color: #b21f57 !important;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    transition: .2s ease;
}

.jsb-demo-more-button:hover {
    background: #b21f57;
    color: #fff !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

    .jsb-demo-featured {
        grid-template-columns: 1fr;
    }

    .jsb-demo-featured-info {
        padding: 22px;
    }

    .jsb-demo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsb-demo-card:last-child {
        grid-column: 1 / -1;
    }
}


/* =====================================================
   MOBIEL
   ===================================================== */

@media (max-width: 600px) {

    .jsb-demos {
        padding: 32px 12px;
    }

    .jsb-demo-header {
        margin-bottom: 24px;
    }

    .jsb-demo-header h2 {
        font-size: 30px;
    }

    .jsb-demo-header p {
        font-size: 15px;
    }

    .jsb-demo-featured {
        margin-bottom: 18px;
        border-radius: 13px;
    }

    .jsb-demo-featured-info {
        padding: 20px;
    }

    .jsb-demo-featured-info h3 {
        font-size: 20px;
    }

    .jsb-demo-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .jsb-demo-card:last-child {
        grid-column: auto;
    }

    .jsb-demo-card {
        padding: 17px;
    }

    .jsb-demo-more {
        margin-top: 25px;
    }

    .jsb-demo-more-button {
        width: 100%;
        max-width: 300px;
    }
}


.jsb-homehero-no-image .jsb-homehero-main{grid-template-columns:1fr}.jsb-homehero-no-image .jsb-homehero-image{display:none}.jsb-homehero{margin-top:25px}.jsb-player-banner{max-width:1200px;margin:35px auto 45px;padding:28px 35px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:25px;background:#f5f6f8;border:1px solid #e6e6e9;border-radius:10px;overflow:hidden}.jsb-player-banner *{box-sizing:border-box}.jsb-player-label{display:inline-block;margin-bottom:13px;color:#b21f57;font-size:12px;font-weight:800;letter-spacing:1px}.jsb-player-banner h2{margin:0 0 15px;font-size:clamp(26px,3vw,38px);line-height:1.16;font-weight:800;color:#202329}.jsb-player-banner h2 span{color:#b21f57}.jsb-player-banner p{color:#4e5055;font-size:16px;line-height:1.65}.jsb-player-benefits{display:flex;flex-wrap:wrap;gap:8px 17px;margin-bottom:24px;font-size:13px;font-weight:700}.jsb-player-image img{display:block;width:100%;height:auto;border-radius:7px}.jsb-player-banner:not(:has(.jsb-player-image)){grid-template-columns:1fr}@media(max-width:850px){.jsb-player-banner{grid-template-columns:1fr;padding:27px}}@media(max-width:480px){.jsb-player-banner{padding:22px 18px}.jsb-player-banner .jsb-btn{display:block;text-align:center}}

/* Keep the selected studio photo intact, independent of the text height. */
.jsb-homehero-main{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:0;align-items:center}
.jsb-homehero-copy{padding:32px 30px}
.jsb-front .jsb-homehero :is(h1,.jsb-shop-hero-heading){font-size:clamp(30px,3vw,46px);line-height:1.12;overflow-wrap:break-word}
.jsb-homehero-image{min-height:0;background:none;align-self:center}
.jsb-homehero-image .jsb-homehero-photo{display:block;width:100%;height:auto;max-width:100%;border-radius:0}
.jsb-homehero-text{font-size:16px;line-height:1.6}
@media(max-width:900px){.jsb-homehero-main{grid-template-columns:1fr}.jsb-homehero-copy{padding:28px 24px}.jsb-homehero-image{min-height:0}.jsb-front .jsb-homehero :is(h1,.jsb-shop-hero-heading){font-size:clamp(30px,5vw,40px)}}