/*single post*/


.single #content {
    max-width: var(--gb-container-width);
    margin-left: auto;
    margin-right: auto;
}


.single pre[class*="language-"] {
  background: var(--base-2);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto; 	
}

.single code[class*="language-"] {
  font-family: "JetBrains Mono", monospace;
   
}

.single pre[class*="language-"] > code {
 border-left: 4px solid #358ccb;	
}

.single pre[class*="language-"]::after, .single pre[class*="language-"]::before { 
  box-shadow: none;
}


/*про автора*/
/*про автора*/
/* === Author box (GP-like) === */
.gp-author {
  position: sticky;
  top: 110px;               /* підлаштуй під свій хедер */
  z-index: 20;
  align-self: start;
  width: 290px;
  float: left;	
}

/* Контейнер */
.gp-author__inner {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: var(--base-3, #fff);
  /*box-shadow: 0 10px 30px rgba(0,0,0,.06);*/
  overflow: hidden;

  /* ширина як у TOC */
  width: 280px;
  max-width: 100%;
  transition: width .25s ease, transform .25s ease, opacity .25s ease;
}

/* Header */
.gp-author__head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.gp-author__titlewrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gp-author__title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  color: var(--contrast, #12141a);
}

/* Кнопка згортання */
.gp-author__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--base-2, #f7f9fb);
  color: var(--contrast, #12141a);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  user-select: none;
}

.gp-author__btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,92,255,.18);
}

.gp-author__btn-ico {
  opacity: .7;
  font-size: 12px;
}

/* Body */
.gp-author__body {
  padding: 14px;
}

.gp-author__card {
  display: grid;
  gap: 12px;
}

.gp-author__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gp-author__avatar {
  width: 65px;
  height: 65px;
  border-radius: 12px 0 12px 0;
  object-fit: cover;
  /*border: 1px solid rgba(0,0,0,.10);*/
}

.gp-author__name {
  font-weight: 600;
  font-size: 22px;
  color: var(--contrast, #12141a);
}

.gp-author__role {
  font-size: 13px;
  color: var(--contrast-3);
}

.gp-author__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--contrast-2, #242933);
}

.gp-author__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gp-author__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--accent, #6b2ee6);
  color: #fff;
}

.gp-author__link {
  font-size: 14px;
  text-decoration: none;
  color: var(--contrast, #12141a);
  opacity: .8;
  border: 1px solid var(--accent-2);
  border-radius: 3px;
  padding: 3px 7px;
  margin-top:4px;	
}


.gp-author__link:hover { 
  color: var(--accent, #12141a);
  opacity: .9;
  border: 1px solid var(--accent, #12141a);	
}

/* === Collapsed state === */
.gp-author.is-collapsed .gp-author__inner {
  width: 110px; /* “до розміру кнопки”, підлаштуй під текст Автор/Зміст */
}

.gp-author.is-collapsed .gp-author__title {
  display: none;
}

.gp-author.is-collapsed .gp-author__body {
  display: none;
  padding: 0;
}

.gp-author.is-collapsed .gp-author__head {
  border-bottom: 0;
}

/* На мобільних краще ховати повністю */
@media (max-width: 1024px) {
  .gp-author {
    display: none;
  }
}







:root{
  --content-w: 880px;
  --rail-w: 290px;
  --rail-gap: 24px;
  --rail-top: 110px; /* як у тебе */
}

.author-rail
{
  position: fixed;
  top: var(--rail-top);
  width: var(--rail-w);
  z-index: 50;
}

/* Лівий рейл (автор) */
.author-rail{
  left: max(16px, calc(50% - (var(--content-w)/2) - var(--rail-w) - var(--rail-gap)));
}



/* Ховаємо рейли на планшеті/мобільному */
@media (max-width: 1200px){
  .author-rail{ display:none; }
}




:root{
  --content-w: 880px;
  --rail-w: 290px;
  --rail-gap: 24px;
  --rail-top: 140px; /* як у тебе */
}

.author-rail,
//#toc-rail
{
  position: fixed;
  top: var(--rail-top);
  width: var(--rail-w);
  z-index: 50;
}

/* Лівий рейл (автор) */
.author-rail{
  left: max(24px, calc(50% - (var(--content-w)/2) - var(--rail-w) - var(--rail-gap)));
}

/* Правий рейл (TOC) */
/*#toc-rail{
  left: min(
    calc(100% - var(--rail-w) - 16px),
    calc(50% + (var(--content-w)/2) + var(--rail-gap))
  );
}
*/

/* Ховаємо рейли на планшеті/мобільному */
@media (max-width: 1200px){
  .author-rail{ display:none; }
}
@media (max-width: 1024px){
  #toc-rail--{ display:none; } /* лишаєш toc-mobile + кнопку */
}


/* Розгорнутий стан (за замовчуванням) */
.author-rail {
  width: 290px;
  transition: width .25s ease;
}

/* Згорнутий стан */
.author-rail.is-collapsed {
  width: 170px; /* ← оптимально під кнопку */
}


/* rail */
.gp-author__icon {
  display: none;
}

/* згорнуто → показати open */
.author-rail.is-collapsed .gp-author__icon--open {
  display: block;
}

/* розгорнуто → показати close */
.author-rail:not(.is-collapsed) .gp-author__icon--close {
  display: block;
}



/* читати ще*/
.gp-related-cards {
  max-width: 880px;
  margin: 1rem auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* дозволяє перенос, якщо треба */
  justify-content: center;
}

.gp-related-card {
  flex: 1 1 calc(33.333% - 20px); /* 3 в рядок з урахуванням gap */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.gp-related-card:hover {
  transform: translateY(-5px);
}

.gp-related-thumb {
  width: 100%;
  height: auto;
  display: block;
}

.gp-related-title {
  font-size: 18px;
  padding: 1rem;
  margin: 0;
  line-height: 1.3;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .gp-related-card {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 500px) {
  .gp-related-card {
    flex: 1 1 100%;
  }
}