/* -----------------------------------------------------------
   Табачно-песочная палитра для формат-блоков Writerside

   Использование: <format id="hl-claro-1">…</format> и т.п.

   Важно:
   - Чтобы один и тот же стиль можно было применять много раз без ошибки MRK003, используем шаблонные id:
     hl-claro-1, hl-claro-2, hl-maduro-1, hl-oscuro-7, ...
   - Переносы строк включены: длинные слова/ссылки не «тянут» строку, фон корректно продолжается на переносах.
   ----------------------------------------------------------- */

/* Общие правила для всех наших «hl-*» плашек                                                                         */
[id^="hl-"] {                                                        /* базовая типографика и переносы                */
  white-space:               normal;                                 /* перенос по пробелам                           */
  overflow-wrap:             anywhere;                               /* перенос длинных слов/ссылок                   */
  word-break:                normal;                                 /* не ломаем слова без нужды                     */
  hyphens:                   auto;                                   /* автоматические переносы                       */
  display:                   inline;                                 /* остаётся инлайновым                           */
  box-decoration-break:      clone;                                  /* фон/рамка на переносах                        */
}

/* 🌿 light claro — мягкая подсветка                                                                                  */
[id^="hl-claro"] {
  background-color:          #D9CBB3;                                /* светло-песочный фон                           */
  color:                     #2B2B2B;                                /* тёмный текст                                  */
  padding:                   2px 6px;                                /* компактная плашка                             */
  border-radius:             3px;                                    /* лёгкое скругление                             */
  border:                    1px dotted #A89579;                     /* тёплая точечная рамка                         */
}

/* 🍂 colorado — заметки                                                                                              */
[id^="hl-colorado"] {
  background-color:          #B4936A;                                /* средне-песочный                               */
  color:                     #1F1F1F;                                /* контрастный текст                             */
  padding:                   2px 6px;                                /* компактная плашка                             */
  border-radius:             3px;                                    /* лёгкое скругление                             */
  border:                    1px dotted #9E8767;                     /* песочная рамка                                */
}

/* 🍫 maduro — важные фрагменты                                                                                       */
[id^="hl-maduro"] {
  background-color:          #6E5B3F;                                /* тёмный табачный                               */
  color:                     #F2F2F2;                                /* светлый текст                                 */
  padding:                   3px 7px;                                /* акцентная плашка                              */
  border-radius:             3px;                                    /* лёгкое скругление                             */
  border:                    1px dotted #A89579;                     /* тёплая песочная окантовка                     */
}

/* 🌑 oscuro — супер-ключевые моменты                                                                                 */
[id^="hl-oscuro"] {
  background-color:          #3E2F1F;                                /* почти «oscuro»                                */
  color:                     #EAEAEA;                                /* светлый текст                                 */
  padding:                   3px 8px;                                /* самый весомый акцент                          */
  border-radius:             3px;                                    /* лёгкое скругление                             */
  border:                    1px dotted #8C7A61;                     /* тёплая рамка                                  */
  box-shadow:                0 0 0 1px rgba(0,0,0,.06) inset;        /* внутренняя тень                               */
}


/* -----------------------------------------------------------
   Подписи к изображениям (логотипы, скриншоты, рисунки)
   ----------------------------------------------------------- */

[id^="caption-"] {
  font-size:                 0.9rem;                                 /* компактный, но читаемый размер подписи        */
  font-style:                italic;                                 /* классический курсив для подписи               */
  text-align:                left;                                   /* выравнивание подписи                          */

  margin-top:                0.15rem;                                /* МЕНЬШЕ между изображением и подписью          */
  margin-bottom:             0.5rem;                                 /* БОЛЬШЕ после подписи                          */

  color:                     var(--ws-color-text-secondary);         /* вторичный цвет текста из темы Writerside      */
  min-height:     2.3rem;  /* ключевой момент */
}

/* -----------------------------------------------------------
   Контейнер изображений figure-*
   ----------------------------------------------------------- */


/* Фигура: фиксированная высота, центрируем картинку */
[id^="figure-"] {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 370px;          /* подгони под самую высокую картинку */
  margin-top: 0.75rem;
  margin-bottom: 0.15rem;
}

/* Картинка не вылезает за границы контейнера */
[id^="figure-"] img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

/* Подпись: одинаковый “блок” под всеми табами */
[id^="caption-"] {
  margin-top: 0.25rem;
  line-height: 1.3;
  min-height: 2.4rem;   /* примерно две строки текста */
}


/* -----------------------------------------------------------
   Заголовки таблиц в табачной гамме

   По умолчанию — «колорадо»; можно быстро сменить оттенок.
   ----------------------------------------------------------- */

