/* =============================================================
   ABOUT.CSS
   -------------------------------------------------------------
   TODO: базовые стили для блока "about_me" ещё не написаны.
   Написать при наполнении блока "Обо мне":
   - .about-me / .about-me-text / .about-me-photo
   ============================================================= */

   /* =============================================================
   ABOUT.CSS
   Блок "Обо мне": текст + фото в две колонки.
   -------------------------------------------------------------
   Структура (предполагаемая):
     .about-me
       .about-me-photo
       .about-me-text
   На мобильном колонки схлопываются в одну (фото сверху).
   ============================================================= */


/* -------------------------------------------------------------
   КОНТЕЙНЕР БЛОКА "ОБО МНЕ"
   Две колонки: фото слева/справа, текст с другой стороны.
   Grid с auto-размером + минимум 250px на фото.
   ------------------------------------------------------------- */
.about-me {
    display               : grid;
    grid-template-columns : 250px 1fr;
    gap                   : 30px;
    align-items           : start;
    margin                : 30px 0;
}


/* -------------------------------------------------------------
   ФОТО
   ------------------------------------------------------------- */
.about-me-photo {
    width               : 100%;
    height              : 300px;
    border-radius       : 12px;
    background-size     : cover;
    background-position : center;
    background-color    : #f0f0f0;
    box-shadow          : 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* -------------------------------------------------------------
   ТЕКСТ
   line-height 1.6 — для читаемости длинных абзацев.
   ------------------------------------------------------------- */
.about-me-text {
    font-size   : 16px;
    line-height : 1.6;
    color       : #333;
}

.about-me-text p {
    margin-bottom : 15px;
}


/* -------------------------------------------------------------
   АДАПТИВ (только для этого блока)
   На узких экранах фото уходит наверх, текст под ним.
   Остальные медиа-запросы — в responsive.css,
   но этот специфичен для grid 2-в-1, поэтому здесь.
   ------------------------------------------------------------- */
@media (max-width: 700px) {
    .about-me {
        grid-template-columns : 1fr;
    }

    .about-me-photo {
        height    : 220px;
        max-width : 300px;
        margin    : 0 auto;
    }
}