/* ==========================================================================
   tmetr — pages.css
   Стили конкретных страниц: hero и секции главной, каталог, карточка объекта.
   ========================================================================== */

/* ==========================================================================
   Hero (главная)
   ========================================================================== */
.hero { position: relative; background: linear-gradient(135deg, #0f2557 0%, var(--color-brand-dark) 55%, var(--color-brand) 100%); color: var(--color-text-invert); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 400px at 85% -10%, rgba(245,158,11,0.25), transparent 60%); pointer-events: none; }
.hero__inner { position: relative; padding-block: clamp(2.5rem, 7vw, 5rem); display: grid; gap: var(--gap-lg); align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { color: #fff; font-size: var(--fs-hero); margin-bottom: 1rem; }
.hero__lead { font-size: var(--fs-lg); color: #dbe4ff; max-width: 36ch; margin-bottom: 1.6rem; }
.hero__usp { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1.8rem; padding: 0; list-style: none; }
.hero__usp li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: #e2e8ff; }
.hero__usp li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; font-size: 0.7rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Призрачная кнопка на тёмном hero — светлый контур вместо инлайн-стилей */
.hero .btn--ghost { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.4); }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* Поисковая карточка в hero */
.hero__search { background: #fff; color: var(--color-text); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-lg); }
.hero__search h2 { font-size: var(--fs-lg); margin-bottom: 1rem; }

/* Слайдер главной из CMS (регион main_slider / хелпер Slider).
   Выводится только когда админ заполнил слайдер; в деве секции нет.

   Грабли (исправлено): хелпер Agency.Slider отдаёт вёрстку под slick на
   bootstrap-сетке:
     .cms-slider > .slider-wrapper > .slider > .slider-inner > .row >
       .images.span9 > .slick-sliders > .slider-content >
         .slide > [.slider-info] + .image-wrapper >
           img.background-img + a.main-photo-wrap > img.main-photo
   В теме нет ни slick, ни Bootstrap, поэтому:
     • .span9 float'ил блок → родители схлопывались по высоте → фото «не видно»;
     • на слайд приходилось ДВЕ одинаковых картинки (background-img + main-photo),
       обе во всю ширину с height:auto → слайдер «слишком высокий».
   Фикс: сбрасываем float у bootstrap-классов, скрываем дубль background-img,
   а видимую картинку кадрируем object-fit'ом в фиксированную высоту. */
.cms-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--color-bg-alt); }
/* Сброс bootstrap-сетки (span9/span3) и слик-обёрток — занимают всю ширину. */
.cms-slider .slider-wrapper,
.cms-slider .slider,
.cms-slider .slider-inner,
.cms-slider .row,
.cms-slider .images,
.cms-slider [class*="span"],
.cms-slider .slick-sliders,
.cms-slider .slider-content { float: none; width: 100%; max-width: 100%; margin: 0; }
.cms-slider .slide { position: relative; }
.cms-slider .image-wrapper { position: relative; width: 100%; line-height: 0; }
/* Дубль фоновой картинки не показываем — оставляем одну, кадрируем по контейнеру. */
.cms-slider img.background-img { display: none; }
.cms-slider .main-photo-wrap { display: block; }
.cms-slider .slide img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; display: block; }
/* Подпись объекта-слайда (цена/адрес) — поверх фото. */
.cms-slider .slider-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
.cms-slider .slider-info,
.cms-slider .slider-info a,
.cms-slider .slider-info .title { color: #fff; }

/* Рабочий слайдер (инициализируется theme.js: класс .tmetr-slider).
   До инициализации/без JS слайды видны все подряд — деградация безопасна. */
.tmetr-slider .slide { display: none; }
.tmetr-slider .slide.is-active { display: block; animation: tmetr-fade var(--transition) ease; }
@keyframes tmetr-fade { from { opacity: 0; } to { opacity: 1; } }

.tmetr-slider__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.9); color: var(--color-text);
    display: grid; place-items: center; box-shadow: var(--shadow-sm);
    transition: background var(--transition);
}
.tmetr-slider__arrow:hover { background: #fff; }
.tmetr-slider__arrow::before { font-size: 1.2rem; line-height: 1; }
.tmetr-slider__arrow--prev { left: 0.75rem; }
.tmetr-slider__arrow--prev::before { content: "‹"; }
.tmetr-slider__arrow--next { right: 0.75rem; }
.tmetr-slider__arrow--next::before { content: "›"; }

.tmetr-slider__dots { position: absolute; left: 0; right: 0; bottom: 0.75rem; z-index: 3; display: flex; justify-content: center; gap: 0.4rem; }
.tmetr-slider__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.55); transition: background var(--transition), transform var(--transition); }
.tmetr-slider__dot.is-active { background: #fff; transform: scale(1.25); }

/* Полоса доверия под hero */
.trustbar { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 720px) { .trustbar { grid-template-columns: repeat(4, 1fr); } }
.trustbar__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--color-brand); line-height: 1; }
.trustbar__label { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 0.35rem; }

