/*
 * Keep the existing title markup while preventing mobile header overflow.
 * Space is reserved for the fixed drawer button in the top-right corner.
 */

@media screen and (max-width: 1240px) {
    #header {
        position: relative;
    }

    #title {
        display: flex;
        align-items: flex-start;
        width: 100%;
        height: auto !important;
        min-height: clamp(172px, 28vw, 200px);
        background-size: cover;
        box-sizing: border-box;
    }

    #title p {
        width: 100%;
        max-width: 100%;
        min-height: inherit;
        height: auto !important;
        padding: 20px 70px 22px 18px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }

    #title p a {
        display: block;
        max-width: 100%;
    }

    #title p a > font {
        display: block;
        max-width: 100%;
    }

    #title p a > font[size="5"] {
        font-size: clamp(1rem, 3.8vw, 1.25rem);
        line-height: 1.25;
    }

    #title p a > font[size="7"] {
        font-size: clamp(1.85rem, 7vw, 2.5rem);
        line-height: 1.15;
    }

    #title p > font[size="5"] {
        display: block;
        max-width: 100%;
        margin-top: 7px;
        font-size: clamp(0.9rem, 3.5vw, 1.08rem);
        line-height: 1.4;
    }

    #title p > font[size="5"] span {
        display: block;
        max-width: 100%;
        white-space: normal;
    }
}

@media screen and (max-width: 360px) {
    #title {
        min-height: 180px;
    }

    #title p {
        padding-top: 18px;
        padding-right: 62px;
        padding-left: 14px;
    }

    #title p a > font[size="7"] {
        font-size: 1.8rem;
    }
}