/*
 * Блок «ECOFACTOR: фінал статті» — варіант compact (коротка картка).
 *
 * Значення з макета Figma (23640:23242 темний / 23640:22943 світлий):
 *   картка 952×258, padding 32, radius 16, gap 24
 *   заголовок 20/1.5 semibold, підзаголовок 16/1.5 regular
 *   рядок кнопок: gap 12, кнопки 44 висоти (10 + 24 + 10)
 *   соцмережі: 5 × 24 з gap 16 → 184
 *
 * Токени:
 *   surface/card        #1f1f1f → --color-gray-10   | #f1f3f5 → --color-gray-95
 *   text/heading        white   → --color-white     | #3a3a3a → --color-gray-20
 *   text/body           #f1f3f5 → --color-gray-95   | #525252 → --color-gray-30
 *   btn/outline/border  #3a3a3a → --color-gray-20   | #d9dbde → --color-gray-d9
 *   btn/outline/text    white   → --color-white     | #3a3a3a → --color-gray-20
 *   accent-gr/green-60  #3af185 → --color-green-60
 *
 * Стани кнопок — із дизайн-системи (файл JVeAwFQZcf789HuQfEQkg3, сет 20124:1212):
 *   Primary  hover green-50, focus green-50 + кільце rgba(61,208,120,.2),
 *            disabled #87d9a8; active green-40 — з теми, у ДС pressed немає.
 *   Tertiary hover — нейтральна заливка btn/outline/bg-hover, focus — та сама
 *            заливка й СІРЕ кільце (не зелене).
 */

.efc-blog-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6, 24px);
  padding: var(--space-8, 32px);
  border-radius: var(--radius-xl, 16px);
  box-sizing: border-box;
  width: 100%;
}

.efc-blog-compact__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-primary, 'Ruberoid', sans-serif), sans-serif;
  font-weight: var(--font-semibold, 600);
  font-size: 20px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.efc-blog-compact__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-primary, 'Ruberoid', sans-serif), sans-serif;
  font-weight: var(--font-regular, 400);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.efc-blog-compact__text a {
  color: inherit;
  text-decoration: underline;
}

.efc-blog-compact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--space-3, 12px);
  width: 100%;
}

.efc-blog-compact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px 20px;
  /* Обведення внутрішньою тінню, а не border: у Figma stroke не додає розміру,
     а border робив би кожен рядок кнопок на 2px вищим за макет. */
  border: 0;
  border-radius: var(--radius-lg, 12px);
  font-family: var(--font-primary, 'Ruberoid', sans-serif), sans-serif;
  font-weight: var(--font-bold, 700);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease),
              box-shadow var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}

.efc-blog-compact__btn--primary {
  background: var(--color-green-60, #3AF185);
  color: var(--color-gray-20, #3A3A3A);
}

.efc-blog-compact__btn--primary:hover,
.efc-blog-compact__btn--primary:focus-visible {
  background: var(--color-green-50, #3DD078);
  color: var(--color-gray-20, #3A3A3A);
}

.efc-blog-compact__btn--primary:active {
  background: var(--color-green-40, #23A859);
}

.efc-blog-compact__btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(61, 208, 120, 0.2);
}

/* Ховер і фокус контурної — у блоках тем нижче: заливка залежить від поверхні */
.efc-blog-compact__btn--outline {
  background: transparent;
}

.efc-blog-compact__socials {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 16px);
}

.efc-blog-compact__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: opacity var(--transition-fast, 150ms ease);
}

.efc-blog-compact__social:hover {
  opacity: 0.7;
}

.efc-blog-compact__social:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(61, 208, 120, 0.2);
}

.efc-blog-compact__social svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* ── Темна тема ────────────────────────────────────────────────────────── */
.efc-blog-compact--dark {
  background: var(--color-gray-10, #1F1F1F);
}

.efc-blog-compact--dark .efc-blog-compact__title {
  color: var(--color-white, #FFFFFF);
}

.efc-blog-compact--dark .efc-blog-compact__text {
  color: var(--color-gray-95, #F1F3F5);
}

.efc-blog-compact--dark .efc-blog-compact__btn--outline {
  box-shadow: inset 0 0 0 1px var(--color-gray-20, #3A3A3A);
  color: var(--color-white, #FFFFFF);
}

/* ДС Tertiary (21160:981/983): ховер — нейтральна заливка, кільце фокуса сіре.
   btn/outline/bg-hover у ДС віддає світле значення #f1f3f5, тому для темної
   картки беру gray-17 — той самий крок «світліше за поверхню». */
.efc-blog-compact--dark .efc-blog-compact__btn--outline:hover {
  background: var(--color-gray-17, #2C2C2C);
}

.efc-blog-compact--dark .efc-blog-compact__btn--outline:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-gray-20, #3A3A3A),
              0 0 0 4px #505050;
  background: var(--color-gray-17, #2C2C2C);
  outline: none;
}

.efc-blog-compact--dark .efc-blog-compact__social {
  color: var(--color-gray-95, #F1F3F5);
}

/* ── Світла тема ───────────────────────────────────────────────────────── */
.efc-blog-compact--light {
  background: var(--color-gray-95, #F1F3F5);
}

.efc-blog-compact--light .efc-blog-compact__title {
  color: var(--color-gray-20, #3A3A3A);
}

.efc-blog-compact--light .efc-blog-compact__text {
  color: var(--color-gray-30, #525252);
}

.efc-blog-compact--light .efc-blog-compact__btn--outline {
  box-shadow: inset 0 0 0 1px var(--color-gray-d9, #D9DBDE);
  color: var(--color-gray-20, #3A3A3A);
}

.efc-blog-compact--light .efc-blog-compact__btn--outline:hover {
  background: var(--color-white, #FFFFFF);
}

.efc-blog-compact--light .efc-blog-compact__btn--outline:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-gray-d9, #D9DBDE),
              0 0 0 4px var(--color-gray-95, #F1F3F5);
  background: var(--color-white, #FFFFFF);
  outline: none;
}

.efc-blog-compact--light .efc-blog-compact__social {
  color: var(--color-gray-20, #3A3A3A);
}

/* У редакторі блок лежить без контейнера статті — тримаємо ширину макета. */
.editor-styles-wrapper .efc-blog-compact {
  max-width: 952px;
}