/* ================================================================
   JHARMARKET INFORMATION PAGES
   FINAL HERO ALIGNMENT
   ================================================================

   RULES:
   1. HD artwork is horizontal 16:9.
   2. Right artwork frame is exactly 16:9.
   3. Complete artwork is visible.
   4. No #E4F9F2 strip above/below artwork.
   5. Outer hero height is determined by the artwork.
   6. Left content fits inside that same height.
   7. No object-fit: cover.
   ================================================================ */


/* ================================================================
   DESKTOP
   ================================================================ */

@media (min-width: 769px) {

    .jhm-visual-page .jhm-visual-hero {
        /*
         * IMPORTANT:
         * Do NOT let the left content determine the height.
         *
         * The right artwork is 16:9.
         * The hero therefore uses the same 16:9 proportion
         * as the right visual area.
         */
        width: min(1728px, calc(100vw - 72px));
        /*
         * 57% of the hero width is the artwork column.
         * Its 16:9 height is approximately 32.06% of
         * the complete hero width.
         *
         * This gives the hero a compact height instead of
         * allowing the left text to make it excessively tall.
         */
        aspect-ratio: 3.12 / 1;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 18px auto 26px;
        display: grid;
        grid-template-columns: 43% 57%;
        grid-template-rows: 1fr;
        align-items: stretch;
        position: relative;
        border-radius: 26px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(20, 184, 166, 0.14);
        box-shadow: 0 16px 42px rgba(15, 118, 110, 0.08), 0 3px 14px rgba(15, 23, 42, 0.04);
    }


    /* ============================================================
       LEFT TEXT
       ============================================================ */

    .jhm-visual-page .jhm-visual-hero-copy {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 26px 34px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }


        .jhm-visual-page .jhm-visual-hero-copy h1 {
            width: 100%;
            max-width: 680px;
            margin: 8px 0 13px;
            /*
         * Slightly smaller so the left side fits naturally
         * inside the new compact hero.
         */
            font-size: clamp(34px, 3.15vw, 56px);
            line-height: 1.04;
            overflow-wrap: normal;
        }


        .jhm-visual-page .jhm-visual-hero-copy p {
            width: 100%;
            max-width: 650px;
            margin: 0 0 16px;
            font-size: clamp(14px, 1.15vw, 17px);
            line-height: 1.5;
        }


    /* ============================================================
       CHIPS
       ============================================================ */

    .jhm-visual-page .jhm-hero-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        max-width: 100%;
    }


        .jhm-visual-page .jhm-hero-chips > span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(20, 184, 166, 0.18);
            box-shadow: 0 3px 12px rgba(15, 118, 110, 0.05);
            font-size: 13px;
        }


    /* ============================================================
       RIGHT ARTWORK FRAME
       ============================================================ */

    .jhm-visual-page .jhm-visual-hero-art {
        /*
         * THIS is the critical fix.
         *
         * The right panel is exactly 16:9.
         * It is NOT 100% of the taller left content.
         */
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start !important;
        position: relative;
        display: block !important;
        /*
         * This is the exact background requested.
         */
        background: #E4F9F2 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }


        /* ============================================================
       HD IMAGE
       ============================================================ */

        .jhm-visual-page .jhm-visual-hero-art .jhm-info-hero-image {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            min-width: 0 !important;
            min-height: 0 !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            /*
         * COMPLETE IMAGE.
         *
         * No cropping.
         */
            object-fit: contain !important;
            object-position: center center !important;
            vertical-align: top !important;
        }


    /* ============================================================
       FORCE GRAPHICAL PAGE IMAGES
       ============================================================ */

    .jhm-graphical-page .jhm-visual-hero-art img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ================================================================
   LARGE DESKTOP
   ================================================================ */

@media (min-width: 1400px) {

    .jhm-visual-page .jhm-visual-hero {
        width: min(1728px, calc(100vw - 72px));
        /*
         * Right column = 57%
         * Right column needs 16:9
         * Overall ratio = approximately 3.12:1
         */
        aspect-ratio: 3.12 / 1;
    }


    .jhm-visual-page .jhm-visual-hero-copy {
        padding: 25px 38px;
    }


        .jhm-visual-page .jhm-visual-hero-copy h1 {
            font-size: clamp(40px, 3.05vw, 58px);
        }


        .jhm-visual-page .jhm-visual-hero-copy p {
            font-size: 16px;
        }
}


/* ================================================================
   NORMAL DESKTOP
   ================================================================ */

@media (min-width: 1000px) and (max-width: 1399px) {

    .jhm-visual-page .jhm-visual-hero {
        width: calc(100vw - 40px);
        aspect-ratio: 3.12 / 1;
        grid-template-columns: 43% 57%;
    }


    .jhm-visual-page .jhm-visual-hero-copy {
        padding: 22px 28px;
    }


        .jhm-visual-page .jhm-visual-hero-copy h1 {
            font-size: clamp(32px, 3.4vw, 46px);
        }


        .jhm-visual-page .jhm-visual-hero-copy p {
            font-size: 14px;
        }


    .jhm-visual-page .jhm-hero-chips > span {
        padding: 7px 10px;
        font-size: 12px;
    }
}


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

@media (min-width: 769px) and (max-width: 999px) {

    .jhm-visual-page .jhm-visual-hero {
        width: calc(100vw - 30px);
        aspect-ratio: 2.95 / 1;
        grid-template-columns: 44% 56%;
    }


    .jhm-visual-page .jhm-visual-hero-copy {
        padding: 20px 22px;
    }


        .jhm-visual-page .jhm-visual-hero-copy h1 {
            font-size: 30px;
            line-height: 1.05;
        }


        .jhm-visual-page .jhm-visual-hero-copy p {
            font-size: 13px;
            line-height: 1.45;
        }


    .jhm-visual-page .jhm-hero-chips > span {
        padding: 6px 9px;
        font-size: 11px;
    }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 768px) {

    .jhm-visual-page .jhm-visual-hero {
        width: calc(100vw - 20px);
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 10px auto 20px;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        aspect-ratio: auto !important;
        border-radius: 20px;
        overflow: hidden;
    }


    /* ============================================================
       MOBILE TEXT
       ============================================================ */

    .jhm-visual-page .jhm-visual-hero-copy {
        order: 1;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 24px 20px 18px;
        display: block;
        overflow: visible;
    }


        .jhm-visual-page .jhm-visual-hero-copy h1 {
            font-size: clamp(28px, 8vw, 38px);
            line-height: 1.08;
            margin: 7px 0 13px;
        }


        .jhm-visual-page .jhm-visual-hero-copy p {
            font-size: 14px;
            line-height: 1.55;
            margin-bottom: 15px;
        }


    /* ============================================================
       MOBILE IMAGE FRAME
       ============================================================ */

    .jhm-visual-page .jhm-visual-hero-art {
        order: 2;
        width: 100% !important;
        /*
         * Exact horizontal image ratio.
         */
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: auto !important;
        display: block !important;
        background: #E4F9F2 !important;
        overflow: hidden !important;
    }


        .jhm-visual-page .jhm-visual-hero-art .jhm-info-hero-image {
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center center !important;
            display: block !important;
        }
}


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

@media (max-width: 480px) {

    .jhm-visual-page .jhm-visual-hero {
        width: calc(100vw - 14px);
        margin: 7px auto 18px;
        border-radius: 17px;
    }


    .jhm-visual-page .jhm-visual-hero-copy {
        padding: 21px 16px 15px;
    }


        .jhm-visual-page .jhm-visual-hero-copy h1 {
            font-size: clamp(26px, 8.5vw, 35px);
        }


        .jhm-visual-page .jhm-visual-hero-copy p {
            font-size: 13.5px;
        }


    .jhm-visual-page .jhm-hero-chips {
        gap: 6px;
    }


        .jhm-visual-page .jhm-hero-chips > span {
            padding: 6px 9px;
            font-size: 11px;
        }
}


/* ================================================================
   VERY SMALL PHONE
   ================================================================ */

@media (max-width: 360px) {

    .jhm-visual-page .jhm-visual-hero-copy {
        padding: 19px 14px 14px;
    }


        .jhm-visual-page .jhm-visual-hero-copy h1 {
            font-size: 25px;
        }


        .jhm-visual-page .jhm-visual-hero-copy p {
            font-size: 13px;
        }
}