/* =========================================================
   UnlockPool Phase 17 — Global Hero Heading Size
   Applies to unlockpool.com and node.unlockpool.com
========================================================= */

.hero .hero-copy h1,
main .hero .hero-copy h1,
body main section.hero .hero-copy h1 {
    font-size: clamp(54px, 5.2vw, 92px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
}

/* Thai text needs slightly more vertical breathing room */
html[lang="th"] .hero .hero-copy h1,
body[lang="th"] .hero .hero-copy h1 {
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
}

/* Medium desktop / tablet landscape */
@media screen and (max-width: 1200px) {
    .hero .hero-copy h1,
    main .hero .hero-copy h1,
    body main section.hero .hero-copy h1 {
        font-size: clamp(48px, 6.5vw, 76px) !important;
    }
}

/* Tablet */
@media screen and (max-width: 900px) {
    .hero .hero-copy h1,
    main .hero .hero-copy h1,
    body main section.hero .hero-copy h1 {
        font-size: clamp(42px, 8vw, 64px) !important;
        line-height: 1.05 !important;
    }
}

/* Mobile */
@media screen and (max-width: 600px) {
    .hero .hero-copy h1,
    main .hero .hero-copy h1,
    body main section.hero .hero-copy h1 {
        font-size: clamp(36px, 11vw, 52px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
    }
}

/* UNLOCKPOOL-PHASE17-HERO-FONT-END */


/* UNLOCKPOOL-PHASE17-1-HERO-LAYOUT-START */

/* =========================================================
   UnlockPool Phase 17.1
   Node website hero layout
   Left 58% / Right 42%
========================================================= */

@media screen and (min-width: 1201px) {

    body main section.hero {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.38fr)
            minmax(0, 1fr) !important;

        align-items: center !important;
        column-gap: clamp(28px, 3vw, 58px) !important;
    }

    body main section.hero > .hero-copy {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    body main section.hero > .node-orbit {
        min-width: 0 !important;
        width: min(100%, 680px) !important;
        max-width: 100% !important;
        justify-self: center !important;
    }

    /*
     * ป้องกันคำว่า INFRASTRUCTURE
     * ถูกตัดกลางคำเป็น INFRASTRUCTUR / E.
     */
    body main section.hero .hero-copy h1,
    body main section.hero .hero-copy h1 span {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body main section.hero .hero-copy h1 span {
        white-space: nowrap !important;
    }
}

/* Desktop ขนาดกลาง */
@media screen and (min-width: 901px) and (max-width: 1200px) {

    body main section.hero {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.22fr)
            minmax(0, 0.78fr) !important;

        align-items: center !important;
        column-gap: 26px !important;
    }

    body main section.hero > .hero-copy,
    body main section.hero > .node-orbit {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body main section.hero .hero-copy h1 span {
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
}

/* Tablet และ Mobile */
@media screen and (max-width: 900px) {

    body main section.hero {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body main section.hero > .hero-copy,
    body main section.hero > .node-orbit {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body main section.hero .hero-copy h1 span {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* UNLOCKPOOL-PHASE17-1-HERO-LAYOUT-END */


/* UNLOCKPOOL-PHASE17-3-HERO-START */

/* =========================================================
   UnlockPool Phase 17.3
   Canonical Hero Typography
   Same rules for unlockpool.com and node.unlockpool.com
========================================================= */

/* Large desktop */
@media screen and (min-width: 1201px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(58px, 4.2vw, 76px) !important;
        line-height: 1.075 !important;
        font-weight: 700 !important;
        letter-spacing: -0.035em !important;

        width: 100% !important;
        max-width: none !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    html body main section.hero .hero-copy h1 span,
    html body main section.hero .hero-copy h1 em {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
}

/* Medium desktop and tablet landscape */
@media screen and (min-width: 901px) and (max-width: 1200px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(50px, 6vw, 66px) !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;

        width: 100% !important;
        max-width: none !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    html body main section.hero .hero-copy h1 span,
    html body main section.hero .hero-copy h1 em {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
        letter-spacing: inherit !important;
    }
}

/* Tablet portrait */
@media screen and (min-width: 601px) and (max-width: 900px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(44px, 8vw, 64px) !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
        letter-spacing: -0.025em !important;

        width: 100% !important;
        max-width: 100% !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    html body main section.hero .hero-copy h1 span,
    html body main section.hero .hero-copy h1 em {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
    }
}

/* Mobile */
@media screen and (max-width: 600px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(36px, 11vw, 52px) !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;

        width: 100% !important;
        max-width: 100% !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    html body main section.hero .hero-copy h1 span,
    html body main section.hero .hero-copy h1 em {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
    }
}

/*
 * Node uses one long English word.
 * Prevent breaking INFRASTRUCTURE in the middle on desktop.
 */
@media screen and (min-width: 901px) {
    html body main section.hero .hero-copy h1 span {
        white-space: nowrap !important;
    }
}

/* Main website has separate line elements; preserve its intended stacking. */
html body main section.hero .hero-copy h1 > em {
    display: block !important;
}

/* UNLOCKPOOL-PHASE17-3-HERO-END */


/* =========================================================
   UnlockPool Phase 17.3B
   Node Hero Optical Match
   Uppercase Latin appears visually larger than Thai
========================================================= */

@media screen and (min-width: 1201px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(54px, 3.9vw, 70px) !important;
        line-height: 1.075 !important;
    }
}

@media screen and (min-width: 901px) and (max-width: 1200px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(47px, 5.55vw, 61px) !important;
        line-height: 1.08 !important;
    }
}

@media screen and (min-width: 601px) and (max-width: 900px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(41px, 7.45vw, 59px) !important;
        line-height: 1.08 !important;
    }
}

@media screen and (max-width: 600px) {
    html body main section.hero .hero-copy h1 {
        font-size: clamp(34px, 10.2vw, 48px) !important;
        line-height: 1.1 !important;
    }
}

/* UNLOCKPOOL-PHASE17-3B-NODE-OPTICAL-END */