/* Lumera v6 «Sunset» — the «Объекты» hub (round 7 · §5, cut down after the client's review). Loaded after style.css; only
   .page-objects and the o* blocks. The milk palette, the serif / sans pair, the property card (.pcard) and the photo → milk
   mask blends all come from style.css. */

/* ── Sheets and seams: the first screen and the choice are one sheet; the request block runs into the footer with no line
      (its photo fades out at its foot, as on the catalog) ──────────────────────────────────────────────────────────── */
.page-objects main > .oh + .och { border-top: 0; }
.page-objects .ftr { border-top: 0; }

/* ══ 1 · Positioning: the H1 and one line on the milk, the terrace at sunset melting into it ══════════════════════════ */
.oh { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: clamp(500px, 62svh, 660px); background: var(--milk); overflow: hidden; }
.oh__txt { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; padding: calc(var(--hdr-h) + 2px) 0 clamp(28px, 3vw, 48px) var(--pad); }
.ocrumbs ol { display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; letter-spacing: .02em; color: var(--milk-k); }
.ocrumbs li + li::before { content: '/'; margin: 0 9px; opacity: .55; }
.ocrumbs a { transition: color .25s; }
.ocrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.ocrumbs [aria-current] { color: var(--ink-2); }
.oh__main { margin: auto 0; padding-top: 10px; }
.oh__h { font: 400 clamp(44px, 5vw, 78px)/1.02 var(--serif); font-stretch: 87.5%; letter-spacing: -.016em; color: var(--ink); }
.oh__h span { display: block; }
.oh__line { max-width: 34em; margin-top: clamp(16px, 1.6vw, 24px); font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.oh__ph { grid-column: 2; grid-row: 1; position: relative; z-index: 0; margin: 0 0 0 -7vw; overflow: hidden; background: transparent;
  --mx: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .05) 1.6vw, rgba(0, 0, 0, .22) 4vw, rgba(0, 0, 0, .52) 7vw, rgba(0, 0, 0, .82) 10vw, #000 13vw);
  --my: linear-gradient(180deg, transparent 0, transparent calc(var(--hdr-h) * .4), rgba(0, 0, 0, .3) calc(var(--hdr-h) + .5vw), rgba(0, 0, 0, .78) calc(var(--hdr-h) + 4vw), #000 calc(var(--hdr-h) + 7.5vw), #000 74%, rgba(0, 0, 0, .55) 87%, rgba(0, 0, 0, .16) 95%, transparent 100%);
  -webkit-mask-image: var(--mx), var(--my); -webkit-mask-composite: source-in;
  mask-image: var(--mx), var(--my); mask-composite: intersect; }
.oh__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 58%; } /* the photo never sets the screen's height */
.oh__ph img { filter: saturate(.86) sepia(.08) brightness(1.02); }

/* ══ 2 · The choice ════════════════════════════════════════════════════════════════════════════════════════════════
   «Купить / Арендовать» as large serif tabs on a hairline; «Помесячно / Посуточно» under «Арендовать» as the catalog's
   text tabs; then one calm grid of the site's photo cards, every card the same height. */