/* ==========================================================================
   CTA-полоса
   ========================================================================== */
.cta-band { background: linear-gradient(120deg, var(--color-brand-dark), var(--color-brand)); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 760px) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: #fff; margin: 0; }
.cta-band p { color: #dbe4ff; margin: 0.4rem 0 0; }

/* ==========================================================================
   Каталог
   ========================================================================== */
.catalog__toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.catalog__toolbar h1 { margin: 0; font-size: var(--fs-h2); }
.catalog__grid { margin-top: 1rem; }
.catalog__count { color: var(--color-text-muted); font-size: var(--fs-sm); }
.catalog__count b { color: var(--color-text); }
.catalog__sort { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); }
.catalog__sort select { padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-sm); }

.catalog__sidebar { position: sticky; top: 88px; }
.section-title { display: flex; align-items: baseline; gap: 0.75rem 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-title h2 { margin: 0; }
.section-title h2 a { color: inherit; }
.section-title h2 a:hover { color: var(--color-brand); }
/* Ссылка «Весь каталог» — в той же строке, прижата к правому краю. */
.section-title__all { margin-inline-start: auto; }
.section-title a { font-size: var(--fs-sm); font-weight: 600; }
.section-title h2 a { font-size: inherit; }

/* ==========================================================================
   Карточка объекта (страница)
   ========================================================================== */
.object { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .object { grid-template-columns: 1fr 340px; } }
.object__header h1 { margin-bottom: 0.4rem; }
.object__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: 1.25rem; }
.object__price { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--color-text); }
.object__price small { font-size: var(--fs-base); font-weight: 600; color: var(--color-text-muted); }

.specs-grid { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-block: 1.5rem; }
@media (min-width: 560px) { .specs-grid { grid-template-columns: repeat(3, 1fr); } }
.specs-grid > div { background: #fff; padding: 0.9rem 1rem; }
.specs-grid dt { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.2rem; }
.specs-grid dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); }

.object__body { line-height: 1.7; }
.object__body h2 { font-size: var(--fs-h3); margin-top: 1.5rem; }

/* Сайдбар карточки объекта */
.object__aside { position: sticky; top: 88px; display: grid; gap: var(--gap); }
.agent-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.2rem; display: flex; align-items: center; gap: 0.9rem; }
.agent-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.agent-card b { display: block; }
.agent-card small { color: var(--color-text-muted); }

/* ==========================================================================
   Текстовые страницы (Nodes)
   ========================================================================== */
.prose { max-width: 70ch; }
/* Текстовая страница ноды (/page/*) и новость — текст во всю ширину контейнера
   (как шапка), а не ограниченная колонка чтения. */
