/* --- Контейнер и базовые стили --- */


.psycho-article-container {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'TT Commons', sans-serif;
  line-height: 1.6;
  color: #2D2D2D;
  padding: 0 20px;
}

.psycho-article-container .highlight {
  background: linear-gradient(to right, #ffeb3b 90%, transparent 100%);
  padding: 2px 4px;
  border-radius: 2px;
}


.psycho-article-container p {
  margin-bottom: 1.2em;
}
/* --- Table of Contents --- */
.psycho-article-container .table-of-contents {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: #F0F4F8;
  border-left: 4px solid #1A3E5E;
  border-radius: 8px;
}

.psycho-article-container .table-of-contents h2 {
  font-size: 1.6rem;
  color: #1A3E5E;
  margin-bottom: 1rem;
}

.psycho-article-container .subheading h2 {
  font-size: 1.4rem !important;
  color: #555 !important;
  margin-top: 0 !important;
}

.psycho-article-container .table-of-contents ul {
  list-style: none;
  padding: 0;
  margin: 0!important;
  padding-left: 0px!important
}

.psycho-article-container .table-of-contents li {
  margin-bottom: 0.5rem;
  margin: 0!important;
}

.psycho-article-container .table-of-contents a {
  text-decoration: none;
  color: #2D2D2D;
  transition: color 0.3s ease;
}

.psycho-article-container .table-of-contents a:hover {
  color: #FF6B6B;
  text-decoration: underline;
}

/* Адаптивность для table-of-contents */
@media (max-width: 768px) {
  .psycho-article-container .table-of-contents {
    padding: 1rem;
    margin: 1.5rem 0;
  }
}

.psycho-article-container h1 {
  font-size: 2.2rem;
  color: #1A3E5E;
  margin: 2rem 0;
  border-left: 4px solid #FF6B6B;
  padding-left: 1.5rem;
  line-height: 1.3;
}

.psycho-article-container h2 {
  font-size: 1.8rem;
  color: #2D2D2D;
  margin: 1.8rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #F0F4F8;
}

/* --- Блоки статей --- */
.psycho-article-container .article-block {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  position: relative;
  border-left: 4px solid; /* цвет подменяем в каждом отдельном блоке */
  /* Увеличили отступ, чтобы поместить 48px иконку + зазор */
  padding-left: 6.5rem;
  transition: transform 0.2s ease;
}

.psycho-article-container .article-block:hover {
  transform: translateX(5px);
}

.psycho-article-container .article-block::before {
  content: '';
  position: absolute;
  /* Горизонтальное и вертикальное центрирование иконки */
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);

  width: 48px;
  height: 48px;

  background-size: contain;
  background-repeat: no-repeat;
}

/* --- Варианты оформления блоков по «типу» --- */


/* Блок "Короткое резюме" */
.psycho-article-container .summary {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #F9FAFB;
  border-left: 4px solid #FF6B6B;
  border-radius: 8px;
}

/* Question  Выделение вопросов, риторических размышлений, побуждение читателя задуматься.*/
.psycho-article-container .question {
  background: rgba(63, 81, 181, 0.1); /* Бледно-индиго */
  border-color: #3F51B5; /* Насыщенный индиго */
  color: #1a237e; /* Тёмно-индиго */
}

.psycho-article-container .question::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%233F51B5'%20class='size-6'%3E%3Cpath%20fill-rule='evenodd'%20d='M2.25%2012c0-5.385%204.365-9.75%209.75-9.75s9.75%204.365%209.75%209.75-4.365%209.75-9.75%209.75S2.25%2017.385%202.25%2012Zm11.378-3.917c-.89-.777-2.366-.777-3.255%200a.75.75%200%200%201-.988-1.129c1.454-1.272%203.776-1.272%205.23%200%201.513%201.324%201.513%203.518%200%204.842a3.75%203.75%200%200%201-.837.552c-.676.328-1.028.774-1.028%201.152v.75a.75.75%200%200%201-1.5%200v-.75c0-1.279%201.06-2.107%201.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857%200-2.584ZM12%2018a.75.75%200%201%200%200-1.5.75.75%200%200%200%200%201.5Z'%20clip-rule='evenodd'%20/%3E%3C/svg%3E");
}

/* Sarcasm */

