/* WWHO v13 — blog detail hero positioning fix */
.route-blogs-show .blog-cover-hero {
    box-sizing: border-box !important;
}

/* inner-redesign-v2 applied translateX(-50%) without positioning the block,
   which shifted the entire title container off-screen. Keep the hero content
   in normal flex flow and center it with logical margins instead. */
.route-blogs-show .blog-cover-content {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-inline: auto !important;
    width: min(1120px, calc(100% - 48px)) !important;
    box-sizing: border-box !important;
    padding: clamp(80px, 12vw, 150px) 0 clamp(58px, 8vw, 92px) !important;
}

.route-blogs-show .blog-cover-content h1 {
    width: 100% !important;
    max-width: 850px !important;
    margin-inline: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: balance;
}

html[dir="rtl"] .route-blogs-show .blog-cover-content h1 {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

@media (max-width: 767.98px) {
    .route-blogs-show .blog-cover-content {
        width: calc(100% - 32px) !important;
        padding: 72px 0 46px !important;
    }

    .route-blogs-show .blog-cover-content h1 {
        max-width: 100% !important;
        font-size: clamp(2.15rem, 10vw, 3.45rem) !important;
        line-height: 1.06 !important;
    }
}