/* Compact desktop canvas: 1440px instead of the original 1920px Figma frame.
   Each section owns its type/image scale; mobile sizes remain unchanged. */
body.tu-home-layout {
    --tu-page-width: 1440px;
    background: linear-gradient(90deg, #d8edff 0%, #eff8ff 24%, #fff 44%, #fff 56%, #fffbeb 78%, #fff4ce 100%);
    background-attachment: fixed;
    min-height: 100vh;
    isolation: isolate;
}

.tu-home-layout .tu-home-header,
.tu-home-layout .tu-home,
.tu-home-layout .tu-home-footer,
.tu-home-layout .tu-shell,
.tu-home-layout .tu-home-header .fixed-header,
.tu-home-layout .tu-redesign-page,
.tu-home-layout .tu-account-page,
.tu-home-layout .tu-ad-content-main {
    max-width: var(--tu-page-width);
}

/* One canvas for the navigation, top creative and page content. The side-ad
   grid remains wider, so its rails can sit outside this white container. */
.tu-home-layout .tu-home-header,
.tu-home-layout .tu-home-header .header_nav_component {
    width: 100%;
    max-width: var(--tu-page-width);
}

/* Keep the existing header as a 64/72px spacer. Only the navigation is fixed,
   so neither the first scroll nor opening a menu moves page content. */
.tu-home-layout .tu-home-header .header_nav_component {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    background-color: #0a0e1a;
    box-shadow: 0 0 0 rgb(10 14 26 / 0%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background-color 280ms ease, box-shadow 280ms ease;
}

.tu-home-layout .tu-home-header .header_nav_component::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #0781ef 30%, #ffd00d 70%, transparent);
    opacity: 0;
    transition: opacity 280ms ease;
}

.tu-home-layout .tu-home-header .header_nav_component.is-scrolled {
    background-color: rgb(10 14 26 / 96%);
    box-shadow: 0 10px 28px rgb(10 14 26 / 18%);
}

.tu-home-layout .tu-home-header .header_nav_component.is-scrolled::after { opacity: .65; }

html:has(> body.tu-home-layout) { scroll-padding-top: 88px; }

@media (min-width: 1400px) {
    .tu-home-layout .tu-home-header .navbar_custom { background: transparent !important; }
}

@media (max-width: 1399px) {
    .tu-home-layout .tu-home-header .navbar_custom.collapse.show,
    .tu-home-layout .tu-home-header .navbar_custom.collapsing {
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tu-home-layout .tu-home-header .header_nav_component,
    .tu-home-layout .tu-home-header .header_nav_component::after { transition: none; }
}

.tu-home-layout .tu-ad-slot--top {
    width: 100%;
    max-width: var(--tu-page-width);
    margin: 0 auto;
    padding: 24px var(--tu-page-x, 16px);
    background: #fff;
}

/* Crop the existing logo mask to its TU symbol, leaving the wordmark outside
   the mask box. No new bitmap, decorative DOM or interactive layer is needed. */
@media (min-width: 1441px) {
    body.tu-home-layout::before,
    body.tu-home-layout::after {
        --tu-watermark-height: clamp(360px, 24vw, 640px);
        content: "";
        position: fixed;
        z-index: -1;
        top: 42vh;
        width: calc(var(--tu-watermark-height) * .9);
        height: var(--tu-watermark-height);
        pointer-events: none;
        -webkit-mask: url("../images/logo.png") left top / auto 100% no-repeat;
        mask: url("../images/logo.png") left top / auto 100% no-repeat;
    }

    body.tu-home-layout::before {
        left: calc(var(--tu-watermark-height) * -.38);
        background: rgb(7 129 239 / 6%);
    }

    body.tu-home-layout::after {
        right: calc(var(--tu-watermark-height) * -.38);
        background: rgb(255 208 13 / 7%);
    }
}

@media (max-width: 767px) {
    .tu-home-layout .tu-ad-slot--top { padding: 16px; }
    html:has(> body.tu-home-layout) { scroll-padding-top: 80px; }
    .tu-home-layout .tu-home-header .navbar_custom.collapse.show,
    .tu-home-layout .tu-home-header .navbar_custom.collapsing {
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
    }
}

@media (min-width: 768px) {
    body.tu-home-layout { --tu-page-x: clamp(24px, 2.34375vw, 45px); }

    .tu-home-header.header__inner_page,
    .tu-home-header .header_nav_component,
    .tu-home-header .navbar-container,
    .tu-home-header .navbar_custom,
    .tu-home-header .main_menu,
    .tu-home-header .mobile_menu {
        height: 72px !important;
        min-height: 0;
    }

    .tu-home-header .header-menu-img { width: 96px; max-width: 96px; }
    .tu-home-header .navbar_custom.collapse.show,
    .tu-home-header .navbar_custom.collapsing {
        max-height: calc(100dvh - 72px);
    }

    .tu-account-layout .tu-account-page { padding-top: 40px; padding-bottom: 48px; }
    .tu-account-layout .tu-auth { max-width: 1120px; gap: clamp(24px, 4vw, 56px); }
    .tu-account-layout .tu-auth h1 { font-size: clamp(40px, 4.5vw, 70px); margin-bottom: 20px; }
    .tu-account-layout .tu-account-heading h1 { font-size: clamp(36px, 4.125vw, 64px); }
}

@media (min-width: 1400px) {
    .tu-home-header .header_nav_component .main_menu > li > a,
    .tu-home-header .header_nav_component .main_menu > li > button.dropdown-toggle {
        font-size: 13px !important;
        padding-left: 4px;
        padding-right: 4px;
    }
    .tu-home-header .menu-controls { width: 244px; height: 44px; font-size: 16px; }
    .tu-home-header .menu-controls .search-control { flex-basis: 44px; }
    .tu-home-header .menu-controls .forum-butt,
    .tu-home-header .menu-controls .enter-acc-butt { flex-basis: 100px; }
    .tu-home-header .menu-controls .search-butt a,
    .tu-home-header .menu-controls .search-butt button { width: 44px; height: 44px; }
    .tu-home-header .menu-controls .forum-butt a,
    .tu-home-header .menu-controls .enter-acc-butt a { width: 100px; height: 44px; font-size: 16px; }
}

/* Separate side columns keep section links centered independently of the logo. */
@media (min-width: 1400px) {
    .tu-home-header .navbar_custom {
        display: grid !important;
        grid-template-columns: 244px minmax(0, 1fr) 244px;
        align-items: center;
        column-gap: 12px;
        padding-inline: var(--tu-page-x);
    }
    .tu-home-header .main_menu {
        padding: 0;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .tu-home-header .main_menu > li > a,
    .tu-home-header .main_menu > li > button { white-space: nowrap; }
    .tu-home-header .menu-controls { margin: 0; justify-self: end; }
    .tu-home-header .desktop-header-logo { justify-self: start; }
    .tu-home-header .menu-controls .search-butt button {
        border: 1px solid var(--tu-blue);
        box-sizing: border-box;
        border-radius: 0;
    }
}
.tu-home-header .header-search-icon { flex: none; color: #b7bdcb; }

/* A cover reused in the other slot is fitted whole, never stretched or cropped. */
.tu-reading__cover.tu-cover-fit,
.tu-editorial-card__media.tu-cover-fit,
.tu-editorial-promo__media.tu-cover-fit,
.tu-article-card__image.tu-cover-fit { background: #f0f3ff; }
.tu-reading__cover.tu-cover-fit img,
.tu-editorial-card__media.tu-cover-fit img,
.tu-editorial-promo__media.tu-cover-fit img,
.tu-article-card__image.tu-cover-fit img { object-fit: contain; }