/* ===== R5-02. Hero главной: мозаика из трёх услуг (резка, бурение, демонтаж). Подписи - компактные чипы; ссылка - вся плитка. Подключить после components.css / fix-r4.css ===== */

/* H1 главной: ровный перенос «Алмазная резка, / бурение, демонтаж» (Baseline 2024, без поддержки - обычный перенос) */
.hero h1.display{text-wrap:balance}

/* --- Мозаика (решение заказчика 11.10.2026), все три услуги видны сразу. Габарит = прежний .hero-media (4:3) --- */
.hero-svc{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;gap:var(--s-2);aspect-ratio:4/3;margin:0;padding:0;list-style:none}
.hero-svc > li{min-width:0;min-height:0}
.hero-svc > li:first-child{grid-row:1 / span 2}
.hero-svc a{position:relative;display:block;height:100%;overflow:hidden;border-radius:var(--r-lg);background:var(--c-dark-2);box-shadow:var(--sh-lg);color:#fff;text-decoration:none}
.hero-svc picture,.hero-svc img{display:block;width:100%;height:100%}
.hero-svc img{object-fit:cover;transition:transform .4s ease}
.hero-svc__label{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:var(--r-sm);background:rgba(0,0,0,.78);font-size:13px;font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:.005em;pointer-events:none;transition:background-color var(--t-fast)}
.hero-svc__label .ico{flex:none;width:14px;height:14px}
.hero-svc a:hover img{transform:scale(1.04)}
.hero-svc a:hover .hero-svc__label{background:var(--c-brand)}
.hero-svc a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (max-width:991px){
  .hero-svc{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .hero-svc > li:first-child{grid-column:1 / -1;grid-row:auto}
  .hero-svc > li:first-child a{aspect-ratio:16/9}
  .hero-svc > li:not(:first-child) a{aspect-ratio:4/3}
}
@media (max-width:479px){
  .hero-svc__label{left:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 7px;font-size:12px;gap:3px}
  .hero-svc__label .ico{width:12px;height:12px}
}

@media (prefers-reduced-motion:reduce){
  .hero-svc img{transition:none}
  .hero-svc a:hover img{transform:none}
}

/* U04. 992–1199 px: кнопки hero не переносятся после подгрузки Inter (CLS).
   На 992–1019 px сразу столбец - перенос не зависит от шрифта. */
@media (min-width:992px) and (max-width:1199px){
  .hero-ctas .btn{padding-left:16px;padding-right:16px}
}
@media (min-width:992px) and (max-width:1019px){
  .hero-ctas .btn{flex:1 1 100%}
}