/* ========================================
   Responsive Layer — Products WebUI
   Loaded LAST so it overrides app.css and
   page CSS. Additive, mobile-first hardening:
   desktop appearance (>= 960px) is unchanged.
   ======================================== */

/* ---------- Overflow safety ----------
   Nothing may force the page wider than the viewport. Media and tables are the usual
   culprits; long German compound words the rest. (app.css already sets overflow-x:hidden
   on html, body.) */

img, picture, video {
    max-width: 100%;
    height: auto;
}

/* Long words ("Immobilienverwaltung", IBANs, e-mails) wrap instead of overflowing. */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.rr-title,
.rr-section-title,
.home-landing-headline,
.home-welcome-title,
.home-card-title,
.subs-title-modern {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ---------- Fluid typography ----------
   clamp(min, fluid, max): the MAX equals MudBlazor's default size, so desktop is
   untouched; the value shrinks with the viewport down to a readable mobile min. */

.mud-typography-h1 { font-size: clamp(2.5rem, 8vw, 6rem); }
.mud-typography-h2 { font-size: clamp(2rem, 6vw, 3.75rem); }
.mud-typography-h3 { font-size: clamp(1.75rem, 5vw, 3rem); }
.mud-typography-h4 { font-size: clamp(1.5rem, 4.2vw, 2.125rem); }
.mud-typography-h5 { font-size: clamp(1.2rem, 3.2vw, 1.5rem); }
.mud-typography-h6 { font-size: clamp(1.05rem, 2.6vw, 1.25rem); }

/* ---------- Tables ----------
   app.css sets `.mud-table { overflow: hidden }` for the rounded corners. Guarantee
   the inner scroll container can still scroll horizontally on narrow screens so wide
   tables (IBAN, multi-column overviews) never blow out the page width. */
.mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Dialogs ----------
   Keep any dialog within the viewport regardless of a fixed px width set elsewhere. */
.mud-dialog {
    max-width: calc(100vw - var(--rr-space-md));
}

/* ---------- Phone (<= 600px) ---------- */
@media (max-width: 599.98px) {

    /* Page gutters: tighten the manual article padding used in MainLayout. */
    article.content,
    .content.px-4 {
        padding-left: var(--rr-space-md) !important;
        padding-right: var(--rr-space-md) !important;
    }

    /* Cards: trim oversized desktop padding. */
    .rr-card-content {
        padding: var(--rr-space-md);
    }

    /* 404 code: 8rem overflows tiny screens. */
    .rr-notfound-code {
        font-size: clamp(4rem, 22vw, 8rem);
    }

    /* Dialogs use nearly the full width on phones. */
    .mud-dialog {
        margin: var(--rr-space-sm);
        max-width: calc(100vw - var(--rr-space-md));
    }

    /* Toolbars/app bar: prevent action buttons from being pushed off-screen. */
    .mud-toolbar {
        padding-left: var(--rr-space-sm);
        padding-right: var(--rr-space-sm);
    }
}