/* ==========================================================================
   Сторінка «Про бюро» (about_us.html)

   Каркас (.subpage, хедер, чорний банер, кнопка .cta-button) — style_subpage.css,
   блок контактів — style_contacts.css. Хедер цієї сторінки НЕ стилізується тут.
   Тут лише контент: рядки «заголовок ліворуч — опис праворуч» з напівпрозорою
   лінією між ними. Усі класи мають префікс .about-

   УВАГА: на екранах ≤480px style_root.css ставить html { font-size: 14px },
   тому 1rem там = 14px. Розміри в блоці ≤480px підібрано з урахуванням цього.
   ========================================================================== */

.about-content {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 0 0;
}

/* Рядок: заголовок | опис, внизу напівпрозорий розділювач на всю ширину */
.about-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 3rem;
    align-items: start;
    padding: 2.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

/* Заголовок / девіз ліворуч */
.about-heading {
    font-family: "Lora", serif;
    font-weight: 600;
    font-size: 2.1rem;
    line-height: 1.2;
    color: #1b1b1b;
}

/* Опис праворуч */
.about-text {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #404040;
}

/* ==========================================================================
   Адаптив: від широких до вузьких. Ландшафтний блок — ОСТАННІЙ,
   інакше його перебивають блоки max-width, що йдуть пізніше.
   ========================================================================== */

/* Планшети / малі ноутбуки */
@media (max-width: 1024px) {
    .about-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2rem;
        padding: 2.25rem 0;
    }
    .about-heading {
        font-size: 1.85rem;
    }
    .about-text {
        font-size: 1.15rem;
    }
}

/* 768px: одна колонка — заголовок над описом */
@media (max-width: 768px) {
    .about-content {
        width: 92%;
    }
    .about-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1rem;
        padding: 2rem 0;
    }
    .about-heading {
        font-size: 1.9rem;
    }
    .about-text {
        font-size: 1.1rem;
    }
}

/* 540px (Foldables) */
@media (max-width: 540px) {
    .about-row {
        padding: 1.75rem 0;
    }
    .about-heading {
        font-size: 1.7rem;
    }
}

/* 480px: тут html { font-size: 14px }, тому значення в rem більші */
@media (max-width: 480px) {
    .about-row {
        row-gap: 0.8rem;
        padding: 1.6rem 0;
    }
    .about-heading {
        font-size: 1.9rem;
    }
    .about-text {
        font-size: 1.15rem;
        line-height: 1.55;
    }
}

/* 390px (iPhone 12 Pro) */
@media (max-width: 390px) {
    .about-heading {
        font-size: 1.8rem;
    }
    .about-text {
        font-size: 1.12rem;
    }
}

/* 360px */
@media (max-width: 360px) {
    .about-heading {
        font-size: 1.7rem;
    }
    .about-text {
        font-size: 1.1rem;
    }
}

/* 320px (iPhone SE) */
@media (max-width: 320px) {
    .about-content {
        width: 94%;
    }
    .about-heading {
        font-size: 1.6rem;
    }
    .about-text {
        font-size: 1.05rem;
    }
}

/* Ландшафтний режим (телефон на боці): знову дві колонки, щільніші відступи.
   Стоїть після блоків max-width, щоб мати над ними перевагу. */
@media (max-width: 950px) and (orientation: landscape) {
    .about-content {
        width: 92%;
    }
    .about-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1.75rem;
        row-gap: 0;
        padding: 1.5rem 0;
    }
    .about-heading {
        font-size: 1.6rem;
    }
    .about-text {
        font-size: 1.05rem;
        line-height: 1.5;
    }
}