/* ──────────────────────────────────────────────────────────────
   Страница-сепаратор (главная).
   Токены сняты с макета TimOrange → div / body (firstpage).
   Путь: wp-content/themes/basmach/assets/css/front.css
   ────────────────────────────────────────────────────────────── */

body.section-home {
    --fp-bg:      #000000;
    --fp-text:    #ffffff;
    --fp-rule:    #3f3f3f;
    --fp-max:     1200px;
    --fp-px:      50px;
    --fp-gap:     45px;

    margin: 0;
    background: var(--fp-bg);
    color: var(--fp-text);
    font-family: 'Cuprum', 'Inter', system-ui, sans-serif;
}

.fp {
    width: 100%;
    max-width: calc(var(--fp-max) + var(--fp-px) * 2);
    margin: 0 auto;
    padding: 0 var(--fp-px);
}

/* ── Обложка с приветствием ────────────────────────────────── */

.fp-hero {
    position: relative;
}

.fp-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Текст лежит поверх нижней части картинки */
.fp-hello {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 10px 40px;
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
    color: var(--fp-text);
}

.fp-hello p {
    max-width: 956px;
    margin: 0 0 12px;
}

.fp-hello p:first-child {
    margin-bottom: 0;
}

.fp-hello p:last-child {
    margin-bottom: 0;
}

.fp-hello a {
    color: var(--fp-text);
    text-decoration: underline;
}

/* ── Две колонки ───────────────────────────────────────────── */

.fp-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px var(--fp-gap);
    padding: 10px 0 40px;
}

.fp-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.fp-col__logo {
    display: flex;
    align-items: center;
    padding-bottom: 17px;
    text-decoration: none;
}

/* Высота задана, ширина по пропорции: logo-light.png в теме
   крупнее, чем 192×78 в макете, и без этого вылезет. */
.fp-col__logo img {
    display: block;
    width: auto;
    height: 78px;
    max-width: 100%;
}

.fp-col__logo--works img {
    height: 62px;
}

/* Логотипы развёрнуты к центру: дневник справа, портфолио слева */
.fp-col__logo--diary {
    justify-content: flex-end;
}

.fp-col__logo--works {
    justify-content: flex-start;
}

.fp-col__logo-text {
    font-size: 28px;
    font-weight: 700;
    color: var(--fp-text);
}

/* ── Строка списка ─────────────────────────────────────────── */

.fp-item {
    padding: 10px 0 20px;
    border-bottom: 1px solid var(--fp-rule);
    min-width: 0;
}

.fp-item:last-child {
    border-bottom: none;
}

.fp-item__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.fp-item__title a {
    color: var(--fp-text);
    text-decoration: none;
}

.fp-item__title a:hover {
    color: var(--orange, #ff6b00);
}

.fp-item__date,
.fp-item__year {
    font-size: 14px;
    line-height: 1.3;
    color: var(--fp-text);
}

/* На чёрном фоне цветной заливкой бейдж бы кричал,
   поэтому цвет типа уходит в черту слева и в иконку. */
.fp-item__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border-left: 2px solid var(--badge, var(--fp-text));
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
}

.fp-item__badge .ti {
    font-size: 13px;
    color: var(--badge, var(--fp-text));
}

/* Дневник: дата и рубрика по краям, заголовок под ними */
.fp-item--post {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fp-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Портфолио: год и тип слева колонкой, заголовок справа */
.fp-item--work {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fp-item__meta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5px;
    width: 142px;
    min-height: 43px;
    flex-shrink: 0;
}

.fp-item--work .fp-item__title {
    flex: 1 0 0;
    min-width: 0;
}

/* ── Ссылка на весь раздел ─────────────────────────────────── */
/* В макете этого блока нет — оформление подобрано по его токенам:
   14px как у меты, выравнивание как у логотипа своей колонки. */

.fp-col__more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    padding-top: 10px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--fp-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.fp-col__more:hover {
    color: var(--orange, #ff6b00);
    border-bottom-color: currentColor;
}

.fp-col__more .ti {
    font-size: 16px;
}

/* Дневник тянется к центру справа, портфолио слева — как логотипы */
.fp-col--diary .fp-col__more {
    align-self: flex-end;
}

.fp-col--works .fp-col__more {
    align-self: flex-start;
}

/* ── Адаптив ───────────────────────────────────────────────── */

@media (max-width: 1100px) {
    body.section-home {
        --fp-px: 24px;
        --fp-gap: 24px;
    }
    .fp-hello {
        font-size: 18px;
        padding-bottom: 24px;
    }
    .fp-item__title {
        font-size: 20px;
    }
}

@media (max-width: 820px) {
    .fp-cols {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    /* В одну колонку логотипы выравниваются одинаково */
    .fp-col__logo--diary,
    .fp-col__logo--works {
        justify-content: flex-start;
    }
    .fp-col--diary .fp-col__more {
        align-self: flex-start;
    }
    /* Текст поверх картинки на узком экране не помещается —
       опускаем его под обложку */
    .fp-hello {
        position: static;
        padding: 20px 0 0;
    }
    .fp-item--work {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .fp-item__meta {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
        min-height: 0;
    }
}