/**
 * AI Pamagator Frontend Styles
 *
 * Стилі для візуального оформлення елементів,
 * згенерованих AI Редактором (шорткоди, блоки тощо).
 */

/* --- Базовий стиль для всіх акцентних блоків --- */
.aip-accent-block {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-radius: 8px;
    border-left: 5px solid;
    background-color: #f9f9f9;
}

.aip-accent-block p:last-child {
    margin-bottom: 0;
}

.aip-accent-block strong {
    display: block;
    margin-bottom: 0.5em;
    font-size: 1.1em;
}

/* --- Стиль для блоку "Порада експерта" (синій/зелений) --- */
.aip-tip-block {
    border-color: #0073aa; /* Синій колір WordPress */
    background-color: #f0f8ff; /* Світло-синій */
}

.aip-tip-block strong {
    color: #0073aa;
}

/* --- Стиль для блоку "Важливо знати" (жовтий/помаранчевий) --- */
.aip-warning-block {
    border-color: #ffb900; /* Жовтий колір WordPress */
    background-color: #fff8e1; /* Світло-жовтий */
}

.aip-warning-block strong {
    color: #d59600;
}

/* --- Стиль для блоку "Цікавий факт" (фіолетовий) --- */
.aip-fact-block {
    border-color: #826eb4; /* Фіолетовий колір WordPress */
    background-color: #f7f5fa; /* Світло-фіолетовий */
}

.aip-fact-block strong {
    color: #826eb4;
}

/* --- СТИЛІ ДЛЯ БЛОКУ "ЧИТАЙТЕ ТАКОЖ" --- */

.aip-related-posts-block {
    margin: 40px 0;
    padding: 25px;
    border: 1px solid #e0e5eb;
    border-radius: 8px;
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.aip-related-posts-block .aip-related-title {
    font-size: 1.4em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

.aip-related-posts-block .aip-related-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.aip-related-posts-block .aip-related-list li {
    margin-bottom: 15px;
    padding-left: 28px;
    position: relative;
}

.aip-related-posts-block .aip-related-list li:last-child {
    margin-bottom: 0;
}

/* Іконка-маркер для списку */
.aip-related-posts-block .aip-related-list li::before {
    content: '🔗'; /* Або можна використовувати \f0c1 з FontAwesome */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
    color: #3498db;
}

.aip-related-posts-block .aip-related-list a {
    font-size: 1.1em;
    font-weight: 600;
    text-decoration: none;
    color: #2980b9;
    transition: color 0.2s ease-in-out;
}

.aip-related-posts-block .aip-related-list a:hover {
    color: #1c587a;
    text-decoration: underline;
}

/* Стилі для розширеного опису */
.aip-related-posts-block .aip-related-excerpt {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
    padding-left: 0; /* Вирівнюємо з текстом посилання */
    display: block;
}

/* --- СТИЛІ ДЛЯ ЗОВНІШНІХ ПОСИЛАНЬ, ДОДАНИХ AI --- */

/* Вибираємо всі посилання, які мають атрибут target="_blank" всередині контенту статті */
.entry-content a[target="_blank"]::after,
.single-post-content a[target="_blank"]::after {
    content: ' \f35d'; /* Іконка "external-link" з Dashicons */
    font-family: 'Dashicons'; /* Використовуємо вбудований в WordPress шрифт іконок */
    font-size: 14px;
    vertical-align: middle;
    margin-left: 3px;
    display: inline-block;
    text-decoration: none; /* Щоб іконка не підкреслювалася */
    color: #888;
}

/* --- СТИЛІ ДЛЯ БЛОКУ "ПРО АВТОРА" --- */

.aip-author-box {
    margin: 40px 0;
    padding: 25px;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-left: 5px solid #3498db; /* Кольоровий акцент */
    border-radius: 8px;
    display: flex;
    align-items: flex-start; /* Вирівнюємо елементи по верху */
    gap: 20px; /* Відстань між аватаром та текстом */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
}

.aip-author-box .aip-author-avatar {
    border-radius: 50%; /* Робимо аватар круглим */
    width: 96px;
    height: 96px;
    object-fit: cover; /* Запобігає деформації зображення */
}

.aip-author-box .aip-author-info {
    flex: 1; /* Займає весь доступний простір */
}

.aip-author-box .aip-author-name {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
    font-weight: 700;
    color: #2c3e50;
}

.aip-author-box .aip-author-bio {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.6;
    color: #34495e;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 600px) {
    .aip-author-box {
        flex-direction: column; /* Складаємо елементи в колонку */
        align-items: center; /* Центруємо */
        text-align: center;
    }
}