/* =============================================================================
   Header and hero refinements
   Loaded after responsive.css. This file only adjusts the ranges confirmed by
   visual QA and leaves the original desktop composition unchanged elsewhere.
   ========================================================================== */

/* Once the navigation becomes a drawer, the action group must use the whole
   header row instead of sitting immediately after the logo. */
@media (max-width: 1180px) {
    .site-header__inner {
        width: 100%;
    }

    .site-header__actions {
        margin-left: auto;
    }

    /* The two-column thesis card becomes too narrow before the phone breakpoint.
       Switch it as soon as the page enters the compact header layout. */
    .about__body > ul {
        grid-template-columns: 1fr;
        max-width: 760px;
    }
}

/* On widths where the portrait still has its own column, raise the image without
   changing the text or card geometry. The horizontal separation remains defined
   by --content-w, so the host cannot cover the wordmark. */
@media (min-width: 1181px) {
    .hero__host img {
        transform: translateY(clamp(-104px, -5vw, -56px));
    }
}

/* Tablet and compact-laptop Hero: keep the portrait recognizable on the right,
   but fade its left edge before it approaches the text column. */
@media (min-width: 901px) and (max-width: 1180px) {
    .hero {
        min-height: max(760px, 100svh);
        padding-bottom: clamp(48px, 6vh, 72px);
    }

    .hero__content {
        max-width: 760px;
    }

    .wordmark {
        width: min(58vw, 620px);
    }

    .hero__lead {
        max-width: min(52vw, 540px);
    }

    .hero__host {
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        width: min(44%, 520px);
        height: min(88svh, 760px);
        opacity: .82;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .42) 18%,
            #000 36%,
            #000 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .42) 18%,
            #000 36%,
            #000 100%
        );
    }

    .hero__host img {
        object-position: right bottom;
        transform: none;
    }
}

/* Below the tablet range the portrait becomes a quiet background accent. This
   prevents the face and jacket from competing with the stacked episode card. */
@media (max-width: 900px) {
    .hero__host {
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        width: min(88%, 640px);
        height: 50%;
        opacity: .16;
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .24) 32%,
            #000 64%,
            #000 100%
        );
        mask-image: linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 0, 0, .24) 32%,
            #000 64%,
            #000 100%
        );
    }

    .hero__host img {
        object-position: right bottom;
        transform: none;
    }
}

@media (max-width: 600px) {
    .hero__host {
        width: 100%;
        height: 42%;
        opacity: .1;
    }
}

/* On short landscape screens the content is more important than a decorative
   portrait; hiding it avoids a dense overlap around the episode card. */
@media (max-height: 700px) and (min-width: 761px) and (max-width: 1180px) {
    .hero__host {
        display: none;
    }
}