.psycho-article-container .sarcasm {
  background: rgba(255, 160, 0, 0.1);
  border-color: #FFA000;
  color: #664300;
}
.psycho-article-container .sarcasm::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFA000' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Joke */
.psycho-article-container .joke {
  background: rgba(76, 175, 80, 0.1);
  border-color: #4CAF50;
  color: #2d572f;
}
.psycho-article-container .joke::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234CAF50' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Important */
.psycho-article-container .important {
  background: rgba(33, 150, 243, 0.1);
  border-color: #2196F3;
  color: #1a4d7a;
}
.psycho-article-container .important::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232196F3' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Metaphor */
.psycho-article-container .metaphor {
  background: rgba(156, 39, 176, 0.1);
  border-color: #9C27B0;
  color: #581e63;
}
.psycho-article-container .metaphor::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239C27B0' class='size-6'%3E%3Cpath d='M12 .75a8.25 8.25 0 0 0-4.135 15.39c.686.398 1.115 1.008 1.134 1.623a.75.75 0 0 0 .577.706c.352.083.71.148 1.074.195.323.041.6-.218.6-.544v-4.661a6.714 6.714 0 0 1-.937-.171.75.75 0 1 1 .374-1.453 5.261 5.261 0 0 0 2.626 0 .75.75 0 1 1 .374 1.452 6.712 6.712 0 0 1-.937.172v4.66c0 .327.277.586.6.545.364-.047.722-.112 1.074-.195a.75.75 0 0 0 .577-.706c.02-.615.448-1.225 1.134-1.623A8.25 8.25 0 0 0 12 .75Z' /%3E%3Cpath fill-rule='evenodd' d='M9.013 19.9a.75.75 0 0 1 .877-.597 11.319 11.319 0 0 0 4.22 0 .75.75 0 1 1 .28 1.473 12.819 12.819 0 0 1-4.78 0 .75.75 0 0 1-.597-.876ZM9.754 22.344a.75.75 0 0 1 .824-.668 13.682 13.682 0 0 0 2.844 0 .75.75 0 1 1 .156 1.492 15.156 15.156 0 0 1-3.156 0 .75.75 0 0 1-.668-.824Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Provocation */
.psycho-article-container .provocation {
  background: rgba(244, 67, 54, 0.1);
  border-color: #F44336;
  color: #8b1919;
}
.psycho-article-container .provocation::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F44336' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Case */
.psycho-article-container .case {
  background: rgba(103, 58, 183, 0.1);
  border-color: #673AB7;
  color: #311b92;
}
.psycho-article-container .case::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23673AB7' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Steps */
.psycho-article-container .steps {
  background: rgba(0, 150, 136, 0.1);
  border-color: #009688;
  color: #004d45;
}
.psycho-article-container .steps::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23009688' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M2.625 6.75a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0A.75.75 0 0 1 8.25 6h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75ZM2.625 12a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0ZM7.5 12a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12A.75.75 0 0 1 7.5 12Zm-4.875 5.25a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875 0a.75.75 0 0 1 .75-.75h12a.75.75 0 0 1 0 1.5h-12a.75.75 0 0 1-.75-.75Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Myth */
.psycho-article-container .myth {
  background: rgba(245, 124, 0, 0.1);
  border-color: #F57C00;
  color: #7a3d00;
}
.psycho-article-container .myth::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F57C00' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Warning */
.psycho-article-container .warning {
  background: rgba(255, 235, 59, 0.1);
  border-color: #FFEB3B;
  color: #8a6d03;
}


.psycho-article-container .warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFEB3B' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* Quote */
.psycho-article-container .quote {
  background: rgba(158, 158, 158, 0.1);
  border-color: #9E9E9E;
  color: #424242;
}
.psycho-article-container .quote::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239E9E9E' class='size-6'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-2.429 0-4.817.178-7.152.521C2.87 3.061 1.5 4.795 1.5 6.741v6.018c0 1.946 1.37 3.68 3.348 3.97.877.129 1.761.234 2.652.316V21a.75.75 0 0 0 1.28.53l4.184-4.183a.39.39 0 0 1 .266-.112c2.006-.05 3.982-.22 5.922-.506 1.978-.29 3.348-2.023 3.348-3.97V6.741c0-1.947-1.37-3.68-3.348-3.97A49.145 49.145 0 0 0 12 2.25ZM8.25 8.625a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Zm2.625 1.125a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Zm4.875-1.125a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25Z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

/* --- Адаптивность (мобильные) --- */
@media (max-width: 768px) {
  .psycho-article-container {
    padding: 0 1rem;
  }

  .psycho-article-container .article-block {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    padding-left: 6rem; /* Чуть меньше, чтобы не было горизонтального скролла */
  }

  .psycho-article-container .article-block::before {
    left: 1.5rem; /* Можно чуть сдвинуть, если хочется поближе к границе */
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
  }
}

/* --- Кнопка CTA --- */
.psycho-article-container .cta-button {
  display: inline-block;
  background: #1A3E5E;
  color: #fff !important;
  padding: 1rem 2rem;
  border-radius: 50px;
  margin: 3rem 0;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  text-align: center;
}

.psycho-article-container .cta-button:hover {
  background: #FF6B6B;
  transform: translateY(-2px);
}