.node-page .prose, .news-article .prose, .news-article__body { max-width: none; }
.prose h2 { margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.node-list { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .node-list { grid-template-columns: repeat(2, 1fr); } }
.node-list article { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.4rem; }
.node-list h2 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.node-list time { color: var(--color-text-muted); font-size: var(--fs-xs); }

/* ==========================================================================
   Пустое состояние каталога
   ========================================================================== */
.catalog__empty { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.4rem); text-align: center; color: var(--color-text-muted); margin-top: 1rem; }
.catalog__empty p { margin: 0.3rem 0; }
.catalog__empty a { color: var(--color-brand); }

/* ==========================================================================
   Заголовок раздела с действием (отзывы и т.п.)
   ========================================================================== */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.page-head .section__head { margin-bottom: 0; }

/* ==========================================================================
   Новости (плагин News): список и страница новости
   ========================================================================== */
.news-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 620px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.news-card__media { display: block; aspect-ratio: 16 / 10; background: var(--color-bg-alt); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.news-card__date { color: var(--color-text-muted); font-size: var(--fs-xs); }
.news-card__title { font-size: var(--fs-h4, 1.15rem); margin: 0; line-height: 1.35; }
.news-card__lead { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.news-card__more { margin-top: auto; font-weight: 600; font-size: var(--fs-sm); color: var(--color-brand); }

.news-article__head { margin-bottom: 1.4rem; }
.news-article__date { color: var(--color-text-muted); font-size: var(--fs-sm); }
.news-article__head h1 { margin: 0.4rem 0 0.6rem; }
.news-article__lead { font-size: var(--fs-lg); color: var(--color-text-muted); }
.news-article__media { margin: 0 0 1.6rem; border-radius: var(--radius); overflow: hidden; }
.news-article__media img { width: 100%; height: auto; display: block; }
.news-article__share { margin-top: 1.6rem; }
.news-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--color-border); font-weight: 600; font-size: var(--fs-sm); }
.news-nav a { color: var(--color-brand); }
.news-nav__list { color: var(--color-text-muted); }

/* ==========================================================================
   Отзывы (плагин Reviews)
   ========================================================================== */
.reviews-list { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 720px) { .reviews-list { grid-template-columns: repeat(2, 1fr); } }
.review-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.review-card__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.review-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.review-card__avatar--mono { display: grid; place-items: center; background: var(--color-brand); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); }
.review-card__name { display: block; }
.review-card__date { color: var(--color-text-muted); font-size: var(--fs-xs); }
.review-card__text { line-height: 1.65; color: var(--color-text); }
.review-card__text p { margin: 0 0 0.5rem; }

.review-form .field { margin-bottom: 0.85rem; }
.review-form__consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0.4rem 0 1rem; }
.review-form__consent a { color: var(--color-brand); }

/* ==========================================================================
   Контакты (контроллер Contacts)
   ========================================================================== */
.contacts-layout { display: grid; gap: var(--gap-lg); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .contacts-layout { grid-template-columns: 1fr 1fr; } }
.contacts-info { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); align-content: start; }
.info-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.info-card__label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin-bottom: 0.35rem; }
.info-card__value { margin: 0; font-weight: 600; }
.info-card__value a { color: var(--color-brand); }
.contacts-form h2 { font-size: var(--fs-lg); margin-bottom: 0.3rem; }
.contacts-form .field { margin-bottom: 0.85rem; }
.contacts-map { margin-top: var(--gap-lg); border-radius: var(--radius); overflow: hidden; }
.contacts-map :is(#map, .map, iframe) { width: 100%; min-height: 360px; border: 0; }

/* ==========================================================================
   Избранное (плагин Favorites)
   ========================================================================== */
.favorites-empty__icon { font-size: 2.4rem; color: var(--color-brand); margin: 0 0 0.4rem; }
.favorites-empty .btn { margin-top: 0.6rem; }

/* ==========================================================================
   Страница 404
   ========================================================================== */
.error-page { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; }
.error-page__code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 16vw, 8rem); line-height: 1; color: var(--color-brand); margin: 0; }
.error-page__title { font-size: var(--fs-h2); margin: 0.5rem 0 0.8rem; }
.error-page__text { color: var(--color-text-muted); max-width: 46ch; margin: 0 auto 1.6rem; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.6rem; }
.error-page__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center; font-size: var(--fs-sm); }
.error-page__links a { color: var(--color-brand); }

