/* === Секция === */
.kingdoms-section {
  background-color: #000;
  color: #fff;
  padding: 30px 0;
  text-align: center;
  margin: 0;
  overflow: visible; /* важно: не обрезаем контент */
}

.kingdoms-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

/* === Контейнер королевств === */
.kingdoms-list {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  margin: 0;
  background-color: #000;
  transition: all 0.5s ease;
}

/* === Блок королевства === */
.kingdom {
  position: relative;
  flex: 1;
  height: 180px;
  overflow: hidden;
  transition: flex 0.7s ease;
  cursor: pointer;
}

.kingdom:not(:last-child) {
  border-right: 20px solid #000;
}

/* === Поведение при наведении === */
.kingdoms-list:hover .kingdom {
  flex: 0.25;
}
.kingdoms-list:hover .kingdom:hover {
  flex: 0.5;
}

/* === Фон === */
.kingdom-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.kingdom-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.5s ease;
}
.kingdom:hover .kingdom-bg::after {
  background-color: rgba(0, 0, 0, 0.2);
}
.kingdom:hover .kingdom-bg {
  transform: scale(1.05);
}

/* === Символ === */
.kingdom-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.kingdom:hover .kingdom-symbol {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

/* === Информация === */
.kingdom-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 3;
  padding: 20px;
  text-align: center;
}
.kingdom:hover .kingdom-info {
  opacity: 1;
  transform: translateY(0);
}
.kingdom-info h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  font-weight: 500;
}
.kingdom-info p {
  font-size: 0.95rem;
  max-width: 260px;
  line-height: 1.4;
  color: #ddd;
}

/* === Адаптив для телефонов === */
@media (max-width: 900px) {
  .kingdoms-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .kingdom {
    flex: none;
    width: 100%;
    height: 200px;
    border-right: none;
    border-bottom: 20px solid #000;
  }

  .kingdom:last-child {
    border-bottom: none;
  }

  .kingdoms-list:hover .kingdom,
  .kingdoms-list:hover .kingdom:hover {
    flex: none;
  }

  /* немного крупнее текст, чтобы лучше читался */
  .kingdom-info h3 {
    font-size: 1.2rem;
  }
  .kingdom-info p {
    font-size: 0.9rem;
  }

  

  
}