/*
 * Base layer: design tokens, the Gilroy font, reset, focus ring, type and container.
 * Components live in css/site.css; stored-content rules that predate the design in css/legacy-content.css.
 * New classes use the k- prefix.
 *
 * Breakpoints (the boards are drawn at 1440 and 390; the widths between are derived, I13):
 *   ≥1200      as drawn
 *   1024–1199  compact top bar (icon-only messengers with aria-label), footer 2×2
 *   768–1023   phone header and menu panel, 2-column grids
 *   <768       phone boards; check 320 as well
 * Media queries cannot read custom properties, so the queries repeat these numbers:
 *   @media (max-width: 1199px), (max-width: 1023px), (max-width: 767px).
 */

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Gilroy-Regular.woff) format("woff");
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Gilroy-Bold.woff) format("woff");
}

:root {
  /* Colours */
  --k-ink: #14284a;
  --k-blue: #1557e9;
  --k-blue-hover: #0f47c4;
  --k-muted: #596b83;
  --k-secondary: #45566f;
  --k-disabled-text: #536479;
  --k-disabled-bg: #dce4ef;
  --k-hairline: #dce4ef;
  --k-band: #edf3fc;
  --k-panel: #f4f7fc;
  --k-help: #e6eefc;
  --k-header: #004993;
  --k-header-text: #cfe0ff;
  --k-footer: #14284a;
  --k-footer-text: #b7c4d8;
  --k-footer-rule: rgba(183, 196, 216, .3);
  --k-overlay: rgba(20, 40, 74, .55);
  --k-white: #ffffff;
  --k-focus: #ffad20;

  /* Yandex reviews section: text ink and the captions' grey */
  --k-ya-ink: #21201f;
  --k-ya-muted: #5c5a57;

  /* Card shadow and radii */
  --k-shadow: 0 1px 2px rgba(20, 40, 74, .06), 0 4px 12px rgba(20, 40, 74, .05);
  --k-radius-control: 8px; /* inputs, buttons */
  --k-radius-card: 12px;   /* cards, dialogs */
  --k-radius-panel: 16px;  /* price panel */

  /* Layout */
  --k-container: 1200px;
  --k-gutter: 16px;
  --k-bp-desktop: 1200px;
  --k-bp-laptop: 1024px;
  --k-bp-tablet: 768px;

  /* Type: desktop values; the phone values replace them below 768 px */
  --k-font: "Gilroy", system-ui, sans-serif;
  --k-body-size: 17px;
  --k-body-line: 1.55;
  --k-h1-size: 56px;
  --k-h1-line: 1.05;
  --k-h1-tracking: -0.015em;
  --k-h2-size: 34px;
  --k-h2-line: 1.2;
  --k-h2-tracking: -0.01em;
  --k-h3-size: 20px;
  --k-h3-line: 26px;
}

/* Tablet steps of the inner-page H1 (the base h1 rule below), as the builder hero and the 404 title step:
   56 → 48 → 42 px, then the phone value. */
@media (max-width: 1199px) {
  :root {
    --k-h1-size: 48px;
  }
}

@media (max-width: 1023px) {
  :root {
    --k-h1-size: 42px;
  }
}

@media (max-width: 767px) {
  :root {
    --k-body-size: 16px;
    --k-body-line: 24px;
    --k-h1-size: 36px;
    --k-h1-line: 38px;
    --k-h1-tracking: -0.01em;
    --k-h2-size: 26px;
    --k-h2-line: 31px;
    --k-h3-line: 25px;
  }
}

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--k-font);
  font-weight: 400;
  font-size: var(--k-body-size);
  line-height: var(--k-body-line);
  color: var(--k-ink);
  background: var(--k-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* A text field's default width (size="40") is wider than a 320 px screen. */
input,
textarea,
select {
  max-width: 100%;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

details[open] > summary svg {
  transform: rotate(180deg);
}

[hidden] {
  display: none !important;
}

/* Type */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .5em;
  font-weight: 700;
  color: var(--k-ink);
}

h1 {
  font-size: var(--k-h1-size);
  line-height: var(--k-h1-line);
  letter-spacing: var(--k-h1-tracking);
}

h2 {
  font-size: var(--k-h2-size);
  line-height: var(--k-h2-line);
  letter-spacing: var(--k-h2-tracking);
}

h3 {
  font-size: var(--k-h3-size);
  line-height: var(--k-h3-line);
}

h4 {
  font-size: 20px;
  line-height: 1.3;
}

h5,
h6 {
  font-size: inherit;
  line-height: inherit;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--k-blue);
}

a:hover {
  color: var(--k-blue-hover);
}

strong,
b {
  font-weight: 700;
}

/* Focus: visible for keyboard users only. The Yandex reviews section (.k-yandex) uses its own ink for the outline. */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--k-ink);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--k-focus);
}

.k-yandex a:focus-visible,
.k-yandex button:focus-visible {
  outline-color: var(--k-ya-ink);
}

/* Container: 1200 px of content, a 16 px gutter on narrower screens */

.k-container {
  width: 100%;
  max-width: calc(var(--k-container) + 2 * var(--k-gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--k-gutter);
  padding-right: var(--k-gutter);
}

/* Text for screen readers only, such as the «Арендовать: » prefix of a card link */

.k-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}