/* Studio DT — imprint + privacy modal. A frosted card (--frost-*, square corners like
   the landing/cookie card) over the live page — NO dim/scrim; the frost does the
   focusing, consistent with the cookie banner + projecten filter. At --z-modal; the
   title + close stay fixed while .imprint__body scrolls (the policy is long). The
   transparent overlay still catches outside-clicks to close. :target reveals it no-JS. */

.imprint {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    pointer-events: auto;   /* transparent click-catcher (no dim) — click outside closes */
}
.imprint[hidden] { display: none; }
/* No-JS: reveal from the URL fragment (the [hidden] attribute otherwise wins). */
.imprint[hidden]:target { display: flex; }
/* JS present (imprint.js sets .imprint-js): it owns visibility via [hidden], so switch
   the :target fallback off — replaceState can't clear :target, so JS can't otherwise
   re-hide a fragment-revealed modal. */
.imprint-js .imprint[hidden]:target { display: none; }
.imprint:focus { outline: none; }

.imprint__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: clamp(var(--frost-card-min), 78%, 50rem);
    max-height: 84vh;
    background: var(--frost-bg);
    -webkit-backdrop-filter: var(--frost-blur);
            backdrop-filter: var(--frost-blur);
    border-radius: var(--frost-radius);
    padding: calc(var(--frost-pad) + var(--space-sm));
    line-height: var(--frost-leading);
    box-shadow: 0 14px 40px rgba(20, 20, 30, .12), 0 40px 100px rgba(20, 20, 30, .10);
}

/* Masked-SVG × — the same close glyph + behaviour as the projecten filter panel. */
.imprint__close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-color: var(--color-text-default);
    -webkit-mask: var(--icon-close) center / contain no-repeat;
            mask: var(--icon-close) center / contain no-repeat;
    transition: transform var(--motion-duration-hover) var(--motion-easing-default);
}
.imprint__close:active { transform: translateY(1px); }
.imprint__close:focus-visible {
    outline: var(--border-width-default) solid var(--color-text-default);
    outline-offset: var(--focus-outline-offset);
}

.imprint__title {
    flex: 0 0 auto;                    /* fixed header — never shrinks with the scroll body */
    margin: 0 0 var(--space-md);
    padding-right: var(--space-xl);   /* clear the close button */
    color: var(--color-text-default);
    font-family: var(--font-family-sans);
    font-size: var(--frost-title-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

/* The scroll region. min-height:0 lets this flex child shrink below its content and scroll. */
.imprint__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    color: var(--color-text-default);
    font-family: var(--font-family-sans);
    font-size: var(--frost-body-size);
    font-weight: var(--font-weight-regular);
}
.imprint__body > * + * { margin-top: var(--space-md); }

.imprint__body h3 {
    margin: var(--space-xl) 0 0;
    font-size: var(--font-size-subhead);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}
.imprint__body h4 {
    margin: var(--space-lg) 0 0;
    font-size: var(--frost-body-size);
    font-weight: var(--font-weight-medium);
}
/* Tighten a heading to the content that immediately follows it. */
.imprint__body :is(h3, h4) + * { margin-top: var(--space-xs); }

.imprint__body ul {
    padding-left: var(--space-md);
    list-style: disc;
}
.imprint__body li + li { margin-top: var(--space-2xs); }

/* Links match the site's interactive links (nav / footer / menu / cookie card): no
   underline at rest, underline on hover (longhand so it keeps the thickness), + the
   global :active sink from base.css. */
.imprint__body a { text-decoration: none; }
.imprint__body a:hover { text-decoration-line: underline; }

.imprint__meta {
    color: var(--color-text-muted);
    font-size: var(--frost-small-size);
}

body.imprint-open { overflow: hidden; }   /* scroll-lock while open (imprint.js) */

/* Mobile: the card hugs the whole screen (no scrim gutter), matching the projecten
   filter panel's full-cover. 48rem = the same breakpoint search/browse.css uses. */
@media (max-width: 48rem) {   /* keep in sync with search/browse.css + imprint.js */
    .imprint { padding: 0; }
    .imprint__card {
        width: 100%;
        height: 100vh;
        height: 100dvh;   /* track the dynamic viewport so browser chrome never clips it */
        max-height: none;
    }
}