/* =========================
   GRAMMAR LIBRARY
   ========================= */

body.grammar-library {
  background: #f7f2ea;
}

body.grammar-library .site-grid {
  background: #f7f2ea;
}

body.grammar-library .container-component {
  width: min(1180px, calc(100% - 40px));
  max-width: 1180px;
  margin-inline: auto;
  padding-top: 42px;
  padding-bottom: 70px;
}

/* Убираем технические сообщения Joomla */
body.grammar-library .alert-info,
body.grammar-library .cat-children > h3 {
  display: none;
}

/* Сетка карточек */
body.grammar-library .cat-children {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Карточка */
body.grammar-library .com-content-category-blog__child {
  position: relative;
  min-height: 185px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid #d9dde6;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(32, 48, 92, 0.08);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.grammar-library .com-content-category-blog__child:hover {
  transform: translateY(-4px);
  border-color: #a94935;
  box-shadow: 0 14px 32px rgba(32, 48, 92, 0.14);
}

/* Маленький знак вверху карточки */
body.grammar-library .com-content-category-blog__child::before {
  display: flex;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f2e6df;
  color: #963f2e;
  font-size: 17px;
  font-weight: 700;
}

body.grammar-library .com-content-category-blog__child:nth-of-type(1)::before {
  content: "T";
}

body.grammar-library .com-content-category-blog__child:nth-of-type(2)::before {
  content: "V";
}

body.grammar-library .com-content-category-blog__child:nth-of-type(3)::before {
  content: "IF";
}

body.grammar-library .com-content-category-blog__child:nth-of-type(4)::before {
  content: "a";
}

body.grammar-library .com-content-category-blog__child:nth-of-type(5)::before {
  content: "A";
}

body.grammar-library .com-content-category-blog__child:nth-of-type(6)::before {
  content: "in";
}

body.grammar-library .com-content-category-blog__child:nth-of-type(7)::before {
  content: "↔";
}

/* Заголовки карточек */
body.grammar-library .com-content-category-blog__child .item-title {
  margin: 0;
  line-height: 1.25;
}

body.grammar-library .com-content-category-blog__child .item-title a {
  color: #29386f;
  font-size: 1.28rem;
  font-weight: 700;
  text-decoration: none;
}

body.grammar-library .com-content-category-blog__child .item-title a::after {
  content: "Explore topics →";
  display: block;
  margin-top: 18px;
  color: #963f2e;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Планшет */
@media (max-width: 900px) {
  body.grammar-library .cat-children {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Телефон */
@media (max-width: 620px) {
  body.grammar-library .container-component {
    width: min(100% - 28px, 1180px);
    padding-top: 26px;
  }

  body.grammar-library .cat-children {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.grammar-library .com-content-category-blog__child {
    min-height: 160px;
    padding: 24px;
  }
}
/* Заголовок страницы Grammar */
body.grammar-library .grammar-hero {
  width: min(1060px, calc(100% - 40px));
  margin: 34px auto 8px;
}

body.grammar-library .grammar-hero h1 {
  margin: 0;
  color: #18294f;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}

body.grammar-library .grammar-hero p {
  margin: 12px 0 28px;
  color: #626878;
  font-size: 1.08rem;
}

body.grammar-library .grammar-accent-line {
  position: relative;
  height: 3px;
  background: #a94935;
  border-radius: 3px;
}

@media (max-width: 620px) {
  body.grammar-library .grammar-hero {
    width: calc(100% - 28px);
    margin-top: 24px;
  }
}
body.grammar-library .grammar-accent-line {
  position: relative;
}

body.grammar-library .grammar-unicorn {
  position: absolute;
  right: 0;
  bottom: -37px;
  width: 115px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transform: translateX(42%);
}

@media (max-width: 620px) {
  body.grammar-library .grammar-unicorn {
    width: 82px;
    bottom: -10px;
    transform: translateX(32%);
  }
}
/* =========================
   GRAMMAR EXERCISE CATALOGUE
   ========================= */

/* Две карточки упражнений в ряд */
body.grammar-library .com-content-category-blog__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

body.grammar-library .com-content-category-blog__item {
  display: flex;
  margin: 0;
}

/* Карточка упражнения */
body.grammar-library .grammar-exercise-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 190px;
  padding: 26px 28px;
  background: #ffffff;
  border: 1px solid #d9dde6;
  border-top: 4px solid #a94935;
  border-radius: 14px;
  box-shadow: 0 9px 24px rgba(32, 48, 92, 0.08);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.grammar-library .grammar-exercise-card:hover {
  transform: translateY(-4px);
  border-color: #a94935;
  box-shadow: 0 14px 30px rgba(32, 48, 92, 0.14);
}

/* Теги */
body.grammar-library .grammar-exercise-tags {
  margin-bottom: 22px;
}

body.grammar-library .grammar-exercise-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.grammar-library .grammar-exercise-tags li {
  margin: 0;
}

body.grammar-library .grammar-exercise-tags a,
body.grammar-library .grammar-exercise-tags .btn {
  padding: 6px 10px;
  background: #f3e6df;
  border: 0;
  border-radius: 999px;
  color: #8f3929;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

/* Название */
body.grammar-library .grammar-exercise-title {
  margin: 0 0 20px;
  line-height: 1.25;
}

body.grammar-library .grammar-exercise-title a {
  color: #263a77;
  font-size: 1.42rem;
  font-weight: 750;
  text-decoration: none;
}

body.grammar-library .grammar-exercise-title a:hover {
  color: #a94935;
}

/* Ссылка внизу карточки */
body.grammar-library .grammar-exercise-start {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  color: #a13f2d;
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
}

body.grammar-library .grammar-exercise-start:hover {
  text-decoration: underline;
}

/* Телефон */
@media (max-width: 700px) {
  body.grammar-library .com-content-category-blog__items {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.grammar-library .grammar-exercise-card {
    min-height: 165px;
    padding: 23px;
  }
}
/* =========================
   LIBRARY BREADCRUMBS
   Grammar / Vocabulary / Listening / My Practice
   ========================= */

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .container-breadcrumbs {
  width: min(1060px, calc(100% - 40px));
  margin: 20px auto 0;
  padding: 0;
}

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .mod-breadcrumbs,

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .breadcrumb {
  font-size: 0.82rem;
  color: #777d8b;
}

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .breadcrumb a {
  color: #29386f;
  font-weight: 600;
  text-decoration: none;
  text-transform: capitalize;
}

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .breadcrumb a:hover {
  color: #a94935;
  text-decoration: underline;
}

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .breadcrumb-item.active {
  color: #777d8b;
  text-transform: capitalize;
}

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .breadcrumb-item + .breadcrumb-item::before {
  color: #a94935;
}

/* Убираем значки Home / Location */
body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .mod-breadcrumbs .icon-location,

body:is(
  .grammar-library,
  .vocabulary-library,
  .listening-library,
  .my-practice-library
) .mod-breadcrumbs .icon-home {
  display: none;
}

@media (max-width: 620px) {

  body:is(
    .grammar-library,
    .vocabulary-library,
    .listening-library,
    .my-practice-library
  ) .container-breadcrumbs {
    width: calc(100% - 28px);
    margin-top: 14px;
  }

  body:is(
    .grammar-library,
    .vocabulary-library,
    .listening-library,
    .my-practice-library
  ) .breadcrumb {
    font-size: 0.76rem;
  }
}
/* =========================
   GRAMMAR CARD INFORMATION
   ========================= */

/* Убираем прежние буквы и символы */
body.grammar-library
.com-content-category-blog__child::before,
body.grammar-library
.com-content-category-blog__child
.item-title::before {
  display: none !important;
  content: none !important;
}

/* Место над названием карточки */
body.grammar-library .grammar-card-meta {
  position: relative;
  min-height: 34px;
  margin-bottom: 18px;
}

/* Кнопка со списком тем */
body.grammar-library .grammar-topic-menu {
  position: relative;
  display: inline-block;
  z-index: 20;
}

body.grammar-library .grammar-topic-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: #edf0f7;
  border: 1px solid #d7ddeb;
  border-radius: 999px;
  color: #29386f;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

body.grammar-library
.grammar-topic-menu summary::-webkit-details-marker {
  display: none;
}

body.grammar-library .grammar-topic-menu summary::after {
  content: "⌄";
  color: #a94935;
  font-size: 1rem;
  line-height: 0.8;
  transition: transform 0.2s ease;
}

body.grammar-library
.grammar-topic-menu[open] summary::after {
  transform: rotate(180deg);
}

body.grammar-library .grammar-topic-menu summary:hover,
body.grammar-library .grammar-topic-menu[open] summary {
  background: #f5e9e5;
  border-color: #c98472;
  color: #8f3828;
}

/* Выпадающее окно со всеми темами */
body.grammar-library .grammar-topic-popover {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 100;
  width: max-content;
  min-width: 245px;
  max-width: min(340px, calc(100vw - 50px));
  max-height: 330px;
  overflow-y: auto;
  margin: 0;
  padding: 9px;
  background: #ffffff;
  border: 1px solid #d9dde6;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(32, 48, 92, 0.18);
  list-style: none;
}

body.grammar-library .grammar-topic-popover li {
  margin: 0;
  padding: 0;
}

body.grammar-library .grammar-topic-popover a {
  display: block;
  padding: 9px 11px;
  border-radius: 7px;
  color: #26366d;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

body.grammar-library .grammar-topic-popover a:hover {
  background: #f7f2ea;
  color: #a94935;
}

/* Количество упражнений внутри разделов */
body.grammar-library .grammar-exercise-count,
body.grammar-library .grammar-topic-count {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: #f5e9e5;
  border: 1px solid #e2c5bc;
  border-radius: 999px;
  color: #963f2e;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

/* Убираем старый верхний отступ, предназначенный для кружка */
body.grammar-library
.com-content-category-blog__child
.item-title {
  margin-top: 0;
}
/* Открытый список Grammar всегда выше остальных карточек */

body.grammar-library .cat-children {
  position: relative;
  overflow: visible;
}

body.grammar-library .com-content-category-blog__child {
  position: relative;
  z-index: 1;
  overflow: visible;
}

body.grammar-library
.com-content-category-blog__child:has(.grammar-topic-menu[open]) {
  z-index: 1000;
}

/* Пока список открыт, карточка не подпрыгивает при hover */
body.grammar-library
.com-content-category-blog__child:has(.grammar-topic-menu[open]):hover {
  transform: none;
}

body.grammar-library .grammar-topic-menu[open] {
  position: relative;
  z-index: 1100;
}

body.grammar-library .grammar-topic-popover {
  z-index: 1200;
}
/* =========================
   VOCABULARY LIBRARY
   ========================= */

body.vocabulary-library {
  background: #f7f2ea;
}

body.vocabulary-library .site-grid {
  background: #f7f2ea;
}

body.vocabulary-library .container-component {
  width: min(1100px, calc(100% - 40px));
  max-width: 1100px;
  margin-inline: auto;
  padding-top: 34px;
  padding-bottom: 70px;
}

/* Убираем технические элементы Joomla */
body.vocabulary-library .alert-info,
body.vocabulary-library .cat-children > h3 {
  display: none;
}

/* Заголовок */
body.vocabulary-library .vocabulary-hero {
  width: min(1060px, calc(100% - 40px));
  margin: 34px auto 8px;
}

body.vocabulary-library .vocabulary-hero h1 {
  margin: 0;
  color: #18294f;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}

body.vocabulary-library .vocabulary-hero p {
  margin: 12px 0 28px;
  color: #626878;
  font-size: 1.08rem;
}

body.vocabulary-library .vocabulary-accent-line {
  position: relative;
  height: 3px;
  background: #a94935;
  border-radius: 3px;
}

body.vocabulary-library .vocabulary-unicorn {
  position: absolute;
  right: 0;
  bottom: -37px;
  width: 115px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transform: translateX(42%);
}

/* Сетка 2 × 2 */
body.vocabulary-library .cat-children {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  overflow: visible;
}

/* Карточка */
body.vocabulary-library .com-content-category-blog__child {
  position: relative;
  min-height: 205px;
  padding: 30px 30px 64px;
  background: #ffffff;
  border: 1px solid #d9dde6;
  border-top: 4px solid #a94935;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(32, 48, 92, 0.08);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.vocabulary-library .com-content-category-blog__child:hover {
  transform: translateY(-4px);
  border-color: #a94935;
  box-shadow: 0 14px 32px rgba(32, 48, 92, 0.14);
}

/* Заголовок карточки */
body.vocabulary-library
.com-content-category-blog__child .item-title {
  margin: 0 0 16px;
  font-size: 1.22rem;
  line-height: 1.35;
}

body.vocabulary-library
.com-content-category-blog__child .item-title a {
  color: #19316f;
  font-weight: 800;
  text-decoration: none;
}

/* Вся карточка становится ссылкой */
body.vocabulary-library
.com-content-category-blog__child .item-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Описание */
body.vocabulary-library
.com-content-category-blog__description {
  margin: 0;
  color: #666d7b;
  font-size: 0.96rem;
  line-height: 1.55;
}

body.vocabulary-library
.com-content-category-blog__description p {
  margin: 0;
}

/* Нижняя подпись */
body.vocabulary-library
.com-content-category-blog__child::after {
  content: "Explore practice →";
  position: absolute;
  left: 30px;
  bottom: 26px;
  color: #a94935;
  font-size: 0.85rem;
  font-weight: 700;
  pointer-events: none;
}

/* Планшет и телефон */
@media (max-width: 700px) {
  body.vocabulary-library .cat-children {
    grid-template-columns: 1fr;
  }

  body.vocabulary-library .vocabulary-unicorn {
    width: 82px;
    bottom: -37px;
    transform: translateX(32%);
  }

  body.vocabulary-library .container-component {
    width: calc(100% - 28px);
  }
}
/* =========================
   MY PRACTICE
   ========================= */

body.my-practice-library {
  background: #f7f2ea;
}

body.my-practice-library .site-grid {
  background: #f7f2ea;
}

body.my-practice-library .container-component {
  width: min(1060px, calc(100% - 40px));
  max-width: 1060px;
  margin-inline: auto;
  padding-top: 36px;
  padding-bottom: 70px;
}

/* Header */

body.my-practice-library .practice-hero {
  width: min(1060px, calc(100% - 40px));
  margin: 34px auto 8px;
}

body.my-practice-library .practice-hero h1 {
  margin: 0;
  color: #18294f;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}

body.my-practice-library .practice-hero p {
  margin: 12px 0 28px;
  color: #626878;
  font-size: 1.08rem;
}

body.my-practice-library .practice-accent-line {
  position: relative;
  height: 3px;
  background: #a94935;
  border-radius: 3px;
}

body.my-practice-library .practice-unicorn {
  position: absolute;
  right: 0;
  bottom: -37px;
  width: 115px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transform: translateX(42%);
}

/* Standard Joomla category blog → cards */

body.my-practice-library .com-content-category-blog__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

body.my-practice-library .com-content-category-blog__item {
  margin: 0;
  padding: 30px;
  background: #fff;
  border: 1px solid #d9dde6;
  border-top: 4px solid #a94935;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(32, 48, 92, 0.09);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.my-practice-library .com-content-category-blog__item:hover {
  transform: translateY(-4px);
  border-color: #a94935;
  box-shadow: 0 15px 34px rgba(32, 48, 92, 0.15);
}

body.my-practice-library .page-header h2 {
  margin: 0 0 15px;
  font-size: 1.25rem;
  line-height: 1.35;
}

body.my-practice-library .page-header h2 a {
  color: #19316f;
  font-weight: 800;
  text-decoration: none;
}

body.my-practice-library .page-header h2 a:hover {
  color: #a94935;
}

body.my-practice-library .com-content-category-blog__item p {
  color: #666d7b;
  line-height: 1.55;
}

body.my-practice-library .readmore a {
  color: #a94935;
  font-weight: 700;
  text-decoration: none;
}

body.my-practice-library .readmore a:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  body.my-practice-library .com-content-category-blog__items {
    grid-template-columns: 1fr;
  }

  body.my-practice-library .container-component,
  body.my-practice-library .practice-hero {
    width: calc(100% - 28px);
  }

  body.my-practice-library .practice-unicorn {
    width: 82px;
    bottom: -10px;
    transform: translateX(32%);
  }
}
/* MY PRACTICE — replace Joomla Read More text */

body.my-practice-library .readmore a {
  font-size: 0;
  color: #a94935;
  font-weight: 700;
  text-decoration: none;
}

body.my-practice-library .readmore a::after {
  content: "Start practice →";
  font-size: 0.87rem;
}

body.my-practice-library .readmore a:hover {
  text-decoration: underline;
}
/* =========================
   GLOBAL LEVEL FILTER
   ========================= */

.aps-level-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  margin: 20px 0 28px;
}

.aps-level-filter__label {
  margin-right: 4px;

  color: #18294f;
  font-size: 0.92rem;
  font-weight: 800;
}

.aps-level-filter__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;

  border: 1px solid #cfd4df;
  border-radius: 999px;

  background: #fff;
  color: #19316f;

  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;

  text-decoration: none;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.aps-level-filter__link:hover {
  border-color: #a94935;
  color: #a94935;
  text-decoration: none;
  transform: translateY(-1px);
}

.aps-level-filter__link.is-active {
  border-color: #a94935;
  background: #a94935;
  color: #fff;
}

.aps-level-filter__link.is-active:hover {
  color: #fff;
}

@media (max-width: 600px) {
  .aps-level-filter {
    gap: 7px;
    margin: 16px 0 24px;
  }

  .aps-level-filter__label {
    flex-basis: 100%;
    margin-bottom: 2px;
  }

  .aps-level-filter__link {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}
/* =========================
   HOME — VOCABULARY TRAINER
   sidebar
   ========================= */

.home-vocab-tool {
  box-sizing: border-box;
  width: 100%;
  padding: 18px 18px 20px;

  border: 1px solid #d9dde5;
  border-radius: 5px;

  background: #fff;
  text-align: center;
}

.home-vocab-tool__emblem {
  display: block;
  width: 145px;
  height: auto;

  margin: 0 auto 12px;

  transform: scale(1.6);
  transform-origin: center center;
}

.home-vocab-tool__title {
  margin: 0 0 8px;

  color: #18294f;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.home-vocab-tool__text {
  margin: 0 0 13px;

  color: #333;
  font-size: 0.9rem;
  line-height: 1.4;
}

.home-vocab-tool__link {
  color: #a94935;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

.home-vocab-tool__link:hover {
  color: #823625;
  text-decoration: underline;
}
/* ==========================================
   HOME — TRY SOMETHING RANDOM SLOT MACHINE
   ========================================== */

.aps-random-slots {
  margin: 30px 0 20px;
  text-align: center;
}

.aps-random-slots__heading {
  margin: 0 0 18px;

  color: #18386f;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
}


/* THREE REELS */

.aps-random-slots__machine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  margin-bottom: 18px;
}

.aps-random-slots__reel {
  overflow: hidden;

  border: 2px solid #d7dce5;
  border-radius: 8px;

  background: #fff;
}

.aps-random-slots__window {
  display: flex;
  align-items: stretch;
  justify-content: center;

  min-height: 175px;
  padding: 18px;

  transition: opacity 0.12s ease;
}


/* INITIAL ? */

.aps-random-slots__question {
  align-self: center;

  color: #18386f;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
}


/* SPINNING EFFECT */

.aps-random-slots__window.is-spinning {
  animation: aps-slot-shake 0.12s linear infinite;
}

.aps-random-slots__window.is-spinning .aps-random-card {
  opacity: 0.55;
  filter: blur(0.5px);
}

@keyframes aps-slot-shake {

  0% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(-5px);
  }
}


/* EXERCISE CARD */

.aps-random-card {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  text-align: left;
}

.aps-random-card__tags {
  margin-bottom: 12px;
}

.aps-random-card__title {
  margin: 0 0 18px;

  color: #18386f;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
}

.aps-random-card__title a {
  color: inherit;
  text-decoration: none;
}

.aps-random-card__title a:hover {
  text-decoration: underline;
}

.aps-random-card__start {
  margin-top: auto;

  color: #a94935;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.aps-random-card__start:hover {
  color: #823625;
  text-decoration: underline;
}


/* BUTTON */

.aps-random-slots__button {
  padding: 9px 28px;

  border: 0;
  border-radius: 5px;

  background: #a94935;
  color: #fff;

  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;

  cursor: pointer;
}

.aps-random-slots__button:hover {
  background: #873a2b;
}

.aps-random-slots__button:disabled {
  opacity: 0.65;
  cursor: default;
}


/* MOBILE */

@media (max-width: 700px) {

  .aps-random-slots__machine {
    grid-template-columns: 1fr;
  }

  .aps-random-slots__window {
    min-height: 145px;
  }
}
/* ==============================
   TRY SOMETHING RANDOM — BORDER
   ============================== */

/* Весь блок */
.aps-random-slots {
  padding: 24px 18px 26px;
  border: 1px solid #d5dbe4;
  border-radius: 10px;
  background: #fff;
}

/* Три барабана */
.aps-random-slots__reel {
  border: 1px solid #cfd6df;
  border-radius: 8px;
  background: #fff;
}
/* RANDOM — colour */
.aps-random-slots {
  background: #f8f1e7;
  border-color: #d8c8b5;
}

.aps-random-slots__reel {
  background: #fffdf9;
  border-color: #c7d0dc;
}
/* =========================
   VOCABULARY EXERCISE CATALOGUE
   ========================= */

/* Две карточки упражнений в ряд */
body.vocabulary-library .com-content-category-blog__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

body.vocabulary-library .com-content-category-blog__item {
  display: flex;
  margin: 0;
}

/* Карточка упражнения */
body.vocabulary-library .vocabulary-exercise-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 190px;
  padding: 26px 28px;

  background: #ffffff;
  border: 1px solid #d9dde6;
  border-top: 4px solid #a94935;
  border-radius: 14px;

  box-shadow: 0 9px 24px rgba(32, 48, 92, 0.08);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.vocabulary-library .vocabulary-exercise-card:hover {
  transform: translateY(-4px);
  border-color: #a94935;
  box-shadow: 0 14px 30px rgba(32, 48, 92, 0.14);
}

/* Теги */
body.vocabulary-library .vocabulary-exercise-tags {
  margin-bottom: 22px;
}

body.vocabulary-library .vocabulary-exercise-tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin: 0;
  padding: 0;
  list-style: none;
}

body.vocabulary-library .vocabulary-exercise-tags li {
  margin: 0;
}

body.vocabulary-library .vocabulary-exercise-tags a,
body.vocabulary-library .vocabulary-exercise-tags .btn {
  padding: 6px 10px;

  background: #f3e6df;
  border: 0;
  border-radius: 999px;

  color: #8f3929;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

/* Название упражнения */
body.vocabulary-library .vocabulary-exercise-title {
  margin: 0 0 20px;
  line-height: 1.25;
}

body.vocabulary-library .vocabulary-exercise-title a {
  color: #263a77;
  font-size: 1.42rem;
  font-weight: 750;
  text-decoration: none;
}

body.vocabulary-library .vocabulary-exercise-title a:hover {
  color: #a94935;
}

/* Start exercise */
body.vocabulary-library .vocabulary-exercise-start {
  display: inline-flex;
  align-items: center;

  width: fit-content;
  margin-top: auto;

  color: #a13f2d;
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
}

body.vocabulary-library .vocabulary-exercise-start:hover {
  text-decoration: underline;
}

/* Телефон */
@media (max-width: 700px) {
  body.vocabulary-library .com-content-category-blog__items {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.vocabulary-library .vocabulary-exercise-card {
    min-height: 165px;
    padding: 23px;
  }
}
/* =========================
   LISTENING LIBRARY
   ========================= */

body.listening-library {
  background: #f7f2ea;
}

body.listening-library .site-grid {
  background: #f7f2ea;
}

body.listening-library .container-component {
  width: min(1100px, calc(100% - 40px));
  max-width: 1100px;
  margin-inline: auto;
  padding-top: 34px;
  padding-bottom: 70px;
}

/* Убираем технические элементы Joomla */
body.listening-library .alert-info,
body.listening-library .cat-children > h3 {
  display: none;
}

/* Header */

body.listening-library .listening-hero {
  width: min(1060px, calc(100% - 40px));
  margin: 34px auto 8px;
}

body.listening-library .listening-hero h1 {
  margin: 0;
  color: #18294f;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}

body.listening-library .listening-hero p {
  margin: 12px 0 28px;
  color: #626878;
  font-size: 1.08rem;
}

body.listening-library .listening-accent-line {
  position: relative;
  height: 3px;
  background: #a94935;
  border-radius: 3px;
}

body.listening-library .listening-unicorn {
  position: absolute;
  right: 0;
  bottom: -37px;
  width: 115px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transform: translateX(42%);
}


/* =========================
   LISTENING CATEGORY CARDS
   ========================= */

body.listening-library .cat-children {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  overflow: visible;
}

body.listening-library .com-content-category-blog__child {
  position: relative;
  min-height: 205px;
  padding: 30px 30px 64px;

  background: #ffffff;
  border: 1px solid #d9dde6;
  border-top: 4px solid #a94935;
  border-radius: 14px;

  box-shadow: 0 10px 26px rgba(32, 48, 92, 0.08);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.listening-library .com-content-category-blog__child:hover {
  transform: translateY(-4px);
  border-color: #a94935;
  box-shadow: 0 14px 32px rgba(32, 48, 92, 0.14);
}

body.listening-library
.com-content-category-blog__child .item-title {
  margin: 0 0 16px;
  font-size: 1.22rem;
  line-height: 1.35;
}

body.listening-library
.com-content-category-blog__child .item-title a {
  color: #19316f;
  font-weight: 800;
  text-decoration: none;
}

/* Вся карточка кликабельная */

body.listening-library
.com-content-category-blog__child .item-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Описание */

body.listening-library
.com-content-category-blog__description {
  margin: 0;
  color: #666d7b;
  font-size: 0.96rem;
  line-height: 1.55;
}

body.listening-library
.com-content-category-blog__description p {
  margin: 0;
}

/* Нижняя подпись */

body.listening-library
.com-content-category-blog__child::after {
  content: "Explore listening →";
  position: absolute;
  left: 30px;
  bottom: 26px;

  color: #a94935;
  font-size: 0.85rem;
  font-weight: 700;

  pointer-events: none;
}


/* MOBILE */

@media (max-width: 700px) {

  body.listening-library .cat-children {
    grid-template-columns: 1fr;
  }

  body.listening-library .listening-unicorn {
    width: 82px;
    bottom: -37px;
    transform: translateX(32%);
  }

  body.listening-library .container-component,
  body.listening-library .listening-hero {
    width: calc(100% - 28px);
  }
}
/* =========================
   HOME — IRREGULAR VERBS TRAINER
   sidebar
   ========================= */

.home-irregular-tool {
  box-sizing: border-box;
  width: 100%;
  padding: 18px 18px 20px;

  border: 1px solid #d9dde5;
  border-radius: 5px;

  background: #fff;
  text-align: center;
}

.home-irregular-tool__emblem {
  display: block;
  width: 145px;
  height: auto;

  margin: 0 auto 12px;

  transform: scale(1.1);
  transform-origin: center center;

}

.home-irregular-tool__title {
  margin: 0 0 8px;

  color: #18294f;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.home-irregular-tool__text {
  margin: 0 0 13px;

  color: #333;
  font-size: 0.9rem;
  line-height: 1.4;
}

.home-irregular-tool__link {
  color: #a94935;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
}

.home-irregular-tool__link:hover {
  color: #823625;
  text-decoration: underline;
}
/* =========================
   LISTENING — ARTICLE CARDS
   ========================= */

body.listening-library
.container-component ol:not(.breadcrumb):not(.mod-breadcrumbs) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

body.listening-library
.container-component ol:not(.breadcrumb):not(.mod-breadcrumbs) > li {
  position: relative;
  min-height: 165px;
  margin: 0;
  padding: 28px 28px 62px;

  background: #ffffff;
  border: 1px solid #d9dde6;
  border-top: 4px solid #a94935;
  border-radius: 14px;

  box-shadow: 0 10px 26px rgba(32, 48, 92, 0.08);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.listening-library
.container-component ol:not(.breadcrumb):not(.mod-breadcrumbs) > li:hover {
  transform: translateY(-4px);
  border-color: #a94935;
  box-shadow: 0 14px 32px rgba(32, 48, 92, 0.14);
}

body.listening-library
.container-component ol:not(.breadcrumb):not(.mod-breadcrumbs) > li > a {
  color: #19316f;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

/* Кликабельна вся карточка */
body.listening-library
.container-component ol:not(.breadcrumb):not(.mod-breadcrumbs) > li > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Подпись снизу */
body.listening-library
.container-component ol:not(.breadcrumb):not(.mod-breadcrumbs) > li::after {
  content: "Start listening →";
  position: absolute;
  left: 28px;
  bottom: 24px;

  color: #a94935;
  font-size: 0.85rem;
  font-weight: 700;

  pointer-events: none;
}

@media (max-width: 700px) {
  body.listening-library
  .container-component ol:not(.breadcrumb):not(.mod-breadcrumbs) {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}