/**
 * Карточки статей: сетка, «первая крупно», карусель.
 * Двойные селекторы — против глобальных правил Elementor.
 */

/* Заголовок блока («Читайте также»). Класс удвоен ради веса:
   иначе размер перекрыло бы правило темы для h2. */
.fl-posts-heading.fl-posts-heading {
    margin: 0 0 22px;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    color: #24545C;
}

.fl-pgrid {
    --fl-pgrid-cols: 3;
    --fl-pgrid-gap: 24px;

    display: grid;
    grid-template-columns: repeat(var(--fl-pgrid-cols), minmax(0, 1fr));
    gap: var(--fl-pgrid-gap);
}

.fl-pgrid .fl-pcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid #ECE6DA;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}

.fl-pgrid .fl-pcard:hover {
    box-shadow: 0 10px 28px rgba(36, 84, 92, 0.10);
    transform: translateY(-2px);
}

/* Фото добирает всю свободную высоту карточки. Карточки в ряду одной
   высоты (их выравнивает сетка), а тексты разной длины; раньше разница
   оседала пустотой между анонсом и «Читать» — особенно рядом с крупной
   первой статьёй. Теперь лишнюю высоту забирает фото, и низ карточек
   всегда заполнен, как на новостных сайтах. */
.fl-pcard__photo {
    position: relative;
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    background-color: #EFE9DD;
}

/* Пропорция 16:10 — только нижняя граница высоты фото, задана отступом
   у ::before: aspect-ratio с минимальной высотой переносит ограничение
   на ширину — уже наступали. */
.fl-pcard__photo::before {
    content: "";
    display: block;
    padding-top: 62.5%;
}

.fl-pcard__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .3s ease;
}

.fl-pgrid .fl-pcard:hover .fl-pcard__photo img {
    transform: scale(1.03);
}

.fl-pcard__cat {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 6px 12px;
    background-color: #AE9666;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.2;
}

/* Текст занимает ровно свою высоту — рост карточки уходит в фото. */
.fl-pcard__body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 8px;
    padding: 16px 18px 18px;
}

.fl-pcard__meta {
    font-size: 13px;
    color: #8B9698;
}

/* Заголовок и анонс занимают ровно заданное число строк: длинный текст
   обрезается многоточием, короткому резервируется место (min-height).
   Поэтому карточки одного ряда совпадают по структуре, фото у всех
   одной высоты и сетка не «пляшет». Число строк — в настройках виджета. */
.fl-pgrid .fl-pcard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.25em * 2);
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1.25;
    color: #24545C;
    overflow-wrap: anywhere;
    transition: color .15s ease;
}

.fl-pcard__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: calc(1.5em * 3);
    font-size: 14px;
    line-height: 1.5;
    color: #5A6A6C;
}

.fl-pcard__go {
    margin-top: 2px;
    padding-top: 4px;
    font-size: 14px;
    color: #AE9666;
}

/* ---------- Первая статья крупно ---------- */

.fl-pgrid--featured .fl-pcard--featured {
    grid-column: span 2;
}

.fl-pgrid--featured .fl-pcard--featured .fl-pcard__title {
    font-size: 26px;
}

/* В сетке с крупной первой статьёй у обычных карточек резерв заголовка
   чуть больше: заголовок крупной набран 26-м кеглем против 20-го, и без
   компенсации текстовые блоки в первом ряду были разной высоты — низ
   фото и строки текста соседних карточек не совпадали по уровню.
   1.625em × строки = высота блока заголовка крупной карточки. */
.fl-pgrid--featured .fl-pcard:not(.fl-pcard--featured) .fl-pcard__title {
    min-height: calc(1.625em * 2);
}

/* В одной колонке двум столбцам взяться неоткуда. */
@media (max-width: 767px) {
    .fl-pgrid--featured .fl-pcard--featured {
        grid-column: auto;
    }

    .fl-pgrid--featured .fl-pcard--featured .fl-pcard__title {
        font-size: 20px;
    }
}

/* ---------- Карусель: стыковка с обвязкой .fl-cards ---------- */

.fl-pgrid.fl-pgrid--carousel {
    display: block;
    --fl-per-view: var(--fl-pgrid-cols);
    --fl-gap: var(--fl-pgrid-gap);
}

.fl-pgrid--carousel .fl-cards__slide {
    display: flex;
}

.fl-pgrid--carousel .fl-cards__slide > .fl-pcard {
    flex: 1 1 auto;
    width: 100%;
}

.fl-pgrid--carousel .fl-cards__nav {
    margin-top: 24px;
}

.fl-pgrid--carousel .fl-cards__arrow,
.fl-pgrid--carousel .fl-cards__arrow:hover,
.fl-pgrid--carousel .fl-cards__arrow:focus {
    width: 44px;
    height: 44px;
    padding: 11px;
    color: #AE9666;
    border-color: #AE9666;
}

.fl-pgrid--carousel .fl-cards__dot,
.fl-pgrid--carousel .fl-cards__dot:hover {
    background-color: #D8D0C0;
}

.fl-pgrid--carousel .fl-cards__dot.is-active,
.fl-pgrid--carousel .fl-cards__dot.is-active:hover {
    background-color: #AE9666;
}

.fl-pgrid--empty {
    display: block;
    color: #7A6947;
    font-style: italic;
}