/* Стыковка макета с темой finist-industrial (Tailwind 4). Всё — только внутри .fbar. */

/* раздел стоит прямо в #content темы, на всю его ширину */
.fbar{width:auto;max-width:none;margin:0;padding-bottom:88px}
@media (max-width:640px){.fbar{padding-bottom:56px}}

/* тема красит заголовки в чёрный и даёт им свои отступы и межстрочный — в макете они наследуют от блока */
.fbar :is(h1,h2,h3,h4,h5,h6){color:inherit;line-height:inherit;margin:0}
/* тема делает b/strong/dt полужирными (600), в макете — обычный жирный */
.fbar :where(b,strong){font-weight:700}
.fbar :where(dt){font-weight:inherit}
/* у кнопок тема задаёт свой межстрочный */
.fbar :where(button){line-height:inherit}

/* лента рендеров на всю ширину окна */
.fbar .fbar-renders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:88px 6px 0}
.fbar .fbar-renders figure{margin:0;border-radius:12px;overflow:hidden;background:var(--steel)}
.fbar .fbar-renders img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
@media (max-width:900px){.fbar .fbar-renders{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:56px}}
/* на телефоне — лента с прокруткой пальцем */
@media (max-width:640px){
  .fbar .fbar-renders{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding:0 6px;scrollbar-width:none}
  .fbar .fbar-renders::-webkit-scrollbar{display:none}
  .fbar .fbar-renders figure{scroll-snap-align:start}
}

/* плавная прокрутка к «Устройство станции» только на этой странице */
html:has(.fbar){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(.fbar){scroll-behavior:auto}}