/* Rentoplan UI — base: шрифт, reset, типографика, контейнер, сетки, утилиты. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/manrope-var.woff2?v=1') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--rp-bg); color: var(--rp-text);
  font-family: var(--rp-font); font-size: var(--rp-fs-15); line-height: var(--rp-lh);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rp-accent-text); }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .4; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--rp-accent-soft); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; border-radius: var(--rp-r-sm); }

/* Type */
.rp-display, .rp-h1, .rp-h2, .rp-h3 { font-weight: 800; letter-spacing: var(--rp-track-h); text-wrap: balance; }
.rp-display { font-size: clamp(36px, 5vw, var(--rp-fs-56)); line-height: 1; letter-spacing: -0.04em; }
.rp-h1 { font-size: clamp(28px, 3.4vw, var(--rp-fs-36)); line-height: 1.1; }
.rp-h2 { font-size: clamp(22px, 2.4vw, var(--rp-fs-28)); line-height: 1.2; }
.rp-h3 { font-size: var(--rp-fs-20); line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.rp-lead { font-size: var(--rp-fs-17); color: var(--rp-text-2); text-wrap: pretty; }
.rp-body { font-size: var(--rp-fs-15); }
.rp-caption { font-size: var(--rp-fs-13); color: var(--rp-text-2); font-weight: 600; }
.rp-label { font-size: var(--rp-fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rp-text-2); }
.rp-muted { color: var(--rp-text-2); }
.rp-strong { font-weight: 800; }
.rp-link { color: var(--rp-accent-text); font-weight: 700; }
.rp-link:hover { color: var(--rp-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Layout */
.rp-container { width: 100%; max-width: var(--rp-container); margin: 0 auto; padding-left: var(--rp-gutter); padding-right: var(--rp-gutter); }
.rp-main { min-height: 50dvh; padding-bottom: var(--rp-s16); }
.rp-section { padding-top: var(--rp-s12); }
.rp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rp-s4); flex-wrap: wrap; margin-bottom: var(--rp-s6); }
.rp-stack { display: flex; flex-direction: column; gap: var(--rp-s3); }
.rp-row { display: flex; align-items: center; gap: var(--rp-s2); }
.rp-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--rp-s4); flex-wrap: wrap; }
.rp-grid { display: grid; gap: var(--rp-s6); }
.rp-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rp-grid-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--rp-s8) var(--rp-s6); }
.rp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rp-grid-links { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--rp-s1) var(--rp-s6); }
.rp-scroll-x { display: flex; gap: var(--rp-s2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.rp-scroll-x::-webkit-scrollbar { display: none; }
.rp-scroll-x > * { flex: none; scroll-snap-align: start; }

/* Utilities */
.rp-sr-only, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rp-hide { display: none !important; }
.rp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-nowrap { white-space: nowrap; }
.rp-spacer { flex: 1; }
/* Visibility helpers only ever HIDE, and only inside a media scope — they never set a
   shown display, so a visible element keeps its own (a chip stays inline-flex; the old
   display:initial flattened the icon+label into stacked blocks — the broken two-line
   «Filters» chip on phones). */
@media (min-width: 768px) { .rp-mobile-only { display: none !important; } }

@media (max-width: 767px) {
  :root { --rp-gutter: var(--rp-gutter-m); }
  .rp-main { padding-bottom: calc(var(--rp-tabbar-h) + var(--rp-safe-b) + var(--rp-s8)); }
  .rp-section { padding-top: var(--rp-s8); }
  .rp-grid-cards { grid-template-columns: 1fr; gap: var(--rp-s6); }
  .rp-desktop-only { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .rp-grid-cards { grid-template-columns: repeat(2, 1fr); }
}

/* [2026-09-07] Teaser rows (recommended, «Popular today») keep whole rows: a lone fifth card
   under a row of four reads as a rendering fault. An item that STARTS a row (4n+1 / 2n+1) and
   sits among the last few is the head of an incomplete row, so it and everything after it drop
   out. :not(:first-child) keeps a block that is shorter than one row intact, and one column
   (phones) needs no rule at all — every count fills its row there. Never put this class on the
   catalogue grid: it would hide real results. */
@media (min-width: 1024px) {
  .rp-grid-even > *:nth-child(4n+1):nth-last-child(-n+3):not(:first-child),
  .rp-grid-even > *:nth-child(4n+1):nth-last-child(-n+3):not(:first-child) ~ * { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .rp-grid-even > *:nth-child(2n+1):last-child:not(:first-child) { display: none; }
}

/* [2026-09-08] The `hidden` attribute must actually hide. Every component here sets its own
   `display` (a button is inline-flex, a grid is grid), and an author rule beats the browser's
   `[hidden] { display: none }` — so `el.hidden = true` silently did nothing and the Save-search
   button stayed on screen next to «Saved». One rule fixes the whole class. */
[hidden] { display: none !important; }