/* ==========================================================================
   v3 responsive — mobile-first base in component files. BP: 600 / 900 / 1100
   ========================================================================== */

@media (min-width: 600px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .seo-cols { grid-template-columns: repeat(2, 1fr); gap: 32px 44px; }
  .city-modal-list { grid-template-columns: repeat(2, 1fr); gap: 2px 18px; }
}

@media (min-width: 900px) {
  .burger { display: none; }
  .main-nav { display: block; }
  .header-phone { display: flex; }
  .mobile-menu { display: none !important; }

  /* HERO split */
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1.04fr;
    grid-template-areas:
      "content media"
      "trust   trust";
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: clamp(44px, 6vw, 68px);
    align-items: center;
  }
  .hero-content { grid-area: content; }
  .hero-media { grid-area: media; }
  .hero-trust { grid-area: trust; margin-top: 0; }

  /* banner takes the right half, feathered on left + top + bottom */
  .hero-banner {
    inset: 0 0 0 auto;
    width: 58%;
    opacity: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%),
                        linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 34%),
                        linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%;
  }

  /* FEATURES 4-up */
  .features-grid { grid-template-columns: repeat(4, 1fr); gap: 48px 32px; }

  /* CATALOG — image left, text right */
  .catalog-inner {
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    grid-template-areas: "media content";
    column-gap: clamp(44px, 5vw, 84px);
    align-items: center;
  }
  .catalog-media { grid-area: media; }
  .catalog-content { grid-area: content; }

  /* PARTNERS */
  .partners-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(48px, 6vw, 100px);
    align-items: center;
  }

  /* SEO */
  .seo-cols { grid-template-columns: repeat(3, 1fr); gap: 34px; }

  /* FOOTER */
  .site-footer-top { flex-direction: row; justify-content: space-between; gap: 48px; }
  .site-footer-brand { flex: 1.5; }
  .site-footer-contacts { align-items: flex-end; text-align: right; }
  .site-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }

  /* MODAL centered */
  .city-modal-overlay { align-items: center; padding: 28px; }
  .city-modal {
    max-width: 720px;
    height: auto;            /* desktop modal sizes to content, centred */
    max-height: 88vh;
    border-radius: var(--r-card);
    padding: 38px 40px 44px;
  }
  .city-modal-list { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .hero-content { max-width: 600px; }
}