/* ====== БАЗА / КОНТЕКСТ ====== */
.hb-context{ background:#fff !important; overflow-x:clip; }
.hb-context .hb-wrap, .hb-context .hb-card, .hb-context .hb-card__side, .hb-context .hb-card__content{ color:#161616; }

/* Страница плагина – на всю ширину */
.hb-wrap{
  width:100vw; margin:0; padding:0;
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  background:#fff;
}


/* =========================================================
   SINGLE (одна запись)
   ========================================================= */
.hb-card{
  --hb-offset-top: 120px;     /* JS подставит реальную высоту хедера + запас */
  --hb-offset-bottom: 200px;
  --hb-gap: 32px;             /* единый зазор между колонками */

  margin: var(--hb-offset-top) auto var(--hb-offset-bottom);
  padding: 0 clamp(16px, 3vw, 40px);
  max-width: 1400px;
  display:grid;
  grid-template-columns: auto minmax(340px, 520px);  /* слева ширина = по факту картинки */
  gap: var(--hb-gap);
  align-items:start; background:transparent; border-radius:0; box-shadow:none; overflow:hidden;
}

/* левая колонка */
.hb-card__media{ justify-self:center; background:#fff; }
/* изображение – всегда целиком, но умеренно по размеру */
.hb-card__img{
  display:block; width:auto; height:auto;
  max-width: min(48vw, 880px);
  max-height: 72vh;
  object-fit:contain !important;
}

/* правая колонка */
.hb-card__side{ display:flex; flex-direction:column; }
.hb-card__head{ margin-bottom:16px; }
.hb-card__title{ color:#111; font-weight:700; font-size:clamp(22px,2.2vw,34px); line-height:1.2; margin:0; }
.hb-card__meta{ margin-top:6px; color:#6b7280; font-size:14px; display:flex; gap:8px; align-items:center; }
.hb-dot{opacity:.6}
.hb-card__content{ font-size:16px; line-height:1.75; }
.hb-card__content h2,.hb-card__content h3,.hb-card__content h4{ color:#111; }
.hb-card__content a{ color:#0a66c2; text-decoration:underline; text-underline-offset:2px; }
.hb-card__content img{ max-width:100%; height:auto; border-radius:10px; }

/* Share */
.hb-card__footer{ margin-top:24px; padding-top:16px; border-top:1px solid #eee; }
.hb-sharebar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hb-btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid #e5e7eb; background:#fff; color:#111;
  padding:10px 14px; border-radius:999px; font-size:14px; cursor:pointer; text-decoration:none;
}
.hb-btn:hover,.hb-iconbtn:hover{ background:#f7f7f8; }
.hb-btn--primary{ border-color:#e5e7eb; background:#fff; color:#111; }
.hb-btn i{ font-size:16px; }
.hb-iconbtn{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; background:#fff; color:#111; border-radius:999px; text-decoration:none;
}
.hb-iconbtn i{ font-size:18px; }

/* Глушим возможные псевдо-тултипы темы */
.hb-sharebar [title]::before,.hb-sharebar [title]::after,
.hb-sharebar [data-title]::before,.hb-sharebar [data-title]::after,
.hb-sharebar [data-tooltip]::before,.hb-sharebar [data-tooltip]::after,
.hb-sharebar [data-original-title]::before,.hb-sharebar [data-original-title]::after,
.hb-sharebar [aria-label]::before,.hb-sharebar [aria-label]::after{ content:none !important; }

/* Single — адаптив */
@media (max-width:1100px){
  .hb-card{ grid-template-columns:1fr; max-width:980px; }
  .hb-card__img{ max-width:min(92vw,880px); max-height:68vh; }
}
@media (max-width:640px){
  .hb-card{ padding:0 16px; }
  .hb-card__img{ max-width:100%; max-height:64vh; }
}

/* =========================================================
   GRID (/blog) — только картинки, вертикальный формат 4:5
   ========================================================= */

.hb-feed-wrap{ max-width:1480px; /* 1280px */ margin:40px auto; /*padding:0 16px;*/ }
.hb-feed{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top: -100px;
}
.hb-feed__item{
  position:relative; display:block; background:#fff;
  border-radius:0; overflow:hidden;
}
.hb-feed__thumb{
  aspect-ratio: 4 / 5;                 /* фиксируем вертикальный прямоугольник */
  display:flex;                         /* центрируем картинку внутри блока */
  align-items:center;
  justify-content:center;
  background:#fff;                      /* белые «поля», если пропорция другая */
}
.hb-feed__thumb img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;                   /* показываем фото целиком */
  display:block;
}

/* «невидимка» для автодогрузки */
#hb-feed-sentinel{ height:1px; }

/* адаптив */
@media (max-width:1024px){ .hb-feed{ grid-template-columns:repeat(3, 1fr); margin-top: -20px; } }
@media (max-width:640px){ .hb-feed{ grid-template-columns:repeat(3, 1fr); margin-top: -20px; } }

/* =========================================================
   MODAL (быстрый предпросмотр + стрелки навигации)
   ========================================================= */

body.hb-locked{ overflow:hidden; }
.hb-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.hb-modal.is-open{ opacity:1; pointer-events:auto; }

.hb-modal__dialog{
  position:relative;
  background:#fff; border-radius:16px;
  max-width:min(1200px, 96vw); width:96vw; max-height:96vh;
  overflow:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.hb-modal .hb-card__img {border-radius: 10px;}

/* Кнопка закрытия — плавающий кружок внутри диалога */
.hb-modal__closebtn{
  position:absolute; top:12px; right:12px; z-index:3;
  width:40px; height:40px; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; color:#111;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.hb-modal__closebtn:hover{ background:#f7f7f8; }

/* Контент модалки — ровные отступы вокруг карточки */
.hb-modal__content{ padding: clamp(12px, 2vw, 24px); }

/* Карточка внутри модалки — без внешних отступов, аккуратный gap */
.hb-modal .hb-card{
  margin:0; --hb-offset-top:0; --hb-offset-bottom:0; padding:0;
  --hb-gap: 28px;
  grid-template-columns:minmax(280px, 1fr) minmax(300px, 420px);
}
.hb-modal .hb-card__img{ max-width:min(60vw, 860px); max-height:80vh; }

/* Навигационные стрелки */
.hb-modal__nav{ pointer-events:none;}
.hb-modal__navbtn{
  position:absolute; top:50%; z-index:2;
  width:44px; height:44px; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; color:#111;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:auto;
}
.hb-modal__navbtn:hover{ background:#f7f7f8; }
.hb-modal__navbtn--prev{ left:12px; }
.hb-modal__navbtn--next{ right:12px; }

@media (max-width:1100px){ .hb-modal .hb-card{ grid-template-columns:1fr; } }
@media (max-width:900px){ .hb-modal__navbtn{ display:none; } } /* узко — только клавиатура/свайп */

/* Центрируем правую колонку по высоте внутри модалки */
.hb-modal .hb-card{
  align-items: center;           /* переопределяем align-items:start из базового .hb-card */
}
.hb-modal .hb-card__side{
  align-self: center;            /* подстраховка: сам элемент тоже центрируется в своей ячейке */
}

/* На мобиле одна колонка — поведение штатное, ничего не ломаем */
@media (max-width:1100px){
  .hb-modal .hb-card{ align-items: start; } /* можно вернуть как было, но это не обязательно */
}






/* === HERO-фон только на странице /blog (класс body: .blog у WP) === */
/* Герой-фон на самом блоке */
.ig-shortcode-bg{
  /* быстро настраиваемые переменные */
  --hero-h: 60vh;
  --hero-img: url('https://hilbert-house.ru/wp-content/uploads/2025/11/phototop-scaled-blag-bg.webp');

  position: relative;
/*   isolation: isolate;       отдельный стек, чтобы z-index работал предсказуемо */
  overflow: visible;        /* не обрезать псевдоэлемент */
  min-height: var(--hero-h);
  padding: clamp(16px, 2.2vw, 28px) 16px; /* внутренние отступы под текст/аватар */
  z-index: 0;
}

/* полноширинный фон за блоком (от края до края окна) */
.ig-shortcode-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -55vw;   /* full-bleed хак */
  width: 100vw; height: 100%;
  background-image: var(--hero-img);
  background-size: cover;
  background-repeat: no-repeat; 
  background-position: 90% center;
  z-index: -1;                                
  pointer-events: none;
}

/* мягкий белый градиент слева для читабельности текста */
.ig-shortcode-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw; height: 100%;
/*  background: linear-gradient(90deg,
              rgba(255,255,255,0.94) 0 340px,
              rgba(255,255,255,0.78) 50%,
              rgba(255,255,255,0.00) 85%); */
  z-index: -1;
  pointer-events: none;
}

/* Адаптив высоты и фокуса */
@media (max-width: 1200px){
  .ig-shortcode-bg{ --hero-h: 360px; }
}
@media (max-width: 900px){
  .ig-shortcode-bg{ --hero-h: 300px; }
}
@media (max-width: 640px){
  .ig-shortcode-bg{ --hero-h: 240px; }
  .ig-shortcode-bg::after{
/*    background: linear-gradient(90deg,
                rgba(255,255,255,0.95) 0 200px,
                rgba(255,255,255,0.10) 70%); */
  }
}

/* убрать щель между герой-блоком и сеткой */

/* 1) У героя не должно быть внешнего отступа снизу */
.ig-shortcode-bg{ 
  margin-bottom: 0 !important; 
  padding-bottom: clamp(8px, 1.2vw, 14px); /* чуть воздуха внутри, не внешний */
}

/* WPBakery часто даёт margin-bottom у рядов — прибьём его */
.ig-shortcode-bg.vc_row,
.ig-shortcode-bg.vc_section,
.ig-shortcode-bg .vc_row,
.ig-shortcode-bg .wpb_row{
  margin-bottom: 0 !important;
}

/* 2) Грид не поднимаем от себя — сверху 0 */
.hb-feed-wrap{ 
  margin-top: 0 !important;           /* вместо 40px по умолчанию */
}

/* Если грид идёт сразу после героя — гарантированно без зазора */
.ig-shortcode-bg + .hb-feed-wrap{ 
  margin-top: 0 !important; 
}

/* Иногда между ними вставляют "Пустое пространство" — убираем его */
.ig-shortcode-bg + .vc_empty_space{ 
  display: none !important; 
}

/* 3) На всякий случай опустим фон героя на 1px, чтобы «шов» не был виден */
.ig-shortcode-bg::before,
.ig-shortcode-bg::after{
  bottom: -1px;   /* перекрываем границу */
}