@charset "UTF-8";

/* =========================
   ARTICLE LAYOUT (Rail + Article + Side)
   ========================= */

:root{
  --ghStickyTop: 18px;
}

/* IMPORTANT:
   position: sticky breaks if any ancestor has overflow hidden/auto/scroll.
   We only force overflow: visible on the real wrappers, not on every child. */
.ghMain,
.ghMain .ghWrap,
.ghMain .ghBody{
  overflow: visible;
}

.ghBody{
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
  align-content: start;
  padding: 22px 0 40px;
  min-height: 1px;
}
.ghRail,
.ghSide{
  align-self: stretch;   /* ключевое */
}
/* ===== LEFT RAIL (STICKY) ===== */
.ghRail{
  position: relative;
  min-width: 0;
}

.ghRail__inner{
  position: sticky;
  top: var(--ghStickyTop);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 6px;
}

.ghRailBtn{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid #e2e2e2;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #111;
  text-decoration: none;
}
.ghRailBtn svg{ width: 20px; height: 20px; fill: currentColor; }
.ghRailBtn:hover{ border-color: #cfcfcf; }

.ghRailHint{
  font-size: 12px;
  color: var(--gh-muted);
  min-height: 16px;
  text-align: center;
  padding: 0 6px;
}

/* ===== CENTER ARTICLE ===== */
.ghArticle{
  min-width: 0;
}

.ghCrumb2{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--gh-muted);
  margin: 6px 0 14px;
  white-space: nowrap;
  overflow: hidden;
}
.ghCrumb2__a{ color: var(--gh-muted); text-decoration: none; }
.ghCrumb2__a:hover{ color: #111; }
.ghCrumb2__dot{ opacity: .75; }
.ghCrumb2__c{ color: #777; overflow: hidden; text-overflow: ellipsis; }

.ghH1{
  margin: 0 0 14px;
  font-weight: 900;
  letter-spacing: -0.3px;
  font-size: 44px;
  line-height: 1.06;
}

.ghMeta{
  color: var(--gh-muted);
  font-size: 12px;
  margin: 0 0 18px;
}
.ghMeta__line{ margin: 3px 0; }

.ghLead{
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 800;
  color: #111;
}

/* HERO: base */
.ghHero{ margin: 0 0 18px; }
.ghHero__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid #ededed;
}

/* ===== ARTICLE TEXT ===== */
.ghText{
  font-size: 21px;
  line-height: 1.85;
  color: #111;
}
.ghText p{ margin: 0 0 18px; }
.ghText strong{ font-weight: 800; }
.ghText q{ quotes: "„" "”" "‚" "’"; }

.ghText blockquote{
  margin: 22px 0;
  padding-left: 18px;
  border-left: 4px solid #111;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.6;
}
.ghText h2{
  margin: 18px 0 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

/* ===== RIGHT SIDEBAR (STICKY) ===== */
.ghSide{
  position: relative;
  min-width: 0;
}

.ghSideBox{
  position: sticky;
  top: var(--ghStickyTop);
  border: 1px solid var(--gh-line);
  background: #fff;
}

.ghSideTabs{ display: flex; border-bottom: 1px solid var(--gh-line); }
.ghSideTab{
  flex: 1;
  padding: 14px 12px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 14px;
  color: #8a8a8a;
}
.ghSideTab.is-active{ color: #111; position: relative; }
.ghSideTab.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: #111;
}

.ghSideList{ display: none; }
.ghSideList.is-active{ display: block; }

.ghCard{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 14px;
  text-decoration: none;
  color: #111;
  border-top: 1px solid var(--gh-line);
}
.ghCard:first-child{ border-top: 0; }
.ghCard:hover{ background: #fafafa; }

.ghCard__img{
  width: 110px;
  height: 62px;
  background-size: cover;
  background-position: center;
  border: 1px solid #ededed;
}
.ghCard__txt{
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px){
  .ghBody{
    grid-template-columns: 72px minmax(0, 1fr) 320px;
    gap: 22px;
  }
  .ghH1{ font-size: 38px; }
}

/* Tablet + Mobile: hide rail + sidebar fully */
@media (max-width: 1199px){
  .ghRail{ display: none !important; }
  .ghSide{ display: none !important; }
  .ghBody{ grid-template-columns: 1fr; gap: 0; }
}

/* =========================
   MAIN ARTICLE POSTER
   ========================= */

.ghHero--cover{
  margin: 0 0 26px;
}

.ghHero--cover .ghHero__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

/* =========================
   INLINE ARTICLE IMAGES
   ========================= */

.ghHero--inline{
  margin: 22px auto;
  max-width: 640px;
}

.ghHero--inline .ghHero__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

/* Inline media mobile tuning */
@media (max-width: 820px){
  .ghHero--cover .ghHero__img{
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
  }

  .ghHero--inline{
    max-width: 100%;
    margin: 18px 0;
  }

  .ghHero--inline .ghHero__img{
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
}