/* Pathisto responsive and performance overrides. */

/* Replace the 1.88 MB PNG with the bundled 63 KB WebP. */
body.home .et_pb_section_1 {
    background-image: url("Bild-Hintergrund-optimized.webp") !important;
}

/* Reserve the header logo's aspect ratio even when it comes from raw Divi HTML. */
header.nav-header img[alt="PATHISTO"] {
    height: auto;
    aspect-ratio: 282 / 55;
}

/* The original 320 px layout shifts the intro column to the right and clips it. */
@media (max-width: 359px) {
    body.home .et_pb_row_1 {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-inline: auto !important;
        overflow: visible !important;
    }

    body.home .et_pb_row_1 > .et_pb_column,
    body.home .et_pb_row_1 .et_pb_text,
    body.home .et_pb_row_1 .et_pb_text_inner {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        inset-inline: auto !important;
        transform: none !important;
    }

    body.home .p-card,
    body.home .p-card-text {
        max-width: calc(100vw - 32px) !important;
        margin-inline: auto !important;
        inset-inline: auto !important;
        transform: none !important;
    }
}

/* Serve a much smaller background to phones and narrow tablets. */
@media (max-width: 767px) {
    body.home .et_pb_section_1 {
        background-image: url("Bild-Hintergrund-mobile.webp") !important;
    }
}

/* Divi switches to the desktop header at 981 px, before its links fit cleanly. */
@media (min-width: 981px) and (max-width: 1099px) {
    header.nav-header {
        column-gap: clamp(16px, 2.5vw, 30px) !important;
        padding-inline: clamp(20px, 2.7vw, 30px) !important;
    }

    header.nav-header > img,
    header.nav-header img[alt="PATHISTO"] {
        flex: 0 1 180px !important;
        width: min(180px, 19vw) !important;
        max-width: 180px !important;
    }

    header.nav-header > nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    header.nav-header nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: clamp(10px, 1.8vw, 22px) !important;
    }

    header.nav-header nav a {
        padding-inline: 0 !important;
        white-space: nowrap !important;
        font-size: clamp(11px, 1.2vw, 12.5px) !important;
    }
}