/**
 * Archives Styles
 * Объединенные стили для всех типов архивов: категории, теги, авторы, даты
 */

/* ========================================
   ЗАГОЛОВКИ АРХИВОВ
   ======================================== */

.page-header {
  padding: 10px 0;
}

/* 
 * .page-title перенесен в style.css как глобальный стиль
 * для использования на всем сайте с H1 и H2
 */

/* ========================================
   ЗАГОЛОВОК АВТОРА С АВАТАРОМ
   ======================================== */

.author-page-title {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 25px;
}

.author-page-title__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-page-title__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.author-page-title__avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-family: 'Rainer', sans-serif;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
}

.author-page-title__avatar-fallback--icon {
  background-color: #666;
}

.author-page-title__avatar-icon {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.author-page-title__name {
  flex: 1;
}

/* ========================================
   КОНТЕЙНЕР ПОСТОВ
   ======================================== */

.posts-container {
  margin-bottom: 40px;
  overflow: visible !important; /* Важно для работы sticky баннеров */
}

/* ========================================
   СТИЛИ КАРТОЧЕК ПОСТОВ НА СТРАНИЦАХ АВТОРА И КАТЕГОРИИ
   ======================================== */

/* Цвет текста в карточках постов */
.author .main-article__author,
.category .main-article__author,
.archive .main-article__author {
  color: #6D6D6D;
}

.author .main-article__hashtag,
.category .main-article__hashtag,
.archive .main-article__hashtag {
  color: #6D6D6D;
}

/* Заголовки остаются черными */
.author .main-article__title,
.category .main-article__title,
.archive .main-article__title {
  color: #000000;
}



/* Hover эффект для ссылок - только для той, на которую навели */
.author .main-article__hashtag a:hover,
.category .main-article__hashtag a:hover,
.archive .main-article__hashtag a:hover {
  color: #000000;
  text-decoration: none;
}

.author .main-article__author a:hover,
.category .main-article__author a:hover,
.archive .main-article__author a:hover {
  color: #000000;
  text-decoration: none;
}

/* ========================================
   HOVER ЭФФЕКТЫ ДЛЯ КАРТИНОК ПОСТОВ
   ======================================== */

/* Контейнеры для картинок с overflow hidden */
.author .main-article__image,
.category .main-article__image,
.archive .main-article__image {
  overflow: hidden;
  position: relative;
}

/* Сами картинки */
.author .main-article__image img,
.category .main-article__image img,
.archive .main-article__image img {
  transition: transform 0.3s ease;
  transform-origin: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover эффект - только масштабирование картинки внутри контейнера */
.author .main-article:hover .main-article__image img,
.category .main-article:hover .main-article__image img,
.archive .main-article:hover .main-article__image img {
  transform: scale(1.05);
}

/* На архивах/категориях/авторе: пропорции вертикальной картинки как на десктопе на планшете; на мобилке — 330/410, на узком — 310/430 */
@media (max-width: 768px) {
  .author .main-article__image--vertical,
  .category .main-article__image--vertical,
  .archive .main-article__image--vertical {
    aspect-ratio: 330 / 410;
  }
}

@media (max-width: 360px) {
  .author .main-article__image--vertical,
  .category .main-article__image--vertical,
  .archive .main-article__image--vertical {
    aspect-ratio: 310 / 430;
  }
}

/* ========================================
   АДАПТИВНОСТЬ
   ======================================== */

/* Страницы архивов (рубрики, теги, даты и т.д.): название крупнее на мобилке */
@media (max-width: 768px) {
  .category .page-title,
  .tag .page-title,
  .archive .page-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .author-page-title {
    gap: 16px;
  }

  .author-page-title__avatar {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .author-page-title {
    gap: 12px;
  }

  .author-page-title__avatar {
    width: 50px;
    height: 50px;
  }
}

/* ========================================
   СПЕЦИАЛЬНАЯ РАСКЛАДКА ДЛЯ ТЕГА VIDEO
   ======================================== */

/**
 * Для тега "video" (/tag/video/) используется специальная раскладка:
 * - Первый пост - большой на всю ширину
 * - Остальные посты - каждый на полную ширину левой колонки, один под другим
 * - Справа - баннер (sticky)
 */

.posts-section--video-tag {
    margin-bottom: 40px;
}


/* Контент для video-тега занимает левую колонку с max-width 715px */
.posts-section--video-tag .posts-section__content {
    display: flex;
    flex-direction: column;
    gap: 0 40px; /* Расстояние между постами */
    max-width: 715px; /* Максимальная ширина блока с постами */
    min-width: 0;
}

.posts-section__full-width-post {
    margin-bottom: 0; /* Отступы задаются через gap в родителе */
    width: 100%;
}

/* Стили для постов на всю ширину в video-теге */
.main-article--full-width-video {
    display: block;
    width: 100%;
    margin-bottom: 60px;
}

.posts-section__full-width-post:last-child .main-article--full-width-video  {
    margin-bottom: 0;
}

/* Ссылка внутри поста video-тега */
.main-article--full-width-video > a {
    display: block;
    width: 100%;
    text-decoration: none;
}

.main-article--full-width-video .main-article__image {
    width: 100%;
    max-width: 100%;
    display: block;
}

.main-article--full-width-video .main-article__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Видео в постах video-тега - на всю ширину левой колонки */
.main-article--full-width-video .main-article__image .youtube-embed,
.main-article--full-width-video .main-article__image .vk-video-embed {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin: 0;
}

.main-article--full-width-video .main-article__image .youtube-embed__iframe,
.main-article--full-width-video .main-article__image .youtube-embed iframe,
.main-article--full-width-video .main-article__image .vk-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.main-article--full-width-video .main-article__theme {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.main-article--full-width-video .main-article__title {
    font-family: 'Panama', sans-serif;
    font-size: 48px;
    line-height: 54px;
    margin-bottom: 0;
}

.main-article--full-width-video .main-article__title a {
    color: #000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
/* Два больших поста друг за другом */
.posts-section__large-post {
  margin-bottom: 60px;
}
.main-article--full-width-video .main-article__title a:hover {
    opacity: 0.9;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
  .posts-section__large-post {
    margin-bottom: 40px;
  }
    .posts-section--video-tag .posts-section__content {
        gap: 0 30px; /* Меньше расстояние на мобильных */
    }
    
    .main-article--full-width-video .main-article__title {
        font-size: 28px;
        line-height: 34px;
    }
    
    /* Видео на мобильных */
    .main-article--full-width-video .main-article__image .youtube-embed,
    .main-article--full-width-video .main-article__image .vk-video-embed {
        padding-bottom: 56.25%; /* Сохраняем 16:9 */
    }
}

/* На мобильных баннер скрывается (как в обычной раскладке) */
@media (max-width: 1150px) {
    .posts-section--video-tag .posts-section__sidebar {
        display: none;
    }
    
    .posts-section--video-tag .posts-section__content {
        max-width: 100%;
    }
}