/* ==========================================================================
   CMS-страницы без отдельного шаблона темы — вёрстка во всю ширину ГЛАВНОГО
   БЛОКА (центрированный контейнер), а не во весь экран.

   Эти страницы рендерит сама CMS (свои элементы Site/*, .content и т.п.), тема их
   не переопределяет, поэтому контент <main> растягивался на всю ширину окна.
   Ограничиваем сам #main-content шириной контейнера и центрируем — как у
   остальных страниц темы. Селекторы привязаны к классам <body>:
     page--users                 → /users/users (наши агенты)
     page--services              → /agency/services/mortgage_calculator
     page--advertisement_templates → /object_templates/... (список ЖК) и просмотр ЖК
                                     /zhilye_kompleksy/... (action view_slug)
     page--realty.act--add       → /agency/realty/add (только добавление объекта,
                                     НЕ каталог realty/index, у которого свой шаблон)
   Класс act--<action> добавляет Layouts/default.ctp.
   ========================================================================== */
body.page--users #main-content,
body.page--services #main-content,
body.page--advertisement_templates #main-content,
body.page--realty.act--add #main-content {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) var(--section-y);
}
/* Заголовки этих страниц — в стиле темы. */
body.page--users #main-content .page-header,
body.page--services #main-content h1,
body.page--advertisement_templates #main-content h1 {
    font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2); margin: 0 0 1.2rem;
}
/* Сброс bootstrap-сетки внутри этих страниц (span*, row-fluid), чтобы блоки не
   «разъезжались» float'ом за пределы центрированного контейнера. */
body.page--users #main-content [class*="span"],
body.page--services #main-content [class*="span"],
body.page--advertisement_templates #main-content [class*="span"] { float: none; }

/* --- Ипотечный калькулятор (/agency/services/mortgage_calculator) --- */
.mortgage-calculator { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--shadow-sm); }
.mortgage-calculator form { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mortgage-calculator form { grid-template-columns: repeat(2, 1fr); } }
.mortgage-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.mortgage-form__field label { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mortgage-calculator input[type="text"], .mortgage-calculator input[type="number"], .mortgage-calculator select {
    width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--color-text);
    padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.mortgage-calculator input:focus, .mortgage-calculator select:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); }
.mortgage-calculator input[type="submit"], .mortgage-calculator button[type="submit"], .mortgage-calculator .btn {
    grid-column: 1 / -1; justify-self: start;
    font-family: var(--font-head); font-weight: 600; cursor: pointer;
    padding: 0.8rem 1.4rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-brand); color: var(--color-text-invert);
}
.mortgage-calculator input[type="submit"]:hover, .mortgage-calculator button[type="submit"]:hover { background: var(--color-brand-dark); }

/* --- Форма добавления объекта (/agency/realty/add) — дизайн в стиле темы.
   Разметку отдаёт app/View/Realty/add.ctp: form > #add_form.form_add с блоками
   .input_block (.left — подпись, .right — поле), .content_title (заголовок),
   .button (кнопка), плюс ajax-параметры категории (#categoryParams). --- */
.form_add { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--shadow-sm); }
.form_add .content_title { margin-bottom: 1.2rem; }
.form_add .content_title .title_left { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); }
.form_add .input_block { display: grid; gap: 0.3rem 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 640px) { .form_add .input_block { grid-template-columns: 220px 1fr; align-items: start; } }
.form_add .input_block .left { color: var(--color-text-muted); font-weight: 600; font-size: var(--fs-sm); padding-top: 0.55rem; }
.form_add .input_block .left span { display: block; }
.form_add .input_block .right { min-width: 0; }
.form_add input[type="text"], .form_add input[type="number"], .form_add input[type="email"], .form_add input[type="tel"], .form_add select, .form_add textarea {
    width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--color-text);
    padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form_add textarea { resize: vertical; min-height: 110px; }
