/* «Для тех, кто работает на себя» (was «Для мастеров») v22 (the owner, 30.10.2026, after the trades block of TradePA: «сгруппируем», «сейчас не очень видно»,
   «нужно поменять цвет»). A dark block with the glow of the other dark blocks: after the light «Деньги» it stands apart,
   and the photos are brighter on the dark. Four photo cards, the group's name on the photo, every trade of the group
   under it, open, as small plates (before, they hid behind «9 профессий +»). On a phone the cards go sideways under the
   finger, the next one peeks in. The old cards (.audience-card, .trade-details, the lines under them) are gone from the
   page; their rules in styles.css and type-v15.css no longer match anything.
   Five cards since 01.11.2026 (the owner: «Мастера по инженерным системам» instead of «Электрики и сантехники», «электрики
   могут обидеться»; «Грузчики» on their own, «одна большая каста»): five in a row where they fit, the rail as before */
#audience{background:radial-gradient(ellipse at 18% 22%,#29483D 0%,#12302B 24%,var(--green) 61%);color:var(--white)}
#audience h2{margin:0;color:var(--white)}
#audience h2 span{color:var(--yellow)}
.trades-lead{margin:var(--head-gap) 0 0;max-width:620px;font-size:var(--lead);line-height:1.6;color:var(--ink-on-dark,#D3E0DA)}
.trades-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:var(--body-gap)}
.trade-card{min-width:0}
.trade-photo{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#12302B;container-type:inline-size}
.trade-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* the name lies on the photo: the bottom of the photo darkens to the block's green under it */
.trade-photo::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#001718E6)}
/* type-v15 sizes #audience h3 with !important and lets it hyphenate; on the photo the name keeps whole words. The
   longest line, «Отделочники» (until 01.11.2026 «и сантехники»), needs about 6.4 px of width per px of type: the size follows
   the card (7 keeps a margin) */
#audience .trade-photo h3{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;margin:0;color:var(--white);font-size:24px!important;line-height:1.05!important;hyphens:manual;overflow-wrap:normal}
@supports(width:1cqi){#audience .trade-photo h3{font-size:min(34px,(100cqi - 40px) / 7)!important}}
.trade-photo-engineering img{object-position:30% center}
.trade-photo-construction img{object-position:45% center}
.trade-photo-handyman img{object-position:38% center}
.trade-photo-finishing img{object-position:78% 40%}
.trade-photo-loaders img{object-position:50% 45%}
.trade-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0}
.trade-list li{padding:6px 10px;border:1px solid #FFFFFF26;border-radius:10px;background:#FFFFFF0D;color:var(--ink-on-dark,#D3E0DA);font-size:14px;line-height:1.3}

/* up to 1100 px the cards go sideways under the finger (wider, all five stand in a row). The rail reaches the
   screen's edges, the first card starts at the text's edge (--g, the page's side margin at that width: 32, 20, 16 px),
   the next one peeks in from the right */
@media(max-width:1100px){
 .trades-rail{--g:32px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84vw,340px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--g));padding-inline:var(--g);scroll-padding-inline:var(--g);scrollbar-width:none}
 .trades-rail::-webkit-scrollbar{display:none}
 .trade-card{scroll-snap-align:start}
 .trade-photo{aspect-ratio:5/4;border-radius:16px}
 /* a three-line name («Мастера по инженерным системам») starts higher on the lower card: the dark starts higher too */
 .trade-photo::after{inset:35% 0 0}
 .trade-list li{padding:5px 9px;font-size:13px}
}
@media(max-width:820px){.trades-rail{--g:20px}}
@media(max-width:360px){.trades-rail{--g:16px}}
/* with a mouse a sideways rail is hard to reach (no swipe, the wheel scrolls down): three in a row instead (3 + 2), two on
   a tablet's width, one column in a narrow window */
@media(max-width:1100px) and (hover:hover) and (pointer:fine){
 .trades-rail{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:32px 20px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:0}
}
@media(max-width:820px) and (hover:hover) and (pointer:fine){.trades-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) and (hover:hover) and (pointer:fine){.trades-rail{grid-template-columns:minmax(0,1fr)}}