/* ======================================
   CYBERPUNK BLOG STYLES
   ====================================== */

/* ======== 1. БАЗА И ФИКСЫ ======== */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

body {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  background: linear-gradient(135deg,
  #000000 0%,
  #3b0764 30%,
  #581c87 50%,
  #3b0764 70%,
  #000000 100%) !important;
  background-attachment: fixed !important;
}

/* Все секции — без горизонтального скролла */
header, main, footer, section, .max-w-6xl, .max-w-4xl, .max-w-3xl {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* ======== 2. АНИМИРОВАННЫЙ ФОН ======== */
.grid-background {
  position: fixed !important;
  inset: 0;
  opacity: 0.18 !important;
  pointer-events: none;
  background-image:
          linear-gradient(rgba(0, 255, 255, 0.8) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 255, 255, 0.8) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-move 20s linear infinite;
  z-index: 0;
}
@keyframes grid-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

.scan-line {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%;
  height: 3px !important;
  background: linear-gradient(to right, transparent, cyan, transparent);
  opacity: 0.4 !important;
  animation: scan-line 8s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ======== 3. НЕОН И АНИМАЦИИ ======== */
.neon-border { border: 1px solid #00ffff; box-shadow: 0 0 5px #00ffff, inset 0 0 5px #00ffff; }
.neon-text { color: #00ffff; text-shadow: 0 0 5px #00ffff, 0 0 25px #00ffff, 0 0 25px #00ffff; }

.pulse-border { animation: pulse-border 2s ease-in-out infinite; }
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, inset 0 0 10px #00ffff; }
  50% { box-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff, 0 0 60px #00ffff, inset 0 0 20px #00ffff; }
}

.glitch-effect { animation: glitch 0.3s infinite; }
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.cta-pulse { animation: button-pulse 2s ease-in-out infinite; }
@keyframes button-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.fade-in-up { animation: fade-in-up 0.6s ease-out forwards; opacity: 0; }
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ======== 4. КАРТОЧКИ ПОСТОВ ======== */
.post-card {
  transition: all 0.3s ease;
  max-width: 100%;
  overflow: hidden;
}
/* Важный фикс переполнения ссылок */
.post-card > a > div:first-child {
  max-width: 100%;
}

.post-card:hover {
  transform: translateY(-8px);
  border-color: #00ffff !important;
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2), 0 0 20px rgba(0, 255, 255, 0.2);
}
.post-card:hover h3 { color: #00ffff; }

/* ======== 5. КВАДРАТНАЯ СЕТКА ======== */
.aspect-square {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 */
  overflow: hidden;
  background: #000;
}

/* Фото — заполняют весь квадрат + Zoom эффект */
.aspect-square img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.post-card:hover .aspect-square img {
  transform: scale(1.05);
}

/* Видео и iframe — 16:9 по центру квадрата */
.aspect-square iframe,
.aspect-square video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border: 0;
}

/* Аудио/Файлы — центрируем содержимое */
.audio-wrapper,
.aspect-square > div:not(.relative) {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

/* Бейджи (кол-во фото) — поверх всего */
.aspect-square .absolute.top-3 {
  z-index: 10;
}

/* Старый класс (для страницы поста /page/slug) */
.aspect-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.aspect-video iframe,
.aspect-video video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* ======== 6. ГРИД СЕТКА ======== */
.posts-grid {
  display: grid !important;
  gap: 1.5rem !important;
}
@media (max-width: 767px) {
  .posts-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .posts-grid { grid-template-columns: repeat(2, minmax(300px, 400px)) !important; justify-content: center !important; }
}
@media (min-width: 1024px) {
  .posts-grid { grid-template-columns: repeat(3, minmax(340px, 420px)) !important; justify-content: center !important; }
}

/* ======== 7. ТИПОГРАФИКА И UI ======== */
.prose { line-height: 1.8; max-width: 100%; word-wrap: break-word; }
.prose p { margin-bottom: 1.5rem; color: #d1d5db; }
.prose a { color: #00ffff; text-decoration: underline; transition: all 0.3s; word-break: break-word; }
.prose a:hover { text-shadow: 0 0 10px #00ffff; }
.prose code { background: rgba(0, 255, 255, 0.1); padding: 0.2rem 0.4rem; border-radius: 0.25rem; color: #00ffff; font-size: 0.9em; }
.prose strong, .prose h2, .prose h3 { color: #00ffff; }
.prose-lg { font-size: 1.125rem; line-height: 1.9; }
.prose-invert {
  --tw-prose-body: #d1d5db;
  --tw-prose-headings: #00ffff;
  --tw-prose-links: #00ffff;
  --tw-prose-bold: #00ffff;
  --tw-prose-code: #00ffff;
}

pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }

/* Кастомный скроллбар */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb { background: rgba(0, 255, 255, 0.3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 255, 0.5); }
::selection { background: rgba(0, 255, 255, 0.3); color: #ffffff; }

[x-cloak] { display: none !important; }

/* UI элементы */
.mono-font { font-family: 'IBM Plex Mono', 'Courier New', monospace !important; }
.site-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.telegram-discussion-widget iframe { width: 100% !important; max-width: 100% !important; }

/* Кнопки фильтров (активное состояние) */
.filter-button.active {
  background: rgba(0, 255, 255, 0.2) !important;
  color: #00ffff !important;
  border-color: #00ffff !important;
  box-shadow: 0 0 5px #00ffff, inset 0 0 5px #00ffff !important;
}

/* Счетчик посетителей */
.visitor-counter {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.visitor-counter [x-text] { transition: all 0.3s ease; }

/* Hero Code Wrapper */
.code-wrapper, .code-line {
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

/* ======== 8. МОБИЛЬНЫЕ АДАПТАЦИИ (FINAL) ======== */
@media (max-width: 767px) {
  body { font-size: 14px; }

  .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

  .post-card h3 { font-size: 1.125rem; }

  /* Скролл для фильтров */
  .filter-bar .flex {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
  }
  .filter-button { white-space: nowrap; flex-shrink: 0; }

  /* Hero код */
  pre { font-size: 0.65rem !important; padding: 0.5rem; }

  /* --- КОМПАКТНАЯ ШАПКА (HEADER) --- */

  .site-header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Логотип */
  .site-header .w-12 {
    width: 2rem !important;
    height: 2rem !important;
  }
  .site-header .w-6 {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Название сайта */
  .site-header .text-2xl {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
  }

  .site-header .text-xs {
    font-size: 0.65rem !important;
    margin-top: -2px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 160px;
    display: block !important;
  }

  /* Навигация */
  .site-header nav {
    gap: 0.75rem !important;
  }
}