/*
  site.css — общие стили сайта (токены, бренд, hero, карточки, cookie-тост).
  Подключается на всех страницах после bootstrap.min.css.
*/

:root {
  --radio-bg: #f7f8fb;
  --radio-surface: #ffffff;
  --radio-border: #e5e7eb;
  --radio-shadow: rgba(15, 23, 42, 0.08);
  --radio-shadow-strong: rgba(15, 23, 42, 0.12);
  --radio-text: #0f172a;
  --radio-muted: #6b7280;
  --brand-gradient: linear-gradient(135deg, #3763f4 0%, #8b3ce8 55%, #e33cd1 100%);
}

html[data-theme="dark"],
html[data-bs-theme="dark"] {
  --radio-bg: #0b1220;
  --radio-surface: #111827;
  --radio-border: #1f2937;
  --radio-shadow: rgba(0, 0, 0, 0.35);
  --radio-shadow-strong: rgba(0, 0, 0, 0.5);
  --radio-text: #e5e7eb;
  --radio-muted: #9ca3af;
}

body {
  background: var(--radio-bg);
  color: var(--radio-text);
}

.text-muted {
  color: var(--radio-muted) !important;
}

/* --- Навбар --- */

#mainNav {
  background: color-mix(in srgb, var(--radio-surface) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--radio-border);
}

.nav-icon {
  width: 16px;
  height: 16px;
  vertical-align: -0.125em;
  margin-right: 6px;
}

.dropdown-item .nav-icon {
  margin-right: 8px;
}

/* --- Бренд --- */

.btn-primary {
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  background-image: var(--brand-gradient);
  background-size: 130% 130%;
  background-position: 0% 50%;
  transition: background-position 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-image: var(--brand-gradient);
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(139, 60, 232, 0.35);
}

.btn-primary:active {
  background-image: var(--brand-gradient);
}

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Hero на главной --- */

.hero {
  padding: 72px 0 40px;
  text-align: center;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: -0.02em;
}

.hero .hero-subtitle {
  color: var(--radio-muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 640px;
  margin: 12px auto 28px;
}

.hero .hero-logo {
  width: 84px;
  height: 84px;
  margin-bottom: 24px;
}

.hero-stations {
  padding-bottom: 72px;
}

.hero-station-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--radio-border);
  background: var(--radio-surface);
  box-shadow: 0 6px 18px var(--radio-shadow);
  color: var(--radio-text);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  height: 100%;
}

.hero-station-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--radio-shadow-strong);
  color: var(--radio-text);
}

.hero-station-cover {
  /* Те же пропорции, что у обложек на странице радио (140x74) */
  width: 106px;
  height: 56px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--radio-border);
  background: var(--radio-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-station-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Собственное скругление, чтобы углы не перекрывали рамку контейнера */
  border-radius: inherit;
}

.hero-station-meta {
  min-width: 0;
  text-align: left;
}

.hero-station-meta .name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Фолбэк-обложка (логотип сайта): вписываем целиком, не обрезая */
img.cover-fallback {
  object-fit: contain !important;
  padding: 12%;
}

/* --- Карточки проектов --- */

.project-card {
  border-radius: 16px;
  border: 1px solid var(--radio-border);
  background: var(--radio-surface);
  box-shadow: 0 6px 18px var(--radio-shadow);
  padding: 16px;
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--radio-shadow-strong);
}

.project-card .project-cover {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  border-radius: 12px;
}

.project-detail-cover {
  border-radius: 16px;
  border: 1px solid var(--radio-border);
  box-shadow: 0 10px 24px var(--radio-shadow);
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* --- Cookie-тост --- */

.cookie-notification {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  width: auto;
  max-width: 400px;
  padding: 16px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--radio-border);
  background-color: var(--radio-surface);
  color: var(--radio-muted);
  font-size: 0.875rem;
  box-shadow: 0 12px 30px var(--radio-shadow-strong);
  z-index: 1050;
  animation: cookie-slide-in 0.35s ease;
}

.cookie-notification a {
  color: inherit;
}

@keyframes cookie-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 576px) {
  .cookie-notification {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* --- Доступность --- */

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .hero-station-card,
  .project-card {
    transition: none;
  }

  .cookie-notification {
    animation: none;
  }
}