/* ══ Category.css — Сторінка напрямку /<category> і напрямок у місті.
   Правити тут; сторінка підключає чанк через site_css() у шаблоні. ══ */

.cat-page { padding:45px 0 0; }
.cat-back { margin-bottom:20px; }
.cat-back a { display:inline-flex; align-items:center; gap:9px;
              color:var(--link); font-size:14px; text-decoration:none; }
.cat-back a:hover { text-decoration:underline; }
.cat-back svg { width:17px; height:17px; flex:0 0 17px; }
.cat-head { display:flex; align-items:center; gap:18px; margin-bottom:32px;
            position:relative; }
.cat-nav { margin-left:auto; display:none; }
.cat-nav-b { display:inline-flex; align-items:center; gap:7px; cursor:pointer;
             border:0; background:none; font-family:inherit;
             color:var(--link); font-size:14px; }
.cat-nav-b svg { width:13px; height:13px; transition:transform .18s; }
.cat-nav.open .cat-nav-b svg { transform:rotate(180deg); }
.cat-nav-d { display:none; position:absolute; left:0; right:0;
             top:calc(100% + 18px); z-index:50;
             background:var(--card); border-top:1px solid var(--line-2);
             border-bottom:1px solid var(--line-2); padding:34px 0 26px; }
.cat-nav.open .cat-nav-d { display:block; }
.cat-nav-in { max-width:980px; margin:0 auto; padding:0 20px;
              display:grid; grid-template-columns:repeat(3,1fr); gap:2px 40px; }
.cat-nav-d a { display:flex; align-items:center; gap:16px;
               padding:13px 0; color:var(--link);
               font-size:16px; text-decoration:none; }
.cat-nav-d a:hover { color:var(--green); }
.cat-nav-d a.on span:last-child { border-bottom:2px solid var(--star);
                                  padding-bottom:2px; }
.cat-nav-d .ic { flex:0 0 30px; width:30px; height:30px; color:var(--link); }
.cat-nav-d .ic svg { width:100%; height:100%; }
.cat-nav-d .arw { display:none; }
.cat-nav-all { display:block; max-width:980px; margin:18px auto 0;
               padding:0 20px; color:var(--link); font-size:16px;
               text-decoration:none; }
.cat-nav-all:hover { text-decoration:underline; }
.cat-ic { flex:0 0 50px; width:50px; height:50px; color:#414141; }
.cat-ic svg { width:100%; height:100%; display:block; }
.cat-head h1 { font-family:'Poppins',sans-serif; font-size:25px; font-weight:700;
               color:#414141; line-height:50px; margin:0; }
.cat-top { display:grid; grid-template-columns:710px 1fr; gap:0;
           align-items:start; margin-bottom:22px; }
.cat-feat { display:grid; grid-template-columns:repeat(2,345px);
            justify-content:space-between; gap:20px; }
.cat-feat-c { position:relative; width:345px; height:150px;
              display:flex; align-items:center; justify-content:center;
              overflow:hidden; text-decoration:none; background:#676767; }
.cat-feat-c img { position:absolute; inset:0; width:100%; height:100%;
                  object-fit:cover; }
.cat-feat-c::after { content:''; position:absolute; inset:0;
                     background:rgba(0,0,0,.34); transition:background .15s; }
.cat-feat-c:hover::after { background:rgba(0,0,0,.46); }
.cat-feat-c1 { background:#2F6E4E; }
.cat-feat-c2 { background:#3C6183; }
.cat-feat-c3 { background:#6B5B7B; }
.cat-feat-c4 { background:#7A6250; }
.cat-feat-c1::after, .cat-feat-c2::after,
.cat-feat-c3::after, .cat-feat-c4::after { background:rgba(0,0,0,.12); }
.cat-feat-c1:hover::after, .cat-feat-c2:hover::after,
.cat-feat-c3:hover::after, .cat-feat-c4:hover::after { background:rgba(0,0,0,.24); }
.cat-feat-c span { position:relative; z-index:2; padding:0 16px;
                   color:#fff; font-size:15px; font-weight:700;
                   text-align:center; line-height:1.3; }
.cat-feed { width:250px; }
.cat-feed .feed-tx { font-size:12px; line-height:1.45; }
.cat-feed .feed-meta { font-size:12px; }
.cat-feed .feed-win { height:232px; }
.cat-list { display:grid; grid-template-columns:repeat(3,1fr);
            gap:0 25px; margin:6px 0 45px; }
.cat-list ul { list-style:none; }
.cat-list li { line-height:33px; }
.cat-list a { color:var(--link); font-size:16px; text-decoration:none; }
.cat-list a:hover { text-decoration:underline; }
.cat-trust { margin-bottom:45px; }
.cat-trust h2 { font-family:'Poppins',sans-serif; font-size:24px; line-height:36px; font-weight:500;
                color:#414141; margin-bottom:7px; }
.cat-trust p { font-size:16px; line-height:27px; color:#414141; }
.cat-trust .star { color:var(--star); }
.cat-trust .nb { white-space:nowrap; }
.cat-cta { display:flex; align-items:center; justify-content:space-between;
           gap:24px; background:var(--green-l); border-radius:8px;
           padding:28px 32px; margin-bottom:60px; }
.cat-cta-tx h3 { font-family:'Poppins',sans-serif; font-size:22px; line-height:1.4; font-weight:700;
                 color:#414141; margin-bottom:6px; }
.cat-cta-tx p { font-size:15px; line-height:23px; color:#5C6169; }
.cat-cta-b { flex:0 0 auto; background:var(--green); color:#fff;
             text-decoration:none; font-size:15px; font-weight:700;
             padding:14px 26px; border-radius:6px; }
.cat-cta-b:hover { background:var(--green-d); }
@media (max-width:900px) {
  .cat-page { padding:0; }
  .cat-back { display:none; }
  .cat-head { gap:13px; margin:0 0 10px; padding:6px 0; position:relative; }
  .cat-nav-d { top:calc(100% + 14px); padding:8px 0 14px;
                 background:#fff; }
  .cat-nav-in { grid-template-columns:1fr; gap:0; padding:0 15px; }
  .cat-nav-d a { padding:15px 0; font-size:16px;
                   border-bottom:1px solid var(--line-2); }
  .cat-nav-d .arw { display:block; margin-left:auto;
                      width:20px; height:20px; flex:0 0 20px; }
  .cat-nav-d a:last-child { border-bottom:0; }
  .cat-nav-all { padding:0 15px; margin-top:12px; }
  .cat-ic { flex:0 0 40px; width:40px; height:40px; }
  .cat-head h1 { font-size:14px; line-height:40px; margin:0; }
  .cat-nav { display:block; }
  .cat-nav-b { font-size:14px; }
  .cat-nav-b svg { width:16px; height:16px; }
  .cat-top { grid-template-columns:1fr; gap:28px; margin-bottom:30px; }
  .cat-feat { grid-template-columns:1fr; gap:15px; }
  .cat-feat-c { width:100%; height:150px; }
  .cat-feat-c span { font-size:15px; padding:0 10px; }
  .cat-feed { width:auto; }
  .cat-list { grid-template-columns:1fr; gap:0; margin-top:6px; }
  .cat-trust { margin-bottom:32px; }
  .cat-trust h2 { font-size:21px; line-height:28px; }
  .cat-trust p { font-size:15px; line-height:25px; }
  .cat-cta { flex-direction:column; align-items:stretch; text-align:center;
               padding:24px 20px; margin-bottom:40px; }
  .cat-cta-b { text-align:center; padding:13px 20px; }
}