/* ============================================================================
   Site-specific overrides — layered on top of the 1:1 WP `main.css`.
   Keep this file small; it's for spacing/layout tweaks that the ported theme
   needs under the new Wagtail block structure (where sections are sibling
   StreamField blocks rather than WP's nested template includes).
   ============================================================================ */

/* Wagtail wraps every StreamField block in a `.block-{type}` div, so a section
   and the one after it are NOT adjacent siblings (e.g. `.header--service-page`
   and `.price` live in separate `.block-*` wrappers). Spacing therefore has to
   go on the wrappers, not on the inner elements. */

/* Equipment pages: separate the price cards from the dark hero banner above. */
.block-intro {
  margin-bottom: 100px;
}

.max-contact {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 1em;
  vertical-align: middle;
}
.max-contact img { transition: transform .2s ease; }
.max-contact:hover img { transform: scale(1.08); }
.max-contact-dialog { text-align: center; }
.max-contact-dialog h2 { margin: 20px 0; font-size: 26px; }
.max-contact-dialog .max-contact-number {
  margin: 20px 0;
  text-align: center;
  font-size: 21px;
  color: #252525;
  background: #fff;
}
.max-contact-copy-status { min-height: 24px; margin-top: 12px; }

/* Five section tiles, including apartment renovation. */
.menu-header__list { gap: 10px; }
.menu-header__item { min-width: 0; }
.item-menu__name { text-align: center; }
.item-menu:focus-within .submenu { display: grid; }

.renovation-breadcrumbs { padding-top: 20px; padding-bottom: 20px; font-size: 14px; }
.renovation-breadcrumbs span[aria-hidden] { margin: 0 6px; }
.renovation-page .header--service-page {
  overflow: hidden;
  background: linear-gradient(120deg, #263b4a, #16252f);
  padding-top: 90px;
  padding-bottom: 80px;
}
.renovation-page .header__offer-desc { max-width: 650px; }
.renovation-page .header__img .renovation-hero-icon {
  width: 280px;
  height: 280px;
  object-fit: contain;
  opacity: .6;
}
.renovation-page .block-intro { margin-bottom: 60px; }
.renovation-page .block-text_block { margin: 55px 0; }
.renovation-page .text-block__body { max-width: 900px; font-size: 18px; line-height: 1.65; }
.renovation-page .text-block__body ul,
.renovation-page .text-block__body ol { padding-left: 24px; }
.renovation-page .text-block__body ul { list-style: disc; }
.renovation-page .text-block__body ol { list-style: decimal; }
.renovation-page .text-block__body li { margin-bottom: 10px; }
.renovation-page .cta-band { padding: 45px 0; background: #eef3f7; }
.renovation-page .cta-band .btn { margin-top: 15px; }
.service-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-catalog__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-catalog__card { padding: 28px; color: #252525; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.service-catalog__card:hover { color: #252525; text-decoration: none; background: #f1f5f8; }
.service-catalog__card h3 { font-size: 23px; margin: 0; }
.service-catalog__card p { line-height: 1.5; margin: 0; }
.service-catalog__more { color: #557a95; margin-top: auto; font-weight: 600; }

@media (max-width: 991.98px) {
  .service-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .renovation-page .header__img { display: none; }
}
@media (max-width: 575.98px) {
  .service-catalog__grid { grid-template-columns: 1fr; }
  .renovation-page .header--service-page { padding-top: 45px; padding-bottom: 45px; }
  .renovation-page .block-intro { margin-bottom: 35px; }
  .renovation-page .block-text_block { margin: 35px 0; }
  .service-catalog__card { padding: 22px; }
}
@media (max-width: 767.98px) {
  .renovation-page .magnet__first-col1 { background: #557a95; padding-bottom: 25px; }
  .renovation-page .magnet__first-col1::before { display: none; }
  .renovation-page .magnet__subtitle { align-self: center; text-align: center; }
}

/* Mobile menu panel (`.navigation__bar`, opened by the burger). main.css lays it out as a
   centered column but leaves the search form at its intrinsic width, which overflows narrow
   phones; make it fill the panel and let the panel scroll on short screens. */
@media (max-width: 991.98px) {
  .navigation__bar {
    overflow-y: auto;
  }
  .navigation__bar .search-navigation {
    width: 100%;
    max-width: 420px;
    margin-bottom: 25px;
  }
  .navigation__bar .search-navigation__input {
    min-width: 0;
    font-size: 16px;
  }
}