/* Mobile and responsive styles (normalized breakpoints)
   Breakpoints: 1200, 992, 768, 576, 480 */

/* ===== Global container and overflow guards ===== */
html, body { max-width: 100%; overflow-x: hidden; }
.container { width: 100%; padding-left: 16px; padding-right: 16px; }

/* Desktop defaults: hide mobile UI */
.mobile-menu-toggle { display: none; }
.mobile-drawer { display: none; }
#mobile-filter-open,
#mobile-filter-close { display: none; }

/* ===== Header (main-header) ===== */
@media (max-width: 992px) {
  .main-header .container { gap: 16px; }
  .main-nav { gap: 16px; }
}
@media (max-width: 768px) {
  .main-header { padding: 8px 0; }
  /* Одна строка: бургер | логотип | контакты */
  .main-header .container { display:block; }
  .header-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .header-left { grid-column: 2; display:flex; align-items:center; gap:6px; align-self:center; }
  .logo { display:flex; align-items:center; transform:none; }
  .logo a { display:flex; flex-direction:column; justify-content:center; gap:0; }
  .logo-text { font-size: 18px; line-height:1; margin-top:0; }
  .logo-slogan { font-size: 10px; line-height:1; margin-top:0; }
  .mobile-menu-toggle { grid-column: 1; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; background:#f3f4f6; border-radius:8px; align-self:center; }
  .mobile-menu-toggle i { font-size:18px; color:#333; }
  .main-nav { display:none; }
  .nav-link, .dropdown-toggle { font-size: 14px; }
  .header-right { display:flex; justify-content:flex-end; align-self:center; }
  .contact-info { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:2px; line-height:1; }
  .phone-number { font-size: 14px; line-height:1; }
  .address { font-size: 11px; color:#999; line-height:1; }
  /* Enable drawer in mobile */
  .mobile-drawer { display:flex; }

  /* ===== Video detail explicit fixes ===== */
  .video-detail-layout { display:grid; grid-template-columns: 1fr; gap: 12px; }
  .video-main-content { display:block; overflow:visible; }
  .video-player-container { min-height: 220px; }
  .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: visible; }
  .video-embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; display:block; }
}

/* Очень узкие экраны: убираем слоган, чтобы всё поместилось в один ряд */
@media (max-width: 420px) {
  .logo-slogan { display: none; }
}

/* ===== Fix: Special offers card media on mobile ===== */
@media (max-width: 768px) {
  .offers-section .offer-card > a { grid-template-columns: 110px 1fr !important; gap: 8px !important; }
  .offers-section .offer-card { height: 150px; padding: 10px; overflow: hidden; }
  .offers-section .offer-media { aspect-ratio: 1/1; width: 100%; overflow: hidden; }
  .offers-section .offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .offers-section .offer-content { position: relative; z-index: 1; overflow: hidden; }
}
@media (max-width: 480px) {
  .offers-section .offer-card > a { grid-template-columns: 1fr !important; }
  .offers-section .offer-card { height: auto; }
  .offers-section .offer-media { aspect-ratio: 16/9; }
}
@media (max-width: 576px) {
  .dropdown-menu { left: 0; transform: none; right: 0; margin: 0 auto; }
}

/* Off-canvas drawer */
@media (max-width: 768px) {
  .mobile-drawer { position: fixed; top:0; bottom:0; left:0; width: 82%; max-width: 340px; background:#fff; box-shadow: 8px 0 24px rgba(0,0,0,.15); transform: translateX(-110%); transition: transform .3s ease; z-index: 2400; display:flex; flex-direction:column; }
  .mobile-drawer.open { transform: translateX(0); }
  .mobile-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid #eee; }
  .mobile-menu-close { border:none; background:#f3f4f6; width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
  .mobile-drawer-nav { padding:12px 8px; overflow-y:auto; }
  .drawer-link { display:block; padding:12px 16px; text-decoration:none; color:#222; font-weight:600; }
  .drawer-group { padding:8px 0 12px 0; }
  .drawer-title { padding:10px 16px; color:#666; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
  .drawer-sublink { display:block; padding:10px 24px; text-decoration:none; color:#333; }
  .drawer-sublink:hover, .drawer-link:hover { background:#faf7ee; }
  .mobile-drawer-footer { margin-top:auto; padding:12px 16px; border-top:1px solid #eee; }
  .drawer-phone { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#333; font-weight:700; }
}

/* ===== Offers carousel (homepage) ===== */
@media (max-width: 768px) {
    .offers-carousel{overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; gap:12px}
    .offers-carousel.no-snap{scroll-snap-type:none !important}
    .offers-carousel::-webkit-scrollbar{display:none}
    .offers-section .offer-slide{flex:0 0 50%;padding:0 6px}
    .offers-section .offer-slide{scroll-snap-align:center}
    .offers-section .offer-card{grid-template-columns:100px 1fr;gap:8px;height:160px;padding:8px}
    .offers-section .offer-media{aspect-ratio:3/2;min-height:60px}
    .offers-section .offer-content{min-height:60px}
    .offers-section .offer-title{font-size:13px}
}

@media (max-width: 480px) {
    .offers-section .offer-slide{flex:0 0 100%;padding:0 4px;scroll-snap-align:center}
    .offers-section .offer-card{grid-template-columns:1fr;height:auto;padding:8px}
    .offers-section .offer-media{aspect-ratio:16/9;min-height:120px}
    .offers-section .offer-content{min-height:auto}
    .offers-section .offer-title{font-size:14px}
}

/* Prevent horizontal scroll for grid cards on home/articles/offers */
@media (max-width: 768px) {
  .home-grid, .offers-grid, .articles-grid { grid-template-columns: 1fr !important; }
}

/* ===== Home grid (top 9 complexes) ===== */
@media (max-width: 992px){
    .home-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}
}
@media (max-width: 768px){
    .home-grid{grid-template-columns:1fr}
    .home-property-card{min-width:0}
}

/* ===== Company gallery slider (homepage about section) ===== */
@media (max-width: 768px) {
    .company-gallery-slider { height: 300px; border-radius: 16px; margin-left: 10px; }
    .slider-btn { width: 35px; height: 35px; }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    .slide-caption { padding: 15px; }
    .slide-caption h4 { font-size: 1rem; }
    .slide-caption p { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .company-gallery-slider { height: 250px; border-radius: 12px; margin-left: 0; }
    .slide img { border-radius: 12px; }
    .slider-btn { width: 30px; height: 30px; }
    .prev-btn { left: 8px; }
    .next-btn { right: 8px; }
    .slide-caption { padding: 12px; }
    .slide-caption h4 { font-size: 0.9rem; }
    .slide-caption p { font-size: 0.7rem; }
}

/* ===== Office map section (homepage) ===== */
@media (max-width: 768px) {
    .office-map-section .office-map-container { grid-template-columns: 1fr; gap: 24px; }
    .office-map-section .office-info-card { padding: 24px; order: 2; }
    .office-map-section .map-wrapper { order: 1; }
    #home-office-map { height: 300px !important; }
}

/* ===== Catalog page ===== */
@media (max-width: 1200px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 768px) {
    .catalog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .catalog-section ~ .feedback-wrapper { margin-top: 16px !important; padding: 32px 0 72px 0 !important; }
    .catalog-section ~ .footer-transition { padding-top: 56px !important; }
    .catalog-section ~ .footer-transition .deco-logo.on-dark { top: 12px !important; z-index: 200 !important; }
    .catalog-section ~ .footer .footer-content { margin-top: 100px !important; }

    /* Compact mobile filters */
    .mobile-filter-toggle{display:none;align-items:center;gap:8px;padding:10px 14px;border:1px solid #eee;border-radius:999px;background:#fff;font-weight:700; margin:8px 0 12px 0}
    .filters-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:5000}
    .filters-backdrop.open{opacity:1;pointer-events:auto}
    .filters-section { position: fixed; left:0; right:0; bottom:-110%; z-index:5001; background:#fff; border-radius:16px 16px 0 0; padding:12px; box-shadow:0 -8px 24px rgba(0,0,0,.15); margin-bottom:0; transition:bottom .28s ease; max-height:80vh; overflow-y:auto; }
    .filters-section.open{bottom:0}
    .filters-sheet-header{display:none;align-items:center;justify-content:space-between;padding:6px 6px 10px 6px;border-bottom:1px solid #eee;margin-bottom:10px}
    .sheet-close{border:none;background:#f3f4f6;border-radius:8px;width:36px;height:36px;font-size:22px;line-height:22px}
    .filters-form { display:block; }
    /* Перестраиваем сетку фильтров под мобильный UX */
    .filters-row-grid { display:flex; flex-wrap:wrap; gap:10px; }
    .filters-row-grid .filter-group { flex:1 1 calc(50% - 10px); }
    @media (max-width: 520px){ .filters-row-grid .filter-group{ flex-basis:100%; } }
    /* Порядок: Город/Район/Улица → Комнаты (полная ширина) → Площадь → Цена */
    .filters-row-grid .filter-group:nth-child(1){ order:1; }
    .filters-row-grid .filter-group:nth-child(2){ order:2; }
    .filters-row-grid .filter-group:nth-child(3){ order:3; }
    .filters-row-grid .filter-group:nth-child(6){ order:4; flex-basis:100%; }
    .filters-row-grid .filter-group:nth-child(4){ order:5; flex-basis:100%; }
    .filters-row-grid .filter-group:nth-child(5){ order:6; flex-basis:100%; }
    .filter-group { background:#fafafa; border:1px solid #eee; border-radius:10px; padding:10px; }
    .filter-group label { display:block; font-size:12px; color:#666; margin-bottom:6px; }
    .filter-select { width:100%; height:40px; padding:0 12px; border-radius:8px; border:1px solid #e2e2e2; background:#fff; color:#222; font-size:14px; appearance:none; -webkit-appearance:none; background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
    .range-container { background:#fff; border:1px solid #eee; border-radius:10px; padding:10px; }
    .range-display { display:flex; justify-content:center; gap:6px; font-size:12px; }
    .range-slider { position:relative; height:28px; }
    .range-slider-input { width:100%; -webkit-appearance:none; background:transparent; pointer-events:auto; height:28px; }
    .range-slider-input::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; background:#bcaf8a; border-radius:50%; border:none; box-shadow:0 2px 6px rgba(0,0,0,.2); }
    .range-track { position:absolute; left:8px; right:8px; top:50%; height:4px; background:#eee; border-radius:999px; transform:translateY(-50%); }
    .range-fill { height:100%; background:#bcaf8a; border-radius:999px; }
    .filters-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
    .filters-actions .btn { padding:10px 14px; font-size:14px; border-radius:10px; }
    .clear-filters { font-size:12px; color:#a77; display:inline-flex; align-items:center; gap:6px; }
    .results-count { font-size:12px; color:#666; }

    /* Show mobile-only controls only on small screens */
    @media (max-width: 1024px){
        .mobile-filter-toggle{ display:inline-flex; }
        .filters-sheet-header{ display:flex; }
        #mobile-filter-open,
        #mobile-filter-close { display:inline-flex; }
    }

    /* Горизонтальная лента кнопок комнат */
    .button-filter { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
    .button-filter::-webkit-scrollbar{display:none}
    .filter-btn { padding:8px 12px; border:1px solid #e5e5e5; border-radius:999px; background:#fff; font-size:13px; white-space:nowrap; }
    .filter-btn.active,[data-active="true"]{ background:#1f2937; color:#bcaf8a; border-color:#1f2937; }

    /* Карточки результатов — мобильная компактная карточка */
    .catalog-grid { gap:12px !important; grid-template-columns: 1fr !important; }
    .property-card-compact{ width:100% !important; margin:0 !important; display:grid; grid-template-columns:110px 1fr; gap:10px; padding:10px; border-radius:12px; }
    .compact-card-image{ aspect-ratio: 3/2; border-radius:10px; overflow:hidden }
    .compact-card-image img{ width:100%; height:100%; object-fit:cover; display:block }
    .compact-card-title{ font-size:16px; margin:0 0 4px 0 }
    .compact-card-location{ font-size:12px }
    .compact-detail-item{ font-size:12px }
    .compact-price-text{ font-size:14px }
    @media (max-width: 480px){
      .property-card-compact{ grid-template-columns: 1fr; }
      .compact-card-image{ aspect-ratio: 16/9; }
    }

    /* Компактные табы Новостройки/Вторичная */
    .catalog-tabs { gap:10px; }
    .catalog-tab { padding:6px 12px; font-size:14px; border-radius:999px; }
    @media (max-width: 420px){ .catalog-tab{ padding:5px 10px; font-size:13px; } }
}
@media (max-width: 576px) {
    .catalog-section ~ .feedback-wrapper { margin-top: 12px !important; padding: 24px 0 56px 0 !important; }
    .catalog-section ~ .footer-transition { padding-top: 48px !important; }
    .catalog-section ~ .footer-transition .deco-logo.on-dark { top: 10px !important; z-index: 200 !important; }
    .catalog-section ~ .footer .footer-content { margin-top: 80px !important; }
}

/* ===== Detail page: agent properties section ===== */
@media (max-width: 768px) {
    .agent-properties-section { padding: 24px 16px; }
}

/* Detail page: complex offers grid (inside detail template) */
@media (max-width: 768px){
    .offers-grid{grid-template-columns:1fr;gap:16px}
    .offer-card{grid-template-columns:1fr;max-width:100%}
    .offer-media{aspect-ratio:16/9}
    .offer-content{min-height:auto}
    .offer-title{font-size:18px}
}
@media (max-width: 480px){
    .offer-card{padding:12px;gap:12px}
    .offer-title{font-size:16px}
}

/* ===== Video detail page ===== */
@media (max-width: 992px) {
    .video-detail-layout { grid-template-columns: 1fr; gap: 1rem; }
    .video-main-content { order: 1; }
    .video-sidebar { position: static; order: 2; }
    .sidebar-videos { max-height: none; }
}
@media (max-width: 768px) {
    .video-title { font-size: 1.5rem; }
    .video-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .complex-link-btn { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
    .similar-videos-full-section { padding: 2rem 0; }
    .similar-videos-full-section .section-title { font-size: 1.5rem; }
    .similar-videos-full-grid { grid-template-columns: 1fr; gap: 1rem; }
    .sidebar-video-card { padding: 0.5rem; }
    .sidebar-video-image { width: 60px; height: 45px; }
    .sidebar-video-title { font-size: 0.8rem; }
}
@media (max-width: 480px) {
    .video-header { padding: 1rem; }
    .video-title { font-size: 1.3rem; }
    .video-description, .complex-link-section { padding: 1rem; }
    .complex-link-btn { padding: 0.75rem 1rem; font-size: 0.85rem; gap: 0.5rem; }
    .similar-videos-full-section { padding: 1.5rem 0; }
    .similar-videos-full-section .section-title { font-size: 1.3rem; }
    .similar-videos-full-section .section-subtitle { font-size: 1rem; }
}

/* ===== Tag detail page ===== */
@media (max-width: 768px) {
    .tag-header { margin: 20px 0; padding: 30px 20px; }
    .tag-title { font-size: 28px; }
    .tag-description { font-size: 16px; }
    .articles-grid { grid-template-columns: 1fr; gap: 20px; margin: 20px 0; }
    .article-content { padding: 20px; }
    .article-title { font-size: 18px; }
    .popular-tags { margin: 40px 0; padding: 30px 20px; }
    .tags-cloud { gap: 8px; }
    .tags-cloud .tag-link { padding: 8px 16px; font-size: 14px; }
}
@media (max-width: 480px) {
    .tag-title { font-size: 24px; }
    .tag-description { font-size: 14px; }
    .article-image { height: 180px; }
    .article-content { padding: 16px; }
    .article-title { font-size: 16px; }
    .article-footer { flex-direction: column; align-items: flex-start; }
}

/* ===== Privacy page ===== */
@media (max-width: 768px) {
  .privacy-title { font-size: 28px; }
  .privacy-content { padding: 20px; }
}

@media (max-width: 480px) {
    .office-map-section .office-info-card { padding: 20px; }
    .office-map-section .office-info-card h3 { font-size: 20px; }
    .office-map-section .contact-item { font-size: 14px; }
}