.och { position: relative; padding: clamp(2px, .4vw, 8px) var(--pad) clamp(56px, 6vw, 96px); background: var(--milk); }
.och__head { position: relative; display: flex; flex-direction: column; }
.och__deal { display: flex; flex-wrap: nowrap; gap: 0 clamp(30px, 3.6vw, 60px); border-bottom: 1px solid var(--milk-line); }
.och__deal [role="radio"] { position: relative; padding: 4px 0 clamp(12px, 1.1vw, 18px); font: 400 clamp(34px, 3.6vw, 56px)/1.04 var(--serif); font-stretch: 87.5%; letter-spacing: -.014em; color: var(--taupe); white-space: nowrap; transition: color .3s var(--ease); }
.och__deal [role="radio"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.och__deal [role="radio"][aria-checked="true"] { color: var(--ink); }
.och__deal [role="radio"][aria-checked="true"]::after { transform: none; }
.och__deal [role="radio"]:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .och__deal [role="radio"]:hover { color: var(--ink); } }
.och__term { display: flex; gap: 28px; margin-top: 10px; padding-left: var(--x, 0); }
.och__term[hidden] { display: none; }
.och__term [role="radio"] { min-height: 40px; padding: 0; font: 500 14px/1 var(--sans); letter-spacing: .01em; color: var(--ink-2); transition: color .25s, box-shadow .25s; }
.och__term [role="radio"][aria-checked="true"] { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--ink); }
.och__term [role="radio"]:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* the cards: buy = two wide (villas, apartments) over three; rent = one row of three, or two wide. One height for all. */
.otiles { --gap: clamp(14px, 1.5vw, 22px); --h: calc((100vw - 2 * var(--pad) - 2 * var(--gap)) / 3 / 1.45);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(20px, 2.2vw, 32px); }
.otiles > .pcard { grid-column: span 2; height: var(--h); aspect-ratio: auto; }
.otiles > .otile--w { grid-column: span 3; }
/* the card's bottom shade only (it has no tag line, so no top shade) */
/* plus a soft shade on the text's side, so a cream title stays legible on a bright interior */
.otiles > .pcard:not(.pcard--fill)::before { background: linear-gradient(180deg, rgba(20, 22, 20, 0) 0%, rgba(20, 22, 20, 0) 36%, rgba(20, 22, 20, .36) 55%, rgba(20, 22, 20, .68) 76%, rgba(19, 21, 19, .9) 100%), linear-gradient(90deg, rgba(19, 21, 19, .26) 0%, rgba(19, 21, 19, 0) 62%); }
.otiles .pcard__title { font-size: clamp(21px, 2vw, 29px); }
.otiles .pcard__d { white-space: normal; }
.otile__dot { margin: 0 8px; opacity: .6; }
.otile__p { white-space: nowrap; }
/* a narrow card (three in a row on tablets): the count and the price on two lines, clear of the ring */
@container (max-width: 340px) { .otiles .pcard__d { display: flex; flex-direction: column; gap: 3px; } .otiles .otile__dot { display: none; } }
.otiles .pcard--fill .pcard__k { margin-bottom: 8px; }
.otiles--err { display: block; }
.otiles__err { padding: clamp(28px, 3vw, 44px); border: 1px solid var(--milk-line); border-radius: 6px; background: var(--milk-hi); }
.otiles__err p { max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.otiles__err .cta { margin-top: 14px; }
/* the site-wide «see all» button (.cat__all > .cta.cat__all-b, style.css): only the home frame's side margins are reset */
.och .cat__all { margin: clamp(24px, 2.4vw, 36px) 0 0; }
@media (prefers-reduced-motion: reduce) { .och__deal [role="radio"]::after { transition: none; } }

/* ══ 3 · Request — the catalog's block; its photo also fades out at the foot, so the footer rises out of it ══════════ */
@media (min-width: 761px) {
  .page-objects .req6__ph {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .05) 1.6vw, rgba(0, 0, 0, .22) 4vw, rgba(0, 0, 0, .52) 7vw, rgba(0, 0, 0, .82) 10vw, #000 13vw), linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, .55) 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .05) 1.6vw, rgba(0, 0, 0, .22) 4vw, rgba(0, 0, 0, .52) 7vw, rgba(0, 0, 0, .82) 10vw, #000 13vw), linear-gradient(180deg, #000 0%, #000 72%, rgba(0, 0, 0, .55) 86%, transparent 100%);
    mask-composite: intersect;
  }
}

/* ══ Tablet ════════════════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) and (min-width: 761px) {
  .oh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .otiles { --h: calc((100vw - 2 * var(--pad) - 2 * var(--gap)) / 3 / 1.3); }
}

/* ══ Phone: the photo on top melting into the milk, the H1 and the line, the tabs, compact photo cards ══════════════ */
@media (max-width: 760px) {
  .oh { display: flex; flex-direction: column; min-height: 0; }
  .oh__ph { order: -1; height: min(88vw, 400px); margin: 0;
    --mx: linear-gradient(90deg, #000, #000);
    --my: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .55) calc(var(--hdr-h) * .8), #000 calc(var(--hdr-h) + 8vw), #000 58%, rgba(0, 0, 0, .6) 76%, rgba(0, 0, 0, .2) 90%, transparent 100%); }
  .oh__ph img { object-position: 64% 62%; }
  .oh__txt { margin-top: -16vw; padding: 0 var(--pad) 6px; }
  .ocrumbs { display: none; }
  .oh__main { padding-top: 0; }
  .oh__h { font-size: clamp(36px, 10.6vw, 46px); line-height: 1.04; }
  .oh__line { margin-top: 12px; font-size: 15px; }
  .och { padding: 26px var(--pad) 52px; }
  .och__deal { gap: 0 clamp(20px, 7vw, 30px); }
  .och__deal [role="radio"] { font-size: clamp(30px, 8.6vw, 36px); padding-bottom: 12px; }
  .och__term { padding-left: 0; gap: 24px; }
  .och__term [role="radio"] { min-height: 44px; }
  .otiles { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .otiles > .pcard, .otiles > .otile--w { grid-column: auto; height: clamp(126px, 36vw, 156px); }
  /* a compact card: the text takes half its height, so the shade starts higher */
  .otiles > .pcard:not(.pcard--fill)::before { background: linear-gradient(180deg, rgba(20, 22, 20, .06) 0%, rgba(20, 22, 20, .3) 32%, rgba(20, 22, 20, .64) 62%, rgba(19, 21, 19, .9) 100%), linear-gradient(90deg, rgba(19, 21, 19, .34) 0%, rgba(19, 21, 19, 0) 70%); }
  .otiles .pcard__body { left: 18px; right: 66px; bottom: 16px; }
  .otiles .pcard__title { font-size: clamp(20px, 5.6vw, 22px); }
  .otiles .pcard__d { margin-top: 5px; font-size: 13px; }
  .otiles .pcard .circ--card { --cs: 38px; right: 16px; bottom: 16px; }
  .och .cat__all { margin: 18px 0 0; }
  .page-objects .req6__ph {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .06) 5vw, rgba(0, 0, 0, .3) 14vw, rgba(0, 0, 0, .7) 26vw, #000 36vw, #000 72%, rgba(0, 0, 0, .5) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .06) 5vw, rgba(0, 0, 0, .3) 14vw, rgba(0, 0, 0, .7) 26vw, #000 36vw, #000 72%, rgba(0, 0, 0, .5) 88%, transparent 100%);
  }
}