/* common/header/css/logo.css */
.logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo__link {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  transition: all var(--transition-base);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-button);
}

/* Десктопная версия логотипа */
.logo__image {
  height: var(--spacing-3xl);
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-base);
}

/* Мобильная версия логотипа */
.logo__image--mobile {
  display: none;
  height: var(--spacing-2xl);
}

.logo__link:hover .logo__image {
  transform: scale(1.05);
}

.logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  box-sizing: border-box;
  text-decoration: none;
  border: 2px solid var(--color-black);
  border-radius: var(--border-radius-button);
  background: transparent;
  transition: all var(--transition-base);
}

.logo__link:hover .logo-placeholder {
  background: var(--color-black);
}

.logo-text {
  display: inline-block;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  text-align: center;
  color: var(--color-black);
  transition: color var(--transition-base);
  font-family: var(--font-family-primary);
}

.logo-subtext {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-black);
  margin-top: 2px;
  text-align: center;
  font-weight: var(--font-weight-normal);
  text-transform: lowercase;
  transition: color var(--transition-base);
  font-family: var(--font-family-primary);
}

.logo__link:hover .logo-text,
.logo__link:hover .logo-subtext {
  color: var(--color-white);
}

/* Мобильная версия */
@media (max-width: 991px) {
  /* Скрываем десктопное лого и показываем мобильное */
  .logo__image:not(.logo__image--mobile) {
    display: none;
  }
  
  .logo__image--mobile {
    display: block;
    width: auto;
    object-fit: contain;
  }
  
  .logo-placeholder {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .logo-text {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  
  .logo-placeholder {
    padding: 3px 8px;
  }
  
  .logo-text {
    font-size: var(--font-size-sm);
  }
  
  .logo-subtext {
    font-size: 9px;
  }
}