/* Заголовки таблиц в табачной гамме                                                                                  */
table thead th {
  background-color:          #B4936A;                                /* 🍂 colorado — как было                        */
  color:                     #FAFAFA;                                /* яркий светлый текст                           */
  font-weight:               700;                                    /* жирный                                        */
  text-shadow:               0 1px 0 rgba(0,0,0,.25);                /* немного объёма для читаемости                 */
  border-bottom:             2px solid #9E8767;                      /* низ в тон палитры                             */
  padding:                   6px 10px;                               /* компактная высота                             */
}

/* Варианты оттенков шапки — как полноценные блоки со стилями                                                         */

table thead th.is-claro {
  background-color:          #D9CBB3;                                /* 🌿 мягче                                      */
  color:                     #1A1A1A;                                /* тёмный текст                                  */
  font-weight:               700;                                    /* жирный                                        */
  border-bottom-color:       #A89579;                                /* низ в тон рамке                               */
  text-shadow:               none;                                   /* без тени                                      */
}

table thead th.is-maduro {
  background-color:          #6E5B3F;                                /* 🍫 заметнее                                   */
  color:                     #F5F5F5;                                /* светлый текст                                 */
  font-weight:               700;                                    /* жирный                                        */
  border-bottom-color:       #A89579;                                /* низ в тон палитры                             */
  /* тень от базового варианта уместна — оставляем                                                                    */
}

table thead th.is-oscuro {
  background-color:          #3E2F1F;                                /* 🌑 максимально контрастно                     */
  color:                     #EDEDED;                                /* светлый текст                                 */
  font-weight:               700;                                    /* жирный                                        */
  border-bottom-color:       #8C7A61;                                /* низ в тон палитры                             */
  /* тень от базового варианта уместна — оставляем                                                                    */
}

/* ---------- Тело таблицы: тёмная гамма под светлый шрифт ----------                                                 */

table {
  border-collapse:           separate;                               /* независимые грани                             */
  border-spacing:            0;                                      /* без дополнительных зазоров                    */
  background:                #2C241B;                                /* общий тёмный фон таблицы                      */
  color:                     #E6E6E6;                                /* светлый текст по умолчанию                    */
}

table th,
table td {
  padding:                   6px 10px;                               /* удобочитаемая плотность                       */
  border-top:                1px solid #4B3F31;                      /* деликатные разделители                        */
}

/* «Зебра»: тёмная и ещё темнее                                                                                       */
table tbody tr:nth-child(odd)  td {
  background:                #33291F;                                /* темно-песочный                                */
}
table tbody tr:nth-child(even) td {
  background:                #292117;                                /* ещё темнее                                    */
}

/* Ссылки и инлайн-элементы в тёмной таблице — читаемо и в теме                                                       */
table a {
  color:                     #FFDFAF;                                /* тёплый акцент                                 */
  text-decoration:           underline;                              /* подчёркнуто                                   */
}
table code,
table kbd {
  color:                     #FFE9C7;                                /* мягкий светлый для инлайна                    */
}

/* Ховер строки — чуть теплее и светлее, без вырвиглаза                                                               */
table tbody tr:hover td {
  background:                #3B3024;                                /* деликатный hover                              */
}

/* --- Сетка карточек (2 в ряд) --- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Каждая карточка --- */
.card {
  background-color: var(--ws-color-block-background); /* Используем переменную темы */
  border: 1px solid var(--ws-color-line); /* Используем переменную темы */
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height: 100%; /* Чтобы карточки были одинаковой высоты */
  box-sizing: border-box;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: #B4936A; /* Акцентный цвет при наведении */
}

/* --- Иконка внутри карточки --- */
.card-icon {
  font-size: 3rem; /* Большая иконка */
  margin-bottom: 1rem;
  line-height: 1;
}

/* --- Метка уровня --- */
.card-level {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.level-beginner {
  background-color: #E6F4EA;
  color: #1E8E3E;
}

.level-advanced {
  background-color: #FCE8E6;
  color: #D93025;
}

.level-all {
  background-color: #E8F0FE;
  color: #1967D2;
}

/* --- Заголовок карточки --- */
.card-title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem !important; /* Перебиваем дефолтные отступы */
  color: var(--ws-color-text) !important;
  font-weight: 600;
  border: none !important; /* Убираем подчеркивание ссылок если есть */
}

.card a {
    text-decoration: none;
}

.card a:hover .card-title {
    color: #B4936A !important;
}

/* --- Описание --- */
.card-desc {
  font-size: 0.95rem;
  color: var(--ws-color-text-secondary);
  margin: 0 0 1.5rem !important;
  flex-grow: 1; /* Прижимает теги к низу */
  line-height: 1.5;
}

/* --- Теги-ссылки --- */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto; /* Прижимает к низу */
}

.card-tags a {
  font-size: 0.8rem;
  color: var(--ws-color-text-secondary);
  background-color: var(--ws-color-ui-background);
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.card-tags a:hover {
  background-color: #D9CBB3;
  color: #2B2B2B;
  border-color: #A89579;
}