.form_add input:focus, .form_add select:focus, .form_add textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); }
.form_add #addPhoto { display: inline-block; margin-top: 0.4rem; font-weight: 600; font-size: var(--fs-sm); color: var(--color-brand); }
.form_add .button { margin-top: 0.6rem; }
.form_add .button button, .form_add .button input[type="button"], .form_add .button input[type="submit"] {
    font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base); cursor: pointer;
    padding: 0.9rem 1.8rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-accent); color: #1f1300;
}
.form_add .button button:hover, .form_add .button input[type="submit"]:hover { background: var(--color-accent-dark); }
.form_add .clear { clear: both; }

/* --- Наши агенты (/users/users): сетка карточек вместо растянутого списка --- */
body.page--users #main-content .content { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 560px) { body.page--users #main-content .content { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { body.page--users #main-content .content { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Поиск «Найти объект» в hero, когда CMS отдаёт штатный виджет
   (Elements/filter_widget.ctp → .property-filter.widget). Приводим поля к виду
   фильтра объектов (.agency-filter / .field): убираем bootstrap-сетку, стилизуем
   инпуты/селекты/кнопку. На странице объектов фильтр уже оформлен (.agency-filter).
   ========================================================================== */
.hero__search [class*="span"] { float: none; width: 100%; }
.property-filter.widget, .property-filter.widget .content { width: 100%; }
.property-filter.widget form { display: grid; gap: 0.85rem; }
.property-filter.widget .input { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.property-filter.widget .input.hidden, .property-filter.widget input[type="hidden"] { display: none; }
.property-filter.widget label { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.property-filter.widget input[type="text"], .property-filter.widget input[type="number"], .property-filter.widget select {
    width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--color-text);
    padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.property-filter.widget input:focus, .property-filter.widget select:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); }
.property-filter.widget .range-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.property-filter.widget .range-wrapper .input { margin: 0; }
.property-filter.widget .range-wrapper label { display: none; }
.property-filter.widget .chosen-container, .property-filter.widget .select2-container { width: 100% !important; }
.property-filter.widget .form-actions { margin: 0.3rem 0 0; }
.property-filter.widget .btn, .property-filter.widget button[type="submit"], .property-filter.widget input[type="submit"] {
    width: 100%; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base); cursor: pointer;
    padding: 0.9rem 1.4rem; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-brand); color: var(--color-text-invert);
}
.property-filter.widget .btn:hover, .property-filter.widget button[type="submit"]:hover, .property-filter.widget input[type="submit"]:hover { background: var(--color-brand-dark); }

/* ==========================================================================
   Ползунок диапазона цены (jQuery UI .slider на .params-slider).
   jQuery UI подключён в Layouts/default.ctp (иначе site_filter.js падал). Базовую
   геометрию даёт jquery-ui.structure.min.css, здесь — фирменные цвета темы.
   ========================================================================== */
.params-slider.ui-slider, .filter .ui-slider, .property-filter .ui-slider {
    margin: 0.6rem 0 0.2rem; height: 6px; background: var(--color-border);
    border: 0; border-radius: var(--radius-pill); position: relative;
}
.ui-slider .ui-slider-range { background: var(--color-brand); border-radius: var(--radius-pill); }
.ui-slider .ui-slider-handle {
    width: 18px; height: 18px; top: 50%; margin-top: -9px; margin-left: -9px;
    background: #fff; border: 2px solid var(--color-brand); border-radius: 50%;
    box-shadow: var(--shadow-sm); cursor: grab;
}
.ui-slider .ui-slider-handle:focus { outline: none; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18); }