/* Хаб «Кровельные работы» (/uslugi/krovelnye_raboty/). Подключается только на этой странице. */

/* «Ремонт или замена»: в ячейках фразы, а не цены — переносим строки вместо горизонтальной прокрутки. */
.krovlya-choose__intro { margin: .75rem 0 0; color: var(--foundation-muted); font-family: Onest, Arial, sans-serif; font-size: 1rem; line-height: 1.5; }
.krovlya-choose .service-price-phase1__table { min-width: 0; table-layout: fixed; }
.krovlya-choose .service-price-phase1__table th,
.krovlya-choose .service-price-phase1__table td { white-space: normal; vertical-align: top; }
.krovlya-choose .service-price-phase1__table thead th,
.krovlya-choose .service-price-phase1__table td { text-align: left; font-variant-numeric: normal; }
@media (max-width: 575.98px) {
    .krovlya-choose .service-price-phase1__table th,
    .krovlya-choose .service-price-phase1__table td { padding: .625rem .5rem; overflow-wrap: anywhere; hyphens: auto; }
    .krovlya-choose .service-price-phase1__table th:first-child,
    .krovlya-choose .service-price-phase1__table td:first-child { padding-left: .75rem; }
}

/* Прайс: длинные названия работ переносим на узком экране, цены — в одну строку. */
@media (max-width: 575.98px) {
    .krovlya-page .service-price-phase1:not(.krovlya-choose) .service-price-phase1__table { min-width: 0; }
    .krovlya-page .service-price-phase1:not(.krovlya-choose) .service-price-phase1__table tbody th { white-space: normal; }
}

/* Этапы работы на хабе: карточки с картинкой. */
.krovlya-steps { width: auto; margin-inline: calc(50% - 50vw); padding: 3.5rem 0; background: var(--foundation-section-background, #fff); }
.krovlya-steps__inner { width: min(100% - 2rem, 77.5rem); margin: 0 auto; }
.krovlya-steps h2 { margin: 0; color: var(--foundation-ink); font-family: Geologica, Onest, sans-serif; font-size: 1.875rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.krovlya-steps__list { display: grid; gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.krovlya-steps__item { overflow: hidden; border: 1px solid var(--foundation-line); border-radius: .75rem; background: #fff; }
.krovlya-steps__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.krovlya-steps__body { position: relative; padding: 1.25rem 1.25rem 1.5rem; }
.krovlya-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: .75rem; border-radius: 50%; background: var(--foundation-brand); color: var(--foundation-ink); font-family: Geologica, Onest, sans-serif; font-weight: 700; }
.krovlya-steps h3 { margin: 0 0 .5rem; color: var(--foundation-ink); font-family: Geologica, Onest, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.krovlya-steps p { margin: 0; color: #4a4b51; font-family: Onest, Arial, sans-serif; font-size: .9375rem; line-height: 1.55; }
@media (min-width: 576px) { .krovlya-steps__inner { width: min(100% - 3rem, 77.5rem); } .krovlya-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .krovlya-steps { padding-block: 5rem; } .krovlya-steps__inner { width: min(100% - 4rem, 77.5rem); } .krovlya-steps h2 { font-size: 2.25rem; } .krovlya-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Ссылки раздела карточками с картинкой: 1 → 2 → 4 в ряд. */
.krovlya-links { width: auto; margin-inline: calc(50% - 50vw); padding: 3.5rem 0; background: var(--foundation-section-background, #f4f4f4); }
.krovlya-links__inner { width: min(100% - 2rem, 77.5rem); margin: 0 auto; }
.krovlya-links h2 { margin: 0; color: var(--foundation-ink); font-family: Geologica, Onest, sans-serif; font-size: 1.875rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.krovlya-links__grid { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.krovlya-links__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--foundation-line); border-radius: .75rem; background: #fff; color: var(--foundation-ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.krovlya-links__card:hover, .krovlya-links__card:focus-visible { border-color: var(--foundation-brand); box-shadow: 0 .5rem 1.5rem rgba(39, 40, 46, .08); color: var(--foundation-ink); }
.krovlya-links__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.krovlya-links__title { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; font-family: Onest, Arial, sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.krovlya-links__title svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--foundation-muted); transition: transform .2s, color .2s; }
.krovlya-links__card:hover .krovlya-links__title svg { color: var(--foundation-brand); transform: translateX(.2rem); }
@media (min-width: 576px) { .krovlya-links__inner { width: min(100% - 3rem, 77.5rem); } .krovlya-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .krovlya-links { padding-block: 5rem; } .krovlya-links__inner { width: min(100% - 4rem, 77.5rem); } .krovlya-links h2 { font-size: 2.25rem; } .krovlya-links__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }