/* ==========================================================================
   tpl_mr2026_base — full template.css
   Base + visual layer aligned to the 2026 draft, without breaking article logic
   ========================================================================== */

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body,h1,h2,h3,h4,p,ul,ol,dl{margin:0}
img{max-width:100%;display:block;height:auto}
button,input,select,textarea{font:inherit}
a{color:inherit}

:root{
  --bg:#f4f6fa;
  --card:#ffffff;
  --text:#233447;
  --muted:#5f7082;
  --line:#dfe6f0;
  --line-2:#cfd9e6;
  --brand:#1d8fe3;
  --brand-2:#f03b3b;
  --brand-3:#0f6fc7;
  --shadow:0 14px 34px rgba(35,52,71,.08);
  --shadow-soft:0 8px 24px rgba(35,52,71,.05);
  --r-xl:24px;
  --r-lg:18px;
  --r-md:14px;
  --max:1240px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-right:env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
}

body{
  min-width:320px;
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(29,143,227,.07), rgba(29,143,227,0) 150px),
    linear-gradient(180deg, rgba(240,59,59,.05), rgba(240,59,59,0) 300px),
    var(--bg);
}

.container{
  width:min(var(--max), calc(100% - 32px));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  padding:10px 14px;
  border-radius:12px;
  background:#111;
  color:#fff;
  text-decoration:none;
}
.skip-link:focus{
  left:12px;
  top:12px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  padding-top:var(--safe-top);
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(207,217,230,.92);
  box-shadow:0 8px 18px rgba(35,52,71,.04);
}
.site-header::after{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg, var(--brand-2), #ff7a32 24%, #f1c40f 48%, #2ecc71 72%, var(--brand));
}
.site-header__inner{
  min-height:92px;
  display:grid;
  grid-template-columns:auto minmax(220px, 1fr);
  gap:18px;
  align-items:center;
  padding:14px 0;
}

.site-logo{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  min-width:0;
}
.site-logo__mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(180deg, #259cf3, var(--brand-3));
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 12px 24px rgba(29,143,227,.26);
  flex:0 0 auto;
}
.site-logo__text{
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.02em;
  color:#1b2d42;
}

.site-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  min-width:0;
}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid #c7d7ea;
  background:linear-gradient(180deg,#ffffff,#f2f7fd);
  color:var(--text);
  box-shadow:var(--shadow-soft);
  cursor:pointer;
  font-weight:700;
}

.site-search{
  width:min(100%, 430px);
}
.site-search .search{
  width:100%;
}
.site-search form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 118px;
  gap:10px;
}
.site-search label{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.site-search input[type="search"],
.site-search input[type="text"],
.site-search .inputbox{
  width:100%;
  height:40px;
  min-width:0;
  border:1px solid #c8d8ea;
  border-radius:15px;
  padding:0 16px;
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow-soft);
  outline:none;
  appearance:none;
}
.site-search input::placeholder{color:#7e8ea1}
.site-search input:focus{
  border-color:rgba(29,143,227,.55);
  box-shadow:0 0 0 4px rgba(29,143,227,.10);
}
.site-search button,
.site-search .button,
.site-search .btn{
  height:40px;
  min-width:0;
  border:none;
  border-radius:15px;
  background:linear-gradient(180deg, #259cf3, var(--brand-3));
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(29,143,227,.26);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs-bar{
  padding:20px 0 12px;
}
.breadcrumbs-bar [role="navigation"]{
  min-width:0;
}
.breadcrumbs-bar .breadcrumb,
.breadcrumbs-bar ul,
.breadcrumbs-bar ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
  font-size:14px;
  color:var(--muted);
}
.breadcrumbs-bar li{
  margin:0;
}
.breadcrumbs-bar a{
  text-decoration:none;
}
.breadcrumbs-bar a:hover{
  color:var(--brand-3);
}
.breadcrumbs-bar .divider{
  display:inline-flex;
  align-items:center;
  color:#97a7ba;
}
.breadcrumbs-bar .divider img{
  width:10px;
  height:10px;
  opacity:.7;
}
.breadcrumbs-bar .icon-location,
.breadcrumbs-bar .active:first-child{
  display:none;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.page-layout{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:24px;
  padding:20px 0 42px;
  align-items:start;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar{
  display:grid;
  gap:16px;
  align-self:start;
  height:max-content;
  position:relative;
}

.sidebar__inner{
  display:grid;
  gap:16px;
}

/* treat raw menu output as a card */
.sidebar > .sidebar__inner > ul.menu,
.sidebar > .sidebar__inner > ul.mod-list,
.sidebar > .sidebar__inner > ul.nav.menu,
.sidebar__inner > ul.menu,
.sidebar__inner > ul.mod-list,
.sidebar__inner > ul.nav.menu{
  list-style:none;
  margin:0;
  padding:14px;
  display:grid;
  gap:8px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
}
.sidebar__inner > ul.menu::before,
.sidebar__inner > ul.mod-list::before,
.sidebar__inner > ul.nav.menu::before{
  content:"Разделы раскрасок";
  display:block;
  margin:-14px -14px 8px;
  padding:15px 18px;
  font-size:17px;
  font-weight:800;
  color:#145d92;
  background:linear-gradient(180deg, rgba(29,143,227,.08), rgba(29,143,227,.03));
  border-bottom:1px solid #e5edf5;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}

.sidebar__inner > ul.menu li,
.sidebar__inner > ul.mod-list li,
.sidebar__inner > ul.nav.menu li{
  margin:0;
}
.sidebar__inner > ul.menu a,
.sidebar__inner > ul.mod-list a,
.sidebar__inner > ul.nav.menu a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid #e0e8f2;
  text-decoration:none;
  transition:.18s ease;
  font-weight:700;
  color:#1f3952;
}
.sidebar__inner > ul.menu a:hover,
.sidebar__inner > ul.mod-list a:hover,
.sidebar__inner > ul.nav.menu a:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(35,52,71,.05);
  border-color:#cfe0ef;
}
.sidebar__inner > ul.menu li.active > a,
.sidebar__inner > ul.mod-list li.active > a,
.sidebar__inner > ul.nav.menu li.active > a{
  background:linear-gradient(180deg,#eef7ff,#f8fbff);
  border-color:#bfd7eb;
  color:#145d92;
}

/* other raw sidebar blocks like ads/custom html */
.sidebar__inner > div,
.sidebar__inner > .customart-vmenu,
.sidebar__inner > .custom,
.sidebar__inner > .module,
.sidebar__inner > .moduletable{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  padding:14px;
}

.sidebar__close{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:46px;
  width:100%;
  border:1px solid #cfdae7;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  margin-bottom:0;
}

@media (min-width:1081px){
  .sidebar{
    position:relative;
    align-self:start;
  }

  .sidebar__inner{
    position:absolute;
    top:0;
    left:0;
    right:0;
  }

  .sidebar.is-short .sidebar__inner{
    position:sticky;
    top:112px;
  }

  .sidebar.is-fixed-top .sidebar__inner{
    position:fixed;
    top:112px;
    left:auto;
    right:auto;
    width:var(--sb-width);
  }

  .sidebar.is-fixed-bottom .sidebar__inner{
    position:fixed;
    top:auto;
    bottom:16px;
    left:auto;
    right:auto;
    width:var(--sb-width);
  }

  .sidebar.is-absolute .sidebar__inner{
    position:absolute;
    top:var(--sb-top, 0px);
    left:0;
    right:0;
    width:auto;
  }
}
/* ==========================================================================
   Content shell
   ========================================================================== */

.content{
  display:grid;
  gap:20px;
  min-width:0;
}

.item-page,
.hub-page,
.blog,
.search-results,
.finder{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:24px;
}

.page-header,
.hub-header{
  margin:0 0 18px;
}
.page-header h1,
.page-header h2,
.hub-header h1,
.hub-header h2,
.hub-title,
.item-page > h1:first-child,
.item-page > h2:first-child{
  font-size:clamp(30px, 3vw, 44px);
  line-height:1.1;
  letter-spacing:-.02em;
  color:#111;
  margin:0;
  font-weight:900;
}

.item-page p,
.item-page li,
.hub-content p,
.hub-content li{
  color:#334457;
}
.item-page p + p,
.hub-content p + p{
  margin-top:16px;
}
.item-page ul,
.item-page ol,
.hub-content ul,
.hub-content ol{
  padding-left:20px;
}
.item-page h2,
.hub-content h2{
  font-size:24px;
  line-height:1.22;
  margin:28px 0 14px;
}
.item-page h3,
.hub-content h3{
  font-size:20px;
  line-height:1.25;
  margin:24px 0 12px;
}

.hub-content{
  min-width:0;
}

.hub-seo{
  margin-top:28px;
}
.hub-seo > :first-child{
  margin-top:0;
}

/* intro area from article content */
.ras-int{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:18px;
  border:1px solid #d9e5f2;
  border-radius:20px;
  background:linear-gradient(180deg,#fbfdff,#ffffff);
  box-shadow:var(--shadow-soft);
  margin-bottom:18px;
}

.ras-int:has(> div:first-child img){
  grid-template-columns:140px minmax(0,1fr);
}
.ras-int > div:first-child img{
  width:100%;
  max-width:120px;
  margin-inline:auto;
  object-fit:contain;
}
.des-ras{
  min-width:0;
  color:#334457;
}
.des-ras strong{
  color:#1b2d42;
}

/* ad block spacing */
.adsyan{
  margin:18px 0;
}

/* neutral + draft-like sigplus gallery */
.sigplus-gallery{
  margin:0;
}
.sigplus-gallery ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
}
.sigplus-gallery li{
  margin:0;
}
.sigplus-gallery a{
  display:block;
  padding:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(32,50,68,.05);
  text-decoration:none;
  transition:.18s ease;
  overflow:hidden;
}
.sigplus-gallery a:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(32,50,68,.08);
  border-color:#cbd9e8;
}
.sigplus-gallery img{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
}
.sigplus-gallery .sigplus-ad-item{
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.sigplus-gallery .sigplus-ad-wrapper{
  height:100%;
  min-height:220px;
  border:1px dashed #d3e1f0;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f9fcff);
  padding:14px;
}

/* related section written manually in article */
.r-op{
  font-size:24px;
  line-height:1.22;
  font-weight:900;
  color:#1b2d42;
  margin:28px 0 14px;
}
.razdel-v{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
}
.vcat a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-height:100%;
  padding:14px;
  text-align:center;
  text-decoration:none;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid #dfe8f2;
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  transition:.18s ease;
}
.vcat a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(35,52,71,.06);
  border-color:#cfe0ef;
}
.vcat img{
  max-height:96px;
  object-fit:contain;
}

/* clean post nav */
.post-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}
.post-nav__link{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:92px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f8fbff);
  text-decoration:none;
  box-shadow:0 8px 20px rgba(32,50,68,.05);
}
.post-nav__link:hover{
  border-color:#cbd5e1;
  transform:translateY(-1px);
}
.post-nav__link--next{
  text-align:right;
  align-items:flex-end;
}
.post-nav__eyebrow{
  font-size:13px;
  line-height:1.2;
  color:var(--muted);
  font-weight:700;
}
.post-nav__title{
  font-size:16px;
  line-height:1.35;
  font-weight:800;
  color:var(--text);
}
.post-nav__link--empty{
  visibility:hidden;
}

/* article status pills */
.article-status{
  display:inline-flex;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  background:#fff4e5;
  color:#8a4b00;
  border:1px solid #f3d19c;
}

/* generic helpers from content */
.clear,
.clearfix{
  clear:both;
}
.readmore{
  margin-top:18px;
}
.readmore a.register{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:14px;
  background:linear-gradient(180deg, #259cf3, var(--brand-3));
  color:#fff;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(29,143,227,.26);
}

/* hide leftover old pager if some other view still prints it */
.pager.pagenav{
  display:none !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  padding:28px 0 36px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.55);
}
.site-footer__menu ul.menu,
.site-footer ul.menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}
.site-footer__menu a,
.site-footer a{
  text-decoration:none;
}
.site-footer__menu a:hover,
.site-footer a:hover{
  color:var(--brand-3);
}
.site-footer__copy{
  margin-top:14px;
  color:var(--muted);
  font-size:14px;
}

/* ==========================================================================
   Mobile shell
   ========================================================================== */

.mobile-backdrop{
  display:none;
}

@media (max-width:1080px){
  .page-layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(340px, calc(100vw - 52px));
    z-index:80;
    padding-top:calc(var(--safe-top) + 12px);
    padding-bottom:calc(var(--safe-bottom) + 12px);
    padding-left:max(12px, var(--safe-left));
    padding-right:12px;
    background:linear-gradient(180deg,#f6faff,#eef5fc);
    transform:translateX(-110%);
    transition:transform .24s ease;
    overflow:auto;
    overscroll-behavior:contain;
    box-shadow:18px 0 42px rgba(35,52,71,.18);
  }
  .sidebar.is-open{
    transform:translateX(0);
  }
  .sidebar__inner{
    position:static;
  }
  .nav-toggle{
    display:inline-flex;
  }
  .mobile-backdrop{
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(20,32,45,.42);
    backdrop-filter:blur(2px);
  }
  .mobile-backdrop.is-open{
    display:block;
  }
  .sidebar__close{
    display:inline-flex;
  }
}

@media (max-width:900px){
  .site-header__inner{
    grid-template-columns:1fr;
    gap:12px;
    min-height:auto;
  }
  .site-header__actions{
    justify-content:space-between;
  }
  .site-search{
    width:min(100%, 420px);
  }
  .ras-int{
    grid-template-columns:1fr;
    text-align:left;
  }
  .ras-int > div:first-child img{
    margin-inline:0;
  }
}

@media (max-width:640px){
  .container{
    width:min(var(--max), calc(100% - 20px));
  }
  .site-header__inner{
    padding:10px 0 12px;
  }
  .site-logo__text{
    font-size:24px;
  }
  .site-search{
    width:100%;
  }
  .site-search form{
    grid-template-columns:minmax(0,1fr) 104px;
  }
  .site-search input,
  .site-search button,
  .site-search .button,
  .nav-toggle{
    min-height:40px;
    height:40px;
  }
  .item-page{
    padding:18px;
  }
  .page-header h1,
  .page-header h2{
    font-size:28px;
  }
  .sigplus-gallery ul{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  }
  .post-nav{
    grid-template-columns:1fr;
  }
  .post-nav__link--next{
    text-align:left;
    align-items:flex-start;
  }
}
/* Related section */
.related{
  margin-top:18px;
}
.related__title{
  font-size:24px;
  line-height:1.22;
  font-weight:900;
  color:#1b2d42;
  margin:0 0 14px;
}
.related__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
}
.related__item{
  margin:0;
}
.related__item a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-height:100%;
  padding:14px;
  text-align:center;
  text-decoration:none;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid #dfe8f2;
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  transition:.18s ease;
}
.related__item a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(35,52,71,.06);
  border-color:#cfe0ef;
}
.related__item img{
  max-height:96px;
  object-fit:contain;
}
.related__item span{
  font-weight:700;
  color:#1f3952;
  line-height:1.35;
}
.back-category{
  margin:22px 0 6px;
}
.back-category a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  font-weight:800;
  color:#1f3952;
}
.back-category a:hover{
  color:var(--brand-3);
}
.intro,
.hub-intro{
  padding:18px;
  border:1px solid #d9e5f2;
  border-radius:20px;
  background:linear-gradient(180deg,#fbfdff,#ffffff);
  box-shadow:var(--shadow-soft);
  margin-bottom:18px;
}

.intro__content,
.hub-intro{
  min-width:0;
  color:#334457;
}

.intro__content p,
.hub-intro p{
  margin:0;
}

.intro__content p + p,
.hub-intro p + p{
  margin-top:14px;
}

.intro__content strong,
.hub-intro strong{
  color:#1b2d42;
}

.intro-badges,
.hub-intro .intro-badges,
.hub-intro .hub-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#2c3e50;
  background:#f1f6fb;
  border:1px solid #d8e4f0;
  white-space:nowrap;
}
/* ===================== HUB CATALOG + LEGACY CATALOG ===================== */

.hub-catalog,
.razdel-x{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:22px 0 28px;
}

/* колонка */
.hubcol,
.razdel-x .vcat{
  display:block;
  min-width:0;
}

/* карточка */
.hubcard,
.razdel-x .vcat a{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  padding:10px 10px 14px;

  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;

  text-decoration:none;
  color:#111827;
  font-size:14px;
  line-height:1.35;
  font-weight:500;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.hubcard:hover,
.razdel-x .vcat a:hover{
  transform:translateY(-3px);
  border-color:#d1d5db;
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
}

/* картинка */
.hubcard img,
.razdel-x .vcat img{
  display:block;
  width:160px;
  height:160px;
  max-width:100%;
  object-fit:contain;
  margin-bottom:10px;
}

/* заголовок карточки */
.hubtitle{
  font-size:14px;
  line-height:1.35;
  font-weight:500;
  color:#111827;

  min-height:2.7em; /* резерв под 2 строки */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* текст старых карточек */
.razdel-x .vcat a{
  min-height:calc(160px + 10px + 2.7em + 24px); /* картинка + отступ + 2 строки + запас по padding */
}

/* Чтобы текст старых карточек тоже был в 2 строки и не прыгал */
.razdel-x .vcat a{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.razdel-x .vcat a img{
  flex:0 0 auto;
}

.razdel-x .vcat a{
  overflow:hidden;
}

.razdel-x .vcat a{
  word-break:break-word;
}

/* Оборачиваем текст старых карточек в поведение двух строк */
.razdel-x .vcat a{
  line-height:1.35;
}

/* ===================== TABLET ===================== */

@media (max-width:1100px){

  .hub-catalog,
  .razdel-x{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

}

/* ===================== MOBILE ===================== */

@media (max-width:700px){

  .hub-catalog,
  .razdel-x{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .hubcard img,
  .razdel-x .vcat img{
    width:140px;
    height:140px;
  }

  .razdel-x .vcat a{
    min-height:calc(140px + 10px + 2.7em + 24px);
  }

}

@media (max-width:420px){

  .hub-catalog,
  .razdel-x{
    gap:12px;
  }

  .hubtitle,
  .razdel-x .vcat a{
    font-size:13px;
  }

}
#adsside{
  width:100%;
  max-height:600px;      /* максимальная высота блока */
  min-height:250px;      /* чтобы не было скачков верстки */
  overflow:hidden;       /* всё что больше 500px обрезается */
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin:10px 0;
}

/* iframe который создаёт РСЯ */
#adsside iframe{
  max-width:100%;
  height:auto;
}

/* чтобы реклама не растягивала сайдбар */
.sidebar #adsside{
  position:relative;
}