/* Diversity visual styles: every selector stays scoped to body[data-view="d3"]. */

/* Compact navigation, matching the existing shared rules. */
@media (max-width: 519px) {
    body[data-view="d3"] .servers { gap: 2px; padding-inline: 6px; }
    body[data-view="d3"] .server-tab { padding-inline: 6px; column-gap: 5px; }
    body[data-view="d3"] .server-mark { width: 8px; height: 8px; }
    body[data-view="d3"] .server-name { font-size: 0.76rem; }
    body[data-view="d3"] .server-sub { font-size: 0.65rem; }
}

body[data-view="d3"] h1 { font-size: clamp(2.6rem, 9vw, 6.5rem); }
body[data-view="d3"] .address { flex-wrap: wrap; }
body[data-view="d3"] .btn-download { height: auto; min-height: 46px; flex-wrap: wrap; }
body[data-view="d3"] .btn-download > span { white-space: nowrap; }

/* The hero reserves vertical room for the courtyard drawn by the shared canvas renderer.
 * One compact reserve serves every breakpoint: enough to scroll the lower lane into view
 * without leaving a dead gap before "Как зайти". */
body[data-view="d3"] .hero {
    padding-bottom: max(clamp(12rem, 24vh, 18rem), var(--d3-stage-room, 0px));
}

@media (max-width: 899px) {
    /* Keep the courtyard clear of the cramped 320px case: the copy block stays tight so the
     * stage below it keeps its whole route. */
    body[data-view="d3"] .hero-inner[data-view="d3"] { max-width: min(34rem, 100%); }
    body[data-view="d3"] .join { margin-top: 1.25rem; }
}

@media (max-width: 400px) {
    body[data-view="d3"] .address-row { margin-bottom: 0.5rem; }
}