/*
index.css
зібрала, сподіваюсь, все, що відноситься до головної сторінки
index.php
*/
/* 2-колонковий index.php - для всіх */
/* Контейнер для основного контенту та сайдбару */
.site-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 4fr;
        gap: 30px; /* Відступ між колонками */
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}
/* 3 колонковий грід для головної сторінки */
/* Контейнер для основного контенту та сайдбару */
body.home .site-content-wrapper {
    display: grid;
    /*grid-template-columns: 1fr 2fr 2fr;*/
    grid-template-columns: 20% 40% 35%;
        gap: 30px; /* Відступ між колонками */
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}
/* Стилі для основного контенту */
#primary {
    border: 1px solid;
    grid-column: 2;
    grid-row: 1;
    padding: 20px; 
}
/* Стилі для сайдбару */
#secondary {
	border:1px solid;
    grid-column: 1;
    grid-row: 1;
    padding: 20px;
}

/* Стилі для нової колонки */
.from-web-column{
border:1px solid;
    grid-column: 3;
    grid-row: 1;
    padding: 20px;
}

/* end Gemini: 3 колонковий index.php */
/* na-gpijaty category style */
/* Стилі для постів категорії "На поїржати" */
.poijaty-post {
    background: linear-gradient(to right, #e0f2f7, #ffffff);  /* Якщо хочеш градієнт саме для них */
    border: 1px dashed #ccc; /* Пунктирна рамка */
    padding: 15px 20px;
    margin: 20px 0; /* Відступи від сусідніх постів */
    border-radius: 5px;
    font-style: italic; /* Курсив для тексту */
    color: #337ab7; /* Темно-сірий колір тексту */
    text-align: justify; /* Вирівнювання за ширині */
}
/*.poijaty-post p {*/
.category-na-poijaty p{
    margin-bottom: 0.5em; /* Зменш це значення для меншого проміжку. Спробуй 0.5em або 10px */
    line-height: 0.5;    /* Можливо, захочеш трохи зменшити міжрядковий інтервал */
}
.poijaty-post h2 { /* Приховуємо заголовок, якщо він порожній або є лише кавичкою */
    display: none; /* Приховати заголовок повністю */
    /* Або, якщо там буде кавичка/апостроф, просто стилізуємо його */
    /* font-size: 1.5em; color: #888; */
}

/* Якщо пости "На поїржати" не мають зображень, переконайтеся, що обтікання не впливає */
.poijaty-post img {
    /*display: none; /* Приховуємо зображення в цих постах, якщо їх не повинно бути */
}

/* Оскільки ці пости теж <article>, може бути потрібно скоригувати правило для :first-of-type */
/* Якщо ти хочеш, щоб вони НІКОЛИ не були першими і не мали того ж градієнта */
/*
.site-main article:first-of-type {
    // Вже має виключати пости "На поїржати" через логіку PHP
    // Але якщо хочеш перестрахуватися, можеш додати:
    // &:not(.poijaty-post)
}
*/
/* Стилі для заголовків постів на сторінці списку (index.php) */
.site-main article h1,
.site-main article h1 a,
.site-main article h2 a { /* Націлюємося на сам h2, а не на посилання всередині нього, щоб розмір застосувався до всього блоку */
    font-size: 1.6em; /* Збільшуємо розмір шрифту. Можеш спробувати 2em, 2.5em, 3em - експериментуй! */
    margin-bottom: 15px; /* Можливо, варто збільшити відступ після заголовка */
    /* Інші стилі, якщо є */
    font-weight:bold;
}

/* Якщо ти хочеш, щоб посилання всередині h2 мало інший колір або hover ефект, залиш ці правила */
.site-main article h2 a {
    color: #337ab7; /* Приклад: колір посилання синій */
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.site-main article h2 a:hover {
    color: #ffa500; /* Помаранчевий при наведенні */
    text-decoration: none;
}

/* кінець стилів для заголовків та посилань в index.php */
/* Стилізація посилання "Більше" */
p a.more-link,
a.more-link,
.more-link { /* Або .read-more, якщо твоя тема використовує його */
    color: #337ab7; /* Бажаний колір посилання */
    text-decoration: none; /* Прибираємо стандартне підкреслення */
    font-weight: bold; /* Можна зробити текст жирним */
    transition: color 0.3s ease-in-out; /* Плавний перехід кольору при наведенні */
    margin-top:1.5em;
	line-height: 1.5;
}

.more-link:hover {
    color: #ffa500; /* Колір при наведенні (можеш змінити на інший відтінок синього, наприклад, #2a6496) */
    text-decoration: none; /* без підкреслення */
}
/* Це батьківський контейнер для картинки та тексту */
.poijaty-content-wrapper {
    display: flex;
    align-items: flex-start; /* Вирівнюємо елементи по верхньому краю */
    gap: 20px; /* Відстань між картинкою і текстом */
}

/* Це контейнер для "клякси" */
.poijaty-klyaksa {
    /* Ми встановимо висоту і ширину за допомогою JavaScript */
    flex-shrink: 0; /* Запобігаємо стисненню */
    position: relative;
}

/* Це контейнер для тексту */
.poijaty-text {
    flex-grow: 1; /* Дозволяємо цьому блоку займати весь вільний простір */
}
.wrapper-main-post{
	width: 70%;
	height: auto;
	/*padding-right: 10px;*/
	border-right: 1px solid #337ab7;
}
/* Стилі для постів "Із Мережі" */
.from-web-post {
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.from-web-post:last-child {
border-bottom: none;
}
.from-web-post .column-title {
margin-top: 0;
}
.from-web-post .post-title-from-web {
font-size: 1.2em;
margin-top: 0;
}
.from-web-post .post-meta-from-web {
font-size: 0.8em;
color: #888;
}
.from-web-post .post-content-from-web {
font-size: 0.9em;
}
/*  */