/*!
Theme Name: putegrad
Theme URI: https://putegrad.ru/
Author: Underscores.me
Author URI: https://putegrad.ru/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: putegrad
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

/* Юг */
article.yug-category h2 {
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0 0 30px 0;
}
/* Общие стили */
.container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1290px;
}

.content-area {
    display: flex;
    flex: 1;
}

.main-content {
    flex: 3;
    padding: 20px;
}

.sidebar {
    flex: 1;
    padding: 20px;
    background-color: #fff; /* Изменяем фон на белый */
    border: 1px solid #ddd; /* Добавляем рамку */
    border-radius: 5px; /* Скругляем углы */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Добавляем легкую тень */
    position: sticky;
    top: 150px; /* Отступ сверху 200px */
    height: fit-content;
}

.sidebar h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333; /* Цвет текста */
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #0073aa; /* Цвет ссылок */
}

.sidebar ul li a:hover {
    color: #005999; /* Цвет ссылок при наведении */
}

.subcategory-section {
    margin-bottom: 40px;
}

.subcategory-title {
    font-size: 24px;
    margin-bottom: 20px;
}

.posts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.post-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    width: calc(33.333% - 20px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-thumbnail img {
    width: 100%;
    height: 200px; /* Фиксированная высота */
    object-fit: cover; /* Обрезаем изображение, сохраняя пропорции */
    border-radius: 5px;
}

.post-title {
    font-size: 18px;
    margin: 10px 0;
}

.post-title a {
    text-decoration: none;
    color: #333;
}

.post-title a:hover {
    color: #0073aa;
}

.post-excerpt {
    font-size: 14px;
    color: #666;
}

/* Адаптивные стили */
@media (max-width: 992px) {
    .post-card {
        width: calc(50% - 20px);
    }

    .subcategory-title {
        font-size: 20px;
    }

    .post-title {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .content-area {
        flex-direction: column;
    }

    .main-content {
        width: 100%;
    }

    .sidebar {
        display: none; /* Скрываем сайдбар на маленьких экранах */
    }

    .post-card {
        width: calc(100% - 20px);
    }

    .subcategory-title {
        font-size: 18px;
    }

    .post-title {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .subcategory-title {
        font-size: 16px;
    }

    .post-title {
        font-size: 12px;
    }

    .post-thumbnail img {
        height: 150px; /* Уменьшаем высоту для маленьких экранов